<template>
  <h-form class="hForm" ref="formCtrl" :model="formState">
    <h-form-item
      :label="t('tenant.tenantAuthorization.createApp.expireTitle')"
      name="expireTime"
      :rules="[{ required: true, message: t('tenant.tenantAuthorization.createApp.expireRule') }]"
    >
      <h-date-picker
        :placeholder="t('tenant.tenantAuthorization.createApp.expireRule')"
        v-model:value="formState.expireTime"
        :disabled-date="disabledDate"
        :getPopupContainer="getPopupContainer"
        value-format="YYYY-MM-DD"
      ></h-date-picker>
    </h-form-item>
    <h-form-item
      :label="t('tenant.tenantAuthorization.createApp.menuTitle')"
      name="menuEID"
      :rules="[
        {
          required: true,
          message: t('tenant.tenantAuthorization.createApp.menuRule'),
        },
      ]"
    >
      <h-b-tree-select
        @change="handleChange"
        v-bind="lazyProps"
        :getPopupContainer="getPopupContainer"
      ></h-b-tree-select>
    </h-form-item>
  </h-form>
</template>

<script lang="ts">
import { computed, defineComponent, onMounted, onUnmounted, reactive, ref, toRef } from 'vue';
// import { useHttp } from '@crami/http';
import { BTreeSelect as HBTreeSelect } from '@crami/bui';
import { Form as HForm, FormItem as HFormItem, DatePicker as HDatePicker } from '@crami/ui';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { getInfo, ICP_CONFIG } from '@remote/icpx-platform/utils';
/* import { getInfo, ICP_CONFIG } from '@/utils/commMethods'; */
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: 'CreateApp',
  props: formProps,
  components: {
    HForm,
    HFormItem,
    HBTreeSelect,
    HDatePicker,
  },
  setup: props => {
    const { t } = useI18n();
    const commonParams = computed(() => {
      return getInfo(ICP_CONFIG);
    });

    const formState = reactive({
      expireTime: '',
      menuEID: [],
    });
    const handleChange = (value: any) => {
      formState.menuEID = value;
    };
    const formCtrl = toRef(props.componentProps, 'instanceRef');
    const appCode = props.componentProps.appCode || '';
    // TD 371 功能授权弹出框被遮住
    const getPopupContainer = () => {
      return document.body;
    };
    const formTreeList = reactive([]);
    //  懒加载子节点 下拉树 数据
    const lazyProps = reactive({
      disabled: false,
      multiple: true,
      allowClear: true,
      treeCheckable: true,
      labelInValue: true,
      // defaultValue: { label: 'parent 1', value: 'value 1' },
      fieldNames: { value: 'key' },
      // 获取根节点数据
      treeDataApi: {
        url: commonApi().studioCache.getMetaInfo.url,
        method: 'post',
        params: {
          ...commonApi().studioCache.getMetaInfo.params,
          productLine: props.componentProps?.project,
          appName: props.componentProps.appCode,
          type: 'navinnercall',
          paramOthers: { returnJson: true },
        },
      },
      afterRequest: (data: any) => {
        return {
          ...data,
        };
      },
    });
    onMounted(() => {
      changeLogoPosition();
      window.addEventListener('resize', changeLogoPosition, false);
    });
    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);
    });
    const disabledDate = (current: Dayjs) => {
      // Can not select days before today and today
      return (current && current < dayjs().startOf('day')) || current > dayjs().year(2037);
    };

    return {
      t,
      formState,
      formCtrl,
      disabledDate,
      formTreeList,
      lazyProps,
      handleChange,
      getPopupContainer,
    };
  },
});
</script>
<!-- 解决空白区域太高的问题 -->
<!-- <style lang="less" scoped>
.hForm {
  height: 400px;
}
</style> -->
