<template>
    <div class="refund">
        <product-list v-bind:title="title" v-bind:list="list" v-bind:refund-data="refundData"></product-list>
        <div class="list exchange-info">
            <div class="list-item exchange-address">
                <div class="exchange-addressee">
                    <span class="mr50">Daisuke Obana</span>
                    <span>13160071768</span>
                </div>
                <p class="address address-region">江苏省 南京市 建邺区</p>
                <p class="address address-detail">嘉陵江东街18号国家广告园5栋</p>
            </div>
            <div class="list-item exchange-mode">
                    换货方式
                    <i class="icon icon-right"></i>
                    <select>
                        <option value=""></option>
                    </select>
            </div>
        </div>
    </div>
</template>

<script>
    const $ = require('yoho-jquery');
    const qs = require('yoho-qs');

    const productList = require('home/refund/product-list.vue');

    module.exports = {
        data() {
            return {
                title: '请选择换货商品',
                list: [],
                amount: {},
                refundData: {}
            };
        },
        computed: {
            submitData() {
                let goods = [];

                this.list.forEach(product => {
                    if (product.checked) {
                        goods.push({
                            last_price: product.lastPrice,
                            remark: product.remark || '',
                            returned_reason: this.refundData.returnReason[product.reason.id].id + '',
                            evidence_images: product.imageList || [],
                            goods_type: product.goodsTypeId + '',
                            product_skn: product.productSkn,
                            product_skc: product.productSkc,
                            product_sku: product.productSku
                        });
                    }
                });

                return {
                    order_code: qs.orderId,
                    goods: JSON.stringify(goods),
                    payment: JSON.stringify(this.amount)
                };
            }
        },
        created() {
            $.ajax({
                url: '/home/exchange/order',
                data: {
                    orderId: qs.orderId
                }
            }).then(res => {
                if (res.data && res.data.goodsList) {
                    res.data.goodsList.forEach(product => {
                        product.checked = false;
                        product.reason = {
                            id: 0
                        };
                        product.imageList = [];
                    });
                    res.data.returnAmountMode.forEach(mode => {
                        if (mode.isDefault === 'Y') {
                            this.$set('amount.return_amount_mode', mode.id);
                        }
                    });
                    this.list = res.data.goodsList;
                    this.refundData = res.data;
                }
            });
        },
        methods: {
            checkSubmitData() {
                const data = this.submitData;

                if (!data.order_code) {
                    return false;
                }

                // 退到银行卡
                if (this.amount.return_amount_mode === 2) {
                    if (!this.amount.bank_name || !this.amount.bank_card || !this.amount.payee_name) {
                        return false;
                    }
                }

                // 退到支付宝
                if (this.amount.return_amount_mode === 3) {
                    if (!this.amount.alipay_account || !this.amount.alipay_name) {
                        return false;
                    }
                }

                return true;
            },
            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);
                    }
                });
            }
        },
        components: {
            productList
        }
    };
</script>
<style>
    body {
        background-color: #f6f6f6;
    }
    .exchange-info {
        margin: 30px 0;
    }
</style>