<template>
    <div class="refund">
        <product-list v-bind:title="title" v-bind:list="list" v-bind:refund-data="refundData"></product-list>
        <div class="return-amount">
            <!-- TODO:退货信息优化为组件 -->
            <div class="return-amount-item">
                退款方法

                <span class="icon icon-right"></span>
                <select v-model="amount.return_amount_mode" name="amount-mode">
                    <option v-for="mode in refundData.returnAmountMode" v-bind:value="mode.id">{{mode.name}}</option>
                </select>
            </div>

            <template v-if="amount.return_amount_mode === 2">
                <div class="return-amount-item">
                    <span class="name">银行</span>

                    <input v-model="amount.bank_name" type="text" placeholder="请填写银行名称">
                </div>
                <div class="return-amount-item">
                    <span class="name">卡号</span>

                    <input v-model="amount.bank_card" type="text" placeholder="请填写银行卡卡号">
                </div>
                <div class="return-amount-item">
                    <span class="name">姓名</span>

                    <input v-model="amount.payee_name" type="text" placeholder="收款人姓名">
                </div>
            </template>
            <template v-if="amount.return_amount_mode === 3">
                <div class="return-amount-item">
                    <span class="name">帐号</span>

                    <input v-model="amount.alipay_account" type="text" placeholder="请填写支付宝帐号">
                </div>
                <div class="return-amount-item">
                    <span class="name">姓名</span>

                    <input v-model="amount.alipay_name" type="text" placeholder="收款人姓名">
                </div>
            </template>
        </div>
        <div v-if="refundData.returnAmountInfo" class="return-amount-info">
            {{refundData.returnAmountInfo}}
        </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/refund/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>
    .main-wrap {
        background: #f6f6f6;
    }

    .refund {
        .return-amount {
            margin: 30px 0;
            padding: 0 30px;
            font-size: 32px;
            line-height: 90px;
            background: #fff;
            border-top: 1px solid #eee;
            border-bottom: 1px solid #eee;
        }

        .return-amount-info {
            padding: 0 30px 30px;
            font-size: 24px;
            line-height: 2.5;
            color: #b0b0b0;
        }

        .return-amount-item {
            position: relative;
            width: 100%;
            height: 90px;

            &:after {
                content: "";
                position: absolute;
                left: 0;
                bottom: -1px;
                width: 690px;
                height: 0;
                border-bottom: 1px solid #eee;
                z-index: 1;
            }

            .name {
                float: left;
                width: 160px;
                color: #000;
            }

            input {
                width: 500px;
            }

            span,
            select {
                float: right;
                height: 90px;
                line-height: 90px;
                color: #b0b0b0;
            }

            select {
                direction: rtl;
            }
        }
    }
</style>