<template>
    <div class="app-container">
        <el-form :model="form" label-width="120px">
            <el-form-item label="网络预定开关">
                <el-switch v-model="form.yd" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
            <el-form-item label="预定时间" v-if="form.timeList.length">
                <div class="time_row" v-for="(item, index) in form.timeList" :key="index">
                    <el-time-picker is-range v-model="item.time" range-separator="至" start-placeholder="开始时间"
                        end-placeholder="结束时间" placeholder="选择时间范围">
                    </el-time-picker>
                    <i class="icon el-icon-delete" @click="form.timeList.splice(index, 1)"></i>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button plain icon="el-icon-plus" @click="form.timeList.push({ time: [] })">添加时间段</el-button>
                <div class="tips">注：结束时间不能小于开始时间</div>
            </el-form-item>
            <el-form-item label="允许预约天数">
                <el-input-number v-model="form.dayMax" controls-position="right" :min="0"></el-input-number>
                <div class="tips">注：最多预约几天后的日期</div>
            </el-form-item>
            <el-form-item label="允许预约天数">
                <el-input type="textarea" v-model="form.info" placeholder="充值说明" style="width: 500px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    data() {
        return {
            form: {
                yd: 0,
                timeList: [],
                dayMax: 3,
                info: ''
            }
        }
    }
}
</script>

<style scoped lang="scss">
.time_row {
    display: flex;
    align-items: center;

    &:not(:first-child) {
        margin-top: 20px;
    }

    .icon {
        margin-left: 20px;
    }
}
</style>