<template>
    <app-layout>
        <view v-if="is_show && orderDetail" class='order-detail-box'>
            <app-order-banner :title='orderDetail.status_text'></app-order-banner>
            <view>
                <!-- 兼容旧版本数据 -->
                <block v-if='orderDetail.is_send == 1 && orderDetail.detailExpress.length == 0 && orderDetail.express && orderDetail.express_no'>
                    <view class='express-box'>
                        <app-order-express
                                :pageUrl='getPageUrl'
                                :express='orderDetail.express'
                                :express_no='orderDetail.express_no'>
                        </app-order-express>
                    </view>
                </block>
                <block v-else-if='orderDetail.is_send == 1 && orderDetail.detailExpress.length == 1'>
                    <view class='express-box'>
                        <template v-if="orderDetail.detailExpress[0].send_type == 1">
                            <app-order-express
                                    :pageUrl='getPageUrl'
                                    :express='orderDetail.detailExpress[0].express'
                                    :express_no='orderDetail.detailExpress[0].express_no'
                                    :merchant_remark='orderDetail.detailExpress[0].merchant_remark'>
                            </app-order-express>
                        </template>
                        <template v-else>
                            物流信息: 其它方式({{orderDetail.detailExpress[0].express_content}})
                        </template>
                    </view>
                </block>
                <block v-else-if='orderDetail.detailExpress.length >= 1'>
                    <app-jump-button :url="getPageUrl">
                        <view class='e-box dir-left-nowrap cross-center'>
                            <view class='dir-top-nowrap box-grow-1 text'>
                                该订单已拆成多个包裹发货，点击查看详情
                            </view>
                            <image class='box-grow-0 img' src='/static/image/icon/arrow-right.png'></image>
                        </view>
                    </app-jump-button>
                </block>

                <view v-if='orderDetail.name && orderDetail.mobile && orderDetail.address' class='address-box dir-top'>
                    <view class='dir-left-nowrap'>
                        <view class='box-grow-1'>联系人: {{orderDetail.name}}</view>
                        <view class='box-grow-0'>{{orderDetail.mobile}}</view>
                    </view>
                    <view v-if='orderDetail.send_type != 1' class='text'>收货地址: {{orderDetail.address}}</view>
                </view>

                <view v-if='orderDetail.send_type == 1' class='store-info-box dir-left-nowrap'>
                    <view class='box-grow-1 dir:top'>
                        <view>门店名称: {{orderDetail.store.name}}</view>
                        <view>联系电话: {{orderDetail.store.mobile}}</view>
                        <view>门店地址: {{orderDetail.store.address}}</view>
                    </view>
                    <view class='box-grow-0 cross-center'>
                        <view @click='navigation(orderDetail.store)' class='box-grow-0 detail-btn'
                              size='mini'>
                            导航
                        </view>
                    </view>
                </view>

                <template v-if="orderDetail.send_type == 2">
                    <view class="order-info-box dir-left-wrap delivery cross-center" v-if="orderDetail.city">
                        <image src="/static/image/icon/deliveryman.png" class="box-grow-0 deliveryman"></image>
                        <view class="box-grow-1 content">
                            <view class="delivery-tips">配送员</view>
                            <view v-if="orderDetail.city.name.length > 6 || orderDetail.city.mobile.length > 11">
                                <view class="mr-16 t-omit">{{orderDetail.city.name}}</view>
                                <view class="t-omit">{{orderDetail.city.mobile}}</view>
                            </view>
                            <view v-else>
                                <view class="mr-16" style="display: inline-block">{{orderDetail.city.name}}</view>
                                <text>{{orderDetail.city.mobile}}</text>
                            </view>
                        </view>
                        <view class="box-grow-0 delivery-mobile cross-center main-right" @click="mobile">
                            <image src="/static/image/icon/store-tel.png" class="mobile"></image>
                        </view>
                    </view>
                    <view class="order-info-box dir-top-wrap" v-if="orderDetail.delivery_config">
                        <view>发货地址: {{orderDetail.delivery_config.address.address}}</view>
                        <view>{{orderDetail.delivery_config.explain}}</view>
                    </view>
                </template>

                <view class='order-info-box dir-top-wrap'>
                    <view class='dir-left-nowrap cross-center'>
                        <view class='box-grow-1'>订单编号: {{orderDetail.order_no}}</view>
                        <view @click='copyText(orderDetail.order_no)' class='box-grow-0 detail-btn' size='mini'>复制
                        </view>
                    </view>
                    <view>下单时间: {{orderDetail.created_at}}</view>
                    <block>
                        <view v-if="orderDetail.pay_type == 1">支付方式: 线上支付</view>
                        <view v-if="orderDetail.pay_type == 2">支付方式: 货到付款</view>
                        <view v-if="orderDetail.pay_type == 3">支付方式: 余额支付</view>
                    </block>
                    <block v-if="orderDetail.is_send && orderDetail.sign != 'scan_code_pay'">
                        <view v-if="orderDetail.send_type == 0">发货方式: 快递发货</view>
                        <view v-if="orderDetail.send_type == 1">发货方式: 到店自提</view>
                        <view v-if="orderDetail.send_type == 2">发货方式: 同城配送</view>
                    </block>
                </view>
                <template v-if="orderDetail.sign === 'advance'">
                    <view class="preferential-box dir-top-nowrap">
                        <view class='dir-left-nowrap item' style="margin-bottom: 28rpx;">
                            <text class='box-grow-1' style="font-size: 28rpx;">
                                商品总额：￥{{orderDetail.total_goods_original_price}}，定金￥{{orderDetail.advance_order.deposit}}抵扣￥{{orderDetail.advance_order.swell_deposit}}
                            </text>
                        </view>
                        <view class="item-box">
                            <view class="dir-left-nowrap item ">
                                <text class='box-grow-1' style="color: #ff4544;font-size: 24rpx;">阶段一</text>
                            </view>
                            <view class="dir-left-nowrap item " style="margin-top: 20rpx;">
                                <text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
                                    定金
                                </text>
                                <text class='box-grow-0'>￥{{orderDetail.advance_order.deposit}}</text>
                            </view>
                        </view>
                        <view class="item-box" style="margin-top:24rpx;">
                            <view class="dir-left-nowrap item ">
                                <text class='box-grow-1' style="color: #ff4544;font-size: 24rpx;">阶段二</text>
                            </view>
                            <view class="dir-left-nowrap item " style="margin-top: 20rpx;">
                                <text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
                                    尾款
                                </text>
                                <text class='box-grow-0'>￥{{orderDetail.total_price}}</text>
                            </view>
                            <view class="dir-left-nowrap item " style="margin-top: 20rpx;"
                                  v-if="orderDetail.member_discount_price > 0">
                                <text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
                                    会员折扣
                                </text>
                                <text class='box-grow-0'>-￥{{orderDetail.member_discount_price}}</text>
                            </view>
                            <view class="dir-left-nowrap item " style="margin-top: 20rpx;"
                                  v-if="orderDetail.advance_order.preferential_price > 0">
                                <text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
                                    活动优惠
                                </text>
                                <text class='box-grow-0'>-￥{{orderDetail.advance_order.preferential_price}}</text>
                            </view>
                            <view class="dir-left-nowrap item " style="margin-top: 20rpx;"
                                  v-if="orderDetail.coupon_discount_price > 0">
                                <text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
                                    优惠券优惠
                                </text>
                                <text class='box-grow-0'>-￥{{orderDetail.coupon_discount_price}}</text>
                            </view>
                            <view class="dir-left-nowrap item " style="margin-top: 20rpx;"
                                  v-if="orderDetail.integral_deduction_price > 0">
                                <text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
                                    积分抵扣
                                </text>
                                <text class='box-grow-0'>-￥{{orderDetail.integral_deduction_price}}</text>
                            </view>
                            <view class="dir-left-nowrap item " style="margin-top: 20rpx;">
                                <text class='box-grow-1' style="color: #666666;font-size: 28rpx;">
                                    运费
                                </text>
                                <text class='box-grow-0'>￥{{orderDetail.express_price}}</text>
                            </view>
                        </view>
                        <view class="dir-left-nowrap item main-right" style="margin:28rpx 0 ;">
                            <text class='box-grow-0' style="font-size: 28rpx;">合计：￥{{orderDetail.total_pay_price}}
                            </text>
                        </view>
                    </view>
                </template>
                <view class='preferential-box dir-top-wrap' v-if="orderDetail.sign !== 'advance'">
                    <view class='dir-left-nowrap item'>
                        <view class='box-grow-1'>商品总额</view>
                        <view class='box-grow-0'>￥{{orderDetail.total_goods_original_price}}</view>
                    </view>

                    <!-- 插件额外优惠 -->
                    <view v-if="orderDetail.plugin_data && sign !== 'advance'">
                        <view v-for='item in orderDetail.plugin_data'
                              :key="item.id"
                              class='dir-left-nowrap item'>
                            <view class='box-grow-1'>{{item.label}}</view>
                            <view class='box-grow-0'>-￥{{item.value}}</view>
                        </view>
                    </view>
                    <view v-if='orderDetail.coupon_discount_price > 0'
                          class='dir-left-nowrap item'>
                        <view class='box-grow-1'>优惠券抵扣</view>
                        <view class='box-grow-0'>-￥{{orderDetail.coupon_discount_price}}</view>
                    </view>
                    <view v-if='orderDetail.integral_deduction_price > 0' class='dir-left-nowrap item'>
                        <view class='box-grow-1'>积分抵扣</view>
                        <view class='box-grow-0'>-￥{{orderDetail.integral_deduction_price}}</view>
                    </view>
                    <view v-if="orderDetail.member_deduction_price_count > 0  && sign !== 'advance'"
                          class='dir-left-nowrap item'>
                        <view class='box-grow-1'>会员折扣</view>
                        <view class='box-grow-0'>-￥{{orderDetail.member_deduction_price_count}}</view>
                    </view>
                    <view class='dir-left-nowrap item' v-if="orderDetail.sign !== 'advance'">
                        <view class='box-grow-1'>运费</view>
                        <view class='box-grow-0'>￥{{orderDetail.express_price}}</view>
                    </view>
                    <view v-if='orderDetail.remark' class='dir-top-nowrap item'>
                        <view class='box-grow-1'>买家留言:</view>
                        <view class='box-grow-0 t-extra-small-color'>{{orderDetail.remark}}</view>
                    </view>
                </view>
                <view class='order-price-box cross-center dir-right-nowrap' v-if="orderDetail.sign !== 'advance'">
                    <view>
                        合计:
                        <text class='price'>￥
                            <text>{{orderDetail.total_pay_price}}</text>
                        </text>
                    </view>
                </view>

                <view class='goods-box composition' v-if="sign == 'composition'">
                    <view class="composition-item" v-for='(list, idx) in orderDetail.composition_list' :key='idx'>
                        <view class="main-between composition-title">
                            <view class="composition-type" v-if="list.type == 1">固定套餐</view>
                            <view class="composition-type" v-else>搭配套餐</view>
                            <view>套餐总价 ￥{{list.total_price}}</view>
                        </view>
                        <view class="goods-list" v-for='(item, index) in list.goods_list' :key='index'>
                            <app-order-goods-info :plugin="list.type == 2 ?sign : ''" v-if="list.show || index == 0" style="width:100%;" :goods='item'></app-order-goods-info>
                            <block v-if='orderDetail.is_send == 1 && (list.show || index == 0)'>
                                <view class='dir-left-nowrap sale-box'>
                                    <view class='box-grow-1'></view>
                                    <view class='box-grow-0 dir-top-nowrap'>
                                        <!-- 无售后记录 且 未超过售后时间 才可申请售后 -->
                                        <block v-if='!item.refund'>
                                            <app-jump-button v-if='orderDetail.is_sale == 0'
                                                             :url="`/pages/order/refund/refund?id=${item.id}&sign=${orderDetail.sign}`">
                                                <view size='mini' class='sale-server detail-btn'>申请售后</view>
                                            </app-jump-button>
                                        </block>
                                        <block v-else>
                                            <text class='refund-status'>已申请售后({{item.refund.status_text}})</text>
                                        </block>
                                    </view>
                                </view>
                            </block>
                        </view>
                        <view class="composition-open main-center">
                            <view @click="toggle(idx)" class="composition-btn">
                                <text>{{list.show ? '点击收起套餐详情' : '点击展开套餐详情'}}</text>
                                <image v-if="!list.show" src="/static/image/icon/icon-down.png"></image>
                                <image v-else src="/static/image/icon/icon-up.png"></image>
                            </view>
                        </view>
                    </view>
                </view>
                <view class='goods-box' v-else>
                    <view v-for='(item, index) in orderDetail.detail' :key='index'>
                        <app-jump-button :url="item.goods_info.page_url">
                            <app-order-goods-info style="width:100%;" :goods='item.goods_info'></app-order-goods-info>
                        </app-jump-button>
                        <block v-if='orderDetail.is_send == 1'>
                            <view class='dir-left-nowrap sale-box'>
                                <view class='box-grow-1'></view>
                                <view class='box-grow-0 dir-top-nowrap'>
                                    <!-- 无售后记录 且 未超过售后时间 才可申请售后 -->
                                    <block v-if='!item.refund'>
                                        <app-jump-button v-if='orderDetail.is_sale == 0'
                                                         :url="`/pages/order/refund/refund?id=${item.id}&sign=${orderDetail.sign}`">
                                            <view size='mini' class='sale-server detail-btn'>申请售后</view>
                                        </app-jump-button>
                                    </block>
                                    <block v-else>
                                        <text class='refund-status'>已申请售后({{item.refund.status_text}})</text>
                                    </block>
                                </view>
                            </view>
                        </block>
                    </view>
                </view>

                <block v-if='(orderDetail.is_pay == 1 || orderDetail.pay_type == 2) && orderDetail.is_send == 0 && orderDetail.status == 1 && orderDetail.detailExpressRelation.length == 0 && orderDetail.cancel_status != 1'>
                    <view class='action-box dir-left-nowrap'>
                        <view class='box-grow-1'></view>
                        <text v-if='orderDetail.cancel_status == 2' class='cancel-text'>申请退款中</text>
                        <view v-else @click='cancel(orderDetail)' class='box-grow-0 btn'>申请退款</view>
                    </view>
                </block>
            </view>
        </view>
    </app-layout>
