// 选择城市
<template>
    <div class="chooseCity">
        <!-- 当前定位城市 -->
        <div class="current-city">
            <div>
                当前定位城市：
                <!--<i class="city">{{ location.AreaName || location.city || '定位中...'}}</i>-->
                <i class="city" v-if="!locationStatus">定位中...</i>
                <i class="city" v-if="locationStatus">{{location.city || location.AreaName}}</i>
            </div>
            <van-icon name="replay" @click="refresh" :class="{active:isRefresh}"/>
        </div>

        <!-- 已开通城市 -->
        <div class="open-city">
            <div class="tit">已开通城市</div>
            <div class="content">
                <div
                        class="item"
                        v-for="(item,index) in cityList"
                        :key="index"
                        @click="back(item)"
                        v-if="cityList.length > 0"
                >{{item.AreaName}}
                </div>
                <div v-if="cityList.length == 0">暂无已开通的城市</div>
            </div>
        </div>

        <!-- 即将开通城市 -->
        <div class="no-open-city">
            <div class="tit">即将开通城市</div>
            <div class="content">
                <div
                        class="item"
                        style="background-color: #d2d2d2;"
                        v-for="(item,index) in soonOpenCityList"
                        :key="index"
                        v-if="soonOpenCityList.length > 0"
                >{{item.AreaName}}
                </div>
                <div v-if="soonOpenCityList.length == 0">暂无即将开通的城市</div>
            </div>
        </div>
        <!--<Map @getLocation="getLocation" :isShow="false"></Map>-->
    </div>
</template>
<script>
    import {wxMethod} from "@/assets/js/weixinShare.js";
    // import Map from "@/components/map";
    export default {
        name: "chooseCity",
        components: {Map},
        data() {
            return {
                isRefresh: false, //是否刷新
                currentCity: '',
                cityList: [], // 已开通坐诊城市
                noOpenCityList: [], // 未开通坐诊城市
                soonOpenCityList: [], // 即将开通坐诊城市
                locationStatus: false, // 获取定位状态 true=定位成功
                location: {}, // 定位数据
            };
        },
        created() {
            this.GetCitylist();
            var chooseCity = JSON.parse(sessionStorage['chooseCity'] || '{}');
            if (JSON.stringify(chooseCity) != '{}') {
                this.locationStatus = true;
                this.location = chooseCity;
                return;
            }else{
                this.baiduGetLocation();
            }
        },
        methods: {

            baiduGetLocation(){
                var self = this;
                wxMethod(()=>{
                    wx.getLocation({
                        type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                        success: function (res) {

                            var latitude = res.latitude+','+res.longitude; // 纬度，浮点数，范围为90 ~ -90

                            self.$http.getAreaCode(latitude).then(e=>{

                                if(e.status == 0){
                                    var data = e.result.addressComponent;
                                    data.adcode = ('' + data.adcode).slice(0, 4) + '00'
                                    self.location = data;
                                    self.locationStatus = true;
                                    sessionStorage.setItem("chooseCity", JSON.stringify(data));
                                }else{
                                    self.$toast(e.status)
                                }
                            })

                            // var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                            // var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
                            // var speed = res.speed; // 速度，以米/每秒计
                            // var accuracy = res.accuracy; // 位置精度
                        },
                        error:res=>{
                            self.location.city = '定位失败';
                        }
                    });
                })

            },


            // 刷新定位
            refresh() {
                sessionStorage.setItem("chooseCity", '{}');
                // this.map.getLocationNum = 5;
                // this.getLocation();
                location.reload();
            },
            // 选择城市回到上一页
            back(e) {
                console.log(JSON.stringify(e))
                sessionStorage.setItem("chooseCity", JSON.stringify(e));
                // this.$router.go(-1);
                // window.history.go(-1);
                window.history.back();
            },
            // 获取开通城市
            GetCitylist() {
                this.$http.GetCityList().then(res => {
                    if (res.data.IsSuccess) {
                        var data = res.data.ResultObject;
                        this.cityList = data.filter(a => a.CooperationStatus == 2);
                        this.noOpenCityList = data.filter(a => a.CooperationStatus == 1);
                        this.soonOpenCityList = data.filter(a => a.CooperationStatus == 3);
                    } else {
                        this.$toast(res.data.ResultMsg)
                    }
                })
            },

        }
    };
</script>
<style lang='less' scoped>
    .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    //垂直居中
    .hc(@h) {
        height: @h;
        line-height: @h;
    }

    .chooseCity {
        font-size: 0.26rem;
        background-color: #f4f4f6;
        min-height: 100vh;
        color: #666;

        @keyframes rotate-x {
            0% {
                transform: rotateZ(0deg);
            }
            0% {
                transform: rotateZ(-360deg);
            }
        }
        // 当前城市
        .current-city {
            .flex();
            .hc(0.88rem);
            background-color: #fff;
            padding: 0 0.2rem;
            transition: all linear 0.3s;

            .city {
                color: #4ca0ff;
                font-style: normal;
                font-size: 0.38rem;
            }

            .active {
                animation: rotate-x 1s infinite linear;
            }
        }

        // 已经开通城市
        .open-city,
        .no-open-city {
            padding: 0.2rem;

            .tit {
                text-align: left;
                padding: 0.2rem 0;
            }

            .content {
                .flex();
                flex-wrap: wrap;
                justify-content: flex-start;

                .item {
                    background-color: #fff;
                    .hc(0.5rem);
                    font-size: 0.28rem;
                    border-radius: 0.04rem;
                    border: solid 0.01rem #ececec;
                    padding: 0 0.2rem;
                    margin: 0 .08rem .1rem;

                    &:active {
                        background-color: #00a4ff;
                        color: #fff;
                    }
                }
            }
        }

        // 未开通城市
        .no-open-city {
            .content {
                .item {
                    &:active {
                        background-color: inherit;
                        color: inherit;
                    }
                }
            }
        }
    }
</style>
