
<template>
  <div class="app-container">
    <!--操作区-->
    <!-- <el-button type="primary" @click="deleteFun(1)" class="margin-bottom"
      >一键删除</el-button
    > -->
    <div class="flex m-b">
      <i class="el-icon-plus photo" @click="create('添加人员')"></i>
      <div
        v-for="(item, index) in list"
        :key="index"
        class="flex1"
        @click="update('编辑人员', item)"
        @mouseenter="handleEnter($event, index)"
        @mouseleave="handleLeave($event, index)"
      >
        <el-image
          class="photo"
          :src="item.photo"
        >
        </el-image>
        <div class="name">{{ item.name }}</div>
        <div class="name" v-if="typeName == '安保事件填报权限'">
          {{ item.appUsername }}
        </div>
        <i
          class="del el-icon-error"
          @click="deleteFun(item)"
          v-if="isShowList[index] == 1"
        ></i>
      </div>
    </div>
    <!--对话框-->
    <el-dialog
      :title="dialogType"
      :visible.sync="dialogVisible"
      width="700px"
      :close-on-click-modal="false"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="120px"
        label-position="left"
      >
        <template v-if="dialogType == '添加人员'">
          <el-form-item label="选择单位" prop="adminId">
            <el-select
              filterable
              clearable
              @change="getUserList"
              v-model="form.adminId"
              placeholder="请选择单位"
              style="width: 100%"
            >
              <el-option
                v-for="item in unit_list"
                :key="item.adminId"
                :label="item.username"
                :value="item.adminId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位简称" prop="adminId">
            <el-select
              filterable
              clearable
              @change="getUserList"
              v-model="form.adminId"
              placeholder="单位简称"
              style="width: 100%"
            >
              <el-option
                v-for="item in unit_list"
                :key="item.adminId"
                :label="item.unitConciseName"
                :value="item.adminId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择人员" prop="userId">
            <el-select
              filterable
              clearable
              v-model="form.userId"
              placeholder="请选择人员"
              style="width: 100%"
            >
              <el-option
                v-for="item in user_list"
                :key="item.userId"
                :label="item.name"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-if="typeName == '安保事件填报权限'">
          <div v-if="dialogType == '编辑人员'">
            <el-form-item
              label="选择单位"
              class="form-item-style"
              prop="appUsername"
            >
              <el-input
                :disabled="true"
                placeholder="请输入登录设备的账号"
                v-model.trim="form.username"
              />
            </el-form-item>
            <el-form-item
              label="选择人员"
              class="form-item-style"
              prop="appUsername"
            >
              <el-input
                :disabled="true"
                placeholder="请输入登录设备的账号"
                v-model.trim="form.name"
              />
            </el-form-item>
          </div>

          <el-form-item
            label="登录账号"
            class="form-item-style"
            prop="appUsername"
          >
            <el-input
              :disabled="dialogType == '编辑人员'"
              placeholder="请输入登录设备的账号"
              v-model.trim="form.appUsername"
            />
          </el-form-item>
          <el-form-item
            label="登录密码"
            class="form-item-style"
            prop="appPassword"
          >
            <el-input
              placeholder="请输入登录设备的密码"
              v-model.trim="form.appPassword"
            />
          </el-form-item>
        </template>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="addOrUpdate"> 确定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  invigilateInsert,
  invigilateGetPageList,
  invigilateDel,
} from "@/api/examination";
import { punishInsert, punishGetPageList, punishDelete } from "@/api/pass";
import {
  userInsert,
  userGetPageList,
  userDelete,
  updatePassword,
} from "@/api/securityIncident";

import { auditAdminList, auditUserList } from "@/api/audit";

