<template>
    <div>
        <header-component header-text="添加新地址" :show-btn="false">
        </header-component>
         <form class="address-form">
         <div class="address-form-group">
            <label for="consignee">
                收 货 人：
            </label>
                <input type="text" name="consignee" maxlength="20" value="">
                </div>
                <div class="address-form-group">
            <label for="mobile">
                联系电话：
            </label>
                <input type="text" name="mobile" value="">
                </div>
                <div class="address-form-group">
            <label for="area">
                所在地区：
            </label>
                <input type="text" name="area" value="" readonly>
                <span class="address-select">请选择<span class="iconfont">&#xe604;</span></span>
                </div>
                <div class="address-form-group">
            <label for="address">
                详细地址：
            </label>
            <textarea class="address" name="address" maxlength="255"></textarea>
            </div>
            <input type="hidden" name="area_code" value="">
        </form>
        <div class="address-select-component">
            <div class="address-select-box">
                <div class="component-title"><span class="title">所在地区</span><span class="iconfont close">X</span></div>
                <ul class="head-address-ul">
                    <li class="head-address-li">请选择</li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
                <div class="address-container">
                    <div class="address-content">
                        <ul class="address-ul">
                            <li v-for="address in addresses" :data-id="address.id">{{address.caption}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
    body {
        margin: 0;
    }

    .address-form {
        padding: 0 30px;

        > .address-form-group {
            border-bottom: solid 1px #ccc;
            line-height: 80px;

            > label {
                color: #444;
            }

            .address {
                resize: none;
                height: 116px;
                width: 400px;
            }

            .address-select {
                color: #ccc;
                float: right;
            }
        }
    }

    .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;
                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;
                    padding-left: 30px;
                }

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

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

            .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: -1px 0 0 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;
                            border-bottom: 1px solid #e3e5e9;
                            left: 0px;
                            bottom: 0px;
                            transform: scaleY(0.5);
                            -webkit-transform: scaleY(0.5);
                        }
                    }
                }
            }
        }
    }
</style>
<script>
    let headerComponent = require('common/header.vue');

    module.exports = {
        data() {
            return {
                addresses:[]
            };
        },
        components: {
            headerComponent
        },
        methods: {
            selectProvince() {
                $.get('/home/getaddress.json', resultData => {
                    this.addresses = resultData;
                });
            }
        },
        created: function() {
            this.selectProvince();
        }
    };

</script>