<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 #img="scope">
        <img :src="scope.row.img" alt="" />
      </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>
  </div>
</template>

<script>
import { mapState } from "vuex";
import XForm from "@/components/XForm";
import NewTable from "@/components/newTable/NewTable";
import TableFooter from "@/components/TableFooter";
export default {
  name: "ViolationUser",
  computed: {
    ...mapState(["color"]),
  },
  components: {
    XForm,
    NewTable,
    TableFooter,
  },
  data() {
    return {
      day: 2,
      selectItems: [
        {
          id: 3,
          type: "text",
          text: "今日",
          value: 1,
          col: 1,
        },
        {
          id: 4,
          type: "text",
          text: "本周",
          value: 2,
          col: 1,
        },
        {
          id: 5,
          type: "text",
          text: "本月",
          value: 3,
          col: 1,
        },
        {
          id: 6,
          type: "datepicker",
          placeholder: [],
          field: "value1",
          col: 6,
        },
        {
          id: 7,
          type: "button",
          text: "查询",
          col: 2,
          click: "search",
        },
      ],
      title: "数据列表",
      list: [
        {
          id: 1,
          time: "2021-10-11 14:09:09",
          location: "育肥1栋2层死猪通道",
          content: "死猪装袋处理",
        },
        {
          id: 2,
          time: "2021-10-11 14:09:09",
          location: "卖猪台",
          content: "猪只售卖",
        },
      ],
      tableItems: [
        {
          prop: "time",
          label: "时间",
          minWidth: "100",
          slotName: "time",
        },
        {
          prop: "img",
          label: "照片",
          minWidth: "100",
          slotName: "img",
        },
        {
          prop: "location",
          label: "位置",
          minWidth: "100",
          slotName: "location",
        },
        {
          prop: "content",
          label: "事件",
          minWidth: "100",
          slotName: "content",
        },
        {
          label: "操作",
          minWidth: "100",
          slotName: "handler",
        },
      ],
      tableShows: {
        showIndex: false,
        showSelect: false,
      },
      total: 0,
      pageNum: 1,
      pageSize: 20,
    };
  },
  methods: {
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.init();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      this.init();
    },
    init() {},
    setDay(data) {
      this.day = data.type;
    },
    onClickType() {},
    open() {},
  },
};
</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>
