<template>
    <el-drawer title="订单详情" size="50%" :visible.sync="drawer" direction="rtl" v-loading="loading">
        <div class="header">
            <div class="title">【收银订单】</div>
            <div class="table">
                <div class="item">
                    <div class="t">订单状态</div>
                    <div class="b">
                        <el-tag :type="detail.status == 'closed' ? 'success' : 'warning'">{{
        detail.status |
        statusFilter
    }}</el-tag>
                    </div>
                </div>
                <div class="item">
                    <div class="t">订单金额</div>
                    <div class="b">
                        ￥{{ detail.orderAmount }}
                    </div>
                </div>
                <div class="item">
                    <div class="t">订单时间</div>
                    <div class="b">
                        {{ detail.createdAt | timeFilter }}
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <el-tabs v-model="type" @tab-click="getTableData">
                <el-tab-pane label="基本信息" name="1">
                    <div class="info_content">
                        <div class="item">
                            <div class="label">会员信息</div>
                            <div class="row">
                                <div>会员昵称：-</div>
                                <div>联系电话：-</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="label">收款详情</div>
                            <div class="row">
                                <div>商品金额：￥{{ detail.productAmount }}</div>
                                <div>打包费：{{ detail.packFee || '-' }}</div>
                            </div>
                            <div class="row">
                                <div>订单原价：￥{{ detail.originAmount }}</div>
                                <div>优惠金额：￥{{ detail.userCouponAmount || '-' }}</div>
                                <div>实收金额：<span style="color: red;">￥{{ detail.payAmount }}</span> </div>
                            </div>
                            <div class="row">
                                <div>退款金额：￥{{ detail.refundAmount }} <span style="color: #FF9731;cursor: pointer;"
                                        v-if="detail.isRefund" @click="type = '3'">退款详情></span>
                                </div>
                                <div>支付方式：现金</div>
                            </div>
                        </div>
                        <div class="item">
                            <div class="label">订单信息</div>
                            <div class="row">
                                <div>订单编号：{{ detail.orderNo }}</div>
                                <div>订单类型：{{ detail.sendType | sendTypeFilter }}</div>
                                <div>创建时间：{{ detail.createdAt | timeFilter }}</div>
                            </div>
                            <div class="row">
                                <div>设备名称：-</div>
                                <div>支付时间：{{ detail.paidTime | timeFilter }}</div>
                                <div>更新时间：{{ detail.updatedAt | timeFilter }}</div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="商品信息" name="2">
                    <el-table :data="detail.detailList">
                        <el-table-column label="商品">
                            <template v-slot="scope">
                                <div class="shop_info">
                                    <el-image :src="scope.row.productImg" style="width: 40px;height: 40px;"></el-image>
                                    <div class="info">
                                        <span>{{ scope.row.productName }}</span>
                                        <span style="color: #999;">{{ scope.row.productSkuName }}</span>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column label="数量">
                            <template v-slot="scope">
                                x{{ scope.row.num }}
                            </template>
                        </el-table-column>
                        <el-table-column label="单价">
                            <template v-slot="scope">
                                ￥{{ scope.row.price }}/
                            </template>
                        </el-table-column>
                        <el-table-column label="小计">
                            <template v-slot="scope">
                                ￥{{ scope.row.priceAmount }}
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="退款详情" name="3" v-if="detail.isRefund">
                    <div class="refund_wrap">
                        <div class="row" v-for="item in refoundList" :key="item.id">
                            <div class="time">{{ item.createdAt | timeFilter }}</div>
                            <div class="list">
                                <div class="list_row" v-for="val in item.detailList">
                                    <div class="item">
                                        <el-image :src="val.productImg" style="width: 50px;height: 50px;"></el-image>
                                        <span class="name">{{ val.productName }}</span>
                                    </div>
                                    <div class="item">
                                        <span>退-{{ val.num }}</span>
                                    </div>
                                    <div class="item">
                                        <span>￥{{ val.priceAmount }}</span>
                                    </div>
                                    <div class="item">
                                        <span>￥-{{ val.priceAmount }}</span>
                                    </div>
                                </div>
                            </div>
                            <div class="foot">退款：￥-{{item.refundAmount}}</div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-drawer>
</template>

<script>
import orderEnum from '../orderEnum';
import dayjs from 'dayjs'
import { tbOrderInfoDetail, tbOrderInfoData } from '@/api/order'
export default {
    data() {
        return {
            orderEnum,
            drawer: false,
            type: '1',
            detail: '',
            loading: false,
            refoundList: []
        }
    },
    filters: {
        orderTypeFilter(t) {
            if (t) {
                return t && orderEnum.orderType.find(item => item.key == t).label
            } else {
                return t
            }
        },
        sendTypeFilter(t) {
            if (t) {
                return orderEnum.sendType.find(item => item.key == t).label
            } else {
                return t
            }
        },
        statusFilter(t) {
            if (t) {
                return t && orderEnum.status.find(item => item.key == t).label
            } else {
                return t
            }
        },
        timeFilter(t) {
            if (t) {
                return dayjs(t).format('YYYY-MM-DD HH:mm:ss')
            } else {
                return '-'
            }
        }
    },
    methods: {
        // 切换类型
        getTableData() {
            if (this.type == '3') {
                this.tbOrderInfoData()
            }
        },
        // 获取退单列表
        async tbOrderInfoData() {
            try {
                const res = await tbOrderInfoData({
                    source: this.detail.id,
                    page: 0,
                    pageSize: 500,
                    orderType: '0'
                })
                this.refoundList = res.content
            } catch (error) {
                console.log(error)
            }
        },
        // 获取订单详情
        async tbOrderInfoDetail(id) {
            try {
                this.loading = true
                const res = await tbOrderInfoDetail(id)
                this.detail = res
                this.loading = false
            } catch (error) {
                console.log(error)
            }
        },
        show(obj) {
            this.drawer = true
            this.type = '1'
            this.detail = ''
            this.tbOrderInfoDetail(obj.id)
        }
    }
}
</script>

<style scoped lang="scss">
.shop_info {
    display: flex;

    .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-left: 6px;
    }
}

.header {
    padding: 0 20px 0;

    .title {
        font-size: 20px;
        color: #FF9731;
    }

    .table {
        display: flex;
        padding: 20px 0;

        .item {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
            font-size: 14px;

            .b {
                padding-top: 20px;
            }
        }
    }
}

.container {
    padding: 0 20px;
    font-size: 14px;

    .info_content {
        padding: 20px 0;

        .item {
            border-bottom: 1px dashed #ececec;
            padding-bottom: 20px;

            &:not(:first-child) {
                margin-top: 20px;
            }

            .label {
                position: relative;
                padding-left: 20px;
                color: #333;

                &::after {
                    content: "";
                    width: 4px;
                    height: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    background-color: #1890FF;
                }
            }

            .row {
                display: flex;
                color: #555;
                padding-top: 20px;

                div {
                    width: 33.333%;
                }
            }
        }
    }

    .refund_wrap {
        .row {
            border-bottom: 1px dashed #ececec;
            padding-bottom: 20px;

            &:not(:first-child) {
                margin-top: 20px;
            }

            .time {
                font-weight: bold;
                color: #333;
            }

            .list {
                .list_row {
                    display: flex;
                    padding-top: 10px;

                    .item {
                        flex: 1;
                        display: flex;
                        color: #555;

                        .name {
                            margin-left: 6px;
                        }
                    }
                }
            }

            .foot {
                color: #333;
                display: flex;
                justify-content: flex-end;
            }
        }
    }
}
</style>