<template>
    <!-- 日期时间 -->
    <el-date-picker
        v-model="formItem.value"
        :type="dateType[listItem.date.type]"
        :placeholder="listItem.placeholder"
        :format="listItem.date.type"
        :value-format="listItem.date.type"
        :picker-options="{ disabledDate }"
    ></el-date-picker>
</template>

<script>
export default {
    name: 'FormDate',
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) }
    },
    data () {
        return {
            dateType: {
                'yyyy/MM/dd HH:mm': 'datetime',
                'yyyy/MM/dd HH': 'datetime',
                'yyyy/MM/dd': 'date',
                'yyyy/MM': 'month',
                'yyyy': 'year'
            }
        }
    },
    created () {
        // 初始化选中值（1 指定，2 当天，3 日前，4 日后）
        const { value, valueType } = this.listItem.date
        if (valueType === 1) this.formItem.value = value
        else if (valueType === 2) this.formItem.value = new Date()
        else if (valueType === 3 && value) this.formItem.value = this.getDate(('-' + value) - 0)
        else if (valueType === 4 && value) this.formItem.value = this.getDate(value - 0)
    },
    methods: {
        // 获取日前日后多少天
        getDate (day) {
            const date = new Date()
            date.setDate(date.getDate() + day)
            return date
        },
        // 限制日期范围不能为过去
        disabledDate (pickerDate) {
            return this.listItem.verify.startNow ? pickerDate < Date.now() - 8.64e7 + 1 : false // 一天为 8.64e7ms
        }
    }
}
</script>

<style lang="less" scoped>
</style>
