<!--
 * @Author: your name
 * @Date: 2021-12-07 14:27:28
 * @LastEditTime: 2021-12-27 09:15:07
 * @LastEditors: Please set LastEditors
 * @Description: 设备管理页面
 * @FilePath: \hyyfClient\src\views\DeviceMana\Device.vue
-->
<template>
  <div class="device">
    <div class="manage-items">
      <manage-item
        v-for="(item, index) in manageItems"
        :key="item.title"
        v-bind="item"
      >
        <template #icon>
          <div :class="manageItemClass[index]"></div>
        </template>
      </manage-item>
    </div>
    <new-table
      v-bind="tableData"
      :listData="listData"
      @selectionChange="selectionChange"
    >
      <!-- 右上角新增按钮 -->
      <template #right>
        <el-button v-if="hasPerm('device:add')" size="mini" @click="handleAdd">
          新增设备
        </el-button>
        <el-button
          v-if="hasPerm('device:del')"
          size="mini"
          @click="handleDelete(true)"
        >
          批量删除
        </el-button>
      </template>

      <!-- table-col -->
      <template #state="scope">
        <el-tag
          size="small"
          :type="scope.row.state === 1 ? 'success' : 'danger'"
        >
          {{ scope.row.state === 1 ? "正常" : "异常" }}
        </el-tag>
      </template>

      <template #handler="slotProps">
        <el-button
          v-if="hasPerm('device:edit')"
          type="text"
          @click="handleEdit(slotProps.row)"
        >
          编辑
        </el-button>
        <el-button
          v-if="hasPerm('device:del')"
          type="text"
          @click="handleDelete(false, slotProps.row)"
        >
          删除
        </el-button>
      </template>
    </new-table>
    <table-footer
      v-bind="tableFooterData"
      @sizeChange="sizeChange"
      @pageChange="pageChange"
    >
    </table-footer>
    <add-or-edit ref="addOrEdit" @reflash="reflash"></add-or-edit>
  </div>
</template>
<script>
import ManageItem from "./device/ManageItem.vue";
import NewTable from "@/components/newTable/NewTable";
import TableFooter from "@/components/TableFooter";
import AddOrEdit from "./device/AddOrEdit.vue";

import { tableData } from "./device/table.config";
import {
  getDeviceList,
  postDeviceDel,
  getDeviceSummer,
} from "@/utils/chenApi.js";

export default {
  components: {
    ManageItem,
    NewTable,
    TableFooter,
    AddOrEdit,
  },
  data() {
    return {
      manageItems: [
        {
          title: "设备总数",
          num: "0",
        },
        {
          title: "故障设备",
          num: "0",
        },
        {
          title: "设备故障率",
          num: "0%",
        },
      ],
      manageItemClass: ["total", "badCount", "badPercent"],
      tableFooterData: {
        totals: 0,
        size: 20,
        pageNum: 1,
      },
      tableData: tableData,
      listData: [],
      rows: [],
    };
  },
  methods: {
    // size 改变
    sizeChange(val) {
      this.tableFooterData.size = val;
      this.tableFooterData.pageNum = 1;
      this.initList();
      this.initSummer();
    },
    // 页数改变
    pageChange(val) {
      this.tableFooterData.pageNum = val;
      this.initList();
    },
    // 新增事件
    handleAdd() {
      this.$refs["addOrEdit"].init();
    },
    // 编辑事件
    handleEdit(row) {
      this.$refs["addOrEdit"].init(row);
    },
    // 选中
    selectionChange(rows) {
      this.rows = rows;
    },
    // 删除事件
    handleDelete(flag, row) {
      if (flag && this.rows.length === 0) {
        this.$message.warning("请选中设备再删除");
        return;
      }

      let ids = "";
      if (flag) {
        const items = [];
        this.rows.forEach((item) => {
          items.push(item.id);
        });
        ids = items.join(",");
      } else {
        ids += row.id;
      }
      this.$confirm("确定删除该设备？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(async () => {
        const loading = this.$loading({
          lock: true,
          text: "加载中...",
          spinner: "el-icon-loading",
          background: "rgba(0, 0, 0, 0.7)",
        });
        const res = await postDeviceDel({
          id: ids,
        });
        loading.close();
        this.reflash();
        if (res.code === 10000) {
          this.$message.success("删除成功");
        }
      });
    },
    initList() {
      getDeviceList({
        pageNo: this.tableFooterData.pageNum,
        pageSize: this.tableFooterData.size,
      }).then((res) => {
        if (res.code === 10000) {
          this.listData = res.data.content;
          this.tableFooterData.totals = res.data.totalElements;
        } else {
          this.$message.warning(res.message);
        }
      });
    },
    initSummer() {
      getDeviceSummer({
        bit: 2,
      }).then((res) => {
        if (res.code === 10000) {
          this.manageItems[0].num = res.data.total;
          this.manageItems[1].num = res.data.num;
          this.manageItems[2].num = res.data.rate;
        } else {
          this.manageItems[0].num = "0";
          this.manageItems[1].num = "0";
          this.manageItems[2].num = "0";
          this.$message.warning(res.message);
        }
      });
    },
    reflash() {
      this.initSummer();
      this.tableFooterData.pageNum = 1;
      this.initList();
    },
  },
  mounted() {
    this.initList();
    this.initSummer();
  },
};
</script>
<style scoped>
.device {
  padding: 20px 20px 0;
}
.manage-items {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

/* 设备总数的 icon */
.total {
  background: url("~@/assets/images/device/设备总数.svg") no-repeat;
  background-size: contain;
  width: 40px;
  height: 40px;
}
/* 故障设备的 icon */
.badCount {
  background: url("~@/assets/images/device/设备故障.svg") no-repeat;
  background-size: contain;
  width: 50px;
  height: 50px;
}
/* 设备故障率的 icon */
.badPercent {
  background: url("~@/assets/images/device/故障率统计.svg") no-repeat;
  background-size: contain;
  width: 45px;
  height: 45px;
}
</style>
