<template>
  <div class="device bgw flex flexc">
    <TabHeader icon="el-icon-notebook-2" label="数字样表设备"></TabHeader>
    <div class="flex1 pd15 auto-scroll">
      <TableHeader>
        <div slot="left">
          <!-- <el-button size="small" type="primary" @click="handleAdd"
            >新 增</el-button
          > -->
          <!-- <el-dropdown class="ml15" @command="handleMore">
            <el-button type="primary" size="small">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="1">模板下载</el-dropdown-item>
              <el-dropdown-item command="2">导入</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown> -->
        </div>
        <div slot="right" class="flex">
          <el-select
            class="select"
            size="small"
            v-model="type"
            placeholder="请选择搜索类型"
          >
            <el-option
              v-for="(v, key) in typeList"
              :key="key"
              :label="v"
              :value="key"
            >
            </el-option>
          </el-select>
          <el-input
            size="small"
            v-model="searchVal"
            class="ml10 mr10"
            placeholder="请输入关键字搜索"
            @keyup.native.enter="handleSearch"
          ></el-input>
          <el-button size="small" type="primary" @click="handleSearch"
            >搜 索</el-button
          >
          <el-button size="small" @click="searchReset">重 置</el-button>
        </div>
      </TableHeader>
      <!-- 表格 -->
      <div class="table-content">
        <y-table
          :max-height="650"
          :data="tableData"
          :column="columns"
          border
          :loading="loading"
          tooltip-effect="dark"
          ref="multipleTable"
        >
          <template slot="center" slot-scope="scope">
            <span
              v-if="
                scope.row.deviceInBuilding ||
                scope.row.deviceInFloor ||
                scope.row.lon ||
                scope.row.lati
              "
              >{{
                `${
                  scope.row.deviceInBuilding ? scope.row.deviceInBuilding : "--"
                }栋/${
                  scope.row.deviceInFloor ? scope.row.deviceInFloor : "--"
                }楼/${scope.row.lon ? scope.row.lon : "--"},${
                  scope.row.lati ? scope.row.lati : "--"
                }`
              }}</span
            >
            <span v-else>--</span>
          </template>

          <template slot="deviceStatus" slot-scope="scope">
            <el-tag
              size="small"
              v-if="scope.row.deviceStatus == 2"
              type="success"
              >在线</el-tag
            >
            <el-tag
              size="small"
              v-else-if="scope.row.deviceStatus == 0"
              type="danger"
              >未激活</el-tag
            >
            <el-tag size="small" v-else type="danger">离线</el-tag>
          </template>

          <template slot="enabled" slot-scope="scope">
            <el-switch
              class="tableScopeSwitch"
              :active-value="1"
              :inactive-value="0"
              v-model="scope.row.enabled"
              @change="handleChange(scope.row)"
              inactive-text="停用"
              active-text="启用"
            >
            </el-switch>
          </template>

          <template slot="action" slot-scope="scope">
            <div class="flex jca">
              <span
                v-if="scope.row.deviceStatus == 0"
                class="primary pointer"
                @click="handleActive(scope.row)"
                >激活</span
              >
              <span
                v-if="scope.row.active != 0"
                style="opacity: 0"
                class="primary"
                >激活</span
              >
              <span
                class="primary pointer"
                v-hasPermi="['numberwritedevice:binding']"
                @click="handleBound(scope.row)"
                >绑定表单</span
              >
              <span
                class="primary pointer"
                v-hasPermi="['numberwritedevice:edit']"
                @click="handleEdit(scope.row)"
                >编辑</span
              >
              <span
                class="delete pointer"
                v-hasPermi="['numberwritedevice:remove']"
                @click="handleDel(scope.row.id)"
                >删除</span
              >
            </div>
          </template>
        </y-table>
      </div>
      <y-pagination
        :total="total"
        :page.sync="page"
        :pageSize.sync="size"
        @change="getDeviceList"
      ></y-pagination>
    </div>
    <!-- 新增设备 -->
    <AddDevice
      :dict="dict"
      :dialogVisible.sync="dialogVisible"
      :title="title"
      ref="AddDevice"
      @addSuccess="getDeviceList"
    ></AddDevice>
    <!-- 关联事项 -->
    <AddMatter ref="AddMatter" :matterDrawer.sync="matterDrawer"></AddMatter>
  </div>
</template>

