<template>
    <view class="product-list">
        <view class="topBar" :style="{'padding-top':systemBarHeight.statusBarHeight+'px','height':systemBarHeight.navigationBarHeight+'px'}">
			<u-icon @click="Utils.goBack()"  name="arrow-left" color="#000000" size="20"></u-icon>
			<view class="tabTitle" :style="{'line-height':systemBarHeight.navigationBarHeight+'px'}">选择门店</view>
		</view>
        <view class="provice_city"  :style="{'margin-top':(systemBarHeight.statusBarHeight+systemBarHeight.navigationBarHeight)+'px'}">
            <view class="text" @click="showArea">
                <text>{{areaName.proviceName}}-</text>
                <text v-show="areaName.proviceName!=areaName.cityName">{{areaName.cityName}}-</text>
                <text>{{areaName.disName}}</text>
            </view>
            <view class="icon">
                <image :style="{'height':'100%','width':'100%'}"  :src="'../../../static/imgs/jiantouhei2.png'" />
            </view>
        </view>
        <view >
            <div v-for="item in finalList" :key="item.id" @click="selectedShop(item)" class="shop_item" :class="shopId==item.id?'active':''" >
                <div class="header">
                    <view class="name">{{ item.name }}</view>
                    <view class="adressBox">
                        <view class="map"><u-icon name="map" color="#999999" size="12"></u-icon></view>
                        <view class="address">{{ item.address }}</view>
                    </view>
                    <view class="timeBox">
                        <view class="clock"><u-icon name="clock" color="#999999" size="10"></u-icon></view>
                        <view class="time">{{ item.startTime }} - {{ item.endTime }}</view>
                    </view>
                </div>
                <view class="line" />
                <div class="dec">
                    <view :style="{'height':'34rpx'}" class="distance1" v-show="item.distance && item.distance!=-1"></view>
                    <view class="goshop">去品尝</view>
                    <view :style="{'height':'34rpx'}" class="distance" v-show="item.distance && item.distance!=-1">距离{{ item.distance }}</view>
                </div>
            </div>  
        </view>
		<AreaPicker ref="AreaPicker" noSwitch @sendAreaInfo="updataAreaInfo"/>
    </view>
</template>

<script>
import { $EventBus } from '@/utils/EventBus';
import AreaPicker from '@/components/AreaPicker/index.vue'
import Utils from '@/utils/utils'

export default {
    components: {AreaPicker},
    data() {
        return {
            show: true,
            columns: [],
            list: [],
            areaName:{},
			shopId:0,
            Utils
        }
    },
    onShow() {
		if(uni.getStorageSync('shopData')) {
			this.shopId = uni.getStorageSync('shopData').id;
		}
        this.list = uni.getStorageSync('shops');
        this.areaName = uni.getStorageSync('areaName')
    },
    computed: {
        systemBarHeight(){
    	        return  this.$store.state.user.systemBarHeight
    	},
        finalList() {
            const {list} = this
            const val = list.sort((a,b)=>{
                return a.realDistance-b.realDistance
            })
            let unshiftVal = {}
            val.map((item,index)=>{
             if(item.id==this.shopId){
                unshiftVal =  val.splice(index,1)[0]
             }
            })
            if(JSON.stringify(unshiftVal)!='{}'){
                val.unshift(unshiftVal)
            }
            return val
        }
    },  
    methods: {
        selectedShop(item) {
            uni.setStorage({ key: 'shopData', data: item });
            uni.switchTab({ url: '/pages/menu/menu' })
            $EventBus.$emit('getMenuList', item);
        },
        updataAreaInfo(data){
            this.list = data.shops
            this.areaName = data.areaName
        },
        showArea(){
            this.$refs.AreaPicker.showArea()
        }
    },
}
</script>

<style lang="scss" scoped>
.product-list{
    background: #F2F2F2;
    height:100vh ;
    overflow: auto;
    
	.topBar{
		position: fixed;
		width: 100%;
		background: white;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		z-index: 9999;
		padding-left: 34rpx;
		// .arrow-left {
		// 	margin-left: 20rpx;
		// }
		.tabTitle{
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			text-align: center;
			width: 79%;
			color: #333333
		}
	}
}

.provice_city{
    height: 62rpx;
    background: #FFFFFF;
    display: flex;
    justify-content: flex-start;
    padding: 12rpx 32rpx;
    align-items: center;
    .text{
        font-size: 28rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #000000;
        line-height: 36rpx;
    }
    .icon {
        width: 14rpx;
        margin-left: 16rpx;
		margin-top: 2rpx;
        height: 22rpx;
        display: flex;
        align-items: center;
    }
}
.active {
	border: 0.5px solid #003AE9;
}
.shop_item {
    width: 686rpx;
    background: #FFFFFF;
    padding: 40rpx 30rpx 40rpx 32rpx;
    box-sizing: border-box;
    margin: 32rpx 30rpx 32rpx 34rpx;
    display: flex;
    justify-content: 30rpx 30rpx flex-start;
    align-items: center;

    .header {
        margin-right: 32rpx;
        // border-right: 2rpx solid red;
        .name {
            font-size: 28rpx;
            height: 42rpx;
            line-height: 40rpx;
            width: 378rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
        }
        .adressBox {
            width: 378rpx;
            margin-top: 16rpx;
            display: flex;
            justify-content: flex-start;
			.map {
				// width: 24rpx;
				// height: 30rpx;
				// background-color: #000000;
				margin-top: 6rpx;
			}
            .address {
				// background-color: #000000;
                margin-left: 10rpx;
                font-size: 24rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
				line-height: 36rpx;
            }
        }
        .timeBox {
            margin-top: 16rpx;
            display: flex;
            align-items: center;
            justify-content: flex-start;
			.clock {
				// width: 24rpx;
				// height: 27rpx;
				// background-color: #000000;
				margin-top: -6rpx;
			}
            .time {
				padding-left: 4rpx;
				// background-color: #000000;
                margin-left: 10rpx;
				height: 34rpx;
                font-size: 24rpx;
                font-family: ArialMT;
                color: #999999;
				line-height: 28rpx;
            }
        }
    }
    .line {
        height: 172rpx;
        width: 1px;
        border-right: 1px solid #F4F4F4;
    }
    .dec {
        margin-left: 44rpx;
        display: flex;
        flex-direction: column;
        // height: 146rpx;
        view {
            vertical-align: baseline;
        }
        .goshop {
            width: 167rpx;
            height: 64rpx;
            background: #0050F6;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            text-align: center;
            line-height: 64rpx;
        }

		.distance1,
        .distance {
			padding-top: 16rpx;
            font-size: 24rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #999999;
            text-align: center;
            line-height: 34rpx;
        }
		.distance1 {
			padding-top: 0rpx;
			padding-bottom: 16rpx;
		}
     
    }
}
</style>