<template>
  <div class="violation">
    <div class="reply" :style="{ color: color }">筛选查询</div>
    <x-form
      :formItems="selectItems"
      :day="day"
      @setDay="setDay"
      @onClickType="onClickType"
    ></x-form>
    <new-table
      :height="600"
      :title="title"
      :listData="list"
      :tableItems="tableItems"
      :shows="tableShows"
    >
      <!--      <template #right>-->
      <!--        <el-button size="mini" type="primary">导出数据</el-button>-->
      <!--      </template>-->
      <template #recordImage="scope">
        <img
          :src="scope.row.recordImage"
          @click="clickImg(scope.row.recordImage)"
          alt="人员照片"
          width="140"
        />
      </template>
      <template #handler="scope">
        <el-button type="text" @click="open(scope.row)">加入白名单</el-button>
      </template>
    </new-table>
    <table-footer
      :totals="total"
      :size="pageSize"
      @sizeChange="sizeChange"
      @pageChange="pageChange"
    ></table-footer>
    <el-dialog
      title="人员违规报警图片"
      :visible.sync="dialogVisible"
      width="25%"
      style="text-align:center"
    >
      <img :src="imgUrl" alt="人员违规报警图片" height="50%" />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import XForm from "@/components/XForm";
import NewTable from "@/components/newTable/NewTable";
import TableFooter from "@/components/TableFooter";
import { postPerson } from "@/utils/chenApi.js";
export default {
  name: "ViolationUser",
  computed: {
    ...mapState(["color", "ip"]),
  },
  components: {
    XForm,
    NewTable,
    TableFooter,
  },
  data() {
    return {
      day: 1,
      selectItems: [
        {
          id: 3,
          type: "text",
          text: "今日",
          value: 1,
          col: 1,
        },
        {
          id: 6,
          type: "datepicker",
          placeholder: [],
          field: "value1",
          col: 6,
        },
        {
          id: 7,
          type: "button",
          text: "查询",
          col: 2,
          click: "search",
        },
      ],
      title: "数据列表",
      list: [],
      tableItems: [
        {
          prop: "swingTime",
          label: "时间",
          minWidth: "100",
          slotName: "swingTime",
        },
        {
          prop: "recordImage",
          label: "照片",
          minWidth: "100",
          slotName: "recordImage",
        },
        {
          prop: "deviceName",
          label: "进入区域",
          minWidth: "100",
          slotName: "deviceName",
        },
      ],
      tableShows: {
        showIndex: false,
        showSelect: false,
      },
      total: 0,
      pageNum: 1,
      pageSize: 20,
      form: {},
      dialogVisible: false,
      imgUrl: "", // 点击图片后放大的图片路径
    };
  },
  methods: {
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.init();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      this.init();
    },
    init() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        startSwingTime: this.form.time ? this.form.time[0] : "",
        endSwingTime: this.form.time ? this.form.time[1] + " 23:59:59" : "",
      };
      postPerson(params).then((res) => {
        if (res.code === 0) {
          this.total = parseInt(res.total);
          this.list = res.data.data.pageData;
          this.list.forEach((item) => {
            item.recordImage = `${this.ip}/video/picture/get?alarmPicture=${item.recordImage}`;
          });
        }
      });
    },
    setDay(data) {
      this.day = data.type;
      this.form.time = [];
      this.init();
    },
    onClickType(val) {
      this.day = 0;
      this.form.time = val.data.value1;
      if (!this.form.time) {
        this.$message.warning("请选择时间再查询");
        return;
      }
      this.init();
    },
    open() {},
    // 点击图片放大
    clickImg(url) {
      this.dialogVisible = true;
      this.imgUrl = url;
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped>
.violation {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 20px 0 20px;
}
.reply {
  width: 100%;
  border: 1px solid #ddd;
  border-bottom: 0;
  height: 50px;
  background-color: #f3f3f3;
  line-height: 50px;
  font-size: 18px;
  box-sizing: border-box;
  padding-left: 20px;
}
</style>
