<template>
    <app-layout>
        <view v-if="is_show" class="refund-detail-box">
            <app-order-banner :title='refundDetail.status_text'></app-order-banner>

            <view v-if='refundDetail.is_confirm == 1 && refundDetail.type == 2' class='express-box'>
                <view class='express-label t-medium'>换货物流</view>
                <template v-if="refundDetail.merchant_express && refundDetail.merchant_express_no">
                    <app-order-express
                            :pageUrl="`/pages/order/express-detail/express-detail?id=${refundDetail.order_id}&express=${refundDetail.merchant_express}&express_no=${refundDetail.merchant_express_no}&cover_pic=${refundDetail.detail[0].goods_info.pic_url}&customer_name=${refundDetail.customer_name}`"
                            :express='refundDetail.merchant_express'
                            :express_no='refundDetail.merchant_express_no'>
                    </app-order-express>
                </template>
                <template v-else>
                    物流信息: 其它方式({{refundDetail.merchant_express_content}})
                </template>
            </view>

            <view v-if='refundDetail.is_send == 1' class='express-box'>
                <view class='express-label'>退货物流</view>
                <app-order-express
                        :pageUrl="`/pages/order/express-detail/express-detail?id=${refundDetail.order_id}&express=${refundDetail.express}&express_no=${refundDetail.express_no}&cover_pic=${refundDetail.detail[0].goods_info.pic_url}&customer_name=${refundDetail.customer_name}`"
                        :express='refundDetail.express'
                        :express_no='refundDetail.express_no'>
                </app-order-express>
            </view>
            <view v-if='refundDetail.status == 2 && refundDetail.is_send == 0' class='refund-address-box dif-top'>
                <view class='t-extra-small-color'>收件人信息</view>
                <view class='dir-left-nowrap'>
                    <view class='box-grow-1 dir-top-nowrap'>
                        <view class='dir-left-nowrap express'>
                            <view class='box-grow-1'>{{refundDetail.refundAddress.name}}</view>
                            <view class='box-grow-0'>{{refundDetail.refundAddress.mobile}}</view>
                        </view>
                        <view>{{refundDetail.refundAddress.address}}</view>
                    </view>
                    <view class='box-grow-0 cross-center'>
                        <view @click='copyText' class='box-grow-0 detail-btn'>复制</view>
                    </view>
                </view>
                <view class='t-extra-small-color t-small remark'>
                    {{refundDetail.refundAddress.remark}}
                </view>
            </view>

            <form class='form-box'>
                <view v-if='refundDetail.status == 2 && refundDetail.is_send == 0'
                      class='dir-top-nowrap refund-express-box'>
                    <view class='dir-left-nowrap'>
                        <view class='label box-grow-0 cross-center'>快递公司:</view>
                        <view class="dir-left-nowrap box-grow-1" @click="visible = true">
                            <view class="box-grow-1" :style="{'color':express ? 'black' : '#cdcdcd', 'font-size': '31rpx'}">{{express ? express : '请选择快递公司'}}</view>
                            <view class='box-grow-0 cross-center'>
                                <image class='right-icon' src='/static/image/icon/arrow-right.png'></image>
                            </view>
                        </view>
                        <!--<picker class='box-grow-1' @change="bindChange" :value="index" :range="expressList"-->
                                <!--range-key='name'>-->
                            <!--<input disabled v-model="express" placeholder='请选择快递公司1'/>-->
                        <!--</picker>-->
                    </view>
                    <view class='dir-left-nowrap express_no'>
                        <view class='label box-grow-0 cross-center'>快递单号:</view>
                        <input v-model="express_no" class='box-grow-1' placeholder='请填写快递单号'/>
                    </view>
                    <view class='dir-left-nowrap express_no' v-if="expressList[index].name == '京东物流'">
                        <view class='label box-grow-0 cross-center'>商家编码:</view>
                        <input v-model="customer_name" class='box-grow-1' placeholder='请填写商家编码'/>
                    </view>
                </view>

                <view class='goods-box'>
                    <view v-for='item in refundDetail.detail' :key='item.id'>
                        <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>
                    </view>
                </view>

                <view class='preferential-box dir-top-nowrap'>
                    <view class='dir-left-nowrap item'>
                        <view class='label box-grow-0'>售后类型:</view>
                        <view class='t-small-color box-grow-1'>{{refundDetail.type == 1 ? '退货退款' : '换货'}}</view>
                    </view>
                    <template v-if='refundDetail.type == 1'>
                        <view class='dir-left-nowrap item'>
                            <view class='label'>申请退款:</view>
                            <view class='refund-price'>￥{{refundDetail.refund_price}}</view>
                        </view>
                        <view v-if="refundDetail.is_refund == 1" class='dir-left-nowrap item'>
                            <view class='label'>实际退款:</view>
                            <view class='refund-price'>￥{{refundDetail.reality_refund_price}}</view>
                        </view>
                    </template>
                    <view class='dir-left-nowrap item'>
                        <view class='label box-grow-0'>申请原因:</view>
                        <view class='t-small-color box-grow-1'>{{refundDetail.remark}}</view>
                    </view>
                    <view v-if='refundDetail.merchant_remark' class='dir-left-nowrap item'>
                        <view class='label'>商家留言:</view>
                        <view class='merchant-remark'>{{refundDetail.merchant_remark}}</view>
                    </view>
                    <view v-if='refundDetail.pic_list.length > 0' class='dir-left-nowrap'>
                        <view class='label box-grow-0'>图片凭证:</view>
                        <view class="flex-wrap box-grow-1">
                            <image class="picture" v-for="(item, index) in refundDetail.pic_list" :key="index" :src="item"></image>
                        </view>
                    </view>
                </view>

                <view class="main-center">
                    <button @click="formSubmit" v-if='refundDetail.status == 2 && refundDetail.is_send == 0'
                            class='btn'>
                        确认发货
                    </button>
                </view>
            </form>
        </view>
        <view class="dialog" v-if="visible">
            <view class="picker-list">
                <view class="main-between picker-header">
                    <view @click="confirm(2)">取消</view>
                    <view @click="confirm(1)">确定</view>
                </view>
                <picker-view indicator-style="height: 36px;" class="pick" :value="[index]" @change="bindChange">
                    <picker-view-column>
                        <view v-for="item in expressList" class="pick-view" :key="item.name">{{item.name}}</view>
                    </picker-view-column>
                </picker-view>
            </view>
        </view>
        <!--<view v-if="visible" class="show-box dir-top main-center cross-center">-->
            <!--<div class="view-bg">-->
                <!--<picker-view :indicator-style="indicatorStyle" :value="[index]" @change="bindChange">-->
                    <!--<picker-view-column>-->
                        <!--<view class="item" v-for="(item) in expressList" :key="item.name">{{item.name}}</view>-->
                    <!--</picker-view-column>-->
                <!--</picker-view>-->
                <!--<view class="info-end dir-left-nowrap cross-center">-->
                    <!--<view @click='confirm' class="box-grow-1 main-center cross-center">确定</view>-->
                <!--</view>-->
            <!--</div>-->
        <!--</view>-->
    </app-layout>
