<template>
  <h-form class="hForm" ref="formCtrl" :model="formData">
    <h-form-item
      :label="t('tenant.tenantAuthorization.renewalApp.expireTitle')"
      name="expireTime"
      :rules="[{ required: true, message: t('tenant.tenantAuthorization.renewalApp.expireTime') }]"
    >
      <h-date-picker
        :placeholder="t('tenant.tenantAuthorization.renewalApp.expireTime')"
        v-model:value="formData.expireTime"
        :disabled-date="disabledDate"
        :getPopupContainer="getPopupContainer"
        value-format="YYYY-MM-DD"
      ></h-date-picker>
    </h-form-item>
  </h-form>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRef } from 'vue';
import { useHttp } from '@crami/http';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import { useI18n } from '@crami/locale';

import {
  Form as HForm,
  FormItem as HFormItem,
  TreeSelect as HTreeSelect,
  DatePicker as HDatePicker,
} from '@crami/ui';

/**控件对外数据*/
const formProps = {
  componentRef: {
    type: Object,
  },
  componentProps: {
    type: Object,
  },
};
export default defineComponent({
  name: 'RenewalApp',
  props: formProps,
  components: {
    HForm,
    HFormItem,
    HDatePicker,
  },
  setup: props => {
    const { t } = useI18n();
    const formCtrl = toRef(props.componentProps, 'instanceRef');
    const time = props.componentProps.time || '';
    const formData = reactive({
      expireTime: time,
    });

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

    const config = {
      rules: [
        {
          type: 'string' as const,
          required: true,
          message: t('tenant.tenantAuthorization.renewalApp.expireTime'),
        },
      ],
    };
    // TD 371 功能授权弹出框被遮住
    const getPopupContainer = () => {
      return document.body;
    };
    return {
      t,
      formCtrl,
      formData,
      config,

      getPopupContainer,
      disabledDate,
    };
  },
});
</script>

<style lang="less" scoped>
.hForm {
  height: 330px;
}
</style>
