<template>
    <div class="container">
        <!-- <div class="top">
            <div class="search">
                <img src="../assets/home_icon_search.png" alt="">
                <input type="text" placeholder="搜索" v-model="search">
            </div>

        </div>
        <div style="height:60px;"></div> -->
        <div class="content">
            <div class="title">当前城市</div>
            <div class="item" @click="startChoose(city)" :class="{active:chooseCity==city}">{{city.split('市')[0]}}</div>
        </div>
        <div class="content">
            <div class="title">热门城市</div>
            <div class="hot">
                <div class="item" @click="nowchooseCity(item)" v-for="item in hotList" :class="{active:item.fullName==chooseCity}">{{item.fullName.split('市')[0]}}</div>
            </div>

        </div>
        <div class="content">
            <div class="title">全部城市</div>
        </div>
        <div class="list">

            <div class="list-item" v-for="item in cityList" @click="nowchooseCity(item)" :class="{active:item.fullName==chooseCity}">
                {{item.fullName.split('市')[0]}}
            </div>
        </div>
    </div>
</template>
<script>
import GmButton from '@/components/Button'
import { mapState } from "vuex";
export default {
    data() {
        return {
            city: '南京市',
            cityList: [],
            search: '',
            chooseCity: '',
            hotList: []
        }
    },
    computed: {
        ...mapState(["locationInfo"])
    },
    created() {
        var geolocation = new qq.maps.Geolocation(
            "GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K",
            "享居屋"
        );
        geolocation.getLocation(res => {
            this.city = res.city
        })
        this.$http.get({
            url: '/districtInfo/all',
            data: {
                useFlag: 'Y'
            }
        }).then(res => {

            if (res.success) {
                this.cityList = res.data

                res.data.forEach((item, index) => {
                    if (item.fullName != this.city && this.hotList.length < 9) {
                        this.hotList.push(item)
                    }
                })
            }
        });
        if (this.locationInfo) {
            this.chooseCity = this.locationInfo.fullName
        }

    },
    methods: {
        nowchooseCity(data) {
            console.log(data)
            this.$store.commit('updateLocationInfo', data)
            this.chooseCity = data.fullName
            this.$router.replace({
                name: 'home',
                params: { isNext: 1 }
            })
        },
        startChoose(city) {
            this.$http.get({
                url: '/districtInfo/getOne',
                data: {
                    fullName: this.city
                }
            }).then(res => {

                if (res.success) {
                    // res.data.city=res.data.fullName
                    this.$store.commit('updateLocationInfo', res.data)
                    this.chooseCity = res.data.fullName
                    this.$router.replace({
                        name: 'home',
                        params: { isNext: 1 }
                    })
                }
            });
        }
    },
    components: { GmButton }
}
</script>
<style lang="less" scoped>
.container {
    background: rgba(245, 245, 245, 1);

    .top {
        height: 35px;
        padding: 12.5px 0;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;

        .search {
            height: 35px;
            background: rgba(255, 255, 255, 1);
            border-radius: 18px;
            display: flex;
            padding: 0 14px;
            margin: 0 15px;

            img {
                width: 16px;
                height: 16px;
                min-width: 16px;
                align-self: center;
            }

            input {
                flex-grow: 1;
                border: 0;
                outline: none;
                margin-left: 4px;

                &::-webkit-input-placeholder {
                    font-size: 15px;
                    font-weight: normal;
                    color: rgba(156, 156, 157, 1);
                    line-height: 19px;
                }
            }
        }
    }

    .content {
        padding: 0 15px;
        .title {
            font-size: 13px;
            color: rgba(153, 153, 153, 1);
            line-height: 16px;
            padding: 11px 0;
        }

        .item {
            width: 30%;
            height: 40px;
            background: rgba(255, 255, 255, 1);
            border-radius: 4px;
            font-size: 14px;
            color: rgba(51, 51, 51, 1);
            line-height: 40px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
            padding: 0 10px;
            margin-bottom: 10px;

            &.active {
                background: rgba(21, 168, 170, 1);
                color: #fff;
            }
        }

        .hot {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }
    }

    .list {
        padding: 0 15px;
        background-color: #fff;
        .list-item {
            font-size: 16px;
            color: rgba(51, 51, 51, 1);
            line-height: 50px;
            border-bottom: 1px solid #f2f4f5;
            &.active {
                color: rgba(21, 168, 170, 1);
                // color: #fff;
            }
        }
    }
}
</style>


