<template>
  <div class="sewageWarn">
    <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 #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";

import { getSewageAlarm } from "@/utils/chenApi.js";

export default {
  name: "SewageWarn",
  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: [],
      tableItems: [
        {
          prop: "warningTime",
          label: "时间",
          minWidth: "60",
          slotName: "warningTime",
        },
        {
          prop: "warningName",
          label: "报警类型",
          minWidth: "60",
          slotName: "warningName",
        },
        {
          prop: "levelName",
          label: "报警等级",
          minWidth: "60",
          slotName: "levelName",
        },
        {
          prop: "msg",
          label: "内容",
          minWidth: "100",
          slotName: "msg",
        },
      ],
      tableShows: {
        showIndex: false,
        showSelect: false,
      },
      total: 0,
      pageNum: 1,
      pageSize: 20,
      time: [],
    };
  },
  mounted() {
    this.init(this.day);
  },
  methods: {
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.init();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      this.init();
    },
    init() {
      let params;
      if (this.day === 4) {
        params = {
          startDate: this.time[0],
          endDate: this.time[1],
          type: this.day,
          current: this.pageNum,
          size: this.pageSize,
        };
      } else {
        params = {
          type: this.day,
          current: this.pageNum,
          size: this.pageSize,
        };
      }
      getSewageAlarm(params).then((res) => {
        if (res.code === 10000) {
          this.list = res.data.records;
          this.total = res.data.total;
        }
      });
    },
    setDay(data) {
      this.day = data.type;
      this.pageNum = 1;
      this.init();
    },
    onClickType(val) {
      this.day = 4;
      this.time = val.data.value1;
      this.pageNum = 1;
      this.init();
    },
    open() {},
  },
};
</script>

<style scoped>
.sewageWarn {
  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>
