<template>
    <view>
        <!-- 搜索 -->
        <form @submit="searchForm" class="search">
            <view class="searchCont">
                <image src="/static/icon/secrch_icon.png"></image>
                <input class="search-navigator" name="search" placeholder="请输入门店名称" :value="searchText">
                <button class="search-btn" form-type="submit">搜索</button>
            </view>
        </form>

        <!-- 筛选 -->
        <view class="screen">
            <view class="screenLabel">
                <picker @change="regi" data-type="areasList" :value="areaIndex" :range="areasList" :range-key="'name'"
                    name="district_id">
                    <view class="nowrap picker" v-if="areasList[areaIndex]">
                        {{ areasList[areaIndex].name }}
                    </view>
                    <image class="screenLabel-arrow" src="/static/icon/arrow_down.png"></image>
                </picker>
            </view>
            <view class="screenLabel">
                <picker @change="regi" data-type="cityList" :value="cityIndex" :range="cityList" :range-key="'name'"
                    name="district_id">
                    <view class="nowrap picker" v-if="cityList[cityIndex]">
                        {{ cityList[cityIndex].name }}
                    </view>
                    <image class="screenLabel-arrow" src="/static/icon/arrow_down.png"></image>
                </picker>
            </view>
            <view class="screenLabel">
                <picker @change="regi" data-type="regiList" :value="regiIndex" :range="regiList" :range-key="'name'"
                    name="district_id">
                    <view class="nowrap picker" v-if="regiList[regiIndex]">
                        {{ regiList[regiIndex].name }}
                    </view>
                    <image class="screenLabel-arrow" src="/static/icon/arrow_down.png"></image>
                </picker>
            </view>
        </view>

        <!-- 门店列表 -->
        <view class="storeList" v-if="storesList.length > 0">
            <view v-for="(item, index) in storesList" :key="index" class="detailsStore-list" @tap="detailsTap"
                :data-id="(item.store_id)">
                <image :src="item.cover" class="detailsStore-logo"></image>
                <view class="detailsStore-cont">
                    <view class="nowrap detailsStore-name">{{ item.title }}</view>
                    <view class="detailsStore-place">
                        <text class="nowrap">{{ item.address }}</text>
                        {{ item.km }}
                    </view>
                </view>
            </view>
            <view class="pagesLoding" v-if="lodingStats">
                <block v-if="page.has_more">
                    <image class="pagesLoding-icon" src="/static/icon/refresh_loding.gif" mode="widthFix">
                    </image>加载中...
                </block>
                <block v-else>
                    没有更多了~
                </block>
            </view>
        </view>

        <!-- 商家为空 -->
        <view class="pack-center pages-hint" v-else>
            <image src="/static/img/null_icon.png"></image>
            <view>暂无商家</view>
        </view>
    </view>
</template>

