<template>
  <div class="page">
    <LayoutTable :data="tableData" :config="tableConfig" notDel notAdd>
      <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        size="mini"
        type="primary"
        @click="handleAdd"
        >新增</el-button
      >
      <!-- <el-button
        slot="table-head-left2"
        style="margin-left: 10px"
        icon="el-icon-tickets"
        size="mini"
        type="primary"
        @click="doExport"
        :disabled="isExport"
        >导出</el-button
      > -->
    </LayoutTable>
    <drawer-show ref="drawerShow" @ok="getData" />
    <dialog-show ref="dialogform" @ok="getData" />

    <div class="mask" v-if="progress">
      <el-progress :stroke-width="26" :percentage="percent"></el-progress>
    </div>
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import drawerShow from "./drawershow";
import dialogShow from "./dialogshow";
import table from "@/assets/mixins/table";
import {
  getFirstDay,
  getLastDay,
  getdiffdate,
  timestampToTime,
  getMyDay,
} from "@/assets/utils/dateFormat.js";
export default {
  name: "deviceList",
  components: {
    drawerShow,
    dialogShow,
  },
  mixins: [table],
  data() {
    return {
      // 进度展示值
      percent: 0,
      // 导出按钮加载状态
      isExport: false,
      // 是否显示进度条
      progress: false,
      // 表格配置项
      config: {
        isshowTabPane: true,
        search: [
          {
            name: "deviceName",
            type: "text",
            label: "设备名称",
            fuzzy: true,
          },
        ],
        columns: [
          { type: "selection", width: 60, fixed: "left" },
          { type: "index", label: "序号", width: 50, fixed: "left" },
          { label: "设备名称", prop: "deviceName", fixed: "left" },
          { label: "Mac地址", prop: "deviceMac" },
          {
            label: "设备地址",
            prop: "address",
            formatter: this.formatter,
            show: true,
          },
          {
            label: "分辨率",
            prop: "resolution",
            formatter: this.formatter,
            show: true,
          },
          { label: "负责人", prop: "leadingOfficial" },
          {
            label: "联系电话",
            prop: "telephone",
            formatter: this.formatter,
          },
          {
            label: "设备状态",
            prop: "status",
            width: 160,
            formatter: this.formatter,
          },
          {
            label: "启用/停用",
            prop: "enabled",
            width: 100,
            formatter: (row) => {
              return (
                <el-switch
                  v-model={row.enabled}
                  disabled={row.status == 0 ? true : false}
                  active-value={1}
                  inactive-value={0}
                  onChange={(val) => {
                    this.$post("/device/save?", {
                      id: row.id,
                      enabled: val ? "1" : "0",
                    }).then((res) => {
                      if (res.code == 1) {
                        this.$message.success(val ? "已启用" : "已停用");
                        this.getData();
                      }
                    });
                  }}
                ></el-switch>
              );
            },
          },

          {
            label: "操作",
            formatter: (row) => {
              return (
                <div>
                  {row.status == 0 ? (
                    <el-button
                      type="text"
                      size="mini"
                      onClick={() => {
                        this.$post("/device/save?", {
                          id: row.id,
                          status: "1",
                        }).then((res) => {
                          if (res.code == 1) {
                            this.$message.success("激活成功");
                            this.getData();
                          }
                        });
                      }}
                    >
                      激活
                    </el-button>
                  ) : (
                    ""
                  )}
                  <el-button
                    type="text"
                    size="mini"
                    onClick={() => {
                      this.handle(row);
                    }}
                  >
                    数据
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    onClick={() => {
                      this.toEdit(row);
                    }}
                  >
                    编辑
                  </el-button>
                  <el-button
                    type="text"
                    size="mini"
                    style="color:#F56C6C"
                    onClick={() => {
                      this.handleDelete(row);
                    }}
                  >
                    删除
                  </el-button>
                </div>
              );
            },
          },
        ],
      },
      dialogVisible: false,
      currentParams: {},
    };
  },
  created() {},
  methods: {
    // 删除操作
    handleDelete(row) {
      this.$get("/device/delete?", { id: row.id }).then((res) => {
        if (res.code == 1) {
          this.$message.success("删除成功");
          this.getData();
        }
      });
    },
    // 倒计时
    countDown() {
      if (this.percent == 95) {
        let params = {};
        for (let value of this.config.search) {
          if (this.query[value.name]) {
            params[value.name] = this.query[value.name];
          }
        }

        if (this.selection.length > 0) {
          params["idList"] = this.selection;
        }
        let that = this;
        this.$download(
          "/device/exportExcel",
          {
            ...params,
          },
          { type: "excel", name: "考勤机" }
        )
          .then(() => {
            this.percent = 100;
            this.progress = false;
            that.isExport = false;
          })
          .catch((error) => {
            this.isExport = false;
            this.progress = false;
            this.$message.error(error.message);
          });
        return;
      } else {
        this.percent = this.percent + 1;
        let that = this;
        setTimeout(function () {
          that.countDown();
        }, 100);
      }
    },
    /** 导出Excel */
    doExport() {
      if (this.isExport == true) {
        this.$message.info("数据正在导出中，请勿重复点击！");
        return false;
      }

      this.isExport = true;
      this.progress = true;
      this.percent = 0;
      this.countDown();
    },
    /** 重写新增方法 */
    handleAdd(row) {
      this.$refs.dialogform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(row) {
      this.$refs.dialogform.edit(row);
    },
    /** 重写查看方法 */
    toView(row) {
      this.$refs.drawerShow.view(row);
    },

    // 处理
    handle(err) {
      this.$refs.drawerShow.edit(err);
    },
  },
};
</script>
<style lang="less" scoped>
.mask {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  padding: 0 30%;
  padding-top: 20%;
  background: rgba(0, 0, 0, 0.6);
}
::v-deep .el-progress__text {
  color: #409eff;
  font-weight: 600;
}
</style>
