<template>
  <div>
    <el-date-picker
      v-model="currentValue"
      :type="type"
      :align="align"
      :clearable="clearable"
      :value-format="valueFormat"
      :placeholder="placeholder"
      :start-placeholder="startplaceholder"
      :end-placeholder="endplaceholder"
      :disabled="disabled"
      :unlink="unlink"
      :unlink-panels="unlinkpanel"
      :range-separator="separator"
      :picker-options="pickerOptions">
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: 'DatePicker',
  data () {
    return {
    }
  },
  props: {
    valueFormat: {
      type: String,
      default: function () {
        return 'yyyy-MM-dd'
      }
    },
    // v-model绑定的数据
    value: {
      type: [Array, String, Number],
      default: function () {
        return null
      }
    },
    align: {
      type: String,
      default: function () {
        return 'right'
      }
    },
    type: {
      type: String,
      default: function () {
        return 'date'
      }
    },
    unlink: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    // 是否禁用修改
    disabled: {
      type: Boolean,
      default: function () {
        return false
      }
    },
    // 是否可清除
    clearable: {
      type: Boolean,
      default: function () {
        return true
      }
    },
    // 默认提示语
    placeholder: {
      type: String
    },
    xhr: {
      type: Function,
      default: function () {
        return null
      }
    },
    pickerOptions: {
      type: Object,
      default: function () {
        return null
      }
    }
  },
  watch: {
    placeholder: function (value) {
      if (value) {
      }
    }
  },
  computed: {
    // 转换绑定的选中数据，与v-model同步
    currentValue: {
      get: function () {
        return this.value
      },
      set: function (value) {
        this.$emit('input', value)
      }
    },
    unlinkpanel: {
      get: function () {
        return this.unlink
      }
    },
    startplaceholder: {
      get: function () {
        if (this.placeholder.indexOf('|') > 0) {
          return this.placeholder.split('|')[0]
        } else {
          return this.placeholder
        }
      }
    },
    endplaceholder: {
      get: function () {
        if (this.placeholder.indexOf('|') > 0) {
          return this.placeholder.split('|')[2]
        } else {
          return this.placeholder
        }
      }
    },
    separator: {
      get: function () {
        if (this.placeholder.indexOf('|') > 0) {
          return this.placeholder.split('|')[1]
        } else {
          return '-'
        }
      }
    }
  },
  methods: {
    // selectChanged (val, row) {
    //   this.$emit('selectChanged', val, this.name, row)
    // },
    // loaded (val) {
    //   let $this = this
    //   let selectItemts = null
    //   if (val.length > 0) {
    //     if (!this.multiple) {
    //       selectItemts = val.find(it => {
    //         return $this.currentValue === it[$this.selectedField[0]]
    //       })
    //     } else {
    //       selectItemts = val.filter(it => {
    //         var isTrue = false
    //         $this.currentValue.forEach(kit => {
    //           if (kit === it[$this.selectedField[0]]) {
    //             isTrue = true
    //           }
    //         })
    //         return isTrue
    //       })
    //     }
    //     this.$emit('selectChanged', '', this.name, selectItemts)
    //   }
    // }
  }
}
</script>

<style scoped>

</style>
