<template>
    <!-- 日期区间 -->
    <div>
        <basic-edit two></basic-edit>
        <type-edit
            title="日期类型"
            :list="dateList"
            v-model="formItem.date.type"
        ></type-edit>
        <div>
            <div class="title">自动计算时长：</div>
            <el-checkbox v-model="formItem.date.time">开启</el-checkbox>
            <div class="time" v-if="formItem.date.time">
                <div>
                    标题：
                    <el-input v-model="formItem.date.title" v-bind="$store.state.form.titleAttr"></el-input>
                </div>
                <div>
                    单位：
                    <el-radio-group v-model="formItem.date.unit">
                        <el-radio-button
                            v-for="(item, index) in unitList"
                            :label="item"
                            :key="index"
                        >按{{ item }}</el-radio-button>
                    </el-radio-group>
                </div>
                <el-checkbox v-model="formItem.date.removeRest">排除休息时间</el-checkbox>
            </div>
        </div>
        <verify-edit start-now></verify-edit>
    </div>
</template>

<script>
export default {
    name: 'FormDateRange',
    components: {
        BasicEdit: () => import('@/common/formDesign/components/formEdit/components/BasicEdit'),
        TypeEdit: () => import('@/common/formDesign/components/formEdit/components/TypeEdit'),
        VerifyEdit: () => import('@/common/formDesign/components/formEdit/components/VerifyEdit')
    },
    data () {
        return {
            formItem: this.$store.state.form.formItem,
            dateList: [
                { name: '年-月-日-时-分', value: 'yyyy/MM/dd HH:mm' },
                // { name: '年-月-日-时', value: 'yyyy/MM/dd HH' }, // 业务不需要暂时隐藏
                { name: '年-月-日', value: 'yyyy/MM/dd' },
                { name: '年-月', value: 'yyyy/MM' },
                { name: '年', value: 'yyyy' }
            ],
            unitList: ['天', '小时', '分钟']
        }
    },
    created () {
        this.init()
    },
    methods: {
        // 初始化
        init () {
            if (!this.formItem.date) {
                this.$set(this.formItem, 'date', {
                    type: 'yyyy/MM/dd HH:mm',
                    time: false,
                    title: '时长',
                    unit: '天',
                    removeRest: false
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.time {
    font-size: 14px;
    padding-left: 20px;
    & > div {
        display: flex;
        line-height: 32px;
        white-space: nowrap;
        margin: 10px 0;
    }
}
.el-radio, .el-checkbox {
    display: block;
    margin-top: 10px;
}
.el-radio-group {
    width: 100%;
}
</style>
