<template>
    <div class="address-select-component" v-show="show">
        <div class="address-select-box">
            <div class="component-title"><span class="title">所在地区</span><span class="iconfont close" @click="closeAddBox">X</span></div>
            <ul class="head-address-ul">
                <li v-if="province" :class="{ 'head-address-li': provinceActive }" @click="getAddress()">{{province}}</li>
                <li v-else class="head-address-li">请选择</li>
                <li v-if="city" :class="{ 'head-address-li': cityActive }">{{city}}</li>
                <li v-if="area" :class="{ 'head-address-li': areaActive }">{{area}}</li>
                <li v-if="street" :class="{ 'head-address-li': streetActive }">{{street}}</li>
            </ul>
            <div class="address-container">
                <div class="address-content">
                    <ul class="address-ul">
                        <li v-for="address in addresses" @click="getAddress(address.id, address.caption)">{{address.caption}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
.address-select-component {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.5);

    .address-select-box {
        margin-top: 400px;
        background: #fff;

        .component-title {
            text-align: center;
            line-height: 80px;
            font-size: 32px;
            color: #ccc;
            padding: 0 30px;

            .close {
                float: right;
            }
        }

        .head-address-ul {
            margin: 0 0 0 30px;
            padding: 0;
            list-style: none;
            overflow: hidden;
            background-color: white;
            font-size: 24px;
            color: #444;

            li {
                display: block;
                float: left;
                height: 40px;
                line-height: 40px;
                position: relative;
                margin-right: 75px;
            }

            li:last-child {
                margin-right: 30px;
            }

            .head-address-li {
                color: #f23030;
            }

            .head-address-li:after {
                width: 100%;
                height: 1px;
                border-bottom: 2px solid #f23030;
                position: absolute;
                bottom: 0;
                left: 0;
                content: '';
            }
        }

        .head-address-ul:after {
            content: '';
            width: 100%;
            height: 1px;
            position: absolute;
            border-bottom: 1px solid #e3e5e9;
            left: 0px;
            bottom: 0px;
            transform: scaleY(0.5);
            -webkit-transform: scaleY(0.5);
        }

        .address-container {
            margin: 0;
            overflow: hidden;
            height: 100%;
            width: 100%;
            border-top: solid 1px #ccc;

            .address-content {
                transform: translate(0px, 0px) translateZ(0px);
                height: 620px;

                .address-ul {
                    padding: 0;
                    margin: 0;
                    list-style: none;
                    height: 100%;
                    overflow: auto;
                    font-size: 24px;
                    color: #232326;

                    li {
                        height: 80px;
                        line-height: 80px;
                        padding-left: 30px;
                        position: relative;
                        overflow: hidden;
                    }

                    li:after {
                        content: '';
                        width: 100%;
                        height: 1px;
                        position: absolute;
                        left: 0px;
                        bottom: 0px;
                        transform: scaleY(0.5);
                        -webkit-transform: scaleY(0.5);
                    }
                }
            }
        }
    }
}
</style>
<script>
    require('../../../scss/home/_address.css');

    module.exports = {
        data() {
            return {
                addresses:[],
                show: false,
                province: '',
                provinceActive: false,
                city: '',
                cityActive: false,
                area: '',
                areaActive: false,
                street: '',
                streetActive: false
            };
        },
        watch: {
            province: function() {

            }
        },
        methods: {

            /* 获取地址数据 */
            getAddress(id, caption) {
                if (!id) {
                    this.province = this.city = this.area = this.street = '';
                    this.provinceActive = true;
                    this.cityActive = this.areaActive = this.streetActive = false;
                }
                if (!this.province) {
                    this.province = caption;
                    this.provinceActive = true;
                } else if (!this.city) {
                    this.city = caption;
                    this.cityActive = true;
                    this.provinceActive = false;
                } else if (!this.area) {
                    this.area = caption;
                    this.areaActive = true;
                    this.cityActive = false;
                } else if (!this.street) {
                    if (caption.length > 5) {
                        this.street = caption.substring(0,2) + '...' + caption.substring(caption.length - 2);
                    } else {
                        this.street = caption;
                    }
                    this.streetActive = true;
                    this.areaActive = false;
                }
                
                $.get('/home/getaddress.json', {
                    id: id || '0'
                }, resultData => {
                    this.addresses = resultData;
                });
            },

            /* 关闭地址选择组件 */
            closeAddBox() {
                this.show = false;
            }
        },
        created: function() {
            this.getAddress();
        }
    };

</script>