<template>
  <h-modal
    id="PermissionSubType-queryModal"
    v-model:visible="visible"
    :title="t('permission.dataPermissionPolicy.dataPermissionPolicy.objectType')"
    :cancelText="t('platform.common.cancel')"
    :okText="t('platform.common.save')"
    width="886px"
    wrap-class-name="full-modal"
    :destroyOnClose="true"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
    class="permissionSubType-modal"
  >
    <h-b-tree
      ref="demoHbtreeRef"
      v-bind="props"
      v-model:expandKeys="props.expandKeys"
      v-model:selectedKeys="props.selectedKeys"
      :checkable="false"
      :radioCheckable="true"
      :check-strictly="true"
      :draggable="false"
      :show-header="true"
      :show-search="true"
      :show-tool-bar="false"
      :show-line="false"
      :fieldNames="{ title: 'title', key: 'value1' }"
      :placeholder="
        t('permission.dataPermissionPolicy.dataPermissionPolicy.permissionSubType.placeholder')
      "
    />
  </h-modal>
</template>
<script lang="ts">
import { defineComponent, ref, nextTick } from 'vue';
import { HModal, message } from '@crami/ui';
import { useTree } from '@crami/bui-platform';
import { useI18n } from '@crami/locale';
import { getInfo, ICP_CONFIG } from '@remote/icpx-platform/utils';
/* import { getInfo, ICP_CONFIG } from '@/utils/commMethods'; */

export default defineComponent({
  name: 'PermissionSubType',
  components: { HModal },
  emits: ['permissionSubTypeFunSuccess'],
  setup(_, { emit }) {
    const { t } = useI18n();
    const visible = ref(false);
    const show = data => {
      visible.value = true;
      nextTick(() => {
        methods.refresh().then(() => {
          methods.defaultHandle();
          data?.value && methods.setSelectedKeys([data?.value]);
        });
      });
    };

    const paraList = {
      loadAllStructure: false,
      lang: getInfo(ICP_CONFIG)?.lang,
      connect: getInfo(ICP_CONFIG)?.connect,
      companyId: getInfo(ICP_CONFIG)?.companyId,
    };

    const [demoHbtreeRef, props, methods] = useTree({
      pageName: 'ObjectTreeNode',
      treeDataApi: {
        url: '/api/dataperservice/dataPerService/getRuleModelTreeData',
        method: 'post',
        params: {
          paraList: JSON.stringify(paraList),
          lang: getInfo(ICP_CONFIG)?.lang,
          connect: getInfo(ICP_CONFIG)?.connect,
          companyId: getInfo(ICP_CONFIG)?.companyId,
          loadAllStructure: false,
        },
      },
      immediate: false,
      defaultSelected: false,
      afterRequest: (data: any) => {
        return methods.addIsLeaf(data);
      },
    });

    const handleOk = () => {
      const selectData = methods.getSelectedData() || [];
      if (selectData?.length == 0) {
        message.warning(
          t('permission.dataPermissionPolicy.dataPermissionPolicy.permissionSubType.warningTip'),
        );
        return;
      } else {
        const title = selectData[0]?.title || '';
        const value1 = selectData[0]?.value1 || '';
        emit('permissionSubTypeFunSuccess', title && value1 ? { label: title, value: value1 } : '');
        handleCancel();
      }
    };
    const handleCancel = () => {
      visible.value = false;
      methods?.setSelectedKeys([]);
    };
    return {
      t,
      handleOk,
      handleCancel,
      visible,
      show,
      demoHbtreeRef,
      props,
    };
  },
});
</script>
<style lang="less">
.permissionSubType-modal {
  .ant-modal-body {
    height: 70vh;
    overflow: hidden;
    & > div {
      padding-bottom: 10px;
      overflow: hidden;
    }
  }
}
</style>
