<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">&#xe623;</span></div>
            <ul class="head-address-ul">
                <li v-if="province.title" :class="{ 'head-address-li': province.titleActive }" @click="clickTitle('province')">{{province.title}}</li>
                <li v-if="city.title" :class="{ 'head-address-li': city.titleActive }" @click="clickTitle('city')">{{city.title}}</li>
                <li v-if="area.title" :class="{ 'head-address-li': area.titleActive }" @click="clickTitle('area')">{{area.title}}</li>
                <li v-if="street.title" :class="{ 'head-address-li': street.titleActive }">{{street.title}}</li>
            </ul>
            <div class="address-container">
                <div class="address-content">
                    <ul v-if="province.showList" class="address-ul">
                        <li v-for="pprovince in provinces"
                            @click="switchAddress(pprovince.id, pprovince.caption)">{{pprovince.caption}}
                            <span v-if="pprovince.id === province.id" class="iconfont icon-V"></span></li>
                    </ul>
                    <ul v-if="city.showList" class="address-ul">
                        <li v-for="pcity in citys"
                            @click="switchAddress(pcity.id, pcity.caption)">{{pcity.caption}}
                            <span v-if="pcity.id === city.id" class="iconfont icon-V"></span></li>
                    </ul>
                    <ul v-if="area.showList" class="address-ul">
                        <li v-for="parea in areas"
                            @click="switchAddress(parea.id, parea.caption)">{{parea.caption}}
                            <span v-if="parea.id === area.id" class="iconfont icon-V"></span></li>
                    </ul>
                    <ul v-if="street.showList" class="address-ul">
                        <li v-for="pstreet in streets"
                            @click="switchAddress(pstreet.id, pstreet.caption)">{{pstreet.caption}}
                            <span v-if="pstreet.id === street.id" class="iconfont icon-V"></span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
.icon-V:before { content: "\e6ea"; }
.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;

                        span {
                            color: #f23030;
                            font-size: 14px;
                        }
                    }

                    li:after {
                        content: '';
                        width: 100%;
                        height: 1px;
                        position: absolute;
                        left: 0px;
                        bottom: 0px;
                        transform: scaleY(0.5);
                        -webkit-transform: scaleY(0.5);
                    }
                }
            }
        }
    }
}
</style>
<script>
    let $ = require('yoho-jquery');

    require('home/_address.css');

    let areaForm = $('.edit-address');
    let areaCode = areaForm.find('input[name=area_code]');
    let area = areaForm.find('input[name=area]');

    module.exports = {
        data() {
            return {
                provinces:[],
                citys: [],
                areas: [],
                streets: [],
                show: false,
                province: {
                    id: '',
                    title: '',
                    showList: true,
                    titleActive: false,
                },
                city: {
                    id: '',
                    title: '',
                    showList: false,
                    titleActive: false,
                },
                area: {
                    id: '',
                    title: '',
                    showList: false,
                    titleActive: false,
                },
                street: {
                    id: '',
                    title: '',
                    showList: false,
                    titleActive: false,
                }
            };
        },
        methods: {
             /* 选择地址后的显示控制 */
            changeShow(id, caption) {
                switch ((id + '').length) {
                    case 2:
                        this.province.id = id;
                        this.province.title = caption;
                        this.city.showList = this.province.titleActive = true;
                        this.province.showList = this.area.showList = this.street.showList = false;
                        this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
                    break;
                    case 4:
                        this.city.id = id;
                        this.city.title = caption;
                        this.area.showList = this.city.titleActive = true;
                        this.province.showList = this.city.showList = this.street.showList = false;
                        this.province.titleActive = this.area.titleActive = this.street.titleActive = false;
                    break;
                    case 6:
                        this.area.id = id;
                        this.area.title = caption;
                        this.street.showList = this.area.titleActive = true;
                        this.province.showList = this.city.showList = this.area.showList = false;
                        this.province.titleActive = this.city.titleActive = this.street.titleActive = false;
                    break;
                    case 9:
                        this.street.id = id;
                        if (caption.length > 5) {
                            this.street.title = caption.substring(0, 2) + '...' + caption.substring(caption.length - 2);
                        } else {
                            this.street.title = caption;
                        }
                        this.street.showList =this.street.titleActive = true;
                        this.province.showList = this.city.showList = this.area.showList = false;
                        this.province.titleActive = this.city.titleActive = this.area.titleActive = false;
                    break;
                    default:
                        this.province.title = '请选择';
                        this.province.showList = this.province.titleActive = true;
                        this.city.showList = this.area.showList = this.street.showList = false;
                        this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
                    break;
                }
            },

            /* 获取地址数据 */
            switchAddress(id, caption) {
                if (!id) {
                    id = 0;
                }

                $.get('/home/getaddress.json', {
                    id: id
                }, resultData => {

                    /* 结果返回 */
                    if (resultData.length < 1) {
                        areaCode.val(id);
                        area.val(this.province.title + ' '
                             + this.city.title + ' '
                             + this.area.title + ' '
                             + this.street.title);
                        this.show = false;
                    }

                    /* 数据绑定 */
                    switch((id + '').length) {
                        case 2:
                            this.citys = resultData;
                        break;
                        case 4:
                            this.areas = resultData;
                        break;
                        case 6:
                            this.streets = resultData;
                        break;
                        case 9: // 该返回结果了
                            console.log(id);
                        break;
                        default:
                            this.provinces = resultData;
                        break;
                    }
                    this.changeShow(id, caption);
                });
            },

            /* 关闭地址选择组件 */
            closeAddBox() {
                this.show = false;
                if (areaCode.val().length > 5) {
                    return;
                }
                areaCode.val(this.street.id || this.area.id || this.city.id || this.province.id);
                area.val(this.province.title + ' '
                             + this.city.title + ' '
                             + this.area.title + ' '
                             + this.street.title);
            },

            /* 点击地址标题时的处理 */
            clickTitle(type) {
                switch(type) {
                    case 'province':
                        this.province.titleActive = this.province.showList = true;
                        this.city.titleActive = this.area.titleActive = this.street.titleActive = false;
                        this.city.title = this.area.title = this.street.title = '';
                    break;
                    case 'city':
                        this.city.titleActive = this.city.showList = true;
                        this.province.titleActive = this.area.titleActive = this.street.titleActive = false;
                        this.province.showList = this.area.showList = this.street.showList = false;
                        this.area.title = this.street.title = '';
                    break;
                    case 'area':
                        this.area.titleActive = this.area.showList = true;
                        this.province.titleActive = this.city.titleActive = this.street.titleActive = false;
                        this.province.showList = this.city.showList = this.street.showList = false;
                        this.street.title = '';
                    break;
                    default:
                    break
                }
            },
        },
        created: function() {
            this.switchAddress();
        }
    };

</script>