<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-select clearable v-model="formInline.sbzt" placeholder="请选择">
            <el-option
              v-for="item in sbztOptions"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
          <!-- <el-input
            class="inputCompatible"
            clearable
            v-model="formInline.sbzt"
            style="width: 170px"
          ></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
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="jkdmc"
          label="监控点名称"
        ></el-table-column>
        <el-table-column
          align="center"
          prop="lxyjzt"
          label="离线预警状态"
        ></el-table-column>
        <el-table-column align="center" prop="opsOffLineVO" label="备案单号">
          <template slot-scope="scope">
            <span
              v-show="scope.row.lxtzdgdbh"
              style="color: blue; cursor: pointer"
              @click="baDetail(scope.row)"
              >{{ scope.row.lxtzdgdbh }}</span
            >
            <span v-show="!scope.row.lxtzdgdbh"> 无 </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="baCsTotal" label="备案离线时间">
          <template slot-scope="scope">
            <span>{{
              scope.row.offLineDateBegin + "至" + scope.row.offLineDateEnd
            }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="bjrq" label="运维单号">
          <template slot-scope="scope">
            <span
              style="color: blue; cursor: pointer"
              @click="ywDetail(scope.row)"
              >{{ scope.row.ywxxgdgdbh }}</span
            >
            <span v-show="!scope.row.ywxxgdgdbh"> 无 </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="verifySealDate" label="提交时间">
          <template slot-scope="scope">
            <span>{{
              scope.row.verifySealDate ? scope.row.verifySealDate : "无"
            }}</span>
          </template>
        </el-table-column>
      </el-table>
      <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>
    </el-row>
    <div style="text-align: center">
      <el-button
        type="primary"
        size="small"
        class="iconfont iconfanhui"
        @click="$router.go(-1)"
        >返回</el-button
      >
    </div>
  </div>
</template>

<script>
import { cameraListNew, alarmList } from "@/api/earlyWarning/deviceFault/index";

export default {
  props: ["type"],
  data() {
    return {
      msgDialogVisible: false,
      listLoading: true,
      formInline: {
        sbzt: "",
        bjrq: "",
      },
      sbztOptions: ["已备案", "未备案", "备案超时"],
      pageForm: {
        page: 1,
        size: 10,
        total: 0,
      },
      tableData: [],
    };
  },
  methods: {
    baDetail(row) {
      this.$router.push({
        path: "/operationservices/offlineFiling/detail",
        query: {
          shzt: row.lxtzdshzt,
          fid: row.lxtzdid,
          type: "CK",
        },
      });
      getLeftMenuList("运维服务");
    },
    ywDetail(row) {
      this.$router.push({
        path: "/operationservices/operationOrder/detail",
        query: {
          shzt: row.ywxxgdshzt,
          fid: row.ywxxgdid,
          type: "CK",
        },
      });
      getLeftMenuList("运维服务");
    },
    doReset() {
      this.formInline = {
        sbzt: "",
        bjrq: "",
      };
      this.doSearch();
    },
    doSearch() {
      //   this.pageForm.page = 1;
      this.listLoading = true;
      this.getList();
    },
    getList() {
      // console.log(this.$route.query.kqmc, "this.$route.query.kqmc");
      let data = {
        ...this.formInline,
        kqmc: this.$route.query.kqmc,
      };
      let params = {
        pageNo: this.pageForm.page,
        pageSize: this.pageForm.size,
      };
      cameraListNew(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();
      return year + "-" + month + "-" + date; //今天
    },
  },
  created() {
    this.formInline.bjrq = this.$route.query.bjrq;
    this.doSearch();
  },
};
</script>

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