<template>
  <div class="alarmWarn">
    <div class="title" :style="{ color: color }">报警情况占比</div>
    <div class="box-flex">
      <div class="flex-left">
        <alarm-pie :pieData="alarmPieData"></alarm-pie>
      </div>
      <div class="flex-left">
        <alarm-bar :barData="alarmBarData"></alarm-bar>
      </div>
    </div>
    <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"
          v-if="hasPerm('video:add')"
          style="margin-right: 10px"
          @click="digAll"
          >批量处理</el-button
        >
      </template> -->
      <template #type="scope">
        <span v-if="scope.row.type === 1">环境报警</span>
        <span v-else>设备异常</span>
      </template>
      <template #class="scope">
        <span v-if="scope.row.class === 1">一级</span>
        <span v-else>二级</span>
      </template>
      <template #handler="scope">
        <span v-if="scope.row.dig">已处理</span>
        <el-button v-else type="primary" size="mini" @click="dig(scope.row)"
          >处理</el-button
        >
      </template>
    </new-table>
    <table-footer
      :totals="total"
      :size="pageSize"
      @sizeChange="sizeChange"
      @pageChange="pageChange"
    ></table-footer>
    <el-dialog
      :title="digType ? '处理' : '批量处理'"
      :visible.sync="dialogVisible"
      width="30%"
    >
      <div>
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="100px"
          size="mini"
        >
          <el-form-item label="报警时间" v-if="digType">
            <span>{{ alarmDig.time }}</span>
          </el-form-item>
          <el-form-item label="报警内容" v-if="digType">
            <el-input
              type="textarea"
              :rows="2"
              readonly
              :value="alarmDig.content"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="审批意见" prop="areaId">
            <el-select v-model="form.areaId">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户名" prop="account">
            <span>{{ userName }}</span>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit('form')">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import AlarmPie from "@/views/Alarm/chart/AlarmPie";
import AlarmBar from "@/views/Alarm/chart/AlarmBar";
import XForm from "@/components/XForm";
import NewTable from "@/components/newTable/NewTable";
import TableFooter from "@/components/TableFooter";

import {
  getOneWeekAlarm,
  getTodayAlarmRate,
  getAlarmInfo,
} from "@/utils/chenApi.js";

export default {
  name: "AlarmWarn",
  components: {
    AlarmPie,
    AlarmBar,
    XForm,
    NewTable,
    TableFooter,
  },
  computed: {
    ...mapState(["color"]),
  },
  data() {
    return {
      selectItems: [
        // {
        //   id: 1,
        //   type: "select",
        //   label: "报警类型：",
        //   placeholder: "请选择报警类型",
        //   field: "areaId",
        //   options: [],
        //   col: 5,
        // },
        {
          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: "derive",
        },
      ],
      day: 2,
      title: "报警列表",
      list: [
        {
          id: 1,
          time: "2021-10-11 14:55:55",
          type: 1,
          class: 1,
          content: "育肥1栋3单元温度过高",
          dig: false,
        },
        {
          id: 2,
          time: "2021-10-11 14:55:55",
          type: 2,
          class: 2,
          content: "育肥1栋2单元温度传感器异常",
          dig: true,
        },
      ],
      tableItems: [
        {
          prop: "warningTime",
          label: "报警时间",
          minWidth: "100",
          slotName: "warningTime",
        },
        {
          prop: "warningName",
          label: "报警类型",
          minWidth: "100",
          slotName: "warningName",
        },
        {
          prop: "levelName",
          label: "报警等级",
          minWidth: "100",
          slotName: "levelName",
        },
        {
          prop: "msg",
          label: "报警内容",
          minWidth: "100",
          slotName: "msg",
        },
        // {
        //   label: "handler",
        //   minWidth: "100",
        //   slotName: "handler",
        // },
      ],
      tableShows: {
        showIndex: false,
        showSelect: false,
        defaultProp: "dig",
      },
      total: 0,
      pageNum: 1,
      pageSize: 20,
      dialogVisible: false,
      form: {},
      rules: {},
      // 判断是否是批量操作还是单个
      digType: true,
      // 单个处理数据
      alarmDig: {},
      options: [
        {
          label: "略过",
          value: 1,
        },
        {
          label: "加速处理",
          value: 2,
        },
        {
          label: "...",
          value: 3,
        },
      ],
      userName: localStorage.getItem("UserName"),
      alarmBarData: {},
      alarmPieData: [], // 报警占比 圆环数据
    };
  },
  methods: {
    // 修改size
    sizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.initAlarmInfo();
    },
    // 修改页数
    pageChange(val) {
      this.pageNum = val;
      this.initAlarmInfo();
    },
    init() {},
    setDay(data) {
      this.day = data.type;
      this.pageNum = 1;
      this.initAlarmInfo();
    },
    onClickType(val) {
      this.day = 4;
      this.time = val.data.value1;
      this.pageNum = 1;
      this.initAlarmInfo();
    },
    dig(item) {
      this.digType = true;
      this.dialogVisible = true;
      this.alarmDig = item;
    },
    // 批量处理
    digAll() {
      this.digType = false;
    },
    onSubmit() {},
    // 获取报警情况占比的 一二三级
    initOneWeekAlarm() {
      getOneWeekAlarm({}).then((res) => {
        if (res.code === 10000) {
          console.log(res.data);
          this.alarmBarData = res.data;
        }
      });
    },
    // 报警情况占比的 bar 数据
    initTodayAlarmRate() {
      getTodayAlarmRate({}).then((res) => {
        if (res.code === 10000) {
          this.alarmPieData = res.data;
        }
      });
    },
    // 报警列表
    initAlarmInfo() {
      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,
        };
      }
      getAlarmInfo(params).then((res) => {
        if (res.code === 10000) {
          this.list = res.data.records;
          this.total = res.data.total;
        }
      });
    },
  },
  mounted() {
    this.initOneWeekAlarm(); // bar
    this.initTodayAlarmRate(); // pie
    this.initAlarmInfo(); // list
  },
};
</script>

<style scoped>
.alarmWarn {
  width: 100%;
  height: 100%;
  padding: 20px 20px 0 20px;
}
.title {
  width: 100%;
  height: 40px;
  border: 1px solid #ddd;
  background-color: #f3f3f3;
  padding-left: 20px;
  line-height: 40px;
}
.box-flex {
  width: 100%;
  height: 400px;
  background-color: #fff;
  display: flex;
}
.flex-left {
  width: 50%;
  height: 100%;
}
.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>
