<template>
    <div class="halfSon">
        <!-- 搜索 -->
        <div class="formSearch">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="订单id">
                    <el-input maxlength="20" v-model="formInline.orderId" placeholder="请输入" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain @click="searchOrder">查询</el-button>
                    <el-button type="info" plain @click="resetData">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 表格 -->
        <div class="tableBox">
            <el-table ref="multipleTable" v-loading="tableLoading" :data="tableData" border stripe
                :header-cell-style="{ background: '#EEF3FF', color: '#333333' }" tooltip-effect="dark"
                style="width: 100%">
                <el-table-column prop="orderId" label="订单id" width="150">
                </el-table-column>
                <el-table-column label="消息状态" width="250">
                    <template slot-scope="scope">
                        <span v-if="scope.row.code == -1">下单中</span>
                        <span v-if="scope.row.code == 1">下单成功</span>
                        <span v-if="scope.row.code == 2">已退款</span>
                        <span v-if="scope.row.code == -2">退款中</span>
                    </template>
                </el-table-column>
                <el-table-column label="半子消息状态" width="250">
                    <template slot-scope="scope">
                        <span v-if="scope.row.code == 1">下单成功</span>
                        <span v-else-if="scope.row.code == -1">下单中</span>
                        <span v-else-if="scope.row.code == -2">退款中</span>
                        <span v-else-if="scope.row.code == 2">已退款</span>
                        <span v-else-if="scope.row.code == 3">下单失败</span>
                        <span v-else-if="scope.row.code == 5">已取消</span>
                    </template>
                </el-table-column>
                <el-table-column prop="msg" label="消息" width="250">
                </el-table-column>
                <el-table-column prop="systemErro" label="系统错误" width="250">
                </el-table-column>
                <el-table-column prop="createTime" label="订单创建时间" width="=300">
                </el-table-column>
                <el-table-column prop="updateTime" label="订单更新时间" width="300">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- <div v-if="scope.row.code == 3"> -->
                        <el-button type="primary" v-if="scope.row.code == 3" plain
                            @click="resubmit(scope.row.id)">重新提交半子订单</el-button>
                        <!-- </div> -->
                    </template>
                </el-table-column>
            </el-table>
            <div class="fenye">
                <el-pagination :current-page="formInline.page" :page-sizes="[10, 20, 50, 100]" :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                    @current-change="handleCurrentChange" />
            </div>
        </div>
    </div>
</template>

<script>
import { halfOrder, halfOrderRe } from "@/api/order"
export default {
    data() {
        return {
            tableData: [],
            formInline: {
                orderId: "",
                page: 1,
                pageSize: 10
            },
            total: 0,
            tableLoading: false
        }
    },
    created() {
        this.getHalfOrder()
    },
    methods: {
        //  请求数据的函数
        async getHalfOrder() {
            console.log("执行到这里了");
            //  开始加载状态
            this.tableLoading = true
            let res = await halfOrder(this.formInline);
            const { data } = res
            this.tableData = data.records
            this.total = data.total
            this.tableLoading = false
        },
        //  条数的改变事件
        handleSizeChange(val) {
            this.formInline.pageSize = val
            this.getHalfOrder()
        },

        //  分页的点击事件
        handleCurrentChange(val) {
            this.formInline.page = val
            this.getHalfOrder()
        },
        //  查询订单
        searchOrder() {
            this.getHalfOrder()
        },
        //  重置订单
        resetData() {
            this.formInline.orderId = ""
            this.getHalfOrder()
        },
        //  重新提交半子订单
        resubmit(id) {
            this.$confirm('此操作将重新提交半子订单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                // let res = await;
                await halfOrderRe(id).then(res=>{
                    console.log(res);
                    if(res.code == ''){
                        this.$message({
                            type: 'success',
                            message: '半子订单提交成功!'
                        }); 
                    }
                }).catch(err=>{
                    // console.log(err,6666);
                })
                this.getHalfOrder()
                
                // console.log(res);
                // this.$message({
                //         type: 'success',
                //         message: '半子订单提交成功!'
                //     });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已经取消重新提交'
                });
            });
        }
    },
}
</script>

<style lang="scss" scoped>
.halfSon {
    padding: 30px 0 0 30px;

    .formSearch {
        margin-bottom: 30px;
    }

    .fenye {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 50px 0;
    }
}

::v-deep .el-table__cell {
    text-align: center;
}
</style>