<template>
  <el-date-picker
    v-if="true"
    v-model="date"
    :picker-options="componentPickerOptions"
    :format="format"
    :value-format="valueFormat"
    v-bind="$attrs"
    v-on="$listeners"
  >
  </el-date-picker>
  <el-date-picker
    v-else
    v-model="date"
    type="date"
    placeholder="选择日期"
  >
  </el-date-picker>
</template>

<script>
import { utcDatePickerOptions } from './datePickerOption.js'
export default {
  name: 'BiDatePicker',
  props: {
    pickerOption: {
      type: Object,
      default: () => {
        return {}
      }
    },
    format: {
      type: String,
      default: 'yyyy-MM-dd'
    },
    valueFormat: {
      type: String,
      default: 'yyyy-MM-dd'
    },
    utc: {
      type: Number,
      default: 8
    },
    value: {
      type: [String, Array],
      default: ''
    }
  },
  computed: {
    date: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
        this.$emit('change', val)
      }
    },
    componentPickerOptions() {
      const type = this.$attrs.type
      const datePickerOption = utcDatePickerOptions(this.utc)
      const defaultPickerOption = Object.assign({}, datePickerOption[type])
      if (type === 'daterange') {
        return Object.assign(defaultPickerOption, this.pickerOption)
      } else if (type === 'monthrange') {
        return Object.assign(defaultPickerOption, this.pickerOption)
      } else if (type === 'datetimerange') {
        return Object.assign(defaultPickerOption, this.pickerOption)
      } else {
        return this.pickerOption
      }
    }
  }
}
</script>
<style>
.free-button {
  margin: 10px 0;
}
</style>
