<template>
  <div class="content-main">
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline search-form"
      label-width="100px"
    >
      <el-row>
        <el-form-item label="承储企业:">
          <el-input
            class="inputCompatible"
            clearable
            v-model="formInline.ccqy"
            style="width: 170px"
            placeholder="模糊查询库点名称"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="报警类型:">
          <el-select v-model="formInline.bjlx" placeholder="请选择" clearable>
            <el-option :label="item.dictName" :value="item.dictCode" v-for="item in bjlxList" :key="item.id"></el-option>
          </el-select>
        </el-form-item> -->

        <el-form-item class="search-button">
          <span class="search-line"></span>
          <el-button
            type="primary"
            @click="doSearch"
            size="small"
            class="iconfont iconchaxun"
            >查询</el-button
          >
          <el-button
            type="primary"
            @click="doReset"
            size="small"
            class="iconfont iconzhongzhi"
            >重置</el-button
          >
        </el-form-item>
      </el-row>
      <el-button
        type="warning"
        size="small"
        v-if="0"
        @click="msgDialogVisible = true"
        style="position: absolute; top: 24px; right: 10px"
        >预警说明</el-button
      >
    </el-form>
    <el-row>
      <el-table
        :data="tableData"
        v-loading="listLoading"
        border
        stripe
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="序号"
          width="50"
          type="index"
        ></el-table-column>
        <el-table-column
          align="center"
          min-width="240"
          prop="ccqy"
          label="承储企业"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          min-width="120"
          align="center"
          prop="rkcl"
          label="入库车辆"
        >
        </el-table-column>
        <!-- <el-table-column
          align="center"
          prop="bjlx"
          min-width="260"
          label="报警类型"
        ></el-table-column> -->
        <el-table-column
          align="center"
          prop="bjnr"
          min-width="250"
          label="报警内容"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="bjsj"
          width="180"
          label="报警时间"
        ></el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageForm.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageForm.total"
      ></el-pagination>
    </el-row>
  </div>
</template>

<script>
import { alarmList } from "@/api/earlyWarning/internalControlWarning/index";
import { getbjlxList } from "@/api/login/login.js";

export default {
  props: ["bjlx", "type"],
  data() {
    return {
      msgDialogVisible: false,
      listLoading: false,
      formInline: {
        ccqy: "",
        bjlx: "",
      },
      pageForm: {
        page: 1,
        size: 10,
        total: 0,
      },
      tableData: [],
      bjlxList: [], //报警类型列表
    };
  },
  methods: {
    doReset() {
      this.formInline = {
        ccqy: "",
        bjlx: "",
      };
      this.doSearch();
    },
    doSearch() {
      this.pageForm.page = 1;
      this.listLoading = true;
      this.getList(this.bjlx);
    },
    getList(bjlx) {
      let data = {
        ...this.formInline,
        pageNum: this.pageForm.page,
        pageSize: this.pageForm.size,
        clzt: 0,
        bjlx: bjlx,
      };
      alarmList(data)
        .then((res) => {
          this.listLoading = false;
          if (res.code === 200) {
            this.tableData = res.data.list;
            this.pageForm.total = res.data.total;
            this.pageForm.page = res.data.pageNum;
            return;
          }
        })
        .catch((err) => {
          this.listLoading = false;
          this.$message.error("获取数据失败");
        });
    },
    handleSizeChange(val) {
      this.pageForm.size = val;
      this.getList(this.bjlx);
    },
    handleCurrentChange(val) {
      this.pageForm.page = val;
      this.getList(this.bjlx);
    },
    // 获取内控报警类型
    async getbjlx() {
      let res = await getbjlxList();
      if (res.infoCode === 200) {
        this.bjlxList = res.data;
        return;
      }
      this.$message.error(res.msg || "获取列表失败");
    },
  },
  created() {
    // this.getList();
    this.getbjlx();
  },
};
</script>

<style lang="scss" scoped>
</style>
