<template>
    <div>
        <div class="hotCity">
            <div class="hot-city-title">热门城市</div>
            <div v-for="city in hotCityList" :key="city.cityCode" @click="changeCity(city)">
                <button class="hot-city-button">{{city.cityName}}</button>
            </div>
        </div>
        <div class="lists">
            <div v-for="citys in citylist" :key="citys[0]" :dataNum="citys[1].length">
                <p :ref="citys[0]" class="city-title">{{ citys[0] }}</p>
                <p
                    v-for="city in citys[1]"
                    :key="city.cityCode"
                    class="city-item"
                    @click="changeCity(city)"
                >{{ city.cityName }}</p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "CityList",
    props: {
        citylist: {
            type: Array,
            default: () => []
        },
        hotCityList: {
            type: Array
        },
        elementIndex: {
            type: String,
            default: ""
        }
    },
    mounted() {
        console.log("xxxxxxxxxxxxxxxxxxxx", this.hotCitylist);
    },
    watch: {
        elementIndex(val) {
            if (!val) return;
            if (val === "顶") return;
            this.$emit("singleLetter", this.$refs[val][0]);
        }
    },
    methods: {
        changeCity(city) {
            this.$emit("positionCity", city);
        }
    }
};
</script>

<style lang="stylus" scoped>
.lists
    width 100%
    background #fff

    div
        .city-title
            height 30px
            border-top 1px solid #f6f6f6
            background #f6f6f6
            line-height 30px
            padding-left 10px

        .city-item
            margin 0px 10px
            height 35px
            line-height 35px
            border-bottom 1px solid #f6f6f6

        .city-item:last-child
            border none

.hotCity
    height 120px
    width 100%
    background #fff

.hot-city-title
    height 30px
    border-top 1px solid #f6f6f6
    background #f6f6f6
    line-height 30px
    padding-left 10px

.hot-city-button
    box-sizing border-box
    border-radius 4px
    outline none
    height 40px
    margin-top 6px
    margin-right 6px
    background #fdfdfd
    color #666
    float left
    overflow hidden
    text-overflow ellipsis
    white-space nowrap
    font-size 14px
    display flex
    flex-direction row
    justify-content center
    align-items center
    outline none
    border none
</style>