export default {
  components: {},
  filters: {},
  computed: {},
  props: {
    typeName: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      // 主表格&主表格加载状态
      list: [],
      listLoading: true,
      // 分页参数
      page: {
        data: {
          name: null,
        },
        pageNum: 1,
        pageSize: 100000,
      },
      dialogType: "添加人员",
      // 是否显示对话框
      dialogVisible: false,
      // 添加角色参数
      form: {
        adminId: null,
        userId: null,
        appPassword: "",
        appUsername: "",
      },
      // 验证规则
      rules: {
        adminId: [{ required: true, message: "请选择", trigger: "change" }],
        userId: [{ required: true, message: "请选择", trigger: "change" }],
        appPassword: [
          { required: true, message: "请输入", trigger: "change" },
          {
            min: 6,
            message: "密码长度大于6位",
          },
        ],
        appUsername: [{ required: true, message: "请输入", trigger: "change" }],
      },
      unit_list: [],
      user_list: [],
      isShowList: [],
    };
  },
  created() {
    this.fetchData();
    this.getUnitList();
    this.form_copy = JSON.parse(JSON.stringify(this.form));
  },
  watch: {},
  methods: {
    // 获取列表数据
    async fetchData() {
      this.listLoading = true;
      let res;
      if (this.typeName == "通行证考试管理权限") {
        res = await invigilateGetPageList(this.page);
      } else if (this.typeName == "通行证处罚权限") {
        res = await punishGetPageList(this.page);
      } else if (this.typeName == "安保事件填报权限") {
        res = await userGetPageList(this.page);
      } else {
        res = await invigilateGetPageList(this.page);
      }
      if (res.code == 200) {
        this.list = res.data.records;
        this.total = res.data.total;
        this.listLoading = false;
      }
    },
    // 单位列表
    getUnitList() {
      auditAdminList(1).then((res) => {
        this.unit_list = res.data;
      });
    },
    // 人员列表
    getUserList(id) {
      auditUserList(id).then((res) => {
        this.user_list = res.data;
      });
    },
    // 鼠标移入
    handleEnter(e, index) {
      this.$set(this.isShowList, index, 1);
    },
    // 鼠标移出
    handleLeave(e, index) {
      this.$set(this.isShowList, index, 0);
    },
    create(type) {
      this.dialogType = type;
      this.form = JSON.parse(JSON.stringify(this.form_copy));
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    update(type, row) {
      if (this.typeName == "安保事件填报权限") {
        this.dialogType = type;
        this.form = Object.assign(this.form, row);
        this.form.appPassword=''
        console.log(this.form);
        this.dialogVisible = true;
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
      }
    },
    // 确定添加/编辑
    addOrUpdate() {
      this.$refs["form"].validate(async (valid) => {
        if (valid) {
          let res;
          if (this.typeName == "通行证考试管理权限") {
            res = await invigilateInsert(this.form);
          } else if (this.typeName == "通行证处罚权限") {
            res = await punishInsert(this.form);
          } else if (this.typeName == "安保事件填报权限") {
            if (this.dialogType == "添加人员") {
              res = await userInsert(this.form);
            } else {
              res = await updatePassword(this.form);
            }
          } else {
            res = await invigilateInsert(this.form);
          }
          if (res.code == 200) {
            this.dialogVisible = false;
            this.fetchData();
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          }
        }
      });
    },
    // 删除
    async deleteFun(item, type) {
      this.$confirm("确定要删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      }).then(async () => {
        let res;
        // 一键删除
        if (this.typeName == "通行证考试管理权限") {
          //   if (type == 1) {
          //   res = await studyDelete();
          // } else {
          res = await invigilateDel(item.tinvigilateUserId);
          // }
        } else if (this.typeName == "通行证处罚权限") {
          res = await punishDelete(item.passPunishUserId);
        } else if (this.typeName == "安保事件填报权限") {
          res = await userDelete(item.safeThingsUserId);
        } else {
          res = await invigilateDel(item.tinvigilateUserId);
        }
        if (res.code == 200) {
          this.fetchData();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.margin-bottom {
  margin-bottom: 20px;
}
.photo {
  width: 100px;
  height: 100px;
  border-radius: 6px;
  margin-right: 12px;
}
.name {
  text-align: center;
  margin-top: 8px;
}
.el-icon-plus {
  line-height: 95px;
  text-align: center;
  font-size: 40px;
  font-weight: 700;
  background: #f7f8fc;
  border: 1px solid rgba(196, 202, 215, 0.46);
  color: #909399;
}
.flex1 {
  display: flex;
  flex-direction: column;
  position: relative;
}
.del {
  position: absolute;
  top: -5px;
  right: 5px;
  color: #606266;
  font-size: 20px;
}
.m-b {
  margin-bottom: 20px;
}
</style>
