<template>
  <el-dialog
    :visible.sync="dialogVisible"
    append-to-body
    title="AI预警汇总"
    top="0"
    width="1200px"
  >
    <el-form
      inline
      :model="searchForm"
      style="padding: 10px; background: #0e3c75; margin-bottom: 10px"
    >
      <el-form-item label="预警时间">
        <el-date-picker
          v-model="searchForm.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          clearable
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="预警位置">
        <el-select v-model="searchForm.area_id" clearable>
          <el-option
            v-for="(position, index) in warningPositionOptions"
            :label="position.name"
            :value="position.id"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="处置状态">
        <el-select v-model="searchForm.status" clearable>
          <el-option
            v-for="(status, index) in warningStatusOptions"
            :label="status.name"
            :value="status.value"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          @click="searchRecords"
          style="background: rgba(19, 168, 195, 1); color: #fff; border: none"
          >查询</el-button
        >
      </el-form-item>
    </el-form>

    <el-table :data="tableData" height="550px" stripe>
      <el-table-column label="预警拍照" prop="" align="center">
        <template slot-scope="scope">
          <el-image
            :src="scope.row.alarm_big_img_url"
            :preview-src-list="[scope.row.alarm_big_img_url]"
            class="previewImg"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="预警内容"
        prop="alarm_content"
        align="center"
      ></el-table-column>
      <el-table-column
        label="预警时间"
        prop="log_time"
        align="center"
      ></el-table-column>
      <el-table-column label="预警位置" align="center" prop="area_name">
      </el-table-column>
      <el-table-column label="处置状态" align="center" prop="status_text">
        <template slot-scope="scope">
          <span
            :style="{
              color:
                scope.row.status == 3
                  ? '#5CFF6B'
                  : scope.row.status == 2
                  ? '#FFC05C'
                  : '#FF5C5C',
            }"
            >{{ scope.row.status_text }}</span
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-dialog>
</template>
<script>
import { getAIWarningConfigOptions, getAIWarningList } from "@/api/index";
export default {
  name: "WarningRecordDialog",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      currentPage: 1,
      total: 0,
      searchForm: {
        dateRange: ["", ""],
        status: "",
        area_id: "",
      },
      pageSize: 10,
      tableData: [],
      warningPositionOptions: [],
      warningStatusOptions: [],
    };
  },
  methods: {
    handleCurrentChange(current) {
      getAIWarningList({
        start_log_time:
          this.searchForm.dateRange && this.searchForm.dateRange[0]
            ? this.searchForm.dateRange[0] + " 00:00:00"
            : "",
        end_log_time:
          this.searchForm.dateRange && this.searchForm.dateRange[1]
            ? this.searchForm.dateRange[1] + " 23:59:59"
            : "",
        status: this.searchForm.status,
        area_id: this.searchForm.area_id,
        limit: this.pageSize,
        page: current,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.currentPage = current;
      });
    },
    handleSizeChange(size) {
      getAIWarningList({
        start_log_time:
          this.searchForm.dateRange && this.searchForm.dateRange[0]
            ? this.searchForm.dateRange[0] + " 00:00:00"
            : "",
        end_log_time:
          this.searchForm.dateRange && this.searchForm.dateRange[1]
            ? this.searchForm.dateRange[1] + " 23:59:59"
            : "",
        status: this.searchForm.status,
        area_id: this.searchForm.area_id,
        limit: size,
        page: 1,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.currentPage = 1;
      });
    },
    searchRecords() {
      getAIWarningList({
        start_log_time:
          this.searchForm.dateRange && this.searchForm.dateRange[0]
            ? this.searchForm.dateRange[0] + " 00:00:00"
            : "",
        end_log_time:
          this.searchForm.dateRange && this.searchForm.dateRange[1]
            ? this.searchForm.dateRange[1] + " 23:59:59"
            : "",
        status: this.searchForm.status,
        area_id: this.searchForm.area_id,
        limit: this.pageSize,
        page: 1,
      }).then((res) => {
        this.total = res.data.total;
        this.tableData = res.data.data;
        this.currentPage = 1;
      });
    },
    getTime(ts) {
      let date = new Date(ts);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month > 9 ? month : "0" + month;
      day = day < 10 ? "0" + day : day;
      let today = year + "-" + month + "-" + day;
      return `${today}`;
    },
  },
  mounted() {
    getAIWarningConfigOptions().then((res) => {
      this.warningStatusOptions = res.data.statusData;
      this.warningPositionOptions = res.data.areaList;
    });
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("changeVisible", val);
      },
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.searchRecords();
      } else {
        this.tableData = [];
        this.searchForm = {
          dateRange: ["", ""],
          status: "",
          area_id: "",
        };
      }
    },
  },
};
</script>
<style lang="less" scoped>
.previewImg {
  width: 50px;
  height: 50px;
}
</style>