<template>
    <el-dialog v-model="dialogVisible" title="基本设置" width="90vw" top="5vh" @closed="emits('success')">
        <div class="scroll_y">
            <el-form ref="formRef" :model="form" label-position="left" label-width="140">
                <el-form-item label="排队页面地址">{{ config.pageAddress }}</el-form-item>
                <el-form-item label="线上取号">
                    <el-switch v-model="form.isOnline" :active-value="1" :inactive-value="0"></el-switch>
                </el-form-item>
                <el-form-item label="背景图片">
                    <UploadImg ref="UploadImgRef" @success="e => form.bgCover = e" />
                </el-form-item>
                <el-form-item label="桌型">
                    <el-table :data="tableData.list" border v-loading="tableData.loading">
                        <el-table-column label="名称" prop="name"></el-table-column>
                        <el-table-column label="描述" prop="note"></el-table-column>
                        <el-table-column label="等待时间[桌]" prop="waitTime"></el-table-column>
                        <el-table-column label="号码前缀" prop="prefix"></el-table-column>
                        <el-table-column label="开始号码" prop="start"></el-table-column>
                        <el-table-column label="操作">
                            <template #header>
                                <el-button type="primary" @click="AddTabRef.show()">添加</el-button>
                            </template>
                            <template v-slot="scope">
                                <div style="display: flex;gap: 10px;">
                                    <el-text type="primary" @click="AddTabRef.show(scope.row)">编辑</el-text>
                                    <el-text type="danger" @click="delCallTableHandle(scope.row)">删除</el-text>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-form-item>
                <div class="title" style="padding-bottom: 20px;">通知模板</div>
                <el-form-item label="排队成功提醒">
                    <el-input disabled style="width: 50%;" v-model="config.successMsg"></el-input>
                </el-form-item>
                <el-form-item label="排队即将排到通知">
                    <div style="display: flex;flex-direction: column;">
                        <el-input disabled style="width: 50%;" v-model="config.nearMsg"></el-input>
                        <el-input v-model="config.nearNum" style="margin-top: 10px;">
                            <template #prepend>前面等待</template>
                            <template #append>桌时提醒</template>
                        </el-input>
                    </div>
                </el-form-item>
                <el-form-item label="排队到号提醒">
                    <el-input disabled style="width: 50%;" v-model="config.callingMsg"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="footer">
            <el-button style="width: 100%" @click="dialogVisible = false">
                取消
            </el-button>
            <el-button type="primary" style="width: 100%" :loading="loading" @click="confirmHandle">
                确认
            </el-button>
        </div>
    </el-dialog>
    <AddTab ref="AddTabRef" @success="getTableAjax" />
</template>

<script setup>
import UploadImg from '@/components/uploadImg.vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import AddTab from './addTab.vue'

import { reactive, ref } from 'vue';
import { callTableConfig, callTableConfigPut, getCallTable, delCallTable } from '@/api/account.js'
import { useUser } from "@/store/user.js"
const store = useUser()

const dialogVisible = ref(false)

const AddTabRef = ref(null)
const formRef = ref(null)
const loading = ref(false)
const form = ref({
    isOnline: 1,
    bgCover: '',
    nearNum: '',
})

function beforeAvatarUpload(file) {
    console.log(2, file);
}

// 桌型
const tableData = reactive({
    loading: false,
    list: []
})

// 显示基本配置
function show() {
    dialogVisible.value = true

    getTableAjax()
    callTableConfigAjax()
}

// 删除桌型
function delCallTableHandle(row) {
    ElMessageBox.confirm('确认要删除吗？', '注意').then(async () => {
        try {
            tableData.loading = true
            await delCallTable({
                callTableId: row.id
            })
            getTableAjax()
        } catch (error) {
            console.log(error);
        }
    }).catch(() => { })
}

// 获取桌型列表
async function getTableAjax() {
    try {
        tableData.loading = true
        const res = await getCallTable({
            page: 1,
            size: 100,
            shopId: store.shopInfo.id,
            callTableId: '',
            state: ''
        })
        tableData.loading = false
        tableData.list = res.records
    } catch (error) {
        tableData.loading = false
        console.log(error);
    }
}

// 获取配置信息
const config = ref({})
const UploadImgRef = ref(null)
async function callTableConfigAjax() {
    try {
        const res = await callTableConfig({ shopId: store.shopInfo.id })
        config.value = res
        form.value.nearNum = res.nearNum
        if (res.bgCover) {
            UploadImgRef.value.init([{ url: res.bgCover }])
        }
    } catch (error) {
        console.log(error);
    }
}

// 提交
const emits = defineEmits(['success'])
async function confirmHandle() {
    try {
        loading.value = true
        form.value.shopId = store.userInfo.shopId
        const res = await callTableConfigPut(form.value)
        loading.value = false
        ElMessage.success('保存成功')
        dialogVisible.value = false
        emits('success')
    } catch (error) {
        loading.value = false
        console.log(error);
    }
}

defineExpose({
    show
})
</script>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 120px;
    height: 120px;
    text-align: center;
}
</style>
<style scoped lang="scss">
.title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.avatar-uploader .avatar {
    width: 120px;
    height: 120px;
    display: block;
}

$btmH: 50px;

.scroll_y {
    height: 65vh;
    overflow-y: auto;
    padding-bottom: $btmH;
}

.footer {
    display: flex;
    padding: 0 100px 0;
    position: relative;

    &::before {
        content: "";
        height: $btmH;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
        width: 100%;
        position: absolute;
        top: $btmH*-1;
        left: 0;
        z-index: 10;
    }
}
</style>