<template>
  <!-- 用户已关联角色 -->
  <el-dialog
    v-dialogDrag
    title="用户已关联角色"
    :visible="show"
    width="765px"
    @close="close"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
    class="el-dialog-single el-dialog-contract"
  >
    <div class="dialog-wrap">
      <div class="table-btn">
        <template v-if="mode === 'show'">
          <el-button type="primary" @click="addRole()">添加角色</el-button>
          <el-button v-if="propList.length===1" @click="deleteRole()">删除角色</el-button>
        </template>
        <template v-if="mode === 'edit'">
          <div class="table-title">选择需要操作的角色</div>
        </template>
      </div>
      <div class="table-wrap">
        <el-table
          ref="bcxtable"
          :data="tempData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column v-if="mode != 'show'" type="selection" width="55">
          </el-table-column>
          <el-table-column prop="roleName" label="角色名称"> </el-table-column>
          <el-table-column prop="remark" label="角色说明"> </el-table-column>
          <el-table-column prop="createTime" label="添加时间">
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <template v-if="mode === 'edit'">
        <el-button type="primary" @click="type==='add'?confirmAdd():confirmDelete()">确认</el-button>
        <el-button @click="close()">取消</el-button>
        <el-button @click="back">返回</el-button>
      </template>
      <template v-if="mode === 'show'">
        <el-button @click="close()">取消</el-button>
      </template>
    </div>
  </el-dialog>
</template>
<script>
import { getRoleList, bacthSetEmployees ,employeebacthDeleteroles} from "@/api/staffApi.js";

export default {
  watch: {
    showdialog() {},
  },
  components: {},
  data() {
    return {
      title: "",
      mode: "edit", // show / edit 当前状态
      show: false,
      tableData: [],
      addTableData: [],
      tempData: [],
      multipleSelection: [],
      propList: [],
      type:'add'
    };
  },
  methods: {
    // 打开
    open(propList, mode) {
      this.propList = propList;
      this.show = true;
      this.mode = mode;
      this.getAllData();
      this.$refs.bcxtable?.clearSelection(); //取消选中
    },
    back() {
      this.mode = "show";
      this.tempData = this.tableData;
    },
    getAllData() {
      //表格列表
      let obj = {
        employeeId: this.propList.length > 1 ? "" : this.propList[0].employeeId,
      };
      if (this.propList.length > 1) {
        this.tempData = [];
      } else {
        getRoleList(obj, localStorage.domainId).then((response) => {
          if (Array.isArray(response.data) ) {
            this.tempData = this.tableData = response.data;
          }
        });
      }

      getRoleList({ employeeId: "" }, localStorage.domainId).then(
        (response) => {
          if (Array.isArray(response.data) && response.data[0]) {
            this.addTableData = response.data;
          }
        }
      );
    },
    close() {
      this.show = false;
    },
    // 添加角色
    addRole() {
      this.type='add'
      this.mode = "edit";
      this.tempData = this.addTableData;
    },
    deleteRole() {
      this.type='delete'
      this.mode = "edit";
      this.tempData = this.tableData
    },
        // 确认删除
    confirmDelete() {
      employeebacthDeleteroles({
        employeeId: this.propList[0].employeeId,
        roleIdList: this.multipleSelection.map((item) => item.id),
      }).then((res) => {
        if (res.status == 200) {
          this.$message.success("删除成功");
          this.show=false
        }
      });
      this.$refs.bcxtable.clearSelection(); //取消选中
    },
    // 确认添加
    confirmAdd() {
      bacthSetEmployees({
        employeeIdList: this.propList.map(ex=>ex.employeeId),
        roleIdList: this.multipleSelection.map((item) => item.id),
      }).then((res) => {
        if (res.status == 200) {
          this.$message.success("添加成功");
          this.show=false
        }
      });
      this.$refs.bcxtable.clearSelection(); //取消选中
    },
    handleSelectionChange(val) {
      //选中全选
      console.log(val);
      this.multipleSelection = val;
    },
  },
};
</script>
<style lang="scss" scope>
.el-dialog-contract {
  .elcolEndDate {
    position: relative;
    .checkbox {
      position: absolute;
      top: 10px;
      right: 0;
    }
  }
}

.el-dialog__body {
  height: 50vh;
  min-height: 500px;
}

.dialog-wrap {
  margin: 12px;
}
.table-btn {
  display: flex;
  margin-bottom: 12px;
}
</style>
