<template>
  <div>
    <RadioGroup
      v-bind="getBindRadioValue"
      @change="radioGroupChange"
      v-model:value="rangePickerValue.key"
    >
      <RadioButton v-for="item in [...radioOptions]" :value="item.key">{{ item.key }}</RadioButton>
      <RadioButton value="自定义" @click="onCustomizeClick">自定义</RadioButton>
    </RadioGroup>
    <RangePicker v-bind="getBindValue" @change="onChange" @ok="onChange" :open="showDatePicker">
      <span></span>
    </RangePicker>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, watch } from 'vue';
  import { Radio, DatePicker } from 'ant-design-vue';
  import { useAttrs } from '/@/hooks/core/useAttrs';
  import { pickerProps, PickerValueType } from './types';
  // import moment from 'moment';
  export default defineComponent({
    name: 'BzRangePicker',
    components: {
      RadioButton: Radio.Button,
      RadioGroup: Radio.Group,
      RangePicker: DatePicker.RangePicker,
    },
    props: pickerProps,
    emits: ['change', 'update:pickerValue'],
    setup(props, { emit }) {
      const attrs = useAttrs({ excludeDefaultKeys: false });

      const options = computed(() => {
        return props.radioOptions.map((d, index) => ({ id: `${d}-${index}`, value: d }));
      });

      const rangePickerValue = ref<PickerValueType>({
        key: props.pickerValue?.key,
        value: props.pickerValue?.value,
      });
      watch(
        () => props.pickerValue,
        (val) => {
          rangePickerValue.value = val as PickerValueType;
        },
        {
          immediate: true,
        },
      );
      // 组件value

      const radioGroupChange = (e: any) => {
        const value = e.target.value;
        if (value === '自定义') {
          showDatePicker.value = true;
          rangePickerValue.value = { key: value, value: null };
        } else {
          showDatePicker.value = false;
          const radio = props.radioOptions.find((d) => d.key == value);
          rangePickerValue.value = { key: value, value: radio?.setValue && radio?.setValue() };
          emit('update:pickerValue', rangePickerValue.value);
          emit('change', rangePickerValue.value);
        }
      };
      // 解决点击相同按钮 change不调用
      const onCustomizeClick = () => {
        if (showDatePicker.value === false) {
          showDatePicker.value = true;
        }
      };

      const getBindValue = computed(() => ({
        ...unref(attrs),
        'v-model:value': rangePickerValue.value.value,
      }));
      const getBindRadioValue = computed(() => ({
        ...props.radioProps,
      }));

      const onChange = (dates: any) => {
        showDatePicker.value = false;
        rangePickerValue.value = {
          key: '自定义',
          value: dates,
        };
        emit('change', rangePickerValue.value);
        emit('update:pickerValue', rangePickerValue.value);
      };
      const showDatePicker = ref(false);

      return {
        rangePickerValue,
        getBindValue,
        getBindRadioValue,
        options,
        radioGroupChange,
        onCustomizeClick,
        attrs,
        showDatePicker,

        onChange,
      };
    },
  });
</script>
