<template>
    <!-- 日期区间 -->
    <group gutter="0">
        <datetime
            v-bind="start"
            v-model="formItem.value.start"
            :format="listItem.date.type"
            :placeholder="listItem.placeholder"
            class="form-item"
            :info.prop="info(listItem.title, { value: formItem.value.start, hide: formItem.hide }, subform.uuid && subform.title)"
            @on-change="verify().catch(() => {})"
        >
            <template slot="title">
                <div class="label">
                    <i :class="{ required: listItem.verify.required }"></i>
                    <span class="item-title" @click.stop.prevent>{{ listItem.title }}</span>
                    <i class="tips" data-field="start"></i>
                </div>
            </template>
        </datetime>
        <datetime
            v-bind="end"
            v-model="formItem.value.end"
            :format="listItem.date.type"
            :placeholder="listItem.placeholder2"
            class="form-item"
            :info.prop="info(listItem.title2, { value: formItem.value.end, hide: formItem.hide }, subform.uuid && subform.title)"
            @on-change="verify().catch(() => {})"
        >
            <template slot="title">
                <div class="label">
                    <i :class="{ required: listItem.verify.required }"></i>
                    <span class="item-title" @click.stop.prevent>{{ listItem.title2 }}</span>
                    <i class="tips" data-field="end"></i>
                </div>
            </template>
        </datetime>
        <cell
            class="empty-label form-item"
            :title="listItem.date.title"
            :info.prop="info(listItem.date.title, { value: formItem.value.result, hide: formItem.hide }, subform.uuid && subform.title)"
            v-if="listItem.date.time"
        >
            <span :class="{ value: formItem.value.result }">
                {{ formItem.value.result ? formItem.value.result + formItem.value.type : '-' }}
            </span>
        </cell>
    </group>
</template>

<script>
import common from '@/common/formRender/mixin/common.js'
import { differ } from '@/assets/utils/time.js'
import { Group, Datetime, Cell, dateFormat } from 'vux'
export default {
    name: 'FormDateRange',
    components: { Group, Datetime, Cell },
    props: {
        listItem: { type: Object, default: () => ({}) },
        formItem: { type: Object, default: () => ({}) },
        subform: { type: Object, default: () => ({}) }
    },
    mixins: [common],
    data () {
        return {
            time: '', // 时长

            // 单位
            unit: {
                '天': 'd',
                '小时': 'h',
                '分钟': 'm'
            }
        }
    },
    computed: {
        // 限制开始日期的范围
        start () {
            const start = {}
            const end = new Date(this.formItem.value.end)
            if (this.listItem.verify.startNow) start['start-date'] = dateFormat(Date.now(), 'YYYY/MM/DD')
            if (end > 0) start['end-date'] = dateFormat(end, 'YYYY/MM/DD')
            return start
        },
        // 限制结束日期的范围
        end () {
            const end = {}
            const start = new Date(this.formItem.value.start)
            if (this.listItem.verify.startNow) {
                const max = Math.max(start > 0 ? start : 0, Date.now())
                end['start-date'] = dateFormat(max, 'YYYY/MM/DD')
            } else if (start > 0) {
                end['start-date'] = dateFormat(start, 'YYYY/MM/DD')
            }
            return end
        }
    },
    watch: {
        // 监听计算时长
        'formItem.value.start': function () {
            this.calcTime()
        },
        'formItem.value.end': function () {
            this.calcTime()
        },
        // 同步时长
        time (time) {
            if (this.listItem.date.time) this.formItem.value.result = time
        }
    },
    created () {
        this.verifyInit()
        this.listItem.date.type = this.listItem.date.type.replace(/yyyy|dd/g, res => res.toUpperCase())
    },
    methods: {
        // 计算时长
        calcTime () {
            if (this.listItem.date.time) {
                const { start, end } = this.formItem.value
                const startTime = new Date(start).getTime()
                const endTime = new Date(end).getTime()
                if (startTime > 0 && endTime > 0) {
                    if (endTime - startTime < 0) {
                        this.time = ''
                    } else if (endTime - startTime === 0) {
                        this.time = '0'
                    } else {
                        const format = this.unit[this.listItem.date.unit]
                        if (!this.listItem.date.removeRest) {
                            this.time = format ? differ({ start, end, format, digit: 1 }) - 0 + '' : ''
                        } else {
                            this.$api.commonApi.formJudgeLeaveDay({
                                start_time: start,
                                end_time: end,
                                contains_resttime: 1, // 0 包含休息时间, 1 排除休息时间
                                type: format === 'd' ? 0 : format === 'h' ? 1 : 2 // 0 天, 1 小时, 2 分钟
                            }).then(res => {
                                this.time = res.data.Status ? res.data.Data + '' : ''
                            })
                        }
                    }
                }
            }
        },
        // 获取校验规则
        rules (type, title) {
            const rules = []
            if (this.listItem.verify.required) rules.push(this.required(title)) // mixin
            if (type === 'start') rules.push(this.dateStart())
            if (type === 'end') rules.push(this.dateEnd())
            return rules
        },
        // 开始时间校验
        dateStart () {
            return {
                trigger: ['change', 'blur'],
                validator: (rule, value, callback) => {
                    const start = new Date(this.formItem.value.start)
                    const end = new Date(this.formItem.value.end)
                    const { title, title2 } = this.listItem
                    start > 0 && end > 0 && start > end
                        ? callback(new Error(title + '不能晚于' + title2))
                        : callback()
                }
            }
        },
        // 结束时间校验
        dateEnd () {
            return {
                trigger: ['change', 'blur'],
                validator: (rule, value, callback) => {
                    const start = new Date(this.formItem.value.start)
                    const end = new Date(this.formItem.value.end)
                    const { title, title2 } = this.listItem
                    start > 0 && end > 0 && start > end
                        ? callback(new Error(title2 + '不能早于' + title))
                        : callback()
                }
            }
        },
        // 校验初始化
        verifyInit () {
            this.validator = new this.Schema({
                start: this.rules('start', this.listItem.title),
                end: this.rules('end', this.listItem.title2)
            })
        },
        // 校验
        verify () {
            return this.validate(this.formItem.value)
        }
    }
}
</script>

<style lang="less" scoped>
.el-date-editor {
    width: 100%;
}
.time /deep/ .el-form-item__label::before {
    opacity: 0;
}
</style>
