/*
    地址列表
*/
<template>
    <div class="address-list">
        <div class="address-list-box">
            <div class="top">
                <div class="back" @click="close"></div>
                收货地址
            </div>
            <ul class="list">
                <li class="item" v-for="(item,index) in addressList" :key="index">
                    <label class="radio">
                        <div class="icon-radio"
                             :class="{'checked': addressId == item.id}"
                             @click="set_addressId(item.id)"
                        ></div>
                    </label>
                    <div class="address-info">
                        <shop-address-item :info="item"></shop-address-item>
                    </div>
                    <div class="operation-box">
                        <div class="operation">
                            <div class="edit" @click="edit(item)"></div>
                            <div class="del" @click="del(item.id)"></div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="btn-box">
            <div class="btn" @click="add"><i class="icon"></i><span>新增收货地址</span></div>
        </div>
        <transition name="move-right">
            <div class="address-edit" v-if="addressEditShow">
                <shop-address-edit
                    v-model="addressEditShow"
                    :info="info"
                    :addressInfo="addressInfo"
                    @get_addressList="get_addressList"
                ></shop-address-edit>
            </div>
        </transition>
    </div>
</template>

<script>
    import {delAddress} from '@/plugins/API/apiShop'
    import shopAddressItem from './shop_addressItem'
    const shopAddressEdit =resolve => require(['./shop_addressEdit'],resolve)

    export default {
        components: {
            shopAddressItem,
            shopAddressEdit,
        },
        props: {
            info: {},
            addressList: {},
            addressId: {},
        },
        data(){
            return {
                addressEditShow: false,
                addressInfo: {},
            }
        },
        methods: {
            add(){
                if(this.addressList.length >= 10){
                    this.$layer.msg('收货地址最多添加10个！');
                    return;
                }
                this.addressInfo = {};
                this.addressEditShow = true;
            },
            edit(info){
                this.addressInfo = info;
                this.addressEditShow = true;
            },
            del(id){
                let _this = this;
                this.$layer.sConfirm({
                    title: '提示',
                    msg: '是否删除该地址？',
                    ok(){
                        _this.del_sub(id);
                    },
                })
            },
            async del_sub(id){
                const res = await delAddress({
                    uin: this.info.uin,
                    id: id
                })
                if(res.code == 200 && res.errorCode == 0){
                    this.$layer.close();
                    this.$layer.msg('删除成功');
                    this.get_addressList();
                }

            },
            get_addressList(){
                this.$emit('get_addressList');
            },
            set_addressId(id){
                this.$emit('set_addressId', id);
            },
            close(){
                this.$emit('input',false)
            }
        }
    }
</script>

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

        .address-list-box{
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }
    }
    .address-list-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;
            }
        }
        .list{
            padding: 0 12px;

            .item{
                position: relative;
                height: 60px;
                line-height: 60px;
                padding: 0 55px 0 40px;
                border-bottom: 1px solid #DBDBDB;

                .radio{
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 40px;
                    height: 100%;
                    text-align: center;

                    .icon-radio{
                        vertical-align: middle;
                        display: inline-block;
                        margin: auto;
                        width: 16px;
                        height: 16px;
                        border-radius: 50%;
                        outline: none;
                        border: 1px solid #989898;
                        background: #fff;

                        &.checked{
                            border: 5px solid #F14936;
                        }
                    }
                }
                .address-info{
                    width: 100%;
                }
                .operation-box{
                    position: absolute;
                    top: 0;
                    right: 0;
                    font-size: 0;
                    width: 55px;
                    height: 100%;
                    text-align: right;

                    .operation{
                        display: inline-block;
                        width: 100%;
                        height: 20px;
                        line-height: 20px;
                        border-left: 1px solid #DBDBDB;

                        .edit,.del{
                            vertical-align: middle;
                            display: inline-block;
                            margin-left: 5px;
                            width: 20px;
                            height: 20px;
                            background-position: center center;
                            background-repeat: no-repeat;
                            background-size: 20px 20px;

                            &.edit{
                                background-image: url(./img/edit.png);
                            }
                            &.del{
                                background-image: url(./img/del.png);
                            }
                        }
                    }
                }
            }
        }
    }
    .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;
            }
        }
    }
    .address-edit{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        background: #fff;
    }
</style>