<template>
  <span>
    <template v-if="_readonly">
      <span v-text="value"></span>
    </template>
    <template v-else-if="_fieldProps.mode">
      <div @click.stop.prevent>
        <a-date-picker
          ref="date-picker"
          dropdownClassName="date-picker"
          v-model="value"
          :placeholder="_placeholder"
          :disabled="disabled"
          :open="open"
          v-bind="_fieldProps"
           v-on="$listeners"
          @panelChange="onPanelChange"
          @openChange="onOpenChange"
        >
          <!-- <span slot="renderExtraFooter"><a-button type="primary" size="small" ghost @click="onOk">确定</a-button></span>   -->
        </a-date-picker>
      </div>
    </template>
    <template v-else>
      <a-date-picker
        v-model="value"
        :placeholder="_placeholder"
        :disabled="disabled"
         v-on="$listeners"
        v-bind="_fieldProps"
      />
    </template>
  </span>
</template>
<script lang="ts">
import lodash from "lodash";
import { Component, Inject, Mixins, Ref } from "vue-property-decorator";
import { FieldBasics } from "../script";
@Component({ components: {} })
export default class extends Mixins(FieldBasics) {
  open = false
  @Ref('date-picker') datePicker
  // 表单状态值
  @Inject() readonly declare formState;
  // 自定义校验状态
  // @Inject() readonly formValidate;
  // 实体
  @Inject() readonly declare PageEntity;
  // 表单类型
  @Inject({ default: "" }) readonly declare formType;
  get value() {
    let value = lodash.get(this.formState, this._name)
    if (value && (lodash.isString(value) || lodash.isNumber(value))) {
      value = this.moment(this.$Mamba.Regulars.number.test(String(value)) ? lodash.toNumber(value) : value)
    }
    return value;
  }
  set value(value) {
    lodash.set(this.formState, this._name, value);
    this.onChangeValue()
    console.log(this.datePicker)
  }
  onPanelChange(event) {
    this.value = event
    this.onOpenChange(false)
  }
  onOpenChange(event) {
    this.open = event
  }
  async mounted() {
    if (this.debug) {
      console.log("");
      console.group(`Field ~ ${this.entityKey} ${this._name} `);
      console.log(this);
      console.groupEnd();
    }
  }
}
</script>
<style lang="less">
.date-picker {
  .ant-calendar-footer-extra {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
.ant-calendar-picker {
  width: 100%;
}
</style>
