<template>
    <div class="refund">
        <div class="title">请选择换货商品</div>
        <div>
            <exchange-item v-for="good in selectedGoods" :product="good"></exchange-item>
        </div>
        <div>
            <product-list v-bind:list="goods" v-bind:data="exchangeData" type="exchange"></product-list>
        </div>
        <!--换货信息-->
        <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="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"
                    :config="{btnTxt:'确定'}">
        </feature-selector>
    </div>
</template>

<script>
    const $ = require('yoho-jquery');
    const qs = require('yoho-qs');
    const bus = require('common/vue-bus');

    const productList = require('home/return/list.vue');
    const exchangeItem = require('home/exchange/item.vue');
    const featureSelector = require('component/product/feature-selector.vue');

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

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

                deliveryType: null,
                indexMap: {} // goods[index].id 与 index 的映射
            };
        },
        computed: {
            // 换货商品
            selectedGoods() {
                return this.goods.filter(product => {
                    return product.checked;
                });
            },
            unselectedGoods() {
                return this.goods.filter(product => {
                    return !product.checked;
                });
            }
        },
        events: {
            'feature.close': function() {
                this.showFeatureSelector = false;
            }
        },
        created() {
            // 打开 更换 颜色尺码
            bus.$on('open.featureSelector', msg => {
                this.showFeatureSelector = true;
                this.queryProductFeature(msg.pid);
            });

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

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

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

                    this.goods = 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;
                }
            });
        },
        methods: {
            changeAddress() {
                alert('TODO:更换地址');
            },

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

                this.showFeatureSelector = false;
                this.goods[index]._change = {

                };
            },

            // 查询 商品 feature
            queryProductFeature(pid) {
                $.get(`/product/product_${pid}.json`).then(result => {
                    this.entity = result;
                    this.entity.id = pid;
                    return result;
                });
            },
            submit() {
                if (!this.checkSubmitData()) {
                    alert('请填写完整退换货信息');
                }
                $.ajax({
                    method: 'POST',
                    url: '/home/refund/submit',
                    data: this.submitData
                }).then(result => {
                    if (result.code === 200) {
                        console.log(result);
                    } else {
                        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: {
            productList,
            exchangeItem,
            featureSelector
        }
    };

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