</template>

<script>
    import appOrderBanner from '../../../components/page-component/app-order-banner/app-order-banner.vue';
    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 order from "../order.js";

    export default {
        components: {
            'app-order-banner': appOrderBanner,
            'app-order-goods-info': appOrderGoodsInfo,
            'app-order-express': appOrderExpress,
        },
        data() {
            return {
                id: null,
                refundDetail: {},
                expressList: [],
                express: '',
                express_no: '',
                customer_name: '',
                index: 0,
                is_show: false,
                visible: false,
                value: [0],
                // indicatorStyle: `height:50rpx;width:100%;margin-top:10rpx;`
            }
        },
        methods: {
            getRefundDetail() {
                let self = this;
                self.$showLoading();
                self.$request({
                    url: self.$api.order.refund_detail,
                    data: {
                        id: self.id
                    }
                }).then(response => {
                    self.$hideLoading();
                    self.is_show = true;
                    if (response.code === 0) {
                        self.refundDetail = response.data.detail;
                        self.expressList = response.data.express_list;
                        self.express = response.data.express_list[0].name;
                    }
                }).catch(() => {
                    self.$hideLoading();
                });
            },
            async formSubmit() {
                let self = this;
                this.$subscribe(this.refundDetail.template_message_list).then(response => {
                    self.submitAction();
                }).catch(res => {
                    self.submitAction();
                });
            },
            submitAction() {
                let self = this;
                try {
                    if (!this.express) {
                        uni.showToast({
                            title: '请选择快递公司',
                            icon: 'none',
                        });
                        return;
                    }
                    if (!this.express_no) {
                        uni.showToast({
                            title: '请填写快递单号',
                            icon: 'none',
                        });
                        return;
                    }
                    if (this.express === '京东物流' && !this.customer_name) {
                        uni.showToast({
                            title: '请填写商家编码',
                            icon: 'none',
                        });
                        return;
                    }

                    this.$showLoading({title: '提交中'});
                    this.$request({
                        url: this.$api.order.refund_send,
                        method: 'post',
                        data: {
                            id: this.id,
                            express: this.express,
                            customer_name: this.customer_name,
                            express_no: this.express_no
                        }
                    }).then(response => {
                        this.$hideLoading();

                        if (response.code === 0) {
                            this.getRefundDetail();
                        } else {
                            uni.showModal({
                                title: '',
                                content: response.msg,
                                showCancel: false,
                            });
                        }
                    });
                } catch(e) {
                    this.$hideLoading();
                }
            },
            copyText() {
                let {name, mobile, address} = this.refundDetail.refundAddress;
                order.copyText(`${name}\xa0${mobile}\xa0${address}`)
            },

            getCustomer() {
                let self = this;
                this.$request({
                    url: self.$api.order.customer,
                    data: {
                        keyword: '京东物流'
                    },
                    method: 'get'
                }).then(response => {
                    let {code, data, msg} = response;
                    
                    if (code === 0) {
                        self.customer_name = data.customer_account;
                    } else {
                        uni.showModal({
                            title: '',
                            content: msg,
                            showCancel: false,
                        });
                    }
                });
            },
            bindChange(e) {
                let index = e.detail.value[0];
                this.index = index;
                if (this.expressList[index].name === '京东物流') {
                    this.getCustomer();
                }
            },
            confirm(type) {
                this.visible = false;
                if (type == 1) {
                    if (this.index >= 0) {
                        this.express = this.expressList[this.index].name;
                    }
                    if (!this.express) {
                        this.express = this.expressList[0].name;
                    }
                }
            }
        },
        onLoad(options) {
            this.id = options.id;
            this.getRefundDetail();
        }
    }
