<template>
    <div class="content">
        <div class="cart_wrap card">
            <div class="header">
                <div class="left">
                    <el-select v-model="tableData.type" placeholder="核销类型" @change="typeChange">
                        <el-option v-for="item in typeList" :key="item.value" :value="item.value"
                            :label="item.label"></el-option>
                    </el-select>
                    <el-input placeholder="搜索订单" v-model="tableData.proName" @focus="
                        global.updateData(false)" @blur="global.updateData(true)"></el-input>
                    <el-select v-model="tableData.status" placeholder="订单状态">
                        <el-option v-for="item in statusList" :key="item.value" :value="item.value"
                            :label="item.label"></el-option>
                    </el-select>
                    <div class="btn">
                        <el-button type="primary" :icon="Search" @click="groupOrderlistAjax">搜索</el-button>
                        <el-button :icon="RefreshRight" :loading="tableData.resetLoading"
                            @click="resetHandle">重置</el-button>
                    </div>
                </div>
                <el-button type="warning" :icon="FullScreen" @click="showScanModalHandle">核销团购券</el-button>
            </div>
            <div class="tab_container">
                <el-table :data="tableData.list" height="540px" v-loading="tableData.loading"
                    v-if="tableData.type == 1">
                    <el-table-column label="订单号" prop="orderNo" width="100px"></el-table-column>
                    <el-table-column label="优惠卷" prop="proImg" width="200px">
                        <template v-slot="scope">
                            <div class="info_wrap">
                                <el-image :src="scope.row.proImg" style="width: 40px;height: 40px;flex-shrink: 0;" />
                                <div class="t">{{ scope.row.proName }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="支付方式" prop="payType">
                        <template v-slot="scope">
                            {{ payTypeFilter(scope.row.payType) }}
                        </template>
                    </el-table-column> -->
                    <el-table-column label="订单金额" prop="orderAmount">
                        <template v-slot="scope">
                            ￥{{ scope.row.orderAmount }}
                        </template>
                    </el-table-column>
                    <el-table-column label="实付金额" prop="payAmount">
                        <template v-slot="scope">
                            ￥{{ scope.row.payAmount }}
                        </template>
                    </el-table-column>
                    <el-table-column label="下单数量" prop="number">
                        <template v-slot="scope">
                            {{ scope.row.number }}
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="status">
                        <template v-slot="scope">
                            {{ statusFilter(scope.row.status) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right">
                        <template v-slot="scope">
                            <el-button type="primary" size="small"
                                v-if="scope.row.refundAble == 1 && scope.row.status == 'unused'"
                                @click="refundDialogRef.show(scope.row)">退款</el-button>
                            <el-button type="primary" size="small" disabled v-else>退款</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table :data="tableData.list" height="540px" v-loading="tableData.loading"
                    v-if="tableData.type == 2">
                    <el-table-column label="抖音订单号" prop="d_order_id" width="240"></el-table-column>
                    <el-table-column label="总金额" prop="pay_amount">
                        <template v-slot="scope">
                            <span style="color: var(--primary-color);">￥{{ scope.row.pay_amount }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="商品信息" prop="douyinCodeGoods">
                        <template v-slot="scope">
                            <div class="goods_list">
                                <div class="row" v-for="item in scope.row.douyinCodeGoods" :key="item.id">
                                    <div class="item" style="width: 240px;">
                                        {{ item.title }}
                                    </div>
                                    <div class="item" style="width: 100px;color: var(--primary-color);">
                                        ￥{{ item.pay_amount }}
                                    </div>
                                    <div class="item"
                                        style="margin-right: 10px;display: flex;justify-content: flex-end;">
                                        <el-tag :type="typeStatus(item.status)" disable-transitions size="default"
                                            effect="light" round>
                                            {{ item.status_text }}
                                        </el-tag>
                                    </div>
                                    <div class="item" style="flex: 1;display: flex;justify-content: flex-end;">
                                        <el-button type="danger" size="small" v-if="item.is_show_cacel_banner"
                                            @click="cacelDouyinHandle(item)">撤销</el-button>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <el-table height="540px" :data="tableData.list" v-loading="tableData.loading"
                    v-if="tableData.type == 3">
                    <el-table-column label="名称" prop="dealTitle"></el-table-column>
                    <el-table-column label="总金额" prop="couponBuyPrice" width="100">
                        <template v-slot="scope">
                            <span style="color: var(--primary-color);">￥{{ scope.row.couponBuyPrice }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" prop="couponStatusDesc" width="150"></el-table-column>
                    <el-table-column label="使用时间" prop="couponUseTime" width="200"></el-table-column>
                    <el-table-column label="操作" prop="douyinCodeGoods" width="100">
                        <template v-slot="scope">
                            <el-button type="danger" size="small" @click="cacelMeittuanHandle(scope.row)">
                                撤销
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
                    layout="total, prev, pager, next" :total="tableData.total" background
                    @current-change="paginationChange" @size-change="paginationChange">
                </el-pagination>
            </div>
        </div>
        <scanGroup ref="scanGroupRef" :title="typeList.find(item => item.value == tableData.type).label"
            :type="tableData.type" @succcess="groupOrderlistAjax" />
        <refundDialog ref="refundDialogRef" @success="groupOrderlistAjax" />
        <el-dialog v-model="showMeituanUrlModal" title="注意">
            <span style="font-size: 18px;">您的店铺还未绑定美团，请绑定后操作！</span>
            <template #footer>
                <div class="dialog-footer" style="padding: 0 15px 15px;">
                    <el-button @click="showMeituanUrlModal = false">取消</el-button>
                    <el-button type="primary" @click="openMeituan">
                        去绑定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { groupOrderlist, douyinorderlist, douyinfulfilmentcertificatecancel, thirdPartyCoupon_state, thirdPartyCoupon_bindUrl, meituan_orderlist, meituan_fulfilmentcertificatecancel } from '@/api/group'
import { Search, RefreshRight, FullScreen } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { ref, onMounted, reactive } from 'vue'
import scanGroup from './components/scanGroup.vue'
import refundDialog from './components/refundDialog.vue'
import { useUser } from "@/store/user.js"
import BindShop from './components/bindShop.vue'
import { shell } from 'electron'
const store = useUser()

import { useGlobal } from '@/store/global.js'
const global = useGlobal()

const scanGroupRef = ref(null)
const refundDialogRef = ref(null)

function typeStatus(t) {
    const m = {
        0: 'warning',
        1: 'success',
        2: 'danger'
    }
    return m[t]
}

const tableData = reactive({
    resetLoading: false,
    proName: '',
    type: 3,
    status: '',
    loading: false,
    list: [],
    page: 1,
    size: 10,
    total: 0
})

// 支付方式类型
function payTypeFilter(t) {
    const m = {
        WECHAT: '微信支付',
        ALIPAY: '支付宝支付'
    }
    return m[t]
}

// 订单类型
const typeList = reactive([
    // {
    //     value: 1,
    //     label: '自营'
    // },
    {
        value: 2,
        label: '抖音'
    },
    {
        value: 3,
        label: '美团'
    }
])

// 本店团购订单状态
const originStatus = [
    {
        value: 'unpaid',
        label: '待付款'
    },
    {
        value: 'unused',
        label: '待使用'
    },
    {
        value: 'closed',
        label: '已完成'
    },
    {
        value: 'refunding',
        label: '退款中'
    },
    {
        value: 'refund',
        label: '已退款'
    },
    {
        value: 'cancelled',
        label: '已取消'
    }
]

// 抖音美团
const dmStatus = [
    {
        value: 0,
        label: '等待验券'
    },
    {
        value: 1,
        label: '成功'
    },
    {
        value: 2,
        label: '失败'
    }
]

const statusList = ref([])

// 切换筛选条件
function typeChange(e) {
    switch (e) {
        case 1:
            statusList.value = [...originStatus]
            break;
        case 2:
            statusList.value = [...dmStatus]
            break;
        case 3:
            statusList.value = [...dmStatus]
            thirdPartyCoupon_state_ajax()
            break;
        default:
            break;
    }
    tableData.status = ''
    tableData.page = 1
    tableData.list = []
    groupOrderlistAjax()
}

// 获取美团绑定状态
const meituanStatus = ref(false)
async function thirdPartyCoupon_state_ajax() {
    try {
        const res = await thirdPartyCoupon_state({
            shopId: store.userInfo.shopId
        })
        if (res.status == 0) {
            meituanStatus.value = false
            showMeituanUrlModal.value = true
            thirdPartyCoupon_bindUrl_ajax()
        } else {
            meituanStatus.value = true
        }
    } catch (error) {
        console.log(error);
    }
}

// 获取美团绑定链接
const meituanURL = ref('')
const showMeituanUrlModal = ref(false)
async function thirdPartyCoupon_bindUrl_ajax() {
    try {
        const res = await thirdPartyCoupon_bindUrl({
            shopId: store.userInfo.shopId
        })
        meituanURL.value = res
    } catch (error) {
        console.log(error);
    }
}

// 确认打开绑定美团链接
function openMeituan() {
    showMeituanUrlModal.value = false
    shell.openExternal(meituanURL.value);
}

function showScanModalHandle() {
    // 若果是美团并且没有绑定，则需要先绑定
    if (tableData.type == 3 && !meituanStatus.value) {
        showMeituanUrlModal.value = true
        return
    }
    scanGroupRef.value.show()
}

// 状态
function statusFilter(t) {
    return originStatus.find(item => item.value == t)?.label
}

// 分页变化
function paginationChange(e) {
    groupOrderlistAjax()
}

// 重置
function resetHandle() {
    tableData.proName = ''
    tableData.status = ''
    tableData.page = 1
    tableData.resetLoading = true
    groupOrderlistAjax()
}

// 显示团购核销撤销
function cacelDouyinHandle(item) {
    ElMessageBox.confirm(
        '是否撤销该团购？',
        '注意').then(async () => {
            await douyinfulfilmentcertificatecancel({ verify_id: item.verify_id, certificate_id: item.certificate_id })
            ElMessage.success('撤销成功')
            groupOrderlistAjax()
        }).catch(() => { })
}

// 显示美团团购撤销
function cacelMeittuanHandle(item) {
    ElMessageBox.confirm(
        '是否撤销该团购？',
        '注意').then(async () => {
            try {
                await meituan_fulfilmentcertificatecancel({ couponCode: item.couponCode })
                ElMessage.success('撤销成功')
                groupOrderlistAjax()
            } catch (error) {
                console.log(error);
            }
        }).catch(() => { })
}

// 获取团购订单数据
async function groupOrderlistAjax() {
    try {
        tableData.loading = true
        let res = ''
        switch (tableData.type) {
            case 1:
                // 获取本店团购数据
                res = await groupOrderlist({
                    shopId: store.userInfo.shopId,
                    proName: tableData.proName,
                    status: tableData.status,
                    page: tableData.page,
                    size: tableData.size
                })
                tableData.resetLoading = false
                tableData.loading = false
                tableData.list = res.list
                tableData.total = res.total
                break;
            case 2:
                // 获取抖音团购数据
                res = await douyinorderlist({
                    page: tableData.page,
                    status: tableData.status,
                    d_order_id: tableData.proName
                })
                tableData.resetLoading = false
                tableData.loading = false
                tableData.list = res.list
                tableData.total = res.count
                break;
            case 3:
                // 获取美团购数据
                res = await meituan_orderlist({
                    page: tableData.page,
                    // status: tableData.status,
                    // d_order_id: tableData.proName,
                    date: ''
                })
                tableData.resetLoading = false
                tableData.loading = false
                tableData.list = res.list
                tableData.total = res.count
                break;
            default:
                break;
        }
    } catch (error) {
        tableData.loading = false
        console.log(error);
    }
}

onMounted(() => {
    typeChange(tableData.type)
})
</script>

<style scoped lang="scss">
.pagination {
    display: flex;
    padding: 0 14px;
}

.info_wrap {
    display: flex;
    align-items: flex-start;

    .t {
        width: 100px;
        margin-left: 10px;
    }
}

.cart_wrap {
    flex: 2;
}

.right_card {
    flex: 1;
    height: 100%;
    margin-left: var(--el-font-size-base);
}

.header {
    display: flex;
    padding: 14px;
    justify-content: space-between;
    border-bottom: 1px solid #ececec;

    .left {
        display: flex;
        gap: 10px;

        .btn {
            display: flex;
        }
    }

    .menus {
        display: flex;
        padding: 0 10px;

        .item {
            padding: 0 10px;
            display: flex;
            align-items: center;
            position: relative;

            span {
                font-size: var(--el-font-size-base);
            }

            &.active {

                &::after {
                    content: "";
                    width: 70%;
                    height: 4px;
                    border-radius: 4px;
                    position: absolute;
                    bottom: 0;
                    left: 15%;
                    background-color: var(--primary-color);
                }

                span {
                    color: var(--primary-color);
                }
            }
        }
    }

    .all {
        display: flex;
        align-items: center;
    }
}

.tab_container {
    padding: 0 var(--el-font-size-base) var(--el-font-size-base);

    .tab_head {
        padding-bottom: var(--el-font-size-base);
    }

    .overflow_y {
        height: calc(100vh - 225px);
        overflow-y: auto;
    }

    .tab_list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: auto;
        gap: var(--el-font-size-base);

        .item {
            background-color: #efefef;
            border-radius: 6px;
            overflow: hidden;
            border: 2px solid #fff;

            &.active {
                border-color: var(--primary-color);
            }

            &:hover {
                cursor: pointer;
            }

            .tab_title {
                height: var(--el-component-size-large);
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 10px;
                color: #fff;

                &.subscribe {
                    background-color: var(--el-color-success);
                }

                &.closed {
                    background-color: #999;
                }

                &.opening {
                    background-color: var(--primary-color);
                }

                &.cleaning {
                    background-color: var(--el-color-danger);
                }
            }

            .tab_cont {
                height: 120px;
                display: flex;
                align-items: center;
                justify-content: center;

                .icon {
                    color: #555;
                    font-size: 30px;
                    transform: rotate(45deg);
                }
            }
        }
    }
}

.goods_list {
    .row {
        display: flex;
        align-items: center;

        &:not(:first-child) {
            margin-top: 10px;
        }
    }
}
</style>