<template>
  <a-col :span="colSpan ? colSpan : defaultColSpan">
    <a-form-item :label="label" :name="name" :label-col="{ style: { width: !!textWidth ? textWidth : labelWidth } }"
      :wrapper-col="{ style: { flex: 1 } }">
      <a-date-picker :value="value" :show-time="showTime" :readonly="readonly" :disabled="see || disabled"
        :format="format" :picker="type" @change="handleChange" :placeholder="placeholder" :style="style"
        v-bind="$attrs" />
    </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: "FormDate",
  inheritAttrs: false, // 禁用自动继承，手动控制透传
  inject: {
    labelWidth: {
      from: 'labelWidth',
      default: '90px'
    },
    defaultColSpan: {
      from: 'defaultColSpan',
      default: 12 // 默认一行2个
    }
  },
  computed: {
    see() {
      return this.$store.forms.see;
    }
  },
  props: {
    placeholder: { type: String, default: "" },
    label: String,
    name: String,
    colSpan: { type: Number }, // 自定义跨度
    type: { type: String, default: "date" },
    icon: String,
    readonly: { type: Boolean, default: false },
    disabled: { type: Boolean, default: false },
    modelValue: [Date, String, Number],
    showTime: { type: Boolean, default: false },
    textWidth: {
      type: String,
      default: ""
    },
    format: { type: String, default: "YYYY-MM-DD" },
    style: { type: Object, default: () => ({ width: "100%" }) }
  },
  data() {
    return {
      value: null,
    };
  },
  watch: {
    modelValue: {
      immediate: true,
      handler(val) {
        this.value = val ? dayjs(val) : null;
      }
    }
  },
  methods: {
    handleChange(data) {
      this.$emit("update:modelValue", data?.format(this.format));
    }
  }
};
</script>
