<template>
    <div>
        <div class="cover-back-menu" @click="pageBack"></div>
        <div v-if="showEditAddress" class="edit-address-wrap">
            <div class="tip">为提高配送时效，请您尽量准确填写四级地址。</div>
            <div class="form-block" style="min-height: 578px;">
                <form class="edit-address">
                    <input type="hidden" name="id" value="">
                    <label class="username">
                        收 货 人 :
                        <input type="text" name="consignee" maxlength="21" v-model="editAddressInfo.consignee" v-bind:value="editAddressInfo.consignee">
                    </label>
                    <label class="mobile">
                        联系电话:
                        <input type="text" name="mobile" v-model="editAddressInfo.mobile" v-bind:value="editAddressInfo.mobile">
                    </label>
                    <label class="area" @click="showAct">
                        所在地区:
                        <input type="hidden" name="area_code" v-bind:value="editAddressInfo.areaCode">
                        <input type="text" name="area" v-bind:value="editAddressInfo.showArea" readonly="">
                        <span class="iconfont"></span>
                    </label>
                    <label class="address">
                        详细地址:
                        <textarea name="address" maxlength="255" v-model="editAddressInfo.address">{{editAddressInfo.address}}</textarea>
                    </label>
                </form>

                <div class="submit" @click="saveAddress">确认</div>
            </div>
            <address-act></address-act>
        </div>
        <div v-else class="address-list-wrap">
            <div class="address-list">
                <div class="address-item" v-for="addr in addressList" @click="choseAddress(addr)">
                    <span class="name">{{addr.consignee}}</span>
                    <span class="tel">{{addr.mobile}}</span>
                    <p class="address-info">{{addr.area}} {{addr.address}}</p>
                    <div class="action iconfont">
                        <span class="edit" @click.stop="editAddress(addr)"></span>
                        <span class="del" @click.stop="delAddress(addr.addressId)"></span>
                    </div>
                </div>
            </div>
            <div class="tip">为提高配送时效，请您尽量准确填写四级地址。</div>
            <div class="add-address" @click="addAddress">添加新地址</div>
        </div>
    </div>
</template>

<script>
    const $ = require('yoho-jquery');
    const tip = require('plugin/tip');
    const bus = require('plugin/vue-bus');
    const modal = require('plugin/modal2');

    const addressAct = require('home/address/address-act.vue');

    module.exports = {
        props: ['address'],
        data() {
            return {
                addressList: [],
                showEditAddress: false,
                editAddressInfo: {}
            };
        },
        created() {
            bus.$on('modify.addressAct', info => {
                if (info) {
                    this.editAddressInfo.areaCode = info.code;
                    this.editAddressInfo.showArea = info.area;
                }
            });

            this.reflushAddressList();
        },
        methods: {
            reflushAddressList() {
                $.ajax({
                    url: '/home/address.json'
                }).then(res => {
                    if (res && res.address) {
                        this.addressList = res.address;
                    }
                });
            },
            pageBack() {
                if (this.showEditAddress) {
                    this.showEditAddress = false;
                } else {
                    bus.$emit('modify.exchangeAddress', false);
                }
            },
            choseAddress(addr) {
                bus.$emit('modify.exchangeAddress', addr);
            },
            editAddress(addr) {
                this.editAddressInfo = addr;
                this.showEditAddress = true;
            },
            delAddress(id) {
                let that = this;

                $.ajax({
                    method: 'POST',
                    url: '/home/delAddress',
                    data: {id: id}
                }).then(result => {
                    if (result.code === 200) {
                        let lastIndex;

                        that.addressList.forEach((element, index) => {
                            if (element.addressId === id) {
                                lastIndex = index;
                            }
                        });

                        if (typeof lastIndex !== 'undefined') {
                            that.addressList.splice(lastIndex, 1);
                        }
                    } else {
                        modal.alert(result.message);
                    }
                });
            },
            addAddress() {
                if (this.addressList.length >= 5) {
                    return tip.show('您最多添加5个收货地址');
                }

                this.editAddress({
                    consignee: '',
                    mobile: '',
                    areaCode: '',
                    showArea: '',
                    address: ''
                });
            },
            validator() {
                let info = this.editAddressInfo;
                let username = info.consignee.replace(/(^\s+)|(\s+$)/g, '');


                // 简单的表单校验
                if (!username) {
                    tip.show('收件人不能为空');
                    return false;
                }

                if (!/^[\u4E00-\u9FA5A-Za-z0-9*]+$/gi.test(username)) {
                    tip.show('收货人姓名不支持特殊符号');
                    return false;
                }

                if (!info.mobile) {
                    tip.show('手机号不能为空');
                    return false;
                }
                if (!info.areaCode || !info.showArea ||
                    info.areaCode.length < 6) {
                    tip.show('省市区不能为空');
                    return false;
                }
                if (!info.address) {
                    tip.show('地址不能为空');
                    return false;
                }

                return {
                    id: info.addressId || '',
                    consignee: username,
                    mobile: info.mobile,
                    area_code: info.areaCode,
                    area: info.showArea,
                    address: info.address
                };

            },
            saveAddress() {
                let that = this;
                let data = this.validator();

                this.submiting = true;

                if (!data) {
                    return;
                }

                $.ajax({
                    method: 'POST',
                    url: '/home/saveAddress',
                    data: data
                }).then(function(res) {
                    if (res && res.code === 200) {
                        that.reflushAddressList();
                        that.showEditAddress = false;
                    } else {
                        tip.show(res.message || '网络出了点问题~');
                    }
                    that.submiting = false;
                });
            },
            showAct() {
                this.$children[0].show = true;
            }
        },
        components: {
            addressAct
        }
    };
