<template>
    <el-dialog title="绑定门店" v-model="showDialog" width="80%">
        <div class="dialog">
            <div class="tips">注意：门店绑定后无法更改，请谨慎选择</div>
            <el-table :data="tableData.list" height="240px" border v-loading="tableData.loading">
                <el-table-column label="门店名称" prop="poi_name"></el-table-column>
                <el-table-column label="门店地址" prop="address"></el-table-column>
                <el-table-column label="操作" width="120px">
                    <template v-slot="scope">
                        <el-button type="primary" size="small"
                            @click="bindShopHandle(scope.row.poi_id)">选择门店</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="paginationChange" :current-page="tableData.page"
                    :page-size="tableData.size" layout="total, prev, pager, next, jumper" :total="tableData.total"
                    background>
                </el-pagination>
            </div>
        </div>
    </el-dialog>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref } from 'vue';
import { douyinstorelist, douyinbindstore } from '@/api/coup/group'

const emits = defineEmits(['success'])

const showDialog = ref(false)

const tableData = reactive({
    page: 1,
    size: 10,
    total: 0,
    loading: false,
    list: []
})

// 绑定门店
async function bindShopHandle(poi_id) {
    try {
        await douyinbindstore({
            poi_id: poi_id
        })
        showDialog.value = false
        ElMessage.success('绑定成功')
        emits('success')
    } catch (error) {
        console.log(error);
    }
}

// 分页变化
function paginationChange(e) {
    tableData.page = e
    getTableData()
}

// 获取门店列表
async function getTableData() {
    try {
        tableData.loading = true
        const { list, count } = await douyinstorelist({
            page: tableData.page,
            size: tableData.size
        })
        tableData.loading = false
        tableData.list = list
        tableData.total = count
    } catch (error) {
        console.log(error);
    }
}

// 显示
function show() {
    showDialog.value = true;
    getTableData()
}

defineExpose({
    show
})
</script>

<style scoped lang="scss">
.tips {
    color: var(--el-color-danger);
    padding-bottom: 14px;
}

.pagination {
    display: flex;
    padding: 0 14px;
    margin-top: 14px;
}

.dialog {
    padding: 14px;
}
</style>