<template>
    <div class="page" v-if="data">
        <div class="order-info">
            <div class="info">
                <div class="num">订单号：{{ data.orderNo }}</div>
                <div class="status">{{ data.status | orderStatus }}</div>
            </div>
            <div class="con">
                <my-image :src="data.headIcon" class="img"></my-image>
                <div class="main">
                    <div class="line">
                        <div class="name">
                            {{ data.nickName }}
                        </div>
                        <div class="money">
                            合计：<span class="red-text"
                                >￥{{ data.amount / 100 }}</span
                            >
                        </div>
                    </div>
                    <div class="line">
                        <div class="time">
                            {{ data.orderTime | dateFormat("hh:mm") }}
                        </div>
                        <div class="money">
                            预估佣金：￥{{ data.estimateComission / 100 }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <ul class="good-list">
            <li v-for="(item, index) of data.orderItems" :key="index">
                <my-image class="good-img" :src="item.productImage"></my-image>
                <div class="good-con">
                    <div class="good-name">{{ item.productName }}</div>
                    <div class="info">
                        <div class="sku">规格：{{ item.productSpec }}</div>
                        <div class="count">数量：{{ item.count }}</div>
                    </div>
                    <div class="money">
                        <div class="price">金额：￥{{ item.amount / 100 }}</div>
                        <div class="commission">
                            佣金：￥{{ item.estimateComission / 100 }}
                        </div>
                    </div>
                    <div class="status">
                        <div></div>
                        <div>{{ item.status | orderStatus }}</div>
                    </div>
                </div>
            </li>
        </ul>
        <section class="info-box">
            <ul>
                <li>
                    <div class="key">总件数：</div>
                    <div class="value">x{{ data.totalCount }}</div>

                    <div class="key key-r">总金额：</div>
                    <div class="value">￥{{ data.totalAmount / 100 }}</div>
                </li>
                <li>
                    <div class="key">积分抵扣（{{ data.points }}分）：</div>
                    <div class="value">-￥{{ data.pointsPrice / 100 }}</div>
                </li>
                <li>
                    <div class="key">优惠券：</div>
                    <div class="value">-￥{{ data.couponAmount }}</div>
                </li>
                <li>
                    <div class="key">运费/配送费：</div>
                    <div class="value">￥{{ data.postage }}</div>
                </li>
                <li>
                    <div class="key">合计：</div>
                    <div class="value red">￥{{ data.amount / 100 }}</div>
                </li>
                <li >
                    <div class="key">团长佣金：</div>
                    <div class="value blod">
                        ￥{{ data.estimateComission / 100 }}（佣金）- ￥{{
                            data.pointsPrice / 100
                        }}（积分抵扣）= <span class="green">+￥{{ data.commission / 100 }}</span>
                    </div>
                </li>
                <li v-if="dataType === 9">
                    <div class="key">佣金回退：</div>
                    <div class="value blod">
                        ￥{{ data.estimateComission / 100 }}（佣金）- ￥{{
                            data.pointsPrice / 100
                        }}（积分抵扣）= <span class="red">-￥{{ data.commission / 100 }}（已退还）</span>
                    </div>
                </li>
                <li v-if="dataType === 10">
                    <div class="key">BD佣金：</div>
                    <div class="value blod">
                        ￥{{ data.commission / 100 }}(佣金) * 20% = 
                        <span class="green">+￥{{(data.commission * 0.2) | minuteToRmb}}</span>
                    </div>
                </li>
                <li v-if="dataType === 11">
                    <div class="key">BD佣金回退：</div>
                    <div class="value blod">
                         ￥{{ data.commission / 100 }}(佣金) * 20% = 
                        <span class="red">-￥{{(data.commission * 0.2) | minuteToRmb}}（已退还）</span>
                    </div>
                </li>
                <li v-if="dataType === 12">
                    <div class="key">BDM佣金：</div>
                    <div class="value blod">
                        ￥{{ data.commission / 100 }}(佣金) * 5% = 
                        <span class="green">+￥{{
                            (data.commission * 0.05) | minuteToRmb
                        }}</span>
                    </div>
                </li>
                <li v-if="dataType === 13">
                    <div class="key">BDM佣金回退：</div>
                    <div class="value blod">
                        ￥{{ data.commission / 100 }}(佣金) * 5% = 
                        <span class="green">-￥{{
                            (data.commission * 0.05) | minuteToRmb
                        }}（已退还）</span>
                    </div>
                </li>
            </ul>
        </section>
        <section class="info-box">
            <ul>
                <!-- <li>
                    <div class="key">下单时间：</div>
                    <div class="value">
                        {{ data.orderTime | dateFormat("yyyy-MM-dd hh:mm") }}
                    </div>
                </li> -->
                <li v-for="item of data.logs" :key="item.time">
                    <div class="value">
                        {{ item.time | dateFormat("yy-MM-dd hh:mm") }}：
                    </div>
                    <div class="key">{{ item.title }}</div>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
import MyImage from "../../../components/image/index";
let statusEnum = {
    2: "待支付",
    3: "待发货",
    4: "待收货",
    6: "已取消",
    7: "售后中",
    8: "已删除",
    9: "已完成",
    10: "已评价",
    11: "已售后",
    12: "已退款",
    20: "待接单",
    21: "拣货中",
    22: "拣货完成",
    23: "待配送",
    24: "配送中",
    25: "已送达",
    26: "待提货",
    27: "已提货",
    31: "订单已推单",
    32: "订单已被骑手接单",
    33: "骑手已到店",
    34: "骑手已取餐",
    35: "订单完成",
    36: "订单失败",
};
export default {
    name: "",
    components: { MyImage },

    filters: {
        orderStatus(v) {
            return statusEnum[v] || "";
        },
    },
    // 数据
    data() {
        return {
            dataId: "",
            data: null,
            isBd: true,
            dataType: 0,
        };
    },

    onLoad(opts) {
        this.dataId = opts.id;
        if (opts.type) {
            this.dataType = Number(opts.type);
        }
        this.getDetail();
    },

    onShow() {},

    // 函数
    methods: {
        getDetail() {
            uni.showLoading({
                title: "加载中...",
            });
            this.api.get("/Yx/GetOrder", { id: this.dataId }).then((res) => {
                uni.hideLoading();
                this.data = res.data;
            });
        },
    },

    // 数据计算
    computed: {},

    // 数据监听
    watch: {},
};
</script>

<style lang="scss" scoped>
.page {
    background-color: #fff;
}
.order-info {
    padding: px(30) px(30) px(50);
    border-bottom: 1px solid #e9e9e9;
    .info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .num {
            color: #666;
        }
        .status {
            color: #409eff;
        }
    }

    .con {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        margin-top: px(30);
        .img {
            width: px(230);
            height: px(230);
            flex-shrink: 0;
            margin-right: px(20);
            background-color: #f9f9f9;
            /deep/ img {
                width: px(230);
                height: px(230);
            }
        }
    }
    .main {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        padding: px(25) 0;
        .money {
            flex-shrink: 0;
        }
        .name {
            @include omits(2);
        }
        .line {
            display: flex;
            justify-content: space-between;
            & ~ .line {
                margin-top: px(10);
            }
        }
        .red-text {
            color: #ff4b26;
        }
        .time,
        .money {
            font-size: px(40);
            color: #666;
        }
    }
}

.good-list {
    li {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        padding: px(20) px(40);
        border-bottom: 1px solid #e9e9e9;
        background-color: #f9f9f9;
        .good-img {
            width: px(220);
            height: px(220);
            flex-shrink: 0;
            margin-right: px(20);
            background-color: #f1f1f1;
            /deep/ img {
                width: px(220);
                height: px(220);
            }
        }
        .good-con {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            font-size: px(40);
            .good-name {
                @include omits(2);
            }
            .info,
            .money,
            .status {
                margin-top: px(10);
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .count,
            .sku {
                color: #666;
            }
            .status {
                font-size: px(36);
                color: #f78819;
            }
        }
    }
}
.info-box {
    padding: px(60) px(30);
    & ~ .info-box {
        border-top: 1px solid #e9e9e9;
    }
    li {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        font-size: px(40);
        padding: px(15) 0;
    }
    .key {
        color: #666;
        margin-left: px(20);
    }
    .red {
        color: #ff4b26;
    }
    .key-r {
        margin-left: px(50);
    }
    .value {
        flex-shrink: 0;
        margin-top: px(8);
    }
}
.blod {
    font-weight: bold;
}
.green {
    color: #27a34f !important;
}
.red {
    color: #f85e5e !important;
}
</style>