<template>
  <div class="time-item-box" :class="{isempty: isEmpty, showext: formModel.rules.showExtBtn, islong: isLong}">
    <div class="root-select-mask" v-if="isReadOnly"></div>
    <date-time @on-change="onChange" @on-hide="onHide" clear-text="" :placeholder="formModel.rules.placeholder" v-model.trim="innerValue" :readonly="isReadOnly" :format="format" :start-date="formModel.rules.stime" :end-date="formModel.rules.etime" :min-year="1940" :name="name">
    </date-time>
    <div class="txt" v-if="formModel.rules.showExtBtn">
      <div class="select-icon" @click="emission">
        <span :class="{'active': isLong}">{{formModel.rules.txt}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { DateTime } from '../../vux'
import rootSelectMx from './mixin/select-mixin'

export default {
  name: 'za-date',
  data() {
    return {
      isEmpty: true,
      isLong: !!this.formModel.rules.isLong,
      rules: null,
      innerValueType: 'string',
      innerValue: '',
      originReadOnly: !!this.formModel.rules.readOnly || !!this.formModel.rules.disabled,
      separator: this.formModel.value ? this.formModel.value.match(/\d{4}(.*?)\d{1}/)[1] : '-',
      format: this.formModel.rules.format || 'YYYY-MM-DD'
    }
  },
  mixins: [rootSelectMx],
  props: {
    name: String,
    formModel: Object
  },
  created() {
    this.format = this.formModel.rules.format || 'YYYY' + this.separator + 'MM' + this.separator + 'DD'
  },
  computed: {
    readOnly: {
      get() {
        return !!this.formModel.rules.readOnly || !!this.formModel.rules.disabled
      },
      set(v) {
        this.isReadOnly = v
      }
    }
  },
  watch: {
    'formModel.rules': {
      deep: true,
      handler(v) {
        this.format = this.formModel.rules.format || 'YYYY' + this.separator + 'MM' + this.separator + 'DD'
        this.isReadOnly = !!this.formModel.rules.readOnly || !!this.formModel.rules.disabled
      }
    },
    innerValue(val) {
      let time = val
      if(Array.isArray(val)) {
        time = val[0]
      }
      this.separator = time ? time.match(/\d{4}(.*?)\d{1}/)[1] : '-'
      if(time === '9999' + this.separator + '1' + this.separator + '1' || time === '9999' + this.separator + '01' + this.separator + '01') {
        this.isLong = true
      }
    },
    isLong(val) {
      this.formModel.rules.isLong = val
    }
  },
  methods: {
    emission() {
      if(!this.originReadOnly) {
        this.isLong = !this.isLong
        // this.readOnly = this.isLong
        if (this.isLong) {
          this.innerValue = '9999' + this.separator + '1' + this.separator + '1'
        } else {
          this.innerValue = ''
        }
        // this.$emit('emission', {target: this.formModel.rules.emitTarget, value: this.isLong})
      }
    },
    innerModel() {
      this.isEmpty = !this.innerValue
      // mixins update
      return {
        name: this.name,
        value: this.innerValue,
        msg: this.value ? '' : (this.formModel.rules.errorMsg || this.formModel.rules.placeholder),
        isValid: (!this.formModel.rules.vRules || this.formModel.rules.vRules.indexOf('required') == -1) ? true : !!this.innerValue
      }
    }
  },
  components: {
    DateTime
  }
}
</script>
<style lang="less" scoped>
  @import '../../../assets/styles/form.less';
  .islong{
    .vux-datetime{
      visibility: hidden;
    }
    .select-icon::before {
      display: none;
    }
  }
  .showext{
    display: flex;
    .vux-datetime{
      width: 100%;
    }
  }
</style>