<script>
    import QQMapWX from '@/utils/qqmap-wx-jssdk.min.js'
    import { stores, areas } from '@/apis/interfaces/user'
    export default {
        data() {
            return {
                storesList: [],
                //门店列表
                couponId: 0,
                //优惠券id
                searchText: '',
                //搜索关键字
                longitude: 0,
                //经度
                latitude: 0,
                //纬度
                //省份选择
                areasList: [],
                areaIndex: 0,
                //市级选择
                cityList: [],
                cityIndex: 0,
                //区域选择
                regiList: [],
                regiIndex: 0,
                page: {
                    has_more: false
                },
                //下一页
                lodingStats: false, //加载状态
                qqMap: new QQMapWX({
                    key: '4KYBZ-LCAKF-QWOJN-NIDNZ-FZHLZ-2XFW7',
                    vm: this
                }),
                type : ''  //跳转来源  campus为校园活动跳转
            }
        },
        // 生命周期函数--监听页面加载
        onLoad(options) {
            // 跳转来源
            this.type = options.type
            // 优惠券id
            this.couponId = options.id
            
            // 获取定位 - 使用腾讯地图sdk
            uni.getLocation({
                success: res => {
                    this.longitude = res.longitude
                    this.latitude  = res.latitude
                    // 调用接口
                    this.qqMap.reverseGeocoder({
                        location: {
                            latitude: res.latitude,
                            longitude: res.longitude
                        },
                        success: res => {
                            if(res.message == "query ok"){
                                let addressInfo = res.result.address_component
                                // 获取门店列表
                                this.storesInfo(addressInfo);
                            }else{
                                uni.showToast({
                                    title: res.message,
                                    icon : 'none'
                                })
                            }
                        },
                        fail: res => {},
                        complete: res => {}
                    });
                }
            });
        },

        methods: {
            // 门店列表
            storesInfo(addressInfo, page) {
                let title       = this.searchText || ""
                let province_id = "",
                    city_id     = "",
                    district_id = "",
                    newcity     = this.cityList,
                    newAreas    = this.areasList,
                    regiList    = this.regiList,
                    areaIndex   = this.areaIndex,
                    cityIndex   = this.cityIndex,
                    regiIndex   = this.regiIndex
                if(!addressInfo){
                    province_id = this.areasList[this.areaIndex].code
                    city_id     = this.cityList[this.cityIndex].code
                    district_id = this.regiList[this.regiIndex].code
                }
                stores({
                    coupon_id: this.couponId,
                    province_id: province_id,
                    city_id: city_id,
                    district_id: district_id,
                    title: this.searchText || "",
                    user_lng: this.longitude,
                    user_lat: this.latitude,
                    page: page
                }).then(res=>{
                    let newStores = this.storesList,
                        newData = []
                    if(page == 1 || page == undefined) newStores = []
                    newData = newStores.concat(res.stores.data)
                    newData.map(res=>{
                        let distance = res.distance
                        if(res.distance > 1000){
                            distance = (distance / 1000) + "km"
                        }else{
                            distance = distance + "m"
                        }
                        res.km = distance
                    })
                    if(addressInfo){
                        newcity   = res.citys
                        newAreas  = res.provinces
                        areaIndex = newAreas.findIndex(val => val.name == addressInfo.province)
                        cityIndex = newcity.findIndex(val => val.name == addressInfo.city)
                        this.getAreas(newcity[cityIndex].code, '')
                    }
                    
                    this.storesList  = newData
                    this.cityList    = newcity
                    this.cityIndex   = cityIndex
                    this.areasList   = newAreas
                    this.areaIndex   = areaIndex
                    this.page        = res.stores.page
                    this.lodingStats = false
                    uni.stopPullDownRefresh()
                })
            },
            
            // 获取区级信息
            getAreas(sn, areasData){
                areas(sn).then(res=>{
                    let newRegi      = res,
                        newregiIndex = 0
                    if(areasData) newregiIndex = newRegi.findIndex(val => val.name == areasData)
                    this.regiList    = newRegi
                    this.regiIndex   = newregiIndex
                }).catch(err => {
                    if (!err.login) {
                        if(this.type == 'campus') {
                            uni.showModal({
                                title: '用户登录已过期',
                                content: '请重新登录',
                                showCancel: false,
                                success: res => {
                                    if (res.confirm) {
                                        uni.redirectTo({
                                            url: '/pages/campus/signin'
                                        });
                                    }
                                }
                            })
                        }else {
                            uni.showModal({
                                title: '用户登录已过期',
                                content: '请重新登录',
                                showCancel: false,
                                success: res => {
                                    if (res.confirm) {
                                        uni.redirectTo({
                                            url: '/pages/auth/login'
                                        });
                                    }
                                }
                            })
                        }
                    }
                })
            },
            
            // 选择城市信息
            regi(e){
                let chantType  = e.currentTarget.dataset.type,
                    chantIndex = e.detail.value,
                    name       = ""
                    
                if(chantType == "areasList"){
                    name = "areaIndex"
                    this.areaIndex = chantIndex
                }else if(chantType == "cityList"){
                    name = "cityIndex"
                    this.getAreas(this.cityList[chantIndex].code, "")
                    this.cityIndex = chantIndex
                }else if(chantType == "regiList"){
                    name = "regiIndex"
                    this.regiIndex = chantIndex
                }
                    
                // 获取门店列表
                this.storesInfo()
            },
            
            // 查看门店详情页
            detailsTap(e) {
                let store_id     = e.currentTarget.dataset.id,
                    user_lng     = this.longitude,
                    user_lat     = this.latitude
                uni.navigateTo({
                  url: '/pages/store/details?store_id=' + store_id + '&user_lng=' +  user_lng  + '&user_lat=' + user_lat,
                })
            },
        
            // 搜索门店
            searchForm(e) {
                this.searchText = e.detail.value.search
        
                // 获取门店列表
                this.storesInfo()
            },
        
            // 上拉加载
            onReachBottom(){
                this.lodingStats = true
                let pageNumber = this.page.current
                if(this.page.has_more){
                    pageNumber++
                    this.page = pageNumber
                    this.storesInfo('', pageNumber)
                }
            }
        }
    }
