<template>
    <view>
        <view class="positionLetter" :style="'top:' + pltop + 'px'" v-if="plShow">
            {{ alpha }}
        </view>

        <scroll-view :scroll-y="true" style="height: 100vh" :scroll-into-view="toView" @scroll="leftMove">
            <!-- scroll-with-animation="{{true}}" -->
            <view class="p10200" id="top">
                <!-- <view class="weui-search-bar weui-search-bar_focusing" id="searchBar">
      <form class="weui-search-bar__form">
        <view class="weui-search-bar__box">
          <i class="weui-icon-search"></i>
          <input type="text" class="weui-search-bar__input" placeholder="搜索城市/拼音" value="{{inputVal}}"
            focus="{{inputShowed}}" bindinput="inputTyping" />
          <span class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput"></span>
        </view>

      </form>
    </view> -->
                <view class="headTxt">当前城市</view>
                <view class="container">
                    <view @tap="selectQuanGuo" :class="'item ' + (selectedQuanGuo.checked ? 'active' : '')">全国</view>
                    <view @tap="getLocation" :class="'item ' + (selectedCityLocal.checked ? 'active' : '')" v-if="selectedCityLocal.shortName">
                        <i class="iconfont icon-dizhi mr8"></i>
                        {{ selectedCityLocal.shortName }}
                    </view>
                    <view
                        @tap="selectOld"
                        v-if="selectedCity.name != '' && selectedCity.name != null && selectedCity.name != selectedCityLocal.name"
                        :class="'item ' + (selectedCity.checked ? 'active' : '')"
                    >
                        {{ selectedCity.shortName }}
                    </view>
                </view>
                <!-- <view class="headTxt" id="hot">热门城市</view>
    <view class="container">
      <view class="item {{hotCitySelect == index ? 'active' :''}}" wx:for="{{hotCity}}" wx:for-item="item"
        wx:for-index="index" data-id="{{index}}" bindtap="selectCity">{{item.name}}</view>
      <view class="item {{hotCitySelect == index ? 'active' :''}}" wx:for="{{hotCity}}" wx:for-item="item"
        wx:for-index="index" data-id="{{index}}" bindtap="selectCity">{{item.name}}</view>
      <view class="item {{hotCitySelect == index ? 'active' :''}}" wx:for="{{hotCity}}" wx:for-item="item"
        wx:for-index="index" data-id="{{index}}" bindtap="selectCity">{{item.name}}</view>
      <view class="item {{hotCitySelect == index ? 'active' :''}}" wx:for="{{hotCity}}" wx:for-item="item"
        wx:for-index="index" data-id="{{index}}" bindtap="selectCity">{{item.name}}</view>
    </view> -->
                <block v-for="(item, index) in cityList" :key="index">
                    <view class="headTxt" :id="item.name == '热门城市' ? 'hot' : item.name">{{ item.name }}</view>

                    <view class="container">
                        <view
                            @tap="selectCity"
                            :data-city="item1"
                            :class="'item ' + (item1.name == selectedCityTemp.name && selectedCityTemp.checked ? 'active' : '')"
                            v-for="(item1, index1) in item.list"
                            :key="index1"
                        >
                            {{ item1.shortName }}
                        </view>
                    </view>
                </block>
            </view>
        </scroll-view>

        <scroll-view class="letter-list" :enhanced="true" @touchstart.stop.prevent="handlerAlphaTap" @touchmove="touchMove" @touchend.stop.prevent="touchEnd">
            <!-- {{toView == 'top' ?'rlhc':'' }}" -->
            <view :class="'letter ' + (toView == 'top' ? 'rlhc' : '')" @tap="goTop" hover-class="rlhc"><i class="iconfont icon-sousuo f12"></i></view>
            <!-- {{toView == 'hot' ?'rlhc':'' }}" -->
            <view :class="'letter ' + (toView == 'hot' ? 'rlhc' : '')" @tap="clickHot" hover-class="rlhc">热</view>
            <!-- {{toView == item ?'rlhc':'' }}" -->
            <view
                :class="'letter ' + (toView == item ? 'rlhc' : '')"
                hover-class="rlhc"
                @click.stop="chooseLetter"
                :data-item="item"
                v-for="(item, index) in letter"
                :key="index"
            >
                {{ item }}
            </view>
        </scroll-view>
        <view class="btmFix">
            <view class="display-flex">
                <view class="flex-1 pl20 pr10">
                    <button class="resetBtn btn" style="font-weight: 400" @click.stop="reset">重置</button>
                </view>
                <view class="flex-1 pl10 pr20">
                    <button type="primary" class="loginOut btn" style="font-weight: 400" @click.stop="loginOut">确定</button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/city/index.js
