<template>
    <div>
        <Drawer :title="DrawerTitle" :visible.sync="DrawerVisible" :showFooter="true" :skeleton="skeletonLoading"
            :wrapperClosable="true" :size="$drawerWidth(1500)">
            <!-- <el-form :model="queryParams" ref="queryForm" :inline="true" :size="ELsize" label-width="auto">
            <el-form-item label="日期选择" prop="billDay">
                <el-date-picker v-model="queryParams.billDay" value-format="yyyy-MM-dd" type="daterange"
                    range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" @click="resetQuery('queryForm')">重置</el-button>
            </el-form-item>
        </el-form> -->
            <!-- <el-row :gutter="10" class="mb8">
            <div class="table-top-statistics">
                <template v-for="item in statisticsList">
                    <span :class="['table-top-type', ELsize]">
                        {{ item.label }}：<span class="table-top-num">{{ StatisticsData[item.field] || 0 }}</span>
                    </span>
                </template>
</div>
</el-row> -->

            <el-table v-loading="loading" ref="multipleTableRef" :row-key="tableRowKey" :border="TableBorder"
                :size="ELTableSize" :data="dataList" @selection-change="selectionChange">
                <el-table-column type="selection" align="center" width="50" />
                <el-table-column type="index" width="55" label="序号" align="center">
                    <template slot-scope="{$index}">
                        {{ $getTableIndex(queryParams, $index + 1) }}
                    </template>
                </el-table-column>
                <template v-for="item in TableColumn">
                    <el-table-column :label="item.label" :align="item.align || 'center'" :width="item.width">
                        <template slot-scope="{row}">
                            {{ (item.formatter ? item.formatter(row) : row[item.prop]) | TableItemEmpty }}
                        </template>
                    </el-table-column>
                </template>

            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />


            <template v-slot:footer>
                <template v-if="!submitLoading">
                    <el-button :size="ELsize" @click.stop="DrawerVisible = false">取消</el-button>
                    <el-button type="primary" :size="ELsize" @click.stop="handleSelectShop()">选择店铺</el-button>
                </template>
                <template v-if="moveShop && moveShop.businessId">
                    <el-button type="primary" :size="ELsize" :loading="submitLoading"
                        @click.stop="handleMoveShop()">确认迁移【{{
                            moveShop.businessName }}】店铺</el-button>
                </template>
            </template>
        </Drawer>
        <!-- 选择店铺 -->
        <SelectShop ref="selectShopRef" @callback="onSelectShopCallback" />
    </div>
</template>

<script>
import { getSubsidyQueuePageApi } from "@/api/OnlineOrder.js";
import { moveSubsidyQueueApi } from "@/api/shop.js";
import { SubsidyStatusEnum } from "@/utils/statusEnum.js"
import getListApi from "@/mixins/getListApi";
import SelectShop from "@/views/shop/components/SelectShop.vue";
export default {
    name: '',
    mixins: [getListApi],
    components: { SelectShop },
    data() {
        return {
            DrawerTitle: '排队订单数据迁移',
            DrawerVisible: false,
            skeletonLoading: false,

            listURL: getSubsidyQueuePageApi,
            tableRowKey: 'queueId',
            isSelecPage: true,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                subsidyStatus: SubsidyStatusEnum.QUENING,
                currentBusinessId: undefined,
            },
            initializationShow: false,
            TableColumn: [
                {
                    label: '订单编号',
                    prop: 'orderNo',
                    // width: 180
                },
                {
                    label: '当前队序',
                    prop: 'queueOrder'
                },
                {
                    label: '订单金额',
                    prop: 'payAmount'
                },
                {
                    label: '最多补贴金额',
                    prop: 'shouldSubsidyAmount'
                },
                {
                    label: '已补贴金额',
                    prop: 'actualSubsidyAmount'
                },
                {
                    label: '已补贴积分',
                    prop: 'subsidyPoints'
                },
                {
                    label: '店铺名称',
                    prop: 'currentBusinessName'
                },
                {
                    label: '用户手机号',
                    prop: 'userMobile'
                },
                {
                    label: '用户姓名',
                    prop: 'userName'
                },
                {
                    label: '消费时间',
                    prop: 'consumeTime',
                    width: 100
                },
                {
                    label: '排队开始时间',
                    prop: 'queueTime',
                    width: 100
                },
                {
                    label: '状态',
                    prop: 'subsidyStatus',
                    width: 80,
                    formatter: (row) => {
                        const { subsidyStatus } = row;
                        try {
                            return this.$options.filters.SubsidyStatusOptionFilter(subsidyStatus) || subsidyStatus;
                        } catch (error) {
                            return subsidyStatus;
                        }
                    }
                }
            ],
            CurrentVo: {},
            moveShop: {},
            submitLoading: false,
        };
    },
    created() {
        // setTimeout(() => {
        //     this.openHandle({ businessId: 21, businessName: "总部国际专卖店" })
        // }, 100);
    },

    methods: {
        async openHandle(row) {
            this.moveShop = {};
            this.DrawerVisible = true;
            this.CurrentVo = row;
            const { businessId, businessName } = row;
            this.DrawerTitle = `${businessName || ''}排队订单数据迁移`;
            this.queryParams.currentBusinessId = businessId;
            this.handleQuery();
        },

        handleSelectShop() {
            if (this.multipleSelection.length > 0) {
                this.$refs.selectShopRef.openHandle(this.CurrentVo)
            } else {
                this.$warningMsg('请先取选择迁移数据');
                return;
            }

        },
        // 选择店铺回调
        onSelectShopCallback(row) {
            this.moveShop = row;
        },

        async handleMoveShop() {
            if (!this.moveShop.businessId) {
                this.$warningMsg('请先选择迁移店铺');
                return;
            };
            if (this.multipleSelection.length === 0) {
                this.$warningMsg('请先取选择迁移数据');
                return;
            }
            try {
                this.submitLoading = true;
                const ids = this.multipleSelection.map(item => item.queueId);
                const Parmas = {
                    originalBusinessId: this.CurrentVo.businessId,
                    targetBusinessId: this.moveShop.businessId,
                    ids,
                };
                await moveSubsidyQueueApi(Parmas);
                this.$successMsg('迁移成功');
                this.$emit('refresh');
                this.DrawerVisible = false;
            } catch { } finally {
                this.submitLoading = false;
            }
        }
    },
};
</script>