</script>
<style>
    /* 搜索 */
    .search {
        background: #fff;
        position: fixed;
        width: 100%;
        left: 0;
        top: 0;
        height: 110rpx;
        z-index: 99;
    }
    
    .searchCont {
        background: #f7f7f7;
        border-radius: 50rpx;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        margin: 20rpx 20rpx 0;
        padding: 0 30rpx;
        box-sizing: border-box;
        display: flex;
    }
    
    .searchCont image {
        width: 34rpx;
        height: 34rpx;
        margin: 24rpx 20rpx 0 0;
    }
    
    .searchCont input {
        height: 100%;
        width: calc(100% - 150rpx);
    }
    
    .searchCont button {
        background: transparent;
        width: 100rpx !important;
        text-align: center;
        padding: 0 !important;
        margin: 0 !important;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 30rpx;
        color: #ff9b1a;
    }
    
    .search-btn::after {
        display: none;
    }
    
    /* 筛选 */
    .screen {
        background: #fff;
        position: fixed;
        width: 100%;
        left: 0;
        top: 110rpx;
        height: 90rpx;
        overflow: hidden;
        z-index: 99;
    }
    
    .screenLabel {
        float: left;
        width: calc(33.33% - 20rpx);
        text-align: center;
        color: #5f5f5f;
        line-height: 90rpx;
        font-size: 28rpx;
        margin: 0 10rpx;
    }
    
    .screenLabel picker {
        width: calc(100% - 17rpx);
        position: relative;
    }
    
    .screenLabel-arrow {
        position: absolute;
        right: 0;
        top: calc(50% - 17rpx);
        width: 34rpx;
        height: 34rpx;
    }
    
    /* 门店列表 */
    
    .storeList {
        background: #fff;
        padding: 20rpx;
        box-sizing: border-box;
        margin-top: 220rpx;
        padding-bottom: 40rpx;
    }
    
    .detailsStore-list {
        position: relative;
        margin-bottom: 40rpx;
    }
    
    .detailsStore-list:last-child {
        margin-bottom: 0;
    }
    
    .detailsStore-logo {
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
    }
    
    .detailsStore-cont {
        position: absolute;
        left: 150rpx;
        top: 10rpx;
        width: calc(100% - 150rpx);
    }
    
    .detailsStore-tel {
        width: 60rpx;
        height: 60rpx;
        margin-top: 25rpx;
    }
    
    .detailsStore-place {
        font-size: 24rpx;
        line-height: 40rpx;
        color: #5a5a5a;
        display: flex;
    }
    
    .detailsStore-place text {
        flex: 1;
        display: inline-block;
        font-size: 28rpx;
        margin-right: 20rpx;
    }
    
    .detailsStore-name {
        margin-bottom: 20rpx;
    }
</style>