</template>

<script>
    import appOrderGoodsInfo from "../../../components/page-component/app-order-goods-info/app-order-goods-info.vue";
    import appOrderExpress from "../../../components/page-component/app-order-express/app-order-express.vue";
    import appOrderBanner from "../../../components/page-component/app-order-banner/app-order-banner.vue";
    import order from "../order.js";
    import AppJumpButton from "../../../components/basic-component/app-jump-button/app-jump-button.vue";

    export default {
        components: {
            AppJumpButton,
            "app-order-goods-info": appOrderGoodsInfo,
            "app-order-express": appOrderExpress,
            "app-order-banner": appOrderBanner,
        },
        data() {
            return {
                order_id: null,
                orderDetail: {
                    detailExpressRelation: [],
                    detailExpress: [],
                },
                is_show: false,
                advance_order: {
                    goods_num: 0
                },
                detail: [],
                sign: '',
            }
        },
        computed: {
            getPageUrl() {
                let orderDetail = this.orderDetail;
                if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 0) {
                    let coverPic = '';
                    orderDetail.detail.forEach(function (item, index) {
                        if (index === 0) {
                            coverPic = item.goods_info.pic_url;
                        }
                    });
                    return `/pages/order/express-detail/express-detail?express=${orderDetail.express}&customer_name=${orderDetail.customer_name}&express_no=${orderDetail.express_no}&cover_pic=${coverPic}`
                } else if (orderDetail.is_send == 1 && orderDetail.detailExpress.length == 1) {
                    let express = orderDetail.detailExpress[0].express;
                    let express_no = orderDetail.detailExpress[0].express_no;
                    let customer_name = orderDetail.detailExpress[0].customer_name;
                    let cover_pic = orderDetail.detailExpress[0].expressRelation[0].orderDetail.goods_info.goods_attr.cover_pic;
                    return `/pages/order/express-detail/express-detail?express=` + express + `&customer_name=` + customer_name + `&express_no=` + express_no + `&cover_pic=` + cover_pic
                } else if (orderDetail.detailExpress.length >= 1) {
                    return '/pages/order/express-list/express-list?order_id=' + orderDetail.id;
                }
            }
        },
        methods: {
            toggle(index) {
                this.orderDetail.composition_list[index].show = !this.orderDetail.composition_list[index].show;
                this.$forceUpdate();
            },
            getOrderDetail() {
                let self = this;
                self.$showLoading();
                self.$request({
                    url: self.$api.order.detail,
                    data: {
                        id: self.order_id,
                    }
                }).then(response => {
                    self.$hideLoading();
                    self.is_show = true;
                    if (response.code == 0) {
                        self.orderDetail = response.data.detail;
                        if(self.sign == 'composition') {
                            for(let i in self.orderDetail.composition_list) {
                                self.orderDetail.composition_list[i].show = false;
                            }
                        }
                    } else {
                        uni.showModal({
                            title: '',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(() => {
                    self.$hideLoading();
                });
            },
            copyText(orderNo) {
                order.copyText(orderNo)
            },
            navigation(store) {
                uni.openLocation({
                    latitude: parseFloat(store.latitude),
                    longitude: parseFloat(store.longitude),
                    name: store.name,
                    address: store.address,
                })
            },
            // 取消 | 申请退款
            cancel(e) {
                let self = this;
                uni.showModal({
                    title: '提示',
                    content: '是否取消订单？',
                    success: function (res) {
                        if (res.confirm) {
                            self.$subscribe(self.orderDetail.template_message_list).then(response => {
                                self.cancelAction(e);
                            }).catch(res => {
                                self.cancelAction(e);
                            });
                        }
                    }
                });
            },
            cancelAction(e) {
                let self = this;
                uni.showLoading({title: '取消中'});
                self.$request({
                    url: self.$api.order.cancel,
                    data: {
                        id: e.id
                    }
                }).then(response => {
                    uni.hideLoading();
                    if (response.code === 0) {
                        if (self.sign === 'advance') {
                            self.$request({
                                url: self.$api.advance.order_detail,
                                method: 'get',
                                data: {
                                    id: self.order_id,
                                }
                            }).then(response => {
                                self.is_show = true;
                                if (response.code === 0) {
                                    self.orderDetail = response.data.detail;
                                } else {
                                    uni.showModal({
                                        title: '',
                                        content: response.msg,
                                        showCancel: false,
                                    });
                                }
                            })
                        } else {
                            self.getOrderDetail();
                        }
                    } else {
                        uni.showModal({
                            title: '',
                            content: response.msg,
                            showCancel: false,
                        });
                    }
                }).catch(() => {
                    uni.hideLoading();
                });
            },
            mobile: function () {
                uni.makePhoneCall({
                    phoneNumber: this.orderDetail.city.mobile,
                })
            },
        },
        onLoad(options) {
            this.order_id = options.id;
            this.sign = options.sign;
        },
        onShow() {
            let self = this;
            let interval = setInterval(function () {
                if (self.sign === 'advance') {
                    self.$request({
                        url: self.$api.advance.order_detail,
                        method: 'get',
                        data: {
                            id: self.order_id,
                        }
                    }).then(response => {
                        self.is_show = true;
                        if (response.code === 0) {
                            self.orderDetail = response.data.detail;
                        } else {
                            uni.showModal({
                                title: '',
                                content: response.msg,
                                showCancel: false,
                            });
                        }
                    })
                } else {
                    self.getOrderDetail();
                }
                clearInterval(interval);
            }, 300);
        }
    }
</script>

<style scoped lang="scss">
    .order-detail-box {
        font-size: $uni-font-size-general-one;
        color: $uni-general-color-one;
        position: absolute;
        width: 100%;
        height: 100%;
    }

    .express-box {
        background: #fff;
        padding: 32#{rpx} 24#{rpx};
        margin-bottom: 20#{rpx};
    }

    .address-box {
        background: #fff;
        padding: 32#{rpx} 24#{rpx};
        margin-bottom: 20#{rpx};
    }

    .address-box .text {
        margin-top: 10#{rpx};
    }

    .order-info-box {
        background: #fff;
        padding: 32#{rpx} 24#{rpx};
        margin-bottom: 20#{rpx};

        &.delivery {
            .deliveryman {
                width: #{72rpx};
                height: #{72rpx};
                display: block;
                margin-right: #{24rpx};
            }

            .delivery-tips {
                font-size: $uni-font-size-weak-one;
                color: $uni-general-color-two;
                margin-bottom: #{16rpx};
            }

            .mr-16 {
                margin-right: #{16rpx};
            }

            .delivery-mobile {
                width: #{96rpx};
                border-left: #{1rpx} solid #e2e2e2;

                .mobile {
                    width: #{40rpx};
                    height: #{40rpx};
                    display: block;
                }
            }

            .content {
                width: #{500rpx};
            }
        }
    }

    .store-info-box {
        background: #fff;
        padding: 32#{rpx} 24#{rpx};
        margin-bottom: 20#{rpx};
    }

    .preferential-box {
        background: #fff;
        padding: 32#{rpx} 24#{rpx};
        border-bottom: 1#{rpx} solid $uni-weak-color-one;
    }

    .preferential-box .item {
        margin: 5#{rpx} 0;
    }

    .order-price-box {
        height: 100#{rpx};
        background: #fff;
        padding: 32#{rpx} 24#{rpx};
        margin-bottom: 20#{rpx};
    }

    .goods-box {
        background: #fff;
        padding: 32#{rpx} 24#{rpx};
        margin-bottom: 20#{rpx};
        &.composition {
            padding: 0;
            padding-bottom: #{8rpx};
            margin-bottom: 0;
            background-color: #f7f7f7;
        }
        .composition-item {
            margin-bottom: #{20rpx};
            background-color: #fff;
            .composition-open {
                text-align: center;
                background-color: #fff;
                height: #{84rpx};
                .composition-btn {
                    display: inline-block;
                    border: #{2rpx} solid #bbbbbb;
                    font-size: #{24rpx};
                    color: #999999;
                    padding: 0 #{24rpx};
                    margin: #{12rpx} 0 #{16rpx};
                    height: #{56rpx};
                    line-height: #{54rpx};
                    border-radius: #{28rpx};
                    image {
                        width: #{22rpx};
                        height: #{12rpx};
                        margin-left: #{16rpx};
                    }
                }
            }
            .goods-list {
                padding: 0 #{24rpx};
            }
            .composition-title {
                height: #{80rpx};
                line-height: #{80rpx};
                padding: 0 #{24rpx};
                font-size: #{28rpx};
                color: #353535;
                margin-bottom: #{24rpx};
                border-bottom: #{2rpx} solid #e2e2e2;
                .composition-type {
                    color: #f39800;
                }
            }
        }
    }

    .goods-box .sale-server {
        margin-top: 20#{rpx};
    }

    .goods-box .sale-box {
        padding-bottom: 15#{rpx};
    }

    .goods-box .refund-status {
        margin-top: 15#{rpx};
        color: $uni-important-color-black;
    }

    .action-box {
        background: #fff;
        padding: 32#{rpx} 24#{rpx};

        .cancel-text {
            font-size: $uni-font-size-import-two;
        }

        .btn {
            border: 1#{rpx} solid #bbbbbb;
            border-radius: 30#{rpx};
            padding: 10#{rpx} 30#{rpx};
        }
    }

    .detail-btn {
        border: 1#{rpx} solid #bbbbbb;
        border-radius: 30#{rpx};
        padding: 10#{rpx} 30#{rpx};
    }

    .e-box {
        width: 100%;
        height: #{100rpx};
        padding: 0 #{24rpx};
        background: #ffffff;
        margin-bottom: #{20rpx};
        .img {
            width: 12#{rpx};
            height: 24#{rpx};
        }
        .express-name {
            margin-bottom: 15#{rpx};
        }
        .text {
            color: #353535;
            font-size: #{28rpx};
        }
    }

    .advance {
        width: #{702rpx};
        border-radius: #{16rpx};
        background-color: #f7f7f7;
        padding: #{32rpx 24rpx};
        .title {
            font-size: #{24rpx};
            color: #ff4544;
            margin-bottom: #{15rpx};
        }
    }

    .item-box {
        border: #{1rpx} solid #c2c2c2;
        padding: #{24rpx};
        border-radius: #{16rpx};
        width: #{702rpx};
    }
</style>