<template>
    <div class="app-container">

        <!-- 查询和其他操作 -->
        <div class="filter-container">
            <el-input v-model="listQuery.orderList" type="textarea" clearable class="filter-item" style="width: 100%;"
                rows="8" placeholder="请输入需要核销的订单号，多个订单“,”隔开（一次最多核销10单）" />
            <div style="display: flex;padding: 5px 0;">
                <div style="line-height: 36px;display: flex;align-items: center;color: #666">核销门店
                    <el-select v-model="listQuery.shopId" filterable style="width: 320px;margin-left: 5px;"
                        placeholder="请选择核销门店">
                        <el-option v-for="item in shops" :key="item.id" :label="item.shopName + '(' + item.poiId + ')'"
                            :value="item.id" />
                    </el-select>
                </div>
                <!-- <div style="line-height: 36px;display: flex;align-items: center;margin-left: 10px;color: #666;">核销商品
                    <el-select v-model="listQuery.goodsId" filterable style="width: 360px;margin-left: 5px;"
                        placeholder="请选择核销商品">
                        <el-option v-for="item in goodsList" :key="item.id"
                            :label="item.name + '(Id:' + item.id + '  价格:' + item.retailPrice + ')'" :value="item.id" />
                    </el-select>
                </div> -->
            </div>
            <div style="display: flex;float: right;">
                <span style="line-height: 36px;color:#09afff;font-size:15px;margin:0 10px">共输入{{
                listQuery.orderList.split(',').length
            }}个订单</span>
                <el-button v-permission="['POST /admin/orderVerify/verify']" class="filter-item" type="primary"
                    icon="el-icon-timer" @click="goVerify">立即核销</el-button>
                <el-button :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download"
                    @click="handleDownload">导出核销结果</el-button>
            </div>
        </div>

        <!-- 查询结果 -->
        <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border fit highlight-current-row>
            <el-table-column align="center" width="150px" label="订单编号" prop="orderSn" sortable />
            <el-table-column align="center" min-width="200px" label="订单商品" prop="goodsName" />
            <el-table-column align="center" min-width="100px" label="核销结果" prop="status" />
            <el-table-column align="center" min-width="300px" label="原因备注" prop="remark" />
        </el-table>

    </div>
</template>

<script>
import { selectByChannel } from '@/api/shop'
import { orderVerify, getGoodsList } from '@/api/orderVerify'

export default {
    name: 'orderVerify',
    data() {
        return {
            listLoading: false,
            listQuery: {
                shopId: '',
                orderList: "",
            },
            list: [],
            shops: [],
            downloadLoading: false 
        }
    },
    created() {
        this.getAllShops();
        //this.getGoodsList();
    },
    methods: {
        goVerify() {
            if (this.listQuery.orderList == '') {
                this.$message.warning("请输入订单号");
                return;
            }
            if (this.listQuery.shopId == '') {
                this.$message.warning("请选择核销的门店");
                return;
            }
            // if (!this.listQuery.goodsId) {
            //     this.$message.warning("请选择核销的商品");
            //     return;
            // }

            this.$confirm("请仔细确认核销信息，核销后将无法撤回！确定继续核销吗？", "核销提醒", {
                confirmButtonText: "继续核销",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => { 

                orderVerify({ orderList: this.listQuery.orderList.split(','), shopId: this.listQuery.shopId }).then(res => {
                    this.list = res.data.data;
                    let code = res.data.errno;
                    let errmsg = res.data.errmsg;
                    if (code === 0) {
                        this.$message.success("核销处理成功，具体处理结果见下方明细！");
                    } else {
                        this.$message.error(errmsg);
                    }
                }).catch(err => {
                    this.$message.error(err.data.errmsg);
                })
            })

        },
        getGoodsList() {
            getGoodsList({ channelId: 26 }).then(res => {
                this.goodsList = res.data.data
            })
        },
        getAllShops() {
            selectByChannel({ channelId: 26 }).then(res => {
                this.shops = res.data.data.list;
            })
        },
        handleDownload() {
            this.downloadLoading = true
            import('@/vendor/Export2Excel').then(excel => {
                const tHeader = ['订单编号', '核销结果', '原因备注']
                const filterVal = ['orderSn', 'status', 'remark']
                excel.export_json_to_excel2(tHeader, this.list, filterVal, '订单核销')
                this.downloadLoading = false
            })
        }
    }
}
</script>
