<template>
  <h-form class="hForm" ref="formCtrl" :model="formState">
    <span class="creat-rent-title">
      <div class="red-line"></div>
      <span>功能授权</span>
    </span>
    <h-form-item
      name="menuEID"
      :rules="[
        {
          required: true,
          message: '功能授权不能为空',
        },
      ]"
    >
      <tree-select
        :treeCheckable="true"
        v-model:value="formState.menuEID"
        :treeData="formTreeList"
        :getPopupContainer="getPopupContainer"
      ></tree-select>
    </h-form-item>
  </h-form>
</template>

<script lang="ts">
import { defineComponent, reactive, toRef, onMounted, ref, computed } from 'vue';
import { useHttp } from '@crami/http';
import { Form as HForm, FormItem as HFormItem, TreeSelect } from '@crami/ui';
import { getInfo, ICP_CONFIG } from '@/utils/commMethods';
import { commonApi } from '@/api/commonApi/index';

/**控件对外数据*/
const formProps = {
  componentProps: {
    type: Object,
  },
};

export default defineComponent({
  name: 'CreateFunction',
  props: formProps,
  components: {
    HForm,
    HFormItem,
    TreeSelect,
  },
  setup: props => {
    const formCtrl = toRef(props.componentProps, 'instanceRef');
    const appCode = props.componentProps.code || '';
    const appId = props.componentProps.appId || '';
    const eId = props.componentProps.eId || '';

    const commonParams = computed(() => {
      return getInfo(ICP_CONFIG);
    });

    const formTreeList = ref([]);
    const formState = reactive({
      menuEID: [],
    });
    // TD 371 功能授权弹出框被遮住
    const getPopupContainer = () => {
      return document.body;
    };
    const dataDefault = reactive({
      items: [
        {
          text: '取消',
        },
        {
          text: '确定',
          options: {
            style: { border: 0, 'background-color': '#4A556B', color: '#fff' },
          },
        },
      ],
    });

    const getTreeData = async () => {
      const result = await useHttp({
        url: commonApi().studioCache.getMetaInfo.url,
        method: 'post',
        params: {
          appName: props.componentProps.appName,
          type: 'navinnercall',
          paramOthers: { returnJson: true },
          productLine: props.componentProps?.project,
        },
      });
      const data = result.data;
      formTreeList.value = data;
      getMenuData();
    };

    const getMenuData = async () => {
      const result = await useHttp({
        url: '/api/system/tenant/getMenuPer',
        method: 'post',
        params: {
          appEID: appId,
          tenantEID: eId,
        },
      });
      const data = result.data.data;
      formState.menuEID = data;
    };

    const getDeepList = (deepList: Array<string | number>, treeData: any[]) => {
      treeData?.forEach(item => {
        if (item?.children?.length) {
          getDeepList(deepList, item.children);
        } else {
          deepList.push(item);
        }
      });
      return deepList;
    };

    onMounted(() => {
      getTreeData();
    });
    return {
      formCtrl,
      formState,

      dataDefault,
      formTreeList,
      getDeepList,
      getPopupContainer,
    };
  },
});
</script>

<style lang="less" scoped>
.creat-rent-title {
  font-size: 16px;
  padding: 3px;
}
.red-line {
  width: 4px;
  height: 12px;
  background: linear-gradient(180deg, #f55448 0%, #ff8076 100%);
  float: left;
  margin-top: 7px;
  margin-right: 7px;
}
</style>
