<template>
    <el-card shadow="never" class="!border-none">
        <div class="lg:flex">
            <div class="min-w-0">
                <el-form :model="formData" ref="formRef" label-width="auto">
                    <el-form-item label="可提前预约" prop="time">
                        <div>
                            <el-input
                                class="w-56 ls-input"
                                v-model="formData.time"
                                placeholder="请输入"
                            >
                                <template #append>天</template>
                            </el-input>
                            <div class="text-gray-400 form-tips">
                                用户可以提前预约的天数，默认7天
                            </div>
                        </div>
                    </el-form-item>

                    <div class="noflex">
                        <el-form-item label="时间段设置" prop="un_selected_icon">
                            <div>
                                <div class="flex">
                                    <el-button type="primary" @click="addItem"
                                        >添加时间段</el-button
                                    >

                                    <el-button
                                        v-perms="['time:del']"
                                        @click="btnDelete('multiple', selectionData)"
                                        :disabled="!selectionData.length"
                                    >
                                        批量删除
                                    </el-button>
                                </div>
                                <div class="mt-2">
                                    <el-table
                                        size="large"
                                        ref="tableDataRef"
                                        :data="formData.list"
                                        :row-class-name="getRowIndex"
                                        :fit="true"
                                        style="width: 840px"
                                        row-key="id"
                                        @selection-change="handleSelectionChange"
                                    >
                                        <el-table-column type="selection" max-width="55" />
                                        <el-table-column
                                            property="timeDesc"
                                            label="时间段"
                                            min-width="360"
                                        >
                                            <template #default="{ row }">
                                                <div class="flex">
                                                    <el-time-select
                                                        v-model="row.startTime"
                                                        :max-time="row.endTime"
                                                        class="mr-2"
                                                        placeholder="开始时间"
                                                        start="00:00"
                                                        step="00:30"
                                                        end="24:00"
                                                    />
                                                    <el-time-select
                                                        v-model="row.endTime"
                                                        :min-time="row.startTime"
                                                        placeholder="结束时间"
                                                        start="00:00"
                                                        step="00:30"
                                                        end="24:00"
                                                    />
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            property="sort"
                                            label="排序"
                                            min-width="160"
                                        >
                                            <template #default="{ row }">
                                                <el-input v-model="row.sort"></el-input>
                                            </template>
                                        </el-table-column>
                                        <el-table-column label="操作" min-width="110" fixed="right">
                                            <template #default="scope">
                                                <div class="flex leading-4">
                                                    <el-link
                                                        v-perms="['time:del']"
                                                        class="ml-2"
                                                        type="danger"
                                                        :underline="false"
                                                        @click="btnDelete('single', scope.$index)"
                                                    >
                                                        删除
                                                    </el-link>
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                            </div>
                        </el-form-item>
                    </div>
                </el-form>
            </div>

            <div class="ml-4 lg:pt-[115px] 2xl:w-1/5 2xl:hot-search-phone 2xl:mr-5">
                <span class="mb-4 ml-24">- 预览图 -</span>
                <div class="hot-search-phone-content">
                    <!-- 热门搜索 -->
                    <div class="hot-search-text">
                        <span class="item" v-for="(text, index) in formData.list" :key="index">
                            {{ text?.startTime + '-' + text?.endTime }}
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </el-card>

    <footer-btns>
        <el-button v-perms="['time:setTime']" type="primary" @click="onSubmit()">保存</el-button>
    </footer-btns>
</template>

<script lang="ts" setup>
import { apiGetOrderTime, apiSetOrderTime, apiOrderTimeLists } from '@/api/order/subscribe'
import { ref } from 'vue'
import FooterBtns from '@/components/footer-btns/index.vue'
import feedback from '@/utils/feedback'

const formData = ref<any>({
    time: '',
    list: []
})
const getRowIndex = ({ row, rowIndex }): string => {
    return (row.row_index = rowIndex)
}

// 获取预约天数
const getOrderTime = async (): Promise<void> => {
    const data = await apiGetOrderTime()
    formData.value.time = data.time
    getList()
}

const getList = async () => {
    const { lists } = await apiOrderTimeLists('')
    formData.value.list = [...lists]
}

// 保存
const onSubmit = async (): Promise<void> => {
    const isEmpty = formData.value.list.some((item) => !item.startTime || !item.endTime)
    if (isEmpty) return feedback.msgError('时间段不能为空！')
    await apiSetOrderTime({ time: formData.value.time, orderTimeList: formData.value.list })
    feedback.msgSuccess('操作成功')
    getOrderTime()
}

// 添加时间段
const addItem = () => {
    formData.value.list.push({
        startTime: '',
        endTime: '',
        sort: 0
    })
}

// 表格多选选择的数据
const handleSelectionChange = (val: Event | any) => {
    selectionData.value = val.map((item: Event | any) => item.row_index)
}
// 选中的服务项目
const selectionData = ref<number[]>([])
// 删除处理 / 批量删除
const btnDelete = async (type: string, idx?: any) => {
    // 单个添加
    if (type === 'single') {
        formData.value.list.splice(idx, 1)
    } else if (type === 'multiple') {
        // 批量添加
        idx = Array.isArray(idx) ? idx : [idx]
        await feedback.confirm('确认批量删除？请谨慎操作。')
        formData.value.list = formData.value.list.filter((item) => !idx.includes(item.row_index))
    }
}

getOrderTime()
</script>

<style lang="scss" scoped>
.ls-input {
    width: 223px;
}

.noflex :deep() .el-form-item__content {
    display: block;
}

.hot-search-phone {
    &-content {
        @apply grid grid-cols-3;
        width: 280px;
        height: 494px;
        padding: 10px 10px;
        border-radius: 10px;
        border: 1px solid #e6e6e6;

        .hot-search-text {
            @apply flex flex-wrap grid grid-cols-3 w-[260px] h-4;
            span {
                @apply flex-1 text-center;
                font-size: 12px;
                border-radius: 5px;
                border: 1px solid #e6e6e6;
                margin: 0 6px 6px 0;
                display: inline-block;
                background-color: #fff;
            }
        }
    }
}
</style>
