<template>
    <div class="screen">
        <div class="screenTop">
            <div class="screen-item" @click="changeType='区域'">
                <span>{{regionValue||'全'+this.locationInfo.fullName.split('市')[0]}}</span>
                <img src="@/assets/icon_xiala.png" alt="">
            </div>
            <div class="screen-item" @click="changeType='户型'">
                <span>{{(rentType&&huoseType)?(rentType+"&"+huoseType):(rentType||huoseType?(rentType||huoseType):"户型")}}</span>
                <img src="@/assets/icon_xiala.png" alt="">
            </div>
            <div class="screen-item" @click="changeType='租金'">
                <span>{{rent||'租金'}}</span>
                <img src="@/assets/icon_xiala.png" alt="">
            </div>
            <div class="screen-item" @click="changeType='筛选'">
                <span>筛选</span>
                <img src="@/assets/icon_xiala.png" alt="">
            </div>
        </div>

        <screen-region :changeType='changeType' :faced='faced' :area='area' :houseFeature='houseFeature' @changeSelect='changeSelect' :rent='rent' :regionValue='regionValue' @changeRent='changeRent' @changeHouseType='changeHouseType' :rentType='rentType' :huoseType='huoseType' @changeRegion='changeRegion' @changechooseType='changechooseType' :showSreen='showSreen' @changeShow='sreenChange'></screen-region>

    </div>
</template>
<script>
import { mapState } from "vuex";
import ScreenRegion from '@/components/ScreenRegion'
export default {
    name: 'screen',
    data() {
        return {
            showSreen: false,
            changeType: '区域',
            regionValue: '',
            regionCode: '',
            rentType: '',
            huoseType: '',
            rent: '',
            searchData: {},
            faced: '',
            area: '',
            houseFeature: [],
        }
    },
    created() {
        var geolocation = new qq.maps.Geolocation(
            "GLFBZ-ZR2W6-76XSA-MF7CQ-GDJ6Z-6FB5K",
            "享居屋"
        );
        if (!this.locationInfo) {
            geolocation.getLocation(res => {
                console.log(res)

                this.$http.get({
                    url: '/districtInfo/getOne',
                    data: {
                        fullName: res.city
                    }
                }).then(res2 => {
                    if (res2.success) {
                        this.$store.commit('updateLocationInfo', res2.data)
                    }
                });
            })
        }

    },
    watch: {
        regionValue() {

            if (this.regionValue.indexOf('km') != -1) {
                this.searchData.distance = this.regionValue.split('km')[0]
                this.searchData.lngKey = this.locationInfo.lng
                this.searchData.latKey = this.locationInfo.lat
                this.searchData.districtCode = ''
                this.searchData.streetCode = ''
                this.searchData.lineCode = ''
                this.searchData.stationCode = ''
            }
            else {
                this.searchData.distance = ''
                this.searchData.lngKey = ''
                this.searchData.latKey = ''
                this.searchData.districtCode = ''
                this.searchData.streetCode = ''
                this.searchData.lineCode = ''
                this.searchData.stationCode = ''
                if (this.regionCode) {
                    this.searchData[this.regionCode.SearchType] = this.regionCode.code
                }

            }
        },
        rentType() {
            this.searchData.rentingType = this.rentType ? (this.rentType == '整租' ? '0' : (this.rentType == '合租' ? '1' : '2')) : ''
        },
        huoseType() {
            this.searchData.roomFilter = this.nowHousType
        },
        rent() {
            this.searchData.minPrice = this.nowRent.minPrice
            this.searchData.maxPrice = this.nowRent.maxPrice
        },
        faced() {
            this.searchData.faced = this.faced
        },
        area() {
            if (this.area) {
                this.searchData.minArea = this.area.minArea
                this.searchData.maxArea = this.area.maxArea
            }
            else {
                this.searchData.minArea = 0
                this.searchData.maxArea = 99999
            }

        },
        houseFeature() {
            this.searchData.featureCodeKey = this.houseFeature.toString()
        }
    },
    computed: {
        ...mapState(["locationInfo"]),
        nowHousType() {
            var type = ''
            if (this.huoseType) {
                switch (this.huoseType) {
                    case '一室': type = 1; break;
                    case '二室': type = 2; break;
                    case '三室': type = 3; break;
                    case '四室及以上': type = 4; break;
                }
            }
            return type
        },
        nowRent() {
            var jsonp = {
                minPrice: 0,
                maxPrice: 99999,
            }
            if (this.rent) {
                if (this.rent.indexOf('以下') != -1) {
                    jsonp.maxPrice = this.rent.split('元')[0]
                } else if (this.rent.indexOf('以上') != -1) {
                    jsonp.minPrice = this.rent.split('元')[0]
                    jsonp.maxPrice = 99999
                }
                else {
                    var money = this.rent.replace(/元/, '')
                    var list = money.split('-')
                    console.log(list)
                    jsonp.minPrice = list[0]
                    jsonp.maxPrice = list[1]
                }
            }

            return jsonp

        },
    },
    methods: {
        refreash() {
            this.showSreen = false
            this.changeType = '区域'
            this.regionValue = ''
            this.regionCode = ''
            this.rentType = ''
            this.huoseType = ''
            this.rent = ''
            this.searchData = {}
            this.faced = ''
            this.area = ''
            this.houseFeature = []
        },
        changeHouseType(jsonp) {
            this.rentType = jsonp.rentType
            this.huoseType = jsonp.huoseType

            this.getData()
        },
        changeShowSreen(state) {
            console.log('出现框')
            this.showSreen = state
            console.log(this.showSreen)
        },
        sreenChange() {
            this.changeShowSreen(false)
        },
        changechooseType(value) {
            this.changeType = value
        },
        changeRegion(value) {
            console.log(value)
            this.regionValue = value.name
            if (value.id) {
                this.regionCode = value
            }
            else {
                this.regionCode = {}
            }

            this.getData()
        },
        changeRent(value) {
            this.rent = value
            this.getData()
        },
        changeSelect(value) {
            this.faced = value.faced
            this.area = value.area
            this.houseFeature = value.houseFeature
            this.getData()
        },
        getData() {
            this.$emit('getData', this.searchData)
        }
    },
    components: { ScreenRegion }
}
</script>
<style lang="less" scoped>
.screenTop {
    height: 0.88rem;
    background: rgba(255, 255, 255, 1);
    display: flex;

    .screen-item {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
            font-size: 0.26rem;
            color: rgba(51, 51, 51, 1);
            line-height: 0.36rem;
        }
        img {
            width: 0.28rem;
            height: 0.28rem;
            margin-left: 0.04rem;
        }
    }
}
</style>


