/*
    添加，修改地址
*/
<template>
    <div class="address-edit">
        <div class="address-edit-box">
            <div class="top">
                <div class="back" @click="close"></div>
                收货地址
            </div>
            <div class="form">
                <div class="form-item">
                    <div class="title" style="width: 60px;">收 货 人:</div>
                    <div class="form-input">
                        <input type="text" v-model="name" v-iosfit placeholder="姓名">
                    </div>
                </div>
                <div class="form-item">
                    <div class="title" style="width: 60px;">手机号码:</div>
                    <div class="form-input">
                        <input type="text" v-model="mobile" v-iosfit placeholder="手机号码">
                    </div>
                </div>
                <div class="form-item">
                    <div class="title" style="width: 60px;">所在区域:</div>
                    <div class="form-input" @click="setCity(true)">
                        <input type="text" v-model="address" disabled placeholder="请选择">
                    </div>
                </div>
                <div class="form-item">
                    <div class="title" style="width: 60px;">详细地址:</div>
                    <div class="form-input">
                        <input type="text" v-model="detail" v-iosfit placeholder="如道路、门牌号、小区、楼栋号、单元室等">
                    </div>
                </div>
                <div class="form-item">
                    <div class="title">设为默认地址:</div>
                    <div class="form-input" style="text-align: right">
                        <input type="checkbox" v-model="is">
                    </div>
                </div>
            </div>
        </div>
        <div class="btn-box">
            <div class="btn" @click="sub"><i class="icon"></i><span>保存地址</span></div>
        </div>
        <transition name="move-bottom">
            <div class="city-box" v-show="setCityShow">
                <shop-city v-model="setCityShow" :address="address" @setCity="setCity"></shop-city>
            </div>
        </transition>
    </div>
</template>

<script>
    import {addAddress,editAddress} from '@/plugins/API/apiShop'
    import shopCity from './shop_city'
    export default {
        components: {
            shopCity
        },
        props: {
            info: {},
            addressInfo: {},
        },
        data(){
            return {
                id: 0,
                setCityShow: false,
                name: '',
                mobile: '',
                province: '',
                city: '',
                area: '',
                detail: '',
                is: 0,
            }
        },
        computed: {
            address(){
                let str = '';
                if(this.province){
                    str += this.province + '-';
                }
                if(this.city){
                    str += this.city + '-';
                }
                if(this.area){
                    str += this.area;
                }
                return str;
            }
        },
        mounted(){
            this.set_addressInfo();
        },
        methods: {
            set_addressInfo(){
                if(this.addressInfo.id){
                    this.id = this.addressInfo.id;
                    this.name = this.addressInfo.name;
                    this.mobile = this.addressInfo.mobile;
                    this.province = this.addressInfo.province;
                    this.city = this.addressInfo.city;
                    this.area = this.addressInfo.area;
                    this.detail = this.addressInfo.detail;
                    this.is = this.addressInfo.isDefault;
                }
            },
            async add_address(){
                const res = await addAddress({
                    uin: this.info.uin,
                    name: this.name,
                    mobile: this.mobile,
                    province: this.province,
                    city: this.city,
                    area: this.area,
                    detail: this.detail,
                    isDefault: this.is ? 1 : 0,
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.$layer.msg('添加成功');
                    this.$emit('get_addressList');
                    this.close();
                }
            },
            async edit_address(){
                 const res = await editAddress({
                    uin: this.info.uin,
                    id: this.id,
                    name: this.name,
                    mobile: this.mobile,
                    province: this.province,
                    city: this.city,
                    area: this.area,
                    detail: this.detail,
                    isDefault: this.is ? 1 : 0,
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.$layer.msg('修改成功');
                    this.$emit('get_addressList');
                    this.close();
                }
            },
            close(){
                this.$emit('input',false);
            },
            setCity(bool,addressInfo){
                if(addressInfo){
                    this.province = addressInfo.province;
                    this.city = addressInfo.city;
                    this.area = addressInfo.area;
                }
                this.setCityShow = bool;
            },
            sub(){
                if(!this.name){
                    this.$layer.msg('请填写收货人！');
                    return false;
                }
                if(!this.mobile){
                    this.$layer.msg('请填写手机号码！');
                    return false;
                }
                if(!this.address){
                    this.$layer.msg('请选择所在区域！');
                    return false;
                }
                if(!this.detail){
                    this.$layer.msg('请填写详细地址！');
                    return false;
                }

                if(this.addressInfo.id){
                    this.edit_address()
                }else{
                    this.add_address();
                }
            }
        }
    }
</script>

<style lang="less" scoped>
    .address-edit{
        position: relative;
        height: 100%;
        padding-bottom: 50px;

        .address-edit-box{
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
    .address-edit-box{
        .top{
            position: relative;
            height: 40px;
            line-height: 40px;
            background: #F0F1F3;
            color: #111111;
            font-size: 14px;
            text-align: center;

            .back{
                position: absolute;
                top: 0;
                left: 0;
                width: 40px;
                height: 40px;
                background: url("./img/left.png") no-repeat center center;
                background-size: 8px auto;
            }
        }
        .form{
            padding: 0 12px;
            font-size: 13px;

            .form-item{
                display: flex;
                height: 45px;
                padding: 10px 0;
                line-height: 25px;
                border-bottom: 1px solid #DBDBDB;
                color: #999;
                font-size: 13px;

                .title{
                    flex: 0 0 auto;
                    margin-right: 5px;
                    text-align: justify;
                    text-align-last: justify;
                }
                .form-input{
                    flex: 1;

                    input[type="text"]{
                        display: block;
                        width: 100%;
                        height: 100%;
                        outline: none;
                        border: 0;
                        background: transparent;
                    }
                    input[type="checkbox"]{
                        position: relative;
                        appearance: none;
                        display: inline-block;
                        width: 45px;
                        height: 25px;
                        outline: none;
                        border: 0;
                        border-radius: 25px;
                        background: #F0F1F3;
                        transition: all 0.3s;

                        &:before{
                            content: '';
                            position: absolute;
                            top: 1px;
                            left: 1px;
                            width: 23px;
                            height: 23px;
                            border-radius: 50%;
                            background: #fff;
                            transition: all 0.3s;
                        }

                        &:checked{
                            background: #F14936;

                            &:before{
                                left: 21px;
                            }
                        }
                    }
                }
            }
        }
    }
    .btn-box{
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 5px 12px;
        width: 100%;
        height: 50px;
        line-height: 40px;
        background-color: #fff;
        border-top: 1px solid #E5E5E5;

        .btn{
            display: block;
            line-height: 40px;
            border-radius: 40px;
            font-size: 16px;
            color: #F14936;
            text-align: center;
            cursor: pointer;

            .icon{
                vertical-align: middle;
                display: inline-block;
                width: 20px;
                height: 20px;
                background: url("./img/add-address.png") no-repeat center center;
                background-size: 12px auto;
            }
            span{
                vertical-align: middle;
            }
        }
    }
    .city-box{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
</style>