<template>
  <div class="app-container">
    <!--操作区-->
    <div v-if="showPrivateArea">
      <el-button type="primary" icon="el-icon-plus" @click="create()"
        >添加私有区域</el-button
      >
      <!--搜索区-->
      <el-input
        v-model="page.data.privateAreaName"
        placeholder="请输入私有区域名称"
        class="margin-left input"
      ></el-input>
      <el-select
        v-if="!checkRole([99])"
        filterable
        clearable
        v-model="page.data.adminId"
        placeholder="请选择账号"
        class="margin-left input"
      >
        <el-option
          v-for="item in enterprise_list"
          :key="item.adminId"
          :label="item.username"
          :value="item.adminId"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        icon="el-icon-search"
        class="margin-left"
        @click="fetchData"
        >搜索</el-button
      >
      <!--主表格-->
      <el-table
        class="table"
        ref="table_form"
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >
        <el-table-column label="序号" align="center" width="80px">
          <template slot-scope="scope">
            {{ indexMethod(scope.$index) }}
          </template>
        </el-table-column>
        <el-table-column label="私有区域名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.privateAreaName | matchNull }}
          </template>
        </el-table-column>
        <el-table-column label="账号名称" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.username | matchNull }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.createTime | matchNull }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="" label="操作区" width="350">
          <template slot-scope="scope">
            <el-button
              type="danger"
              size="small"
              @click="deleteUser(scope.row.privateAreaId)"
              >删除</el-button
            >
            <el-button type="primary" size="small" @click="update(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="success"
              plain
              size="small"
              @click="check(scope.row.privateAreaId, '1')"
              >查看设备</el-button
            >
            <el-button
              type="warning"
              plain
              size="small"
              @click="check(scope.row.privateAreaId, '2')"
              >查看人员</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!--分页栏-->
      <pagination
        :total="total"
        :page.sync="page.pageNum"
        :limit.sync="page.pageSize"
        @pagination="fetchData"
      />
    </div>
    <div v-else>
      <el-page-header @back="goBack" content="私有区域"> </el-page-header>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="设备" name="1">
          <istable :list="checkList" type="查看设备" />
        </el-tab-pane>
        <el-tab-pane label="人员" name="2">
          <istable :list="checkList" type="查看人员" />
        </el-tab-pane>
      </el-tabs>
    </div>
    <!--对话框-->
    <el-dialog
      :title="dialogTitle[dialogType]"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="120px"
        label-position="left"
      >
        <el-form-item
          style="flex: 0.5"
          label="私有区域名称"
          prop="privateAreaName"
        >
          <el-input
            v-model.trim="form.privateAreaName"
            placeholder="请输入私有区域名称"
          />
        </el-form-item>
        <el-form-item label="绑定账号" prop="adminId" v-if="!checkRole([99])">
          <el-select
            style="width: 100%"
            filterable
            clearable
            v-model="form.adminId"
            placeholder="请选择绑定账号"
          >
            <el-option
              v-for="item in enterprise_list"
              :key="item.adminId"
              :label="item.username"
              :value="item.adminId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button
          type="primary"
          @click="dialogType === 'add' ? add() : doUpdate()"
        >
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import istable from "./table";
import { checkRole, checkVisitorType } from "@/utils/checkRole";
import Pagination from "@/components/Pagination";
import {
  privateAreaPageList,
  addOrUpdatePrivateArea,
  deletePrivateArea,
  getUserListSearch,
  getPrivateAreaDeviceList,
  privateAreaDevicePageList,
  privateAreaWhitelistPageList,
  addPrivateAreaDevice,
  deletePrivateAreaDevice,
  queryEnterpriseAccount,
  getAdminListNew
} from "@/api/user_manage"; // secondary package based on el-pagination
export default {
  components: { Pagination, istable },
  filters: {
    matchNull(str) {
      if (!str) {
        return "未连接";
      } else {
        return str;
      }
    },
  },
  data() {
    return {
      // 角色
      role: this.$store.getters.role,
      placeType: this.$store.getters.placeType,
      // 主表格&主表格加载状态
      list: null,
      listLoading: true,
      // 分页参数
      page: {
        data: {
          privateAreaId: null,
        },
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      enterprise_list: [], //企业列表_搜索
      // 是否显示对话框
      dialogVisible: false,
      // 对话框标题
      dialogTitle: {
        add: "添加私有区域",
        update: "编辑私有区域",
      },
      dialogType: "add",
      // 添加账号参数
      form: {
        adminId: null,
        privateAreaName: null,
      },
      // 验证规则
      rules: {
        adminId: [{ required: true, message: "请选择账号", trigger: "blur" }],
        privateAreaName: [
          { required: true, message: "请输入私有区域名称", trigger: "blur" },
        ],
      },
      form_copy: {},

      showPrivateArea: true, //true显示私有区域false设备/人员
      activeName: "2",
      checkList: [],
      privateAreaId: null,
    };
  },
  created() {
    this.form_copy = JSON.parse(JSON.stringify(this.form));
    this.fetchData();
    this.queryEnterpriseAccount();
  },
  methods: {
    // 查询权限
    checkRole,
    // 获取列表数据
    fetchData() {
      this.listLoading = true;
      privateAreaPageList(this.page).then((res) => {
        this.list = res.data.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },
    // 打开添加设备对话框
    create() {
      this.form = JSON.parse(JSON.stringify(this.form_copy));
      this.dialogType = "add";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    // 确定添加
    add() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addOrUpdatePrivateArea(this.form).then((res) => {
            this.dialogVisible = false;
            this.fetchData();
            this.$message({
              type: "success",
              message: "添加成功!",
            });
          });
        }
      });
    },
    // 打开编辑对话框
    update(row) {
      this.form = Object.assign(this.form_copy, row);
      this.dialogType = "update";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    // 确定编辑
    doUpdate() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addOrUpdatePrivateArea(this.form).then((res) => {
            this.dialogVisible = false;
            this.fetchData();
            this.$message({
              type: "success",
              message: "编辑成功!",
            });
          });
        }
      });
    },
    // 删除区域
    deleteUser(privateAreaId) {
      this.$confirm("确定要删除此私有区域吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(() => {
        deletePrivateArea(privateAreaId).then((res) => {
          this.fetchData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      });
    },
    // 查看
    check(privateAreaId, type) {
      let data = {
        data: {
          privateAreaId: privateAreaId,
        },
        pageNum: 1,
        pageSize: 100000,
      };
      this.privateAreaId = privateAreaId;
      if (type === "1") {
        privateAreaDevicePageList(data).then((res) => {
          this.checkList = res.data.list;
          this.activeName = "1";
          this.showPrivateArea = false;
        });
      } else {
        privateAreaWhitelistPageList(data).then((res) => {
          this.checkList = res.data.list;
          this.activeName = "2";
          this.showPrivateArea = false;
        });
      }
    },
    // 切换设备/人员
    handleClick() {
      this.check(this.privateAreaId, this.activeName);
    },
    goBack() {
      this.showPrivateArea = true;
      this.fetchData();
    },
    // 获取企业账号列表数据_搜索
    // queryEnterpriseAccount() {
    //   queryEnterpriseAccount().then((res) => {
    //     this.enterprise_list = res.data;
    //   });
    // },
        // 获取账号列表数据
    queryEnterpriseAccount() {
      let data = {
        isNeedDistrict:2, //	是否需要区级账号 1-需要(默认) 2-不需要
        isNeedEnterprise:1, //	是否需要企业账号 1-需要(默认) 2-不需要
        isNeedPrivateArea:3, //查询区域类型 1-通用(默认) 2-公有 3-私有
      };
      getAdminListNew(data).then((res) => {
        this.enterprise_list = res.data;
      });
    },

    // 返回列表序号
    indexMethod(index) {
      return (this.page.pageNum - 1) * this.page.pageSize + index + 1;
    },
  },
};
</script>
<style scoped>
.table {
  margin-top: 15px;
}
.flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.margin-left {
  margin: 10px 0 0 10px;
}
.input {
  width: 200px;
}
.el-page-header {
  margin-bottom: 20px;
}
</style>
