<template>
    <div class="content">
        <div class="cart_wrap card">
            <div class="header">
                <div class="left">
                    <el-select v-model="tableData.type" placeholder="核销类型">
                        <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="scanGroupRef.show()">核销团购券</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" width="100">
                        <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="flex: 1;white-space: nowrap;margin-right: 10px;">
                                        {{ item.title }}
                                    </div>
                                    <div class="item" style="flex: 1;margin-right: 10px;color: var(--primary-color);">
                                        ￥{{ item.pay_amount }}
                                    </div>
                                    <div class="item" style="margin-right: 10px;">
                                        <el-tag type="success" 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>
            </div>
            <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>
        <scanGroup ref="scanGroupRef" :title="typeList.find(item => item.value == tableData.type).label"
            :type="tableData.type" @succcess="groupOrderlistAjax" />
        <refundDialog ref="refundDialogRef" @success="groupOrderlistAjax" />
    </div>
</template>

<script setup>
import { groupOrderlist, douyinorderlist, douyinfulfilmentcertificatecancel } 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"
const store = useUser()

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

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

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

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

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

const statusList = reactive([
    {
        value: 'unpaid',
        label: '待付款'
    },
    {
        value: 'unused',
        label: '待使用'
    },
    {
        value: 'closed',
        label: '已完成'
    },
    {
        value: 'refunding',
        label: '退款中'
    },
    {
        value: 'refund',
        label: '已退款'
    },
    {
        value: 'cancelled',
        label: '已取消'
    }
])

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

// 分页变化
function paginationChange(e) {
    tableData.page = 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(() => { })
}

// 获取团购订单数据
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
                })
                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(() => {
    groupOrderlistAjax()
})
</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>