<template>
    <address-list v-if="showChoseAddress" :address="address"></address-list>
    <div v-else class="return return-exchange">
        <product-list :list="goodsArr" :data="exchangeData" type="exchange">
        </product-list>

        <div class="title">商品寄回地址</div>

        <!--换货信息-->
        <div class="list exchange-info">
            <!--address-->
            <div class="list-item exchange-address" @click="changeAddress">
                <div class="consignee">
                    <span class="mr50 name">{{address.consignee}}</span>
                    <span class="right">{{address.mobile}}</span>
                </div>
                <p class="address address-detail">{{address.area}} {{address.address}}</p>
            </div>
            <!--mode-->
            <div class="list-item exchange-mode">
                <span>换货方式</span>
                <i class="icon iconfont right">&#xe604;</i>
                <select class="right select-mode" v-model="deliveryTpye">
                    <option v-for="(mode, index) in delivery" :key="index" :value="mode.id">{{mode.name}}</option>
                </select>
            </div>
        </div>
    </div>
</template>

<script>
    const $ = require('yoho-jquery');
    const qs = require('yoho-qs');
    const Modal = require('plugin/modal2');
    const returnUtil = require('plugin/util');
    const bus = require('plugin/vue-bus');
    const loading = require('plugin/loading');
    const chosePanel = require('common/chose-panel-new');

    const productList = require('home/return/list.vue');
    const reasonConfig = require('home/return/reason');
    const addressList = require('home/address/list.vue');

    const specialRid = [0, 4, 6, 8];

    module.exports = {
        data() {
            return {
                title: '请选择换货商品',
                page: 'exchange',
                orderCode: qs.orderCode,
                showFeatureSelector: false,
                entity: {},
                exchangeData: {},

                goodsArr: [],
                address: {},
                delivery: [],

                deliveryTpye: null,
                indexMap: {}, // goods[index].id 与 index 的映射
                processing: false,
                showChoseAddress: false
            };
        },
        events: {
            'feature.close': function() {
                this.showFeatureSelector = false;
            }
        },
        created() {
            // 提交按钮dom
            this.$submitBtn = $('#yoho-header .nav-btn');

            this.$submitBtn.on('click', this.submit);

            bus.$on('open.featureSelector', msg => {
                this.queryProductFeature(msg.pid, msg.sku, msg.rid);
            });

            bus.$on('modify.exchangeAddress', addr => {
                if (addr) {
                    this.address = addr;
                }
                this.showChoseAddress = false;
            });

            // 获取 换货商品
            $.ajax({
                url: '/home/return/exchange/order',
                data: {
                    orderCode: this.orderCode
                }
            }).then(res => {
                const self = this;

                if (res.data && res.data.goods_list) {
                    res.data.goods_list.forEach((product, index) => {
                        product.checked = false;
                        product.change = {};
                        product.reason = {
                            id: 0
                        };
                        product.imageList = [];

                        self.indexMap[product.product_id] = index; // 生成映射
                    });

                    this.goodsArr = res.data.goods_list;
                    this.exchangeData = res.data;
                    this.address = res.data.address;

                    reasonConfig.specialReasons = [];
                    res.data.special_exchange_reason.forEach(obj => reasonConfig.specialReasons.push(obj.id));
                    reasonConfig.reasons = [{
                        id: 0,
                        name: '请选择'
                    }].concat(res.data.exchange_reason);
                    reasonConfig.specialNotice = res.data.special_notice;

                    this.reflushDeliveryTpye(this.address.area_code);
                }
            });
        },
        computed: {
            selectedGoods() {
                return this.goodsArr.filter(goods => goods.checked);
            }
        },
        methods: {
            changeAddress() {
                this.showChoseAddress = true;
            },

            // 商品 feature改变
            whenFeatureChange(selection) {
                const index = this.indexMap[selection.productId];
                const goods = this.goodsArr[index];

                goods.change = {
                    color: selection.sku.prop.color.valName,
                    size: selection.sku.prop.size.valName,
                    goodsId: selection.sku.prop.color.goodsId,
                    sku: selection.sku.skuId
                };
            },

            // 处理商品尺码数据
            handelProductData(data, sku) {
                if (data && data.cartInfo) {
                    data.cartInfo.skus.map(value => {
                        if (sku && +value.skuId === sku) {
                            value.limitBuyTip = '无理由换货不可选择相同颜色尺码';
                            value.storage = 0;
                        } else {
                            value.limitBuyTip && delete value.limitBuyTip;
                            value.storage = value.realStorage;
                        }
                        return value;
                    });
                }

                return data;
            },

            // 查询 商品 feature
            queryProductFeature(pid, sku, rid) {
                let that = this;
                let _sku = specialRid.indexOf(rid) === -1 ? +sku : false;

                if (this.entity[pid]) {
                    this.showChosePanel(this.entity[pid], _sku);
                    return;
                }

                $.get('/product/detail/newinfo', {
                    id: pid
                }, function(data) {
                    if (data && data.cartInfo) {
                        data.cartInfo.skus.map(value => {
                            value.realStorage = value.storage;
                            return value;
                        });
                    }

                    that.showChosePanel(data, _sku);
                    that.entity[pid] = data;
                });
            },

            // 商品选择板
            showChosePanel(data, sku) {
                var that = this;

                this.handelProductData(data, sku);

                chosePanel.show({
                    data,
                    disableNum: 1,
                    buttonText: {
                        text: '确定'
                    }
                }).then(result => {
                    that.whenFeatureChange(result);
                }).catch(error => {
                    console.log(error);
                });
            },

            reflushDeliveryTpye(code) {
                $.get('/home/return/exchange/delivery', {
                    areaCode: code
                }).then(result => {
                    this.delivery = result.data;

                    $.each(result.data, (index, obj) => {
                        if (obj.is_default === 'Y') {
                            this.deliveryTpye = obj.id;
                            return false;
                        }
                    });
                });
            },

            // 生成提交数据
            submitData() {
                const data = {
                    order_code: this.orderCode,
                    address_id: this.address.address_id,
                    address: this.address.address,
                    consignee_name: this.address.consignee,
                    area_code: this.address.area_code,
                    zip_code: this.address.zip_code,
                    mobile: this.address.mobile,
                    delivery_tpye: this.deliveryTpye,
                    app_type: 1,
                    goods: []
                };

                this.selectedGoods.forEach(good => {

                    data.goods.push({
                        product_skn: good.product_skn,
                        product_skc: good.product_skc,
                        product_sku: good.product_sku,
                        goods_type: good.goods_type_id,
                        last_price: good.last_price,
                        exchange_reason: good.reason.id,
                        remark: good.remark || '',
                        evidence_images: good.imageList || '',
                        new_goods_id: good.change.goodsId,
                        new_product_sku: good.change.sku
                    });
                });

                return data;
            },

            validator: function(data) {
                let msg = '';

                if (!data.order_code) {
                    msg = '订单号有问题';
                }

                if (!data.goods.length) {
                    msg = '至少选中一个换货商品';
                }

                data.goods.some(goods => {
                    let isSpecialReason = reasonConfig.specialReasons.indexOf(goods.exchange_reason) !== -1;

                    if (goods.exchange_reason === 0) {
                        msg = '请选择选货原因';
                        return true;
                    }

                    if (isSpecialReason && !(goods.remark && goods.evidence_images && goods.evidence_images.length)) {
                        msg = '换货原因请填写完整';
                        return true;
                    }

                    return false;
                });

                return msg;
            },

            // 提交 换货
            submit() {
                const self = this;
                const data = this.submitData();
                const msg = this.validator(data);

                if (msg === '' && !this.processing) {
                    this.processing = true;
                    data.goods = JSON.stringify(data.goods);

                    $.ajax({
                        method: 'POST',
                        url: '/home/return/exchange/submit',
                        data
                    }).then(result => {
                        if (result.code === 200) {
                            returnUtil.applySuccuss(self.page, result.data.apply_id);
                        } else {
                            Modal.alert(result.message);
                        }
                    }).always(()=>{
                        self.processing = false;
                    });
                } else {
                    Modal.alert('', msg);
                }
            }
        },
        watch: {
            showChoseAddress(val) {
                if (val) {
                    this.$submitBtn.hide();
                } else {
                    this.$submitBtn.show();
                }
            },
            'address.areaCode': function(newVal) { // area code 改变，重新获取 换货方式
                this.reflushDeliveryTpye(newVal);
            },
            processing(val) {
                if (val) {
                    loading.showLoading();
                } else {
                    loading.hideLoading();
                }
            }
        },
        components: {
            productList,
            addressList
        }
    };
</script>

<style>
    @import "home/refund/_return.css";
    @import "cart/chose-panel.css";

    body {
        background-color: #f6f6f6;
    }

    .right {
        float: right;
    }

    .return-exchange .title {
        padding: 0 30px;
        color: #b0b0b0;
        font-size: 28px;
        line-height: 60px;
    }

    .exchange-info {
        padding: 0 30px;
        margin-bottom: 20px;
        background-color: #fff;
    }

    .exchange-address {
        padding: 20px 0;
        font-size: 28px;

        .name {
            font-size: 34px;
        }

        .address {
            color: #b0b0b0;
            padding-top: 10px;
            line-height: 1.5;
        }

        &:after {
            position: absolute;
            z-index: 1;
            content: "";
            height: 0;
            display: block;
            right: 0;
            left: 30px;
            border-bottom: 1px solid #eee;
            margin-top: 20px;
        }
    }

    .exchange-mode {
        font-size: 34px;
        line-height: 34px;
        padding: 20px 0;

        .icon,
        select {
            line-height: 34px;
            color: #b0b0b0;
        }

        .select-mode {
            margin-right: 6px;
        }
    }

    .return-exchange-page {
        .chose-items > .num {
            display: none;
        }
    }
</style>