<template>
    <div>
        <el-card class="default-main mb10 mr0">
            <template #header>
                <div class="card-header">
                    <span>短信配置</span>
                </div>
            </template>
            <div :style="height">
                <div>
                    <div class="title">短信发送设置</div>
                    <el-form :model="form" inline label-width="100px" class="mb10 ml30 mt20">
                        <el-form-item label="短信发送功能">
                            <el-select v-model="form.sms" style="width: 100px" filterable>
                                <el-option
                                    v-for="item in list[0]"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="事件扫描间隔">
                            <el-select v-model="form.interval" style="width: 100px" filterable>
                                <el-option
                                    v-for="item in list[1]"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="离线数据时间">
                            <el-select v-model="form.time" style="width: 100px" filterable>
                                <el-option
                                    v-for="item in list[2]"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <div class="title">短信发送时间段设置</div>
                    <div class="mb20 ml30 checkbox">
                        <el-checkbox-group v-model="form.sendTime">
                            <el-checkbox
                                v-for="item in timePeriod"
                                class="mt10"
                                :key="item.start + item.end"
                                :label="`${item.start} - ${item.end}`"
                                border
                            />
                        </el-checkbox-group>
                        <el-button type="primary" icon="el-icon-Plus" @click="addTime" class="mt10"></el-button>
                    </div>
                </div>
                <div>
                    <div class="title">类型设置</div>
                    <div class="mb20 ml30 checkbox">
                        <el-checkbox-group v-model="form.type">
                            <el-checkbox
                                v-for="item in typeList"
                                class="mt10"
                                :key="item.label"
                                :label="item.label"
                                border
                            />
                        </el-checkbox-group>
                        <el-button type="primary" icon="el-icon-Plus" @click="addType" class="mt10"></el-button>
                    </div>
                </div>
                <el-divider />
                <div style="text-align: center">
                    <el-button type="primary" icon="el-icon-Tools" @click="addTime" class="mt10">设置</el-button>
                </div>
            </div>
        </el-card>
        <!-- 时间范围 -->
        <el-dialog draggable v-model="timeFlag" title="添加时间范围模版" width="300">
            <div>
                <span class="mr10">起始时间</span>
                <el-time-select
                    v-model="startTime"
                    style="width: 200px"
                    :max-time="endTime"
                    placeholder="起始时间"
                    start="00:00"
                    step="1:00"
                    end="23:00"
                />
            </div>
            <div class="mt10">
                <span class="mr10">结束时间</span>
                <el-time-select
                    v-model="endTime"
                    style="width: 200px"
                    :min-time="startTime"
                    placeholder="结束时间"
                    start="00:00"
                    step="1:00"
                    end="23:00"
                />
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="timeFlag = false">取消</el-button>
                    <el-button type="primary" @click="determineTheTime">确定</el-button>
                </div>
            </template>
        </el-dialog>
        <!-- 添加类型模版 -->
        <el-dialog draggable v-model="typeFlag" title="添加类型模版" width="300">
            <div>
                <span class="mr10">　类型名称</span>
                <el-input v-model="typeName" style="width: 200px" placeholder="请输入类型名称"></el-input>
            </div>
            <div class="mt10">
                <span class="mr10">临界最小值</span>
                <el-input-number
                    v-model="minType"
                    :min="0"
                    @change="minChange"
                    style="width: 200px"
                    placeholder="请输入临界最小值"
                ></el-input-number>
            </div>
            <div class="mt10">
                <span class="mr10">临界最大值</span>
                <el-input-number
                    v-model="maxType"
                    :min="minType + 1"
                    style="width: 200px"
                    placeholder="请输入临界最大值"
                ></el-input-number>
            </div>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="timeFlag = false">取消</el-button>
                    <el-button type="primary" @click="addAType">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { mainHeight } from '@/utils/layout'
import { ElMessage } from 'element-plus'
defineOptions({
    name: 'smsConfiguration'
})
const list = [
    [
        { label: '关闭', value: 0 },
        { label: '启动', value: 1 }
    ],
    [
        { label: '2分钟', value: 2 },
        { label: '3分钟', value: 3 },
        { label: '5分钟', value: 5 },
        { label: '10分钟', value: 10 },
        { label: '30分钟', value: 30 }
    ],
    [
        { label: '1天', value: 1 },
        { label: '2天', value: 2 },
        { label: '3天', value: 3 },
        { label: '4天', value: 4 },
        { label: '5天', value: 5 },
        { label: '6天', value: 6 },
        { label: '7天', value: 7 }
    ]
]
const typeList = ref([{ label: '暂降', min: 0, max: 0 }])
const timeFlag = ref(false)
const typeFlag = ref(false)
const startTime = ref('')
const endTime = ref('')
const timePeriod = ref([
    { start: '08:00', end: '12:00' },
    { start: '13:00', end: '18:00' }
])
const typeName = ref('')
const minType = ref(0)
const maxType = ref(0)

const height = mainHeight(105)
const form = reactive({
    sms: 0,
    interval: 3,
    time: 1,
    sendTime: [],
    type: []
})

const addTime = () => {
    startTime.value = ''
    endTime.value = ''
    timeFlag.value = true
    // 这里可以添加逻辑来处理时间范围的添加
}
const addType = () => {
    typeName.value = ''
    minType.value = 0
    maxType.value = 0
    typeFlag.value = true
    // 这里可以添加逻辑来处理时间范围的添加

}
// 确定时间
const determineTheTime = () => {
    if (!startTime.value || !endTime.value) {
        ElMessage({
            message: '请选择时间',
            type: 'warning'
        })
        return
    }
    timePeriod.value.push({
        start: startTime.value,
        end: endTime.value
    })
    timeFlag.value = false
}
// 确定设置类型
const addAType = () => {
    if (!typeName.value) {
        ElMessage({
            message: '请输入类型名称',
            type: 'warning'
        })
        return
    }
    typeList.value.push({
        label: typeName.value,
        min: minType.value,
        max: maxType.value
    })
    typeFlag.value = false
}
const minChange = (val: number) => {
    if (val >= maxType.value) {
        maxType.value = val + 1
    }
}
</script>
<style lang="scss" scoped>
.title {
    background-color: #f2f2f2;
    height: 30px;
    line-height: 30px;
    font-weight: 600;
    padding-left: 10px;
    margin-bottom: 10px;
    border-left: 10px solid var(--el-color-primary);
}
:deep(.el-card__body) {
    padding: 10px !important;
}
:deep(.el-select) {
    min-width: 80px !important;
}
.checkbox {
    display: flex;
    justify-content: space-between;
}
</style>
