<template>
  <el-dialog
    :title="titleMap[mode]"
    v-model="visible"
    :width="700"
    destroy-on-close
    @closed="$emit('closed')"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="dialogForm"
      label-width="150px"
      label-position="left"
    >
      <el-form-item :label="$t('admin.adminRoleName')" prop="RoleName">
        <el-input
          v-model="form.RoleName"
          clearable
          :placeholder="$t('admin.adminRoleName')"
          style="width: 60%"
        ></el-input>
      </el-form-item>
      
      <el-form-item :label="$t('response.description')">
        <el-input
          v-model="form.Description"
          clearable
          :placeholder="$t('response.description')"
          style="width: 60%"
          :autosize="{ minRows: 5}"
          type="textarea"
        ></el-input>
      </el-form-item>
        <el-form-item :label="$t('admin.authoritys')" style="max-width: 300px">
          <div>
            <el-checkbox
              v-model="checkAll"
              @change="handleCheckAllChange"
            >{{ $t('admin.checkAll') }}</el-checkbox>
          </div>
          <div style="float:right">
          <el-tree
            ref="tree"
            :data="data"
            show-checkbox
            default-expand-all
            node-key="Id"
            :props="defaultProps"
          />
          </div>
        </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">{{
        $t("dialogBox.cancelButtonText")
      }}</el-button>
      <el-button
        v-if="mode != 'show'"
        type="primary"
        :loading="isSaveing"
        @click="submit()"
        >{{ this.$t("dialogBox.saveButtonText") }}</el-button
      >
    </template>
  </el-dialog>
</template>

<script>
export default {
  emits: ["success", "closed"],
  data() {
    return {
      mode: "add",
      titleMap: {
        add: this.$t("dialogBox.addTitle"),
        edit: this.$t("dialogBox.modifyTitle"),
      },
      visible: false,
      isSaveing: false,
      data: [],
      authorityList: [],
      checkAll: false,
      defaultProps: {
        children: 'Children',
        label: 'Label'
      },
      //表单数据
      form: {
        RoleName: "",
        Description: "",
        featuresCodeList: "",
        AdminRoleCode: ""
      },
      //验证规则
      rules: {
        RoleName: [
          {
            required: true,
            message: this.$t("admin.adminRoleName"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    //显示
    open(mode = "add") {
      this.mode = mode;
      this.visible = true;
      this.initFeatures();
      return this;
    },
    // 全选
    handleCheckAllChange() {
      if (this.checkAll === true) {
        // debugger
        this.$refs.tree.setCheckedKeys(this.authorityList)
        this.checkedList = this.$refs.tree.getCheckedNodes()
      } else {
        this.$refs.tree.setCheckedKeys([])
      }
    },
    //表单提交方法
    submit() {
      this.$refs.dialogForm.validate(async (valid) => {
        if (valid) {
          this.isSaveing = true;
          var res = false;
          //新增或者修改
          this.form.featuresCodeList = this.$refs.tree.getCheckedKeys()
          if (this.mode === "add") {
            res = await this.$API.adminManage.createAdminRole.post(this.form);
          } else {
            res = await this.$API.adminManage.modifyAdminRole.post(this.form);
          }
          this.isSaveing = false;
          if (res == true) {
            this.$emit("success");
            this.visible = false;
            this.$message.success(this.$t("response.operateSuccess"));
          } else {
            this.$alert(res.message, this.$t("dialogBox.confirmWarningTitle"), {
              type: "error",
            });
          }
        }
      });
    },
    //表单注入数据
    async setData(data) {
      var res = await this.$API.wing.post("AdminRoleDetail", {
        AdminRoleCode: data.RoleCode
      });
      this.form.AdminRoleCode = data.RoleCode;
      this.form.Description = data.Description;
      this.form.RoleName = res.RoleName;  
      if (this.authorityList.length ===res.FeatureList.length) {
            this.checkAll = true
          } else {
            this.checkAll = false
          }
          this.$nextTick(() => {
            this.$refs.tree.setCheckedNodes(res.FeatureList)
          })
    },
    async initFeatures() {
      this.data = await this.$API.adminManage.adminFeatureList.post();
      var featureList = await this.$API.wing.post("GetAdminFeatureSelectList");
      featureList.forEach(element => {
        this.authorityList.push(element.Key)
      });
    },
  },
};
</script>

<style>
</style>
