<template>
  <!-- <h-form class="hForm" ref="formCtrl" :model="formData">
  <h-form-item
      label="有效期至："
      name="expireTime"
      :rules="[{ required: true, message: '选择日期' }]"
    > -->
  <h-tooltip placement="top">
    <template #title>
      <span>日期清空后 视为永久有效</span>
    </template>

    <h-date-picker
      :placeholder="formData.expireTime"
      v-model="formData.expireTime"
      :disabled-date="disabledDate"
      value-format="YYYY-MM-DD"
      show-today="false"
      :bordered="false"
      :showToday="false"
      :inputReadOnly="true"
      :showTime="false"
      :allowClear="false"
      :open="formData.openCalendar"
      @change="dateChange"
      @openChange="clickCalendar"
    >
      <template #suffixIcon></template>
      <template #renderExtraFooter>
        <h-button type="link" @click="clearAll">清空</h-button>
        <h-divider type="vertical" />
        <h-button @click="OKbutton(formData.expireTime)" type="link">确定</h-button>
      </template>
    </h-date-picker>
  </h-tooltip>
  <!-- </h-form-item>
  </h-form> -->
</template>

<script lang="ts">
import { defineComponent, reactive, computed } from 'vue';
// import { useHttp } from '@crami/http';
import type { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import {
  // Form as HForm,
  // FormItem as HFormItem,
  // TreeSelect as HTreeSelect,
  DatePicker as HDatePicker,
} from '@crami/ui';
// import dayjs, { Dayjs } from 'dayjs';

/**控件对外数据*/
const formProps = {
  componentRef: {
    type: Object,
  },
  componentProps: {
    type: Object,
  },
  calendarOpen: {
    type: Boolean,
  },
};
export default defineComponent({
  name: 'RenewalApp',
  props: formProps,
  components: {
    HDatePicker,
  },
  setup: (props, { emit }) => {
    // const formCtrl = toRef(props.componentProps, 'instanceRef');
    const time = computed(() => {
      return dayjs(props.componentProps.value).format('YYYY-MM-DD');
    });

    const formData = reactive({
      expireTime: time.value == 'Invalid date' ? '暂无数据' : time.value,
      openCalendar: false,
      stopclose: false,
    });

    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: '选择日期' }],
    // };
    // TD 371 功能授权弹出框被遮住
    // const getPopupContainer = () => {
    //   return document.body;
    // };

    const clickCalendar = openChange => {
      formData.openCalendar = openChange;
      if (formData.stopclose) {
        formData.openCalendar = true;
      }
    };
    //日历日期改变
    const dateChange = date => {
      // console.log(moment(date));
      const time2 = computed(() => {
        return dayjs(date).format('YYYY-MM-DD');
      });
      formData.expireTime = time2.value;
      formData.stopclose = true;
    };
    //日历确定按钮
    const OKbutton = time => {
      emit('OKbutton', time);
      formData.openCalendar = false;
      formData.stopclose = false;
    };
    //日历清空按钮
    const clearAll = () => {
      formData.expireTime = '永久';
      // emit('OKbutton', time);
    };

    return {
      // formCtrl,
      formData,
      // config,
      time,
      OKbutton,
      dateChange,
      clearAll,
      clickCalendar,
      // customFormat: () => `有效期至: ${formData.expireTime}`,
      // getPopupContainer,
      disabledDate,
    };
  },
});
</script>

<style lang="less" scoped>
.hForm {
  height: 330px;
}
.ant-divider.ant-divider-vertical {
  margin-top: 10px;
}
</style>
