<template>
  <div v-if="selfType !== 'view' ">
    <el-date-picker v-if="element.render === 'datetime'" v-model="modelData[element.mapper]" :style="selfStyle" v-bind="element.props" align="center"
                    type="datetime" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="dateOptions" style="width: 100%"  @change="() => { dispatchEvent('change')}" />
    <el-date-picker v-else-if="element.render === 'daterange'" v-model="modelData[element.mapper]" :style="selfStyle" v-bind="element.props" align="center"
                    type="daterange" value-format="yyyy-MM-dd" :picker-options="dateRangeOptions" style="width: 100%"  @change="() => { dispatchEvent('change')}" />
    <el-date-picker v-else-if="element.render === 'datetimerange'" v-model="modelData[element.mapper]" :style="selfStyle" v-bind="element.props" align="center"
                    type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="dateRangeOptions" style="width: 100%" @change="() => { dispatchEvent('change')}" />
    <el-date-picker v-else v-model="modelData[element.mapper]" :style="selfStyle" v-bind="element.props" align="center"
                    type="date" value-format="yyyy-MM-dd" :picker-options="dateOptions" style="width: 100%"  @change="() => { dispatchEvent('change')}" />
  </div>
  <div v-else :style="selfStyle">
    {{ viewValue }}
  </div>
</template>

<script>
import LabBase from "../../mixins/LabBase";
import LabEvent from "../../mixins/LabEvent";

export default {
  name: "LabDate",
  mixins: [LabBase,LabEvent],
  data () {
    return {
      dateOptions: {
        shortcuts: [{
          text: '今天',
          onClick(picker) {
            picker.$emit('pick', new Date());
          }
        }, {
          text: '昨天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit('pick', date);
          }
        }, {
          text: '一周前',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', date);
          }
        }]
      },
      dateRangeOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
    }
  },
  computed: {
    viewValue(){
      const { mapper, render } = this.element
      const value = this.modelData[mapper]
      if (render.includes('range')) {
        const list = this.$Util.toArray(value)
        if (list.length === 2) {
          return `${list[0]} ~ ${list[1]}`
        }
      }
      return value
    }
  },
  created() {
    this.$LabRender.autoFill(this.element, this)
    const { mapper, render } = this.element
    if (render.includes('range')) {
      this.$set(this.modelData, mapper, this.$Util.toArray(this.modelData[mapper]))
    }
  }
}
</script>

<style scoped>

</style>
