<template>
    <div class="return">
        <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="co
                    <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="deliveryType">
                        <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('yoho-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 productList = require('home/return/list.vue');
    const featureSelector = require('component/product/feature-selector.vue');

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

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

                deliveryType: null,
                indexMap: {} // goods[index].id 与 index 的映射
            };
        },
        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: '/home/exchange/order',
                data: {
                    orderId: 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);

                    // 全局只读变量 放入 全局对象
                    const arr = [];

                    res.data.specialExchangeReason.forEach(obj => arr.push(obj.id));
                    global.store.reasons = [{
                        id: 0,
                        name: '请选择'
                    }].concat(res.data.exchangeReason);
                    global.store.specialReasons = arr;
                    global.store.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
                };
                console.log(goods.goodsId);

                this.showFeatureSelector = false;

                // this.goodsArr.$set(index, Object.assign({}, goods, change));
            },

            // 查询 商品 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,
                    consigee_name: this.address.consignee,
                    area_code: this.address.areaCode,
                    zip_code: this.address.zipCode,
                    mobile: this.address.mobile,
                    delivery_typ: this.deliveryType,
                    app_type: 1,
                    goods: []
                };

                this.selectedGoods.forEach(good => {
                    data.goods.push({
                        product_skn: good.productSkn,
                        product_skc: 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;
            },

            // 提交 换货
            submit() {
                $.ajax({
                    method: 'POST',
                    url: '/home/exchange/submit',
                    data: this.submitData()
                }).then(result => {
                    if (result.code === 200) {
                        console.log(result);
                    } else {
                        modal.alert(result.message);
                    }
                });
            }
        },
        watch: {
            // area code 改变，重新获取 换货方式
            'address.areaCode': function(newVal, oldVal) {
                const self = this;

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

                    self.$set('delivery', result.data);
                });
            }
        },
        components: {
            featureSelector,
            productList
        }
    };

</script>
<style>
    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>