<template>
  <span>
    <template v-if="_readonly">
      <a-range-picker v-model="value" disabled v-bind="_fieldProps" />
    </template>
    <template v-else>
      <a-range-picker
        ref="range-picker"
        dropdownClassName="range-picker"
        v-model="value"
        :disabled="disabled"
        v-bind="_fieldProps"
        v-on="$listeners"
        @panelChange="onPanelChange"
        @calendarChange="calendarChange"
        @openChange="openChange"
      >
        <span slot="renderExtraFooter" v-if="_fieldProps.isShowFooter">
          <a-button type="primary" size="small" ghost @click="onOk">确定</a-button>
        </span>
      </a-range-picker>
    </template>
  </span>
</template>
<script lang="ts">
import lodash from "lodash";
import { Component, Inject, Mixins } from "vue-property-decorator";
import { FieldBasics } from "../script";
@Component({ components: {} })
export default class extends Mixins(FieldBasics) {
  // 表单状态值
  @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.isArray(value)) {
      value = lodash.map(value, item => this.moment(this.$Mamba.Regulars.number.test(String(item)) ? lodash.toNumber(item) : item))
    }
    return value;
  }
  set value(value) {
    lodash.set(this.formState, this._name, value);
    this.onChangeValue()
  }
  // @Emit('panelChange')
  onPanelChange(event, mode) {
    this.value = event
    lodash.map(lodash.get(this.$attrs, 'panelChange'), (item: any) => {
      if (lodash.isFunction(item)) {
        item(event, mode)
      }
    })
  }
  // @Emit('calendarChange')
  calendarChange(event, mode) {
    lodash.map(lodash.get(this.$attrs, 'calendarChange'), (item: any) => {
      if (lodash.isFunction(item)) {
        item(event, mode)
      }
    })
  }
  openChange(event, mode) {
    lodash.map(lodash.get(this.$attrs, 'openChange'), (item: any) => {
      if (lodash.isFunction(item)) {
        item(event, mode)
      }
    })
  }
  onOk() {
    lodash.set(this.$refs['range-picker'], '$refs.picker.sOpen', false)
  }
  async mounted() {
    // this.onRequest();
    if (this.debug) {
      console.log("");
      console.group(`Field ~ ${this.entityKey} ${this._name} `);
      console.log(this);
      console.groupEnd();
    }
  }
}
</script>
<style lang="less" >
.range-picker {
  .ant-calendar-footer-extra {
    width: 100%;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