</script>

<style>
    .cover-back-menu {
        width: 105px;
        height: 105px;
        position: absolute;
        margin-top: -105px;
        z-index: 100;
    }

    .edit-address-wrap {
        > .tip {
            padding: 20px;
            text-align: center;
            color: #aeaeae;
        }

        .form-block {
            width: 100%;
            color: #d0d0d0;
            background: #f0f0f0;
        }

        .edit-address {
            padding: 0 30px;
            background: #fff;
            font-size: 30px;
            line-height: 88px;
            border-bottom: 1px solid #e0e0e0;

            label {
                display: block;
                position: relative;

                &:after {
                    content: "";
                    position: absolute;
                    right: -30px;
                    bottom: 0;
                    width: 610px;
                    height: 0;
                    border-top: 1px solid #e0e0e0;
                }

                &:last-of-type:after {
                    content: none;
                }

                .iconfont {
                    position: absolute;
                    right: 0;
                    top: 0;
                }
            }

            input,
            textarea {
                position: absolute;
                top: 0;
                right: 40px;
                width: 360px;
                height: 88px;
                color: #444;
                padding: 0;
                border: none;
                -webkit-appearance: none;
            }

            p {
                position: absolute;
                top: 0;
                right: 40px;
                width: 360px;
                height: 88px;
                color: #444;
                padding: 0;
                border: none;
            }

            .address {
                height: 176px;
            }

            textarea {
                right: 0;
                width: 400px;
                height: 58px * 2;
                padding: 20px 0;
                resize: none;
            }
        }

        .submit {
            margin: 30px auto 0;
            width: 470px;
            height: 88px;
            color: #fff;
            background: #444;
            text-align: center;
            font-size: 32px;
            line-height: 88px;

            &.highlight {
                background: rgba(0, 0, 0, 0.6);
            }
        }
    }

    .address-list-wrap {
        > .tip {
            padding: 20px;
            text-align: center;
            color: #aeaeae;
        }

        .address-item {
            display: block;
            padding: 20px 30px;
            color: #b0b0b0;
            background: #fff;
            border-bottom: 1px solid #e0e0e0;

            .name,
            .tel {
                font-size: 30px;
                line-height: 56px;
                color: #444;
                font-weight: bold;
            }

            .name {
                display: inline-block;
                max-width: 380px;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .tel {
                float: right;
            }

            .address-info {
                font-size: 24px;
                line-height: 38px;
            }

            .action {
                font-size: 32px;
                line-height: 60px;
                text-align: right;

                .edit,
                .del {
                    display: inline-block;
                    text-align: center;
                    width: 60px;
                    height: 60px;
                    color: #999;

                    &:hover {
                        color: #666;
                    }
                }

                .edit {
                    margin-right: 20px;
                }
            }
        }

        .add-address {
            display: block;
            margin-bottom: 30px;
            font-size: 32px;
            line-height: 88px;
            color: #444;
            background: #fff;
            text-align: center;
            font-weight: bold;
            border-top: 1px solid #e0e0e0;
            border-bottom: 1px solid #e0e0e0;
        }
    }

</style>