const app = getApp();
export default {
    data() {
        return {
            inputShowed: false,
            inputVal: '',

            hotCity: [
                {
                    id: 1,
                    name: '郑州'
                },
                {
                    id: 2,
                    name: '上海'
                },
                {
                    id: 3,
                    name: '昆山'
                },
                {
                    id: 4,
                    name: '苏州'
                },
                {
                    id: 5,
                    name: '无锡'
                },
                {
                    id: 6,
                    name: '深圳'
                },
                {
                    id: 7,
                    name: '南京'
                },
                {
                    id: 8,
                    name: '东莞'
                },
                {
                    id: 9,
                    name: '常州'
                }
            ],

            hotCitySelect: -1,
            toView: '',
            from: '',
            cityList: [],
            letter: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],

            selectedQuanGuo: {
                name: '全国',
                shortName: '全国',
                checked: true
            },

            selectedCityLocal: {
                name: '',
                shortName: '',
                checked: false
            },

            selectedCity: {
                name: '',
                shortName: '',
                checked: false
            },

            selectedCityTemp: {
                name: '',
                shortName: '',
                checked: false
            },

            alpha: '',
            plShow: false,
            pltop: 70,

            selectedQuanGuoStorage: {
                name: '全国',
                shortName: '全国',
                checked: true
            },

            selectedCityStorage: {
                name: '',
                shortName: '',
                checked: false
            },

            selectedCityLocalStorage: {
                name: '',
                shortName: '',
                checked: false
            },

            selectedCityTempStorage: {
                name: '',
                shortName: '',
                checked: false
            },

            storeJobListSearchForm: '',
            searchCityParamStorage: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        var that = this;
        console.log(options);
        if (options.from) {
            this.setData({
                from: options.from
            });
        }
        try {
            var searchCityParamStorage = uni.getStorageSync('searchCityParamStorage');
            console.log('searchCityParamStorage======', searchCityParamStorage);
            var selectedCityTempParamStorage = uni.getStorageSync('selectedCityTempParamStorage');
            console.log('selectedCityTempParamStorage======', selectedCityTempParamStorage);
            var tag = uni.getStorageSync('selectedQuanGuoStorage');
            if (tag && app.globalData.isNotEmptyCheck(tag.name)) {
                that.selectedQuanGuoStorage = uni.getStorageSync('selectedQuanGuoStorage');
                console.log('selectedQuanGuoStorage======', that.selectedQuanGuoStorage);
                that.selectedCityStorage = uni.getStorageSync('selectedCityStorage');
                console.log('selectedCityStorage======', that.selectedCityStorage);
                that.selectedCityLocalStorage = uni.getStorageSync('selectedCityLocalStorage');
                console.log('selectedCityLocalStorage======', that.selectedCityLocalStorage);
                that.selectedCityTempStorage = uni.getStorageSync('selectedCityTempStorage');
                console.log('selectedCityTempStorage======', that.selectedCityTempStorage);
            }
            if (searchCityParamStorage && app.globalData.isNotEmptyCheck(searchCityParamStorage.name)) {
                that.setData({
                    selectedQuanGuo: JSON.parse(JSON.stringify(that.selectedQuanGuoStorage)),
                    selectedCity: JSON.parse(JSON.stringify(that.selectedCityStorage)),
                    selectedCityTemp: JSON.parse(JSON.stringify(that.selectedCityTempStorage))
                });
            } else {
                that.setData({
                    selectedQuanGuo: that.selectedQuanGuo,
                    selectedCityLocal: that.selectedCityLocal,
                    selectedCity: that.selectedCity,
                    selectedCityTemp: that.selectedCityTemp
                });
            }
        } catch (e) {
            console.log('CatchClause', e);
            console.log('CatchClause', e);
            console.log('获取缓存设置的查询职位列表参数错误：', e);
        }
        this.getAllCityLevel2();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    // onShareAppMessage1: function () {
    // }
    onReachBottom: function () {},

    /**
     * 用户点击右上角分享
     */ methods: {
        leftMove(e) {
            this.setData({
                toView: ''
            });
        },

        handlerAlphaTap(e) {
            console.log(e.target.dataset.item);
            this.setData({
                toView: e.target.dataset.item,
                alpha: e.target.dataset.item,
                plShow: true
            });
        },

        touchEnd(e) {
            this.setData({
                plShow: false
            });
        },

        touchMove(e) {
            var that = this;
            // console.log(e)
            console.log(e.changedTouches[0].clientY);
            let moveY = e.changedTouches[0].clientY;
            let rY = moveY - 80;

            // toView:'hot'
            // toView:e.target.dataset.item

            if (rY >= 0) {
                let index = Math.ceil(rY / 22);
                // console.log(index);
                if (index == 1) {
                    this.setData({
                        toView: 'top',
                        alpha: '查',
                        plShow: true
                    });
                } else if (index == 2) {
                    this.setData({
                        toView: 'hot',
                        alpha: '热',
                        plShow: true,
                        pltop: 92
                    });
                } else {
                    let nonwAp = that.letter[index - 3];
                    let hg = (index - 2) * 22;
                    this.setData({
                        toView: nonwAp,
                        alpha: nonwAp,
                        plShow: true,
                        pltop: 92 + hg
                    });
                }

                // if(0 <= index < list.length) {
                //   let nonwAp = list[index];
                //   nonwAp && this.setData({alpha: nonwAp.alphabet});
                // }
            }

            // let {list} = this.data;
            // console.log(list)
            // console.log(this.data.alphabet)
            // let moveY = e.touches[0].clientY;
            // let rY = moveY - this.offsetTop;
            // if(rY >= 0) {
            //   let index = Math.ceil((rY - this.apHeight)/ this.apHeight);
            //   if(0 <= index < list.length) {
            //     let nonwAp = list[index];
            //     nonwAp && this.setData({alpha: nonwAp.alphabet});
            //   }
            // }
        },

        getLocation() {
            var that = this;
            if (app.globalData.isNotEmptyCheck(app.globalData.lng) && app.globalData.isNotEmptyCheck(app.globalData.lat)) {
                that.getCityNameByLatLng(app.globalData.lng, app.globalData.lat, 1);
            } else {
                uni.getSetting({
                    success: (res) => {
                        console.log(res); // res.authSetting.location

                        if (res.authSetting['scope.userLocation']) {
                            uni.getLocation({
                                type: 'gcj02',
                                success(res1) {
                                    console.log('获取位置');
                                    console.log(res1);
                                    app.globalData.lng = res1.longitude;
                                    app.globalData.lat = res1.latitude;
                                    that.getCityNameByLatLng(res1.longitude, res1.latitude, 1);
                                },
                                fail() {}
                            });
                            that.getCityNameByLatLng(app.globalData.lng, app.globalData.lat, 1);
                        } else {
                            console.log('11111111');
                            uni.openSetting({
                                success(res) {
                                    console.log(res.authSetting);
                                    // res.authSetting = {
                                    //   "scope.userInfo": true,
                                    //   "scope.userLocation": true
                                    // }
                                }
                            });
                            // that.getStoreJobDetailById();
                        }
                    }
                });
            }
        },

        selectQuanGuo: function (e) {
            var that = this;
            that.selectedQuanGuo.checked = true;
            that.selectedCity.checked = false;
            that.selectedCityLocal.checked = false;
            that.selectedCityTemp.checked = false;
            this.setData({
                selectedQuanGuo: that.selectedQuanGuo,
                selectedCity: that.selectedCity,
                selectedCityTemp: that.selectedCityTemp,
                selectedCityLocal: that.selectedCityLocal
            });
        },

        selectOld: function (e) {
            var that = this;
            that.clearAllChecked();
            that.selectedCity.checked = true;
            this.setData({
                selectedQuanGuo: that.selectedQuanGuo,
                selectedCity: that.selectedCity,
                selectedCityTemp: that.selectedCityTemp,
                selectedCityLocal: that.selectedCityLocal
            });
        },

        reset: function (e) {
            this.clearAllChecked();
            this.selectedQuanGuo.checked = true;
            this.setAllSelected();
        },

        selectCity: function (e) {
            var city = e.currentTarget.dataset.city;
            console.log(city);
            this.selectedCityLocal.checked = false;
            var that = this;
            if (this.selectedCity.id != city.id) {
                this.selectedCity.checked = false;
            }
            this.selectedCityTemp = city;
            this.selectedCityTemp.checked = true;
            this.selectedQuanGuo.checked = false;
            this.setData({
                selectedCity: that.selectedCity,
                selectedCityTemp: that.selectedCityTemp,
                selectedQuanGuo: that.selectedQuanGuo,
                selectedCityLocal: this.selectedCityLocal
            });
        },

        loginOut: function () {
            var that = this;
            var temp;
            if (that.selectedCityTemp.checked) {
                that.clearAllChecked();
                that.selectedCityTemp.checked = true;
                temp = that.selectedCityTemp;
                that.selectedCity = that.selectedCityTemp;
            } else if (that.selectedQuanGuo.checked) {
                that.clearAllChecked();
                that.selectedQuanGuo.checked = true;

                // temp = that.data.selectedQuanGuo;
                temp = that.selectedQuanGuo;
            } else if (that.selectedCity.checked) {
                that.clearAllChecked();
                that.selectedCity.checked = true;
                temp = that.selectedCity;
            } else if (that.selectedCityLocal.checked) {
                that.clearAllChecked();
                that.selectedCityLocal.checked = true;
                temp = that.selectedCityLocal;
            }
            try {
                uni.setStorageSync('selectedCityTempParamStorage', that.selectedCity);
                uni.setStorageSync('searchCityParamStorage', temp);
                uni.setStorageSync('selectedQuanGuoStorage', that.selectedQuanGuo);
                uni.setStorageSync('selectedCityStorage', that.selectedCity);
                uni.setStorageSync('selectedCityLocalStorage', that.selectedCityLocal);
                uni.setStorageSync('selectedCityTempStorage', that.selectedCityTemp);
                uni.setStorageSync('FROMCITY', true);
            } catch (e) {
                console.log('CatchClause', e);
                console.log('CatchClause', e);
                console.log('index-设置查询职位列表参数错误', e);
            }
            if (this.from == 'search') {
                var pages = getCurrentPages();
                var prevPage = pages[pages.length - 2]; // 上一个页面

                prevPage.data.storeJobListSearchForm.cityName = temp.name;
                prevPage.setData({
                    storeJobListSearchForm: prevPage.data.storeJobListSearchForm,
                    searchCityParamStorage: temp
                });
                uni.navigateBack({
                    delta: 1
                });
                // wx.reLaunch({
                // 	url: "../jobListSearch/index?fromSearchPage=1",
                // });
            } else {
                var pages = getCurrentPages();
                var prevPage = pages[pages.length - 2]; // 上一个页面

                prevPage.data.storeJobListSearchForm.cityName = temp.name;
                prevPage.setData({
                    storeJobListSearchForm: prevPage.data.storeJobListSearchForm,
                    searchCityParamStorage: temp
                });
                uni.navigateBack({
                    delta: 1
                });
                // var pages = getCurrentPages();
                // var prevPage = pages[pages.length - 2]; // 上一个页面
                // console.log(prevPage);
                // console.log(temp);
                // prevPage.data.storeJobListSearchForm.cityName = temp.name;
                // prevPage.setData({
                // 	storeJobListSearchForm: prevPage.data.storeJobListSearchForm,
                // 	searchCityParamStorage: temp,
                // });
                // wx.navigateBack({
                // 	delta: 1,
                // });
                // wx.reLaunch({
                // 	url: "../firstBill/index?fromSearchPage=1",
                // });
            }
        },

        showInput: function () {
            this.setData({
                inputShowed: true
            });
        },

        hideInput: function () {
            this.setData({
                inputVal: '',
                inputShowed: false
            });
        },

        clearInput: function () {
            this.setData({
                inputVal: ''
            });
        },

        inputTyping: function (e) {
            this.setData({
                inputVal: e.detail.value
            });
        },

        clickHot: function (e) {
            this.setData({
                toView: 'hot'
            });
        },

        goTop: function (e) {
            this.setData({
                toView: 'top'
            });
        },

        chooseLetter: function (e) {
            console.log(e.target.dataset.item);
            this.setData({
                toView: e.target.dataset.item
            });
        },

        getAllCityLevel2: function () {
            var that = this;
            uni.request({
                url: app.globalData.ip + '/city/getAllCityLevel2',
                data: {},
                header: app.globalData.header,
                method: 'GET',
                success: function (res) {
                    console.log(res);
                    that.setData({
                        cityList: res.data.data
                    });
                    console.log(that.cityList);
                    if (app.globalData.isNotEmptyCheck(app.globalData.lng) && app.globalData.isNotEmptyCheck(app.globalData.lat)) {
                        that.getCityNameByLatLng(app.globalData.lng, app.globalData.lat, 0);
                    } else {
                        uni.getLocation({
                            type: 'gcj02',
                            success(res) {
                                console.log(res);
                                app.globalData.lng = res.longitude;
                                app.globalData.lat = res.latitude;
                                that.getCityNameByLatLng(res.longitude, res.latitude, 0);
                            }
                        });
                    }
                }
            });
        },

        getCityNameByLatLng: function (longitude, latitude, comeFrom) {
            var that = this;
            uni.request({
                url: app.globalData.ip + '/location/getCityNameByLatLng',
                data: {
                    lng: longitude,
                    lat: latitude
                },
                header: app.globalData.headers,
                method: 'GET',
                success: function (res) {
                    console.log(res);
                    if (res.data.status == 200) {
                        var cityName = res.data.data;
                        that.cityList.forEach((item) => {
                            item.list.forEach((item1) => {
                                if (item1.name == cityName) {
                                    // if (that.data.selectedCityLocalStorage) {}

                                    // debugger;
                                    if (comeFrom == 1) {
                                        //主动点击获取位置

                                        that.clearAllChecked();
                                        that.selectedCityLocal = item1;
                                        that.selectedCityLocal.checked = true;
                                        that.setAllSelected();
                                    } else {
                                        if (that.selectedCityLocalStorage.checked) {
                                            that.clearAllChecked();
                                            that.selectedCityLocal = item1;
                                            that.selectedCityLocal.checked = true;
                                            that.setAllSelected();
                                        } else {
                                            // that.clearAllChecked();
                                            that.selectedCityLocal = item1;
                                            that.selectedCityLocal.checked = false;
                                            that.setAllSelected();
                                        }
                                    }
                                }
                            });
                        });
                    }
                }
            });
        },

        clearAllChecked: function () {
            var that = this;
            that.selectedQuanGuo.checked = false;
            that.selectedCity.checked = false;
            that.selectedCityLocal.checked = false;
            that.selectedCityTemp.checked = false;
        },

        setAllSelected: function () {
            var that = this;
            this.setData({
                selectedQuanGuo: that.selectedQuanGuo,
                selectedCity: that.selectedCity,
                selectedCityTemp: that.selectedCityTemp,
                selectedCityLocal: that.selectedCityLocal
            });
        }
    }
};
</script>
<style>
@import './index.css';
</style>
