<template>
    <div>
        <header-box title="退货申请" ref="header"></header-box>
        <div class="return return-refund">
            <product-list :list="list" :data="refundData" type="refund"></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.return_amount_mode" :key="mode.id" :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.return_amount_info" class="return-amount-info">
                {{refundData.return_amount_info}}
            </div>
        </div>
    </div>
</template>

<script>
    import $ from 'jquery';
    import qs from 'yoho-qs';
    import modal from 'common/modal';
    import returnUtil from 'common/util';
    import yoho from 'yoho';
    import productList from 'me/return/list.vue';
    import reasonConfig from 'me/return/reason';
    import HeaderBox from 'component/header.vue';

    export default {
        data() {
            return {
                page: 'refund',
                list: [],
                amount: {},
                refundData: {}
            };
        },
        computed: {
            submitData() {
                let goods = [];

                this.list.forEach(product => {
                    if (product.checked) {
                        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
                        });
                    }
                });

                return {
                    order_code: qs.orderCode,
                    goods: JSON.stringify(goods),
                    payment: JSON.stringify(this.amount)
                };
            }
        },
        created() {
            yoho.addNativeMethod('submitForm', this.submit.bind(this));

            $.ajax({
                url: '/me/return/refund/order',
                data: {
                    orderCode: qs.orderCode
                }
            }).then(res => {
                if (res.data && res.data.goods_list) {
                    res.data.goods_list.forEach(product => {
                        product.checked = false;
                        product.reason = {
                            id: 0
                        };
                        product.imageList = [];
                    });
                    res.data.return_amount_mode.forEach(mode => {
                        if (mode.is_default === 'Y') {
                            this.$set(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: '请选择'
                    }].concat(res.data.return_reason);
                    reasonConfig.specialNotice = res.data.special_notice;

                    this.list = res.data.goods_list;
                    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() {
                const self = this;

                if (!this.checkSubmitData()) {
                    modal.alert('', '请填写完整退货信息');
                }
                $.ajax({
                    method: 'POST',
                    url: '/me/return/refund/submit',
                    data: this.submitData
                }).then(result => {
                    if (result.code === 200) {
                        returnUtil.applySuccuss(self.page, result.data.apply_id);
                    } else {
                        modal.alert(result.message);
                    }
                });
            }
        },
        components: {
            productList,
            HeaderBox
        }
    };
</script>

<style>
    @import "../../scss/me/_return.css";

    .main-wrap {
        background: #f6f6f6;
    }

    .return-refund {
        .return-amount {
            margin: 30px 0;
            padding: 0 30px;
            font-size: 32px;
            line-height: 90px;
            background: #fff;
        }

        .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;
                margin-right: 24px;
            }
        }
    }
</style>