<template>
  <a-col :span="colSpan ? colSpan : defaultColSpan">
    <a-form-item :label="label" :name="name" :label-col="{ style: { width: textWidth || labelWidth } }"
      :wrapper-col="{ style: { flex: 1 } }">
      <a-range-picker v-bind="$attrs" v-model:value="rangeValue" :show-time="showTime" :readonly="readonly" :disabled="see || disabled"
        :format="format" :picker="type" :placeholder="placeholder" :style="style" />
    </a-form-item>
  </a-col>
</template>

<script>
import dayjs from "dayjs";
import weekday from "dayjs/plugin/weekday";
import localeData from "dayjs/plugin/localeData";

dayjs.extend(weekday);
dayjs.extend(localeData);
dayjs.locale("zh-cn");

export default {
  name: "FormDateRange",
  inheritAttrs: false, // 禁用自动继承，手动控制透传
  emits: ["update:modelValue"],
  inject: {
    labelWidth: {
      from: "labelWidth",
      default: "90px"
    },
    defaultColSpan: {
      from: 'defaultColSpan',
      default: 12
    }
  },
  props: {
    placeholder: {
      type: [Array, String],
      default: () => ["开始时间", "结束时间"]
    },
    label: String,
    name: String,
    colSpan: { type: Number }, // 自定义列跨度
    type: {
      type: String,
      default: "date"
    },
    readonly: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    modelValue: {
      type: Object,
      default: () => ({ start: null, end: null })
    },
    showTime: {
      type: Boolean,
      default: false
    },
    format: {
      type: String,
      default: "YYYY-MM-DD"
    },
    textWidth: {
      type: String,
      default: ""
    },
    isJoin: {
      type: Boolean,
      default: false
    },
    style: { type: Object, default: () => ({ width: "100%" }) }
  },
  computed: {
    see() {
      return this.$store.forms.see;
    },
    
    rangeValue: {
      get() {
        const { start, end } = this.modelValue || {};
        return [
          start ? dayjs(start) : null,
          end ? dayjs(end) : null
        ];
      },
      set([start, end]) {
        let startStr = start ? start.format(this.format) : null;
        let endStr = end ? end.format(this.format) : null;

        if (this.isJoin && startStr && endStr) {
          startStr += " 00:00:00";
          endStr += " 23:59:59";
        }

        this.$emit("update:modelValue", {
          start: startStr,
          end: endStr
        });
      }
    }
  }
};
</script>
