<template>
    <div class="app-container">
        <div class="head-container">
            <el-form :model="query" inline>
                <el-form-item>
                    <el-input v-model="query.orderNo" placeholder="订单号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="query.payType" placeholder="支付类型">
                        <el-option label="微信支付" value="wechatPay" />
                        <el-option label="支付宝支付" value="aliPay" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="query.phone" placeholder="联系电话"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="query.proName" placeholder="商品名称"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select v-model="query.status" placeholder="状态">
                        <el-option label="待付款" value="unpaid" />
                        <el-option label="待使用" value="unused" />
                        <el-option label="已完成" value="closed" />
                        <el-option label="退款中" value="refunding" />
                        <el-option label="已退款" value="refund" />
                        <el-option label="已取消" value="cancelled" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-date-picker v-model="query.createdAt" type="daterange" range-separator="至"
                        start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
                        value-format="yyyy-MM-dd HH:mm:ss">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="getTableData">查询</el-button>
                    <el-button @click="resetHandle">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="head-container">
            <el-table :data="tableData.data" v-loading="tableData.loading">
                <el-table-column label="订单号" prop="orderNo"></el-table-column>
                <el-table-column label="团购卷名称" prop="proName"></el-table-column>
                <el-table-column label="到期日期" prop="expDate"></el-table-column>
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="下单数量" prop="number"></el-table-column>
                <el-table-column label="已退数量" prop="refundNumber"></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="payType">
                    <template v-slot="scope">
                        {{ payF(scope.row.payType) }}
                    </template>
                </el-table-column>
                <el-table-column label="下单人电话" prop="phone"></el-table-column>
                <el-table-column label="是否支持退款" prop="refundAble">
                    <template v-slot="scope">
                        {{ scope.row.refundAble ? "是" : "否" }}
                    </template>
                </el-table-column>
                <el-table-column label="备注" prop="remark"></el-table-column>
                <el-table-column label="状态" prop="status">
                    <template v-slot="scope">
                        <el-tag :type="statusF(scope.row.status)">
                            {{ scope.row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="交易日期" prop="tradeDay"></el-table-column>
                <el-table-column label="核销员" prop="verifier"></el-table-column>
                <el-table-column label="操作" width="100">
                    <template v-slot="scope">
                        <el-button type="text" icon="el-icon-edit" @click="showRefund(scope.row)"
                            :disabled="!scope.row.refundAble">退款</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="head-container">
            <el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
                @current-change="paginationChange" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
        </div>
        <el-dialog title="退款" :visible.sync="showDialog" width="400px">
            <el-form ref="refundForm" :model="refundForm" :rules="refundFormRules" label-position="top">
                <el-form-item label="退单数" prop="num">
                    <el-select v-model="refundForm.num" placeholder="请选择退单数" style="width: 100%;"
                        @change="refundNumChange">
                        <el-option :label="item" :value="item" v-for="item in refundNumList" :key="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="退单金额">
                    <el-input v-model="refundForm.refundAmount" disabled placeholder="请选择退单数"></el-input>
                </el-form-item>
                <el-form-item label="退款原因">
                    <el-input v-model="refundForm.refundReason" type="textarea" placeholder="请输入退款原因"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">取消</el-button>
                <el-button type="primary" :loading="refundLoading" @click="refundConfirm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { tbGroupOrderInfo, returnGpOrder } from "@/api/order";
import dayjs from "dayjs";
export default {
    data() {
        return {
            query: {
                orderNo: "",
                payType: "",
                phone: "",
                proName: "",
                status: "",
                createTime: []
            },
            resetQuery: "",
            tableData: {
                data: [],
                page: 0,
                size: 10,
                loading: false,
                total: 0
            },
            payTypes: [
                {
                    value: "wechatPay",
                    label: "微信支付"
                },
                {
                    value: "aliPay",
                    label: "支付宝支付"
                }
            ],
            statusList: [
                {
                    value: "unpaid",
                    label: "待付款",
                    type: "warning"
                },
                {
                    value: "unused",
                    label: "待使用",
                    type: "primary"
                },
                {
                    value: "closed",
                    label: "已完成",
                    type: "success"
                },
                {
                    value: "refunding",
                    label: "退款中",
                    type: "warning"
                },
                {
                    value: "refund",
                    label: "已退款",
                    type: "default"
                },
                {
                    value: "cancelled",
                    label: "已取消",
                    type: "danger"
                }
            ],
            row: '',
            showDialog: false,
            refundNumList: [],
            refundLoading: false,
            refundForm: {
                num: '',
                orderId: '',
                refundAmount: '',
                refundDesc: '',
                refundReason: ''
            },
            refundFormRules: {
                num: [
                    {
                        required: true,
                        message: ' ',
                        trigger: 'change'
                    }
                ]
            }
        };
    },
    filters: {
        timeFilter(s) {
            return dayjs(s).format("YYYY-MM-DD HH:mm:ss");
        }
    },
    mounted() {
        this.getTableData();
        this.resetQuery = { ...this.query };
    },
    methods: {
        // 提交退单
        refundConfirm() {
            this.$refs.refundForm.validate(async valid => {
                if (valid) {
                    try {
                        this.refundLoading = true
                        const res = await returnGpOrder(this.refundForm)
                        this.refundLoading = false
                        this.$notify({
                            title: '成功',
                            message: `退单成功`,
                            type: 'success'
                        });
                        this.showDialog = false
                    } catch (error) {
                        console.log(error);
                        this.refundLoading = false
                    }
                }
            })
        },
        // 计算退单金额
        refundNumChange(e) {
            this.refundForm.refundAmount = Math.floor(this.row.orderAmount / e * 100) / 100
        },
        // 显示退款
        showRefund(row) {
            this.row = row
            let arr = []
            for (let i = 1; i <= row.number - row.refundNumber; i++) {
                arr.push(i)
            }
            this.refundNumList = arr
            this.refundForm.orderId = row.id
            this.showDialog = true
        },
        payF(p) {
            return p && this.payTypes.find(item => item.value == p).label;
        },
        statusF(t) {
            return t && this.statusList.find(item => item.label == t).type;
        },
        // 切换状态
        async statusChange(e, row) {
            try {
                this.tableData.loading = true;
                const data = { ...row };
                data.status = e;
                await tbPrintMachine(data, "put");
                this.getTableData();
            } catch (error) {
                console.log(error);
                this.tableData.loading = false;
            }
        },
        // 重置查询
        resetHandle() {
            this.query = { ...this.resetQuery };
            this.getTableData();
        },
        // 分页回调
        paginationChange(e) {
            this.tableData.page = e - 1;
            this.getTableData();
        },
        // 获取列表
        async getTableData() {
            this.tableData.loading = true;
            try {
                const res = await tbGroupOrderInfo({
                    ...this.query,
                    page: this.tableData.page,
                    size: this.tableData.size,
                    sort: "id"
                });
                this.tableData.loading = false;
                this.tableData.data = res.content;
                this.tableData.total = res.totalElements;
            } catch (error) {
                console.log(error);
            }
        }
    }
};
</script>
