<template>
    <div class="return return-exchange">
        <product-list :list="goodsArr" :data="exchangeData" type="exchange">
        </product-list>
        <!--换货信息-->
        <div class="list exchange-info">
            <!--address-->
            <div class="list-item exchange-address" @click="changeAddress">
                <div class="consignee">
                    <span class="mr50">{{address.consignee}}</span>
                    <span>{{address.mobile}}</span>
                </div>
                <p class="address address-region">{{address.area}}</p>
                <p class="address address-detail">{{address.address}}</p>
            </div>
            <!--mode-->
            <div class="list-item exchange-mode">
                    <span>换货方式</span>
                    <i class="icon icon-right right"></i>
                    <select class="right" v-model="deliveryTpye">
                        <option v-for="mode in delivery" :value="mode.id">{{mode.name}}</option>
                    </select>
            </div>
        </div>

        <feature-selector 
                    :is-visible="showFeatureSelector" 
                    :entity="entity"
                    :on-add-to-cart="whenFeatureChange"
                    button-text="确定">
        </feature-selector>
    </div>
</template>

<script>
    const $ = require('jquery');
    const qs = require('yoho-qs');
    const tip = require('common/tip');
    const bus = require('common/vue-bus');
    const Modal = require('common/modal');
    const yoho = require('yoho');
    const returnUtil = require('me/return/util');

    const productList = require('me/return/list.vue');
    const featureSelector = require('component/product/feature-selector.vue');
    const reasonConfig = require('me/return/reason');

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

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

                deliveryTpye: null,
                indexMap: {}, // goods[index].id 与 index 的映射
                processing: false
            };
        },
        events: {
            'feature.close': function() {
                this.showFeatureSelector = false;
            }
        },
        created() {
            // 打开 更换 颜色尺码
            bus.$on('open.featureSelector', msg => {
                this.queryProductFeature(msg.pid);
            });

            yoho.addNativeMethod('submitForm', this.submit.bind(this));

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

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

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

                    this.$set('goodsArr', res.data.goodsList);
                    this.$set('exchangeData', res.data);
                    this.$set('address', res.data.address);

                    reasonConfig.specialReasons = [];
                    res.data.specialExchangeReason.forEach(obj => reasonConfig.specialReasons.push(obj.id));
                    reasonConfig.reasons = [{
                        id: 0,
                        name: '请选择'
                    }].concat(res.data.exchangeReason);
                    reasonConfig.specialNotice = res.data.specialNoticeBo;
                }
            });
        },
        computed: {
            selectedGoods() {
                return this.goodsArr.filter(goods => goods.checked);
            }
        },
        methods: {
            changeAddress() {
                const self = this;

                yoho.goAddress({
                    type: '1'
                }, (address) => {
                    if (address) {
                        self.$set('address', {
                            addressId: address.address_id,
                            area: address.area,
                            zipCode: address.zip_code,
                            mobile: address.mobile,
                            address: address.address,
                            consigneeName: address.consignee_name
                        });
                    }
                }, () => {
                    tip('更换地址失败~');
                });
            },

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

                goods.change = {
                    color: selection.color.text,
                    size: selection.size.text,
                    goodsId: selection.size.goodsId,
                    sku: selection.size.value
                };

                this.showFeatureSelector = false;
            },

            // 查询 商品 feature
            queryProductFeature(pid) {
                $.get(`/product/product_${pid}.json`).then(result => {
                    this.entity = result;
                    this.showFeatureSelector = true;
                    return result;
                });
            },

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

                this.selectedGoods.forEach(good => {

                    data.goods.push({
                        product_skn: good.productSkn,
                        product_skc: good.productSkc,
                        product_sku: good.productSku,
                        goods_type: good.goodsTypeId,
                        last_price: good.lastPrice,
                        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: '/me/return/exchange/submit',
                        data
                    }).then(result => {
                        if (result.code === 200) {
                            returnUtil.applySuccuss(self.page, result.data.applyId);
                        } else {
                            Modal.alert(result.message);
                        }
                    }).always(()=>{
                        self.processing = false;
                    });
                } else {
                    Modal.alert(msg);
                }
            }
        },
        watch: {
            // area code 改变，重新获取 换货方式
            'address.areaCode': function(newVal, oldVal) {
                const self = this;

                $.get('/me/return/exchange/delivery', {
                    areaCode: newVal
                })
                .then(result => {
                    $.each(result.data, (index, obj) => {
                        if (obj.isDefault === 'Y') {
                            self.$set('deliveryTpye', obj.id);
                            return false;
                        }
                    });

                    self.$set('delivery', result.data);
                });
            },
            processing(val) {
                if (val) {

                    // when processing
                } else {

                    // when not in processing
                }

            }
        },
        components: {
            featureSelector,
            productList
        }
    };

</script>
<style>
    @import "../../scss/me/_return.css";

    body {
        background-color: #f6f6f6;
    }
    
    .exchange-info {
        margin: 30px 0;
        background-color: #fff;
    }
    
    .exchange-address {
        .consignee {
            font-size: 32px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        .address {
            font-size: 28px;
            color: #b0b0b0;
        }
    }
    
    .exchange-mode {
        font-size: 34px;
        .icon,
        select {
            color: #b0b0b0;
        }
        .icon:before {
            vertical-align: -5px;
        }
    }

</style>