<template>
  <h-form class="hForm" ref="formCtrl" :model="formState">
    <span class="creat-rent-title">
      <div class="red-line"></div>
      <span>{{ t('tenant.tenantAuthorization.createFunction.menuTitle') }}</span>
    </span>
    <h-form-item
      name="menuEID"
      :rules="[
        {
          required: true,
          message: t('tenant.tenantAuthorization.createFunction.menuRule'),
        },
      ]"
    >
      <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, onUnmounted } from 'vue';
import { useHttp } from '@crami/http';
import { Form as HForm, FormItem as HFormItem, TreeSelect } from '@crami/ui';
import { commonApi } from '@remote/icpx-platform/commonApi';
/* import { commonApi } from '@/api/commonApi/index'; */
import { useI18n } from '@crami/locale';

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

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

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

    const getTreeData = async () => {
      const result = await useHttp({
        url: commonApi().studioCache.getMetaInfo.url,
        method: 'post',
        params: {
          ...commonApi().studioCache.getMetaInfo.params,
          appName: props.componentProps.appCode,
          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;
    };
    const changeLogoPosition = () => {
      const doms = document.getElementsByClassName('ant-select-selector');
      if (doms.length === 0) {
        return;
      }
      const rootDOM = doms[0];
      rootDOM.style['overflow-y'] = 'scroll';
      let maxHeight = document.body.clientHeight - 320;
      if (maxHeight < 32) {
        maxHeight = 32;
      }
      rootDOM.style['max-height'] = maxHeight + 'px';
    };
    onUnmounted(() => {
      window.removeEventListener('resize', changeLogoPosition);
    });
    onMounted(() => {
      changeLogoPosition();
      window.addEventListener('resize', changeLogoPosition, false);
      getTreeData();
    });
    return {
      t,
      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>
