<template>
  <div>
    <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="expireTime" :rules="[{ required: true, message: '选择日期' }]">
        <h-date-picker
          placeholder="选择日期"
          v-model:value="formState.expireTime"
          :disabled-date="disabledDate"
          :getPopupContainer="getPopupContainer"
          value-format="YYYY-MM-DD"
        ></h-date-picker>
      </h-form-item>
      <span class="creat-rent-title">
        <div class="red-line"></div>
        <span>功能授权</span>
      </span>
      <h-form-item
        name="menuEID"
        :rules="[
          {
            required: true,
            message: '功能授权不能为空',
          },
        ]"
      >
        <h-b-tree-select
          @change="handleChange"
          v-bind="lazyProps"
          :getPopupContainer="getPopupContainer"
          :defaultOpen="true"
          :treeDefaultExpandAll="true"
          placeholder="请搜索层级菜单"
        ></h-b-tree-select>
      </h-form-item>
    </h-form>
    <!-- <h-b-tree
      ref="treeRef"
      v-bind="treeProps"
      :fieldNames="{ title: 'title', value: 'value', children: 'children' }"
    ></h-b-tree> -->
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRef } from 'vue';
// import { useHttp } from '@crami/http';
import { BTreeSelect as HBTreeSelect, BTree as HBTree } 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 '@/utils/commMethods';
import { useTree } from '@crami/bui-platform';
import { commonApi } from '@/api/commonApi/index';

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

export default defineComponent({
  name: 'CreateApp',
  props: formProps,
  components: {
    HForm,
    HFormItem,
    HBTreeSelect,
    HDatePicker,
    HBTree,
  },
  setup: props => {
    //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    // const [treeRef, treeProps, treeMethods] = useTree({
    //   // defaultValue: { label: 'parent 1', value: 'value 1' },

    //   // 获取根节点数据
    //   treeDataApi: {
    //     url: '/api/studio-cache/page/getMetaInfo',
    //     method: 'post',
    //     params: {
    //       project: props.componentProps?.project,
    //       appName: props.componentProps.appName,
    //       type: 'navinnercall',
    //       paramOthers: { returnJson: true },
    //     },
    //   },
    //   // afterRequest: (data: any) => {
    //   //   return {
    //   //     ...data,
    //   //   };
    //   // },
    // });
    // const treeProps_text = [];
    const qqwweer = open => {
      console.log('open', open);
    };
    //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    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.code || '';
    // 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: {
          productLine: props.componentProps?.project,
          appName: props.componentProps.appName,
          type: 'navinnercall',
          paramOthers: { returnJson: true },
        },
      },
      afterRequest: (data: any) => {
        console.log(data);

        return {
          ...data,
        };
      },
    });

    const disabledDate = (current: Dayjs) => {
      // Can not select days before today and today
      return (current && current < dayjs().startOf('day')) || current > dayjs().year(2037);
    };

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