<script>
import TableHeader from "@/components/TableHeader.vue";
import AddMatter from "./modal/AddMatter.vue";
import AddDevice from "./modal/AddDevice.vue";
import {
  getDeviceList,
  saveDeviceEnable,
  saveDeviceActive,
  delDevice,
} from "@/api/device";
import local from "@/utils/local";
const typeList = {
  deviceName: "按设备名称",
  deviceMac: "按mac地址",
  ip: "按IP地址",
  belong: "按所属机构",
};
export default {
  components: {
    TableHeader,
    AddDevice,
    AddMatter,
  },
  data() {
    return {
      typeList,
      searchVal: "",
      siteId: local.getLocal("siteId") ? local.getLocal("siteId") : "",
      tableData: [],
      total: 0,
      page: 1,
      size: 10,
      dialogVisible: false,
      title: "新增数字样表设备",
      loading: false,
      matterDrawer: false,
      dict: {}, // 字典
      type: "deviceName",
      columns: [
        {
          label: "序号",
          type: "index",
          width: "55",
          align: "center",
          index: (index) => {
            return (this.page - 1) * this.size + index + 1;
          },
        },
        {
          label: "设备名称",
          prop: "deviceName",
          align: "center",
          showOverflowTooltip: true,
        },
        {
          label: "mac地址",
          align: "center",
          prop: "deviceMac",
        },
        {
          label: "IP地址",
          align: "center",
          prop: "ip",
        },
        {
          label: "设备位置",
          slot: true,
          prop: "center",
          align: "center",
          showOverflowTooltip: true,
        },

        {
          label: "分辨率",
          prop: "resolution",
          align: "center",
        },
        {
          label: "负责人",
          prop: "leadingOfficial",
          align: "center",
        },
        {
          label: "联系电话",
          prop: "leadingOfficialTelephone",
          align: "center",
        },
        {
          label: "所属机构",
          prop: "belong",
          align: "center",
        },
        {
          label: "状态",
          slot: true,
          prop: "deviceStatus",
          align: "center",
        },
        {
          label: "启用/停用",
          slot: true,
          prop: "enabled",
          align: "center",
        },
        {
          label: "备注",
          prop: "deviceRemark",
          align: "center",
        },

        {
          label: "操作",
          slot: true,
          prop: "action",
          align: "center",
          width: "200",
        },
      ],
    };
  },
  created() {
    this.getDeviceList();
  },
  methods: {
    // 获取设备列表
    async getDeviceList() {
      this.loading = true;
      let obj = {
        siteId: this.siteId,
        page: this.page,
        size: this.size,
      };
      let value = `%${this.searchVal}%`;
      obj[this.type] = value;
      let res = await getDeviceList(obj);
      this.loading = false;
      if (res.data.code == 1) {
        let { data, total, dict } = res.data.data;
        this.total = total;
        this.tableData = data;
        this.dict = dict;
      }
    },
    // 新增
    handleAdd() {
      this.title = "新增数字样表设备";
      this.$refs.AddDevice.onAdd();
      this.dialogVisible = true;
    },
    // 搜索
    handleSearch() {
      this.page = 1;
      this.getDeviceList();
    },

    // 重置
    searchReset() {
      this.searchVal = "";
      this.page = 1;
      this.type = "deviceName";
      this.getDeviceList();
    },
    // 更多操作
    handleMore(item) {
      console.log(item);
    },
    // 激活
    handleActive(row) {
      this.$confirm("此操作将激活这台设备，是否继续?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "btn-custom-cancel",
        type: "warning",
      })
        .then(async () => {
          let res = await saveDeviceActive({ deviceCode: row.deviceCode });
          let { code, msg } = res.data;
          if (code == 1) {
            this.$message.success(msg);
            this.getDeviceList();
          }
        })
        .catch(() => {
          console.log("取消成功！");
        });
    },
    // 编辑
    handleEdit(row) {
      this.title = "编辑数字样表设备";
      this.$refs.AddDevice.onEdit(row);
      this.dialogVisible = true;
    },
    // 删除
    handleDel(id) {
      this.$confirm("此操作将删除该数字样表设备，是否继续?", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        cancelButtonClass: "btn-custom-cancel",
        type: "warning",
      })
        .then(async () => {
          let res = await delDevice({ id });
          let { code, msg } = res.data;
          if (code == 1) {
            this.$message.success(msg);
            this.getDeviceList();
          }
        })
        .catch(() => {
          console.log("取消成功！");
        });
    },
    // 启停用
    async handleChange(row) {
      let obj = {
        id: row.id,
        enabled: row.enabled,
      };
      let res = await saveDeviceEnable(obj);
      let { code } = res.data;
      if (code == 1) {
        this.$message.success("修改成功");
        this.getDeviceList();
      }
    },
    // 绑定表单
    handleBound(row) {
      this.matterDrawer = true;
      this.$nextTick(() => {
        this.$refs.AddMatter.getDevInfo(row);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.device {
  width: 100%;
  height: 100%;
  .select {
    width: 220px !important;
  }
}
// .table-content {
//   height: 550px;
// }
/deep/.tableScopeSwitch .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
/*打开时文字位置设置*/
/deep/.tableScopeSwitch .el-switch__label--right {
  z-index: 1;
  left: 0px; /*不同场景下可能不同，自行调整*/
}
/*关闭时文字位置设置*/
/deep/.tableScopeSwitch .el-switch__label--left {
  z-index: 1;
  right: 0px; /*不同场景下可能不同，自行调整*/
}
/*显示文字*/
/deep/.tableScopeSwitch .el-switch__label.is-active {
  display: block;
}
/deep/.tableScopeSwitch.el-switch .el-switch__core,
.el-switch .el-switch__label {
  width: 60px !important; /*开关按钮的宽度大小*/
}
</style>