<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.kqmc"
            style="width: 170px"
            placeholder="模糊查询库点名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="报警日期:">
          <el-date-picker
            v-model="formInline.bjrq"
            type="date"
            style="width: 180px"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          >
          </el-date-picker>
        </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"
        @click="msgDialogVisible = true"
        style="position: absolute; top: 24px; right: 10px"
        >预警说明</el-button
      >
      <el-dialog
        title="预警说明"
        size="small"
        :visible.sync="msgDialogVisible"
        width="35%"
        top="30vh"
        :modal="false"
      >
        <span v-if="type == 0">以下为离线的摄像头列表，请及时采取措施。</span>
        <span v-else>以下为测温点故障列表，请及时采取措施。</span>
      </el-dialog>
    </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"
          prop="kqmc"
          label="承储企业"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span
              v-if="type == 0"
              style="color: blue; cursor: pointer"
              @click="goDetail(scope.row)"
              >{{ scope.row.kqmc }}</span
            >
            <span v-else>{{ scope.row.kqmc }}</span>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="offLineTotal"
          label="离线总数量"
          v-if="type == 0"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="ybaTotal"
          label="已备案数量"
          v-if="type == 0"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="wbaTotal"
          label="未备案数量"
          v-if="type == 0"
        >
          <!-- <template slot-scope="scope">
            <span>{{ scope.row.jcsj.substr(0,10) }}</span>
          </template> -->
        </el-table-column>
        <el-table-column
          align="center"
          prop="baCsTotal"
          label="备案超时数量"
          v-if="type == 0"
        >
        </el-table-column>

        <el-table-column
          align="center"
          prop="ch"
          label="仓房名称"
          v-if="type == 1"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="gzcwdsl"
          label="故障测温点数量"
          v-if="type == 1"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="bjsj"
          label="报警日期"
          v-if="type == 1"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="bjrq"
          label="报警日期"
          v-if="type == 0"
        >
        </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 { cameraList, alarmList } from "@/api/earlyWarning/deviceFault/index";
import temp from "../humitureWarning/temp.vue";

export default {
  components: { temp },
  props: ["type"],
  data() {
    return {
      msgDialogVisible: false,
      listLoading: true,
      formInline: {
        kqmc: "",
        bjrq: "",
      },
      pageForm: {
        page: 1,
        size: 10,
        total: 0,
      },
      tableData: [],
    };
  },
  methods: {
    goDetail(row) {
      this.$router.push({
        name: "lxList",
        query: {
          state: 1,
          bjrq: this.formInline.bjrq,
          kqmc: row.kqmc,
          // data: JSON.stringify(row.cameraMalfunctionDTOS),
        },
      });
    },
    doReset() {
      this.formInline = {
        kqmc: "",
        bjrq: "",
      };
      this.doSearch();
    },
    doSearch() {
      this.pageForm.page = 1;
      this.listLoading = true;
      this.getList();
    },
    getList() {
      let data = {
        ...this.formInline,
      };
      let params = {
        pageNo: this.pageForm.page,
        pageSize: this.pageForm.size,
      };
      if (this.type == 0) {
        cameraList(data, params)
          .then((res) => {
            this.listLoading = false;
            this.tableData = res.data.list;
            this.pageForm.total = res.data.total;
            this.pageForm.page = res.data.pageNum;
          })
          .catch((err) => {
            this.listLoading = false;
            this.$message.error("获取数据失败");
          });
      } else {
        alarmList(data, params)
          .then((res) => {
            this.listLoading = false;
            this.tableData = res.data.list;
            this.pageForm.total = res.data.total;
            this.pageForm.page = res.data.pageNum;
          })
          .catch((err) => {
            this.listLoading = false;
            this.$message.error("获取数据失败");
          });
      }
    },
    handleSizeChange(val) {
      this.listLoading = true;
      this.pageForm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      this.pageForm.page = val;
      this.getList();
    },
    // 获取当天日期
    getNowDate() {
      let nowdays = new Date();
      let year = nowdays.getFullYear();
      let month = nowdays.getMonth() + 1;
      let date = nowdays.getDate() - 1;
      return year + "-" + month + "-" + date; //今天
    },
  },
  created() {
    getLeftMenuList("预警报警");
    this.formInline.bjrq = this.getNowDate();
  },
};
</script>

<style lang="scss" scoped>
.inputCla {
  width: 90%;
}
.inputClaBig {
  width: 96%;
}
.content_box {
  width: 70%;
  min-height: 400px;
  margin: auto;
  .block {
    margin-top: 10px;
    border: 1px solid #006ad576;
  }
}
</style>
