<template>
  <div class="qx-dialog">
    <el-dialog title="分配功能权限" width="500px" :model-value="modelValue" :before-close="closed">
      <el-tree ref="treeRef" :data="allPermission" :props="defaultProps" node-key="id" show-checkbox default-expand-all
        :check-strictly="true" @check="checkeTree">
      </el-tree>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="onComfirm"><el-icon>
              <DocumentChecked />
            </el-icon>
            <span>保存</span> </el-button>
          <el-button @click="closed"> <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span></el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { defineProps, watch, ref, getCurrentInstance, nextTick } from "vue";
const { proxy } = getCurrentInstance();
const props = defineProps({
  modelValue: {
    type: Boolean,
    required: true
  },
  roleId: {
    type: String,
    required: true
  }
});
const allPermission = ref([]);
const treeRef = ref(null);
//属性结构配置
const defaultProps = {
  label: "modelName"
};
const emits = defineEmits(["close"]);
const closed = () => {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      emits("close");
    })
    .catch(() => {
      // catch error
    })

};
const onComfirm = () => {
  let params = {
    roleId: props.roleId,
    modelCodes: treeRef.value.getCheckedKeys()
  };
  postApi(params, "/mosty-jcgl/miniappModel/updateRoleModel")
    .then((res) => {
      ElMessage.success("角色功能权限修改成功");
      emits("close");
    })
    .catch((err) => {

    });
};
const allPermissionl = ref([]);
const getRolePermission = () => {
  getApi(
    { roleId: props.roleId },
    "/mosty-jcgl/miniappModel/getModelByRoleId"
  ).then((res) => {
    allPermission.value = res;
    let checkedKeys = []
    for (let i = 0; i < allPermission.value.length; i++) {
      if (allPermission.value[i].isCheck) {
        checkedKeys.push(allPermission.value[i].modelCode);
      }
      if (allPermission.value[i].modelType == '01') {
        allPermission.value[i].modelName = allPermission.value[i].modelName + '（首页）'
      }
      if (allPermission.value[i].modelType == '02') {
        allPermission.value[i].modelName = allPermission.value[i].modelName + '（个人中心）'
      }
    }
    treeRef.value.setCheckedKeys(checkedKeys);
  });
};
watch(
  () => props.roleId,
  (val) => {
    if (val) {
      getRolePermission();
    }
  },
  {
    immediate: true,
    deep: true
  }
);
// 选中子节点，默认选中父节点
const checkeTree = (data) => {
  let thisNode = treeRef.value.getNode(data.id);
  const keys = treeRef.value.getCheckedKeys();
  if (thisNode.checked) {
    for (let i = thisNode.level; i > 1; i--) {
      if (!thisNode.parent.checked) {
        thisNode = thisNode.parent;
        keys.push(thisNode.data.modelCode);
      }
    }
  }
  treeRef.value.setCheckedKeys(keys);
};
</script>
<style lang="scss" scoped>
.el-dialog {
  height: 450px !important;
}
</style>
