<template>
  <a-drawer :open="visible" title="权限配置" width="560">
    <a-tree
      style="padding: 0 6px"
      checkable
      checkStrictly
      show-line="true"
      :tree-data="state.powers"
      :replace-fields="state.powerReplaceFields"
      v-model:checkedKeys="state.checkedPowerIds"
    />
    <template #footer>
      <a-button @click="cancel">取消</a-button>
      <a-button type="primary" @click="submit">保存</a-button>
    </template>
  </a-drawer>
</template>
<script>
import { message } from "@hwork/ant-design-vue";
import { tree as powerTree } from "@/api/module/power";
import { power, give } from "@/api/module/tenant";
import { defineComponent, reactive, ref, watch } from "vue";
export default defineComponent({
  props: {
    visible: {
      type: Boolean,
    },
    record: {
      type: Object,
    },
  },
  emit: ["close"],
  setup(props, context) {
    const state = reactive({
      powers: [],
      checkedPowerIds: { checked: [] },
      powerReplaceFields: { key: "id" },
    });

    const loadPower = async () => {
      var response = await powerTree();
      state.powers = response.data;
    };

    /// 监听数据
    watch(props, (props) => {
      let powerIds = [];
      power({ tenantId: props.record.id }).then((response) => {
        response.data.forEach((element) => {
          powerIds.push(element.id);
        });
        state.checkedPowerIds = powerIds;
      });
    });

    loadPower();

    const submit = (e) => {
      give({
        tenantId: props.record.id,
        powerIds: state.checkedPowerIds.checked
          ? state.checkedPowerIds.checked
          : state.checkedPowerIds,
      }).then((response) => {
        if (response.success) {
          message.success({ content: "保存成功", duration: 1 }).then(() => {
            cancel();
          });
        } else {
          message.error({ content: "保存失败", duration: 1 }).then(() => {
            cancel();
          });
        }
      });
    };

    const cancel = (e) => {
      context.emit("close", false);
    };

    return {
      state,
      submit,
      cancel,
    };
  },
});
</script>
