<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': common.titleActive }" @click="clickTitle('province')">{{province.title}}</li>
                <li v-if="city.title" :class="{ 'head-address-li': province.titleActive }" @click="clickTitle('city')">{{city.title}}</li>
                <li v-if="area.title" :class="{ 'head-address-li': city.titleActive }" @click="clickTitle('area')">{{area.title}}</li>
                <li v-if="street.title" :class="{ 'head-address-li': area.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, true)">{{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;
    bottom: 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: 70px;
            }

            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: 0;
            bottom: 0;
            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(0, 0) translateZ(0);
                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: 0;
                bottom: 0;
                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,
                common: {
                    titleActive: true,
                },
                province: {
                    id: '',
                    title: '',
                    allTitle: '',
                    showList: true,
                    titleActive: false,
                },
                city: {
                    id: '',
                    title: '',
                    allTitle: '',
                    showList: false,
                    titleActive: false,
                },
                area: {
                    id: '',
                    title: '',
                    allTitle: '',
                    showList: false,
                    titleActive: false,
                },
                street: {
                    id: '',
                    title: '',
                    allTitle: '',
                    showList: false,
                    titleActive: false,
                }
            };
        },
        methods: {
            /* 返回标题处理 */
            returnTitle() {
                let streetTitle = this.street.allTitle !== '全部' ? this.street.allTitle : '';
                let getTitle = this.province.allTitle +
                    this.city.allTitle +
                    this.area.allTitle +
                    streetTitle;
                let returnTitle = '';

                if (getTitle.length > 11) {
                    returnTitle = getTitle.substr(0, 5) + '...' + getTitle.substr(-5);
                } else {
                    returnTitle = getTitle;
                }

                return returnTitle;
            },

            /* 标题长度处理 */
            titleHandle(caption) {
                if (caption.length > 3) {
                    return caption.substring(0, 3) + '...';
                } else {
                    return caption;
                }
            },

            /* 选择地址后的显示控制 */
            changeShow(id, caption) {
                switch ((id + '').length) {
                    case 2:
                        this.province.id = id;
                        this.province.allTitle = caption;
                        this.province.title = this.titleHandle(caption);
                        this.city.title = '请选择';
                        this.city.showList = this.province.titleActive = true;
                        this.province.showList = this.area.showList = this.street.showList = false;
                        this.common.titleActive = this.city.titleActive =
                            this.area.titleActive = this.street.titleActive = false;
                        break;
                    case 4:
                        this.city.id = id;
                        this.city.allTitle = caption;
                        this.city.title = this.titleHandle(caption);
                        this.area.title = '请选择';
                        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:
                        if (caption !== '全部') {
                            this.area.id = id;
                            this.area.allTitle = caption;
                            this.area.title = this.titleHandle(caption);
                            this.street.title = '请选择';
                            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;
                        this.street.allTitle = caption;
                        this.street.title = this.titleHandle(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, isStreet) {
                if (!id) {
                    id = 0;
                }

                this.changeShow(id, caption);

                /* 选择全部的控制 */
                if (isStreet && (id + '').length === 6) {
                    this.street.allTitle = this.street.title = '全部';
                    this.street.id = id;
                    areaCode.val(id);
                    let returnTitle = this.returnTitle();

                    area.val(returnTitle);
                    this.show = false;
                }

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

                    //  /* 结果返回 */
                    // if (resultData.length < 1) {
                    //     areaCode.val(id);
                    //     let returnTitle = this.returnTitle();

                    //     area.val(returnTitle);
                    //     this.show = false;
                    // }

                    /* 数据绑定 */
                    switch ((id + '').length) {
                        case 2:
                            this.citys = resultData;
                            break;
                        case 4:
                            this.areas = resultData;
                            break;
                        case 6:
                            this.streets = [];
                            this.streets.push({
                                caption: '全部',
                                id: this.area.id
                            });
                            $.merge(this.streets, resultData);
                            break;
                        default:
                            this.provinces = resultData;
                            break;
                    }
                });
            },

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

                area.val(returnTitle);
            },

            /* 点击地址标题时的处理 */
            clickTitle(type) {
                switch (type) {
                    case 'province':
                        if (this.provinces.length < 1) {
                            this.switchAddress();
                        }
                        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>