<template>
    <div class="return return-refund">
        <product-list :list="list" :data="refundData" type="refund"></product-list>

        <div v-if="refundData.return_amount_info" class="return-amount-info">
            {{refundData.return_amount_info}}
        </div>
        <div v-else class="return-info-hide-margtin-30"></div>

        <div class="return-amount">
            <!-- TODO:退货信息优化为组件 -->
            <div class="return-amount-title">
                <span class="left">
                    退款方式
                </span>
                <span class="right">
                    <select v-model="amount.return_amount_mode" name="amount-mode">
                        <option v-for="(mode, index) in refundData.return_amount_mode" :key="index" :value="mode.id">{{mode.name}}</option>
                    </select>
                    <span class="iconfont">&#xe604;</span>
                </span>
            </div>

            <div v-if="amount.return_amount_mode === 2" class="return-amount-item">
                <p>银行：<span><input v-model="amount.bank_name" type="text" placeholder="请填写银行名称"></span></p>
                <p>卡号：<span><input v-model="amount.bank_card" type="text" placeholder="请填写银行卡卡号"></span></p>
                <p>姓名：<span><input v-model="amount.payee_name" type="text" placeholder="请填写收款人姓名"></span></p>
            </div>

            <div v-if="amount.return_amount_mode === 3" class="return-amount-item">
                <p>帐号：<span><input v-model="amount.alipay_account" type="text" placeholder="请填写支付宝帐号"></span></p>
                <p>姓名：<span><input v-model="amount.alipay_name" type="text" placeholder="请填写收款人姓名"></span></p>
            </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 productList = require('home/return/list.vue').default;
    const reasonConfig = require('home/return/reason');
    const bus = require('plugin/vue-bus');
    const loading = require('plugin/loading');

    module.exports = {
        data() {
            return {
                page: 'refund',
                list: [],
                amount: {
                    return_amount_mode: 0,
                    bank_name: '',
                    bank_card: '',
                    payee_name: '',
                    alipay_account: '',
                    alipay_name: ''
                },
                r: {},
                refundData: {},
                submitData: {},
                processing: false
            };
        },
        created() {
            $.ajax({
                url: '/home/return/refund/order',
                data: {
                    orderCode: qs.orderCode
                }
            }).then(res => {
                if (res.data && res.data.goods_list) {
                    res.data.goods_list.forEach((product, index) => {
                        product.checked = false;
                        product.reason = {
                            id: 0
                        };
                        product.imageList = [];
                        product.listIndex = index;
                    });

                    res.data.return_amount_mode.forEach(mode => {
                        if (mode.is_default === 'Y') {
                            this.amount.return_amount_mode = mode.id;
                        }
                    });

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

                    this.list = res.data.goods_list;
                    this.refundData = res.data;
                }
            });

            bus.$on('subRefundForm', () => {
                this.submit();
            });
        },
        watch: {
            processing(val) {
                if (val) {
                    loading.showLoading();
                } else {
                    loading.hideLoading();
                }
            }
        },
        methods: {
            checkSubmitData() {
                let data = this.submitData;

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

                // 未选择商品
                if (this.goods === '[]') {
                    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;
            },
            computerSubmitData: function() {
                let goods = [];

                this.list.forEach(product => {
                    if (product.checked && product.reason.id) {
                        goods.push({
                            last_price: product.last_price,
                            remark: product.remark || '',
                            returned_reason: product.reason.id,
                            evidence_images: product.imageList || [],
                            goods_type: product.goods_type_id + '',
                            product_skn: product.product_skn,
                            product_skc: product.product_skc,
                            product_sku: product.product_sku
                        });
                    }
                });

                if (this.amount.return_amount_mode === 2) {
                    this.amount.alipay_account = '';
                    this.amount.alipay_name = '';
                } else if (this.amount.return_amount_mode === 3) {
                    this.amount.bank_name = '';
                    this.amount.bank_card = '';
                    this.amount.payee_name = '';
                }

                return {
                    order_code: qs.orderCode,
                    goods: JSON.stringify(goods),
                    payment: JSON.stringify(this.amount)
                };
            },

            submit() {
                let self = this;

                this.submitData = this.computerSubmitData();

                if (!this.checkSubmitData()) {
                    return modal.alert('', '请填写完整退货信息');
                }

                if (!this.processing) {
                    this.processing = true;
                    $.ajax({
                        method: 'POST',
                        url: '/home/return/refund/submit',
                        data: this.submitData
                    }).then(result => {
                        this.processing = false;
                        if (result.code === 200) {
                            returnUtil.applySuccuss(this.page, result.data.apply_id);
                        } else {
                            modal.alert(result.message);
                        }
                    }).always(()=>{
                        self.processing = false;
                    });
                }
            }
        },
        components: {
            productList
        }
    };
</script>

<style>
    @import "home/refund/_return.css";

    .main-wrap {
        background: #f0f0f0;
    }

    .return-refund {
        .return-amount {
            font-size: 32px;
            background: #fff;
        }

        .return-amount-title {
            padding: 20px 30px;
            overflow: hidden;
            color: #444;

            .left {
                float: left;
                font-size: 34px;
            }

            .right,
            .right select {
                font-size: 28px;
                color: #b0b0b0;
            }

            .right {
                float: right;
            }
        }

        .return-amount-info {
            padding: 20px 30px;
            font-size: 24px;
            color: #b0b0b0;
        }

        .return-info-hide-margtin-30 {
            margin-top: 30px;
        }

        .return-amount-item {
            p {
                border-top: 1px solid #e0e0e0;
                padding: 20px 30px;
            }

            input {
                border: none;
                font-size: 26px;
            }
        }
    }
</style>