</script>

<style lang="scss" scoped>
    .refund-detail-box {
        position: absolute;
        width: 100%;
        height: 100%;
    }

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

    .express-label {
        margin-bottom: 10#{#{rpx}};
        color: #999999;
        font-size: $uni-font-size-general-one;
    }

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

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

        .picture {
            width: #{120rpx};
            height:#{120rpx};
            margin-right: #{10rpx};
            margin-bottom:#{10rpx};
        }
    }

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

    .preferential-box .label {
        margin-right: 15#{rpx};
    }

    .preferential-box .merchant-remark {
        color: $uni-important-color-red;
    }

    .form-box .btn {
        background-color: $uni-important-color-red;
        color: #fff;
        margin-top: 20#{rpx};
        width: 90%;
        border-radius: #{80rpx}
    }

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

    .refund-address-box .btn {
        margin-left: 20#{rpx};
    }

    .refund-address-box .express {
        margin: 15#{rpx} 0 5#{rpx};
    }

    .refund-address-box .remark {
        margin-top: 10#{rpx};
        padding-top: 5#{rpx};
        border-top: 1#{rpx} solid $uni-weak-color-one;
    }

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

    .refund-express-box .label {
        margin-right: 25#{rpx};
    }

    .refund-express-box .express_no {
        border-top: 1#{rpx} solid $uni-weak-color-one;
        margin-top: 15#{rpx};
        padding-top: 15#{rpx};
    }

    .refund-express-box .right-icon {
        width: 12#{rpx};
        height: 22#{rpx};
        margin-right: 25#{rpx};
    }

    .refund-price {
        color: $uni-important-color-red;
    }

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

    .show-box {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
        transition: 200ms;
        visibility: visible;
        background: rgba(0, 0, 0, 0.8);
        opacity: 1;
        -webkit-animation-name: fadeIn; /*动画名称*/
        -webkit-animation-duration: 0.25s; /*动画持续时间*/
        -webkit-animation-iteration-count: 1; /*动画次数*/
        -webkit-animation-delay: 0s; /*延迟时间*/
        .view-bg {
            background: #fff;
            margin: 0 10%;
            width: 100%;
        }
        .info-line {
            height: #{32rpx} !important;
            width: 1px !important;
            background: #e2e2e2;
        }
        .info-end {
            color: #666666;
            height: #{88rpx};
            font-size: #{32rpx};
            border-top: #{1rpx} solid #e2e2e2;
            width: 100%;
            view {
                height: 100%;
                width: 100%;
            }
        }
        .btn {
            border: none;
            padding: 0;
            background-color: #fff;
            font-size: 32#{rpx};
            color: $uni-general-color-one;
        }
    }
    .dialog {
        position: fixed;
        height: 100%;
        width: 100%;
        bottom: #{96rpx};
        left: 0;
        z-index: 10;
        background-color: rgba(0, 0, 0, .3);
    }

    .picker-list {
        background-color: #fff;
        padding-top: #{20rpx};
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    .picker-header {
        padding: 0 #{24rpx};
        color: #446dfd;
        font-size: #{32rpx};
    }

    .get {
        width: #{160rpx};
        height: #{48rpx};
        line-height: #{48rpx};
        text-align: center;
        border: #{1rpx} solid #446dfd;
        border-radius: #{24rpx};
        position: absolute;
        top: #{20rpx};
        right: #{24rpx};
        display: block;
        color: #446dfd;
    }
    .pick {
        width: 100%;
        height: #{440rpx}
    }

    .pick-view {
        line-height: #{72rpx};
        text-align:center;
        color:#446dfd;
        font-size: #{32rpx};
    }
</style>