<template>
	<view class="area">
		<view class="empty" v-if="serviceArea == [] || serviceArea.length === 0">
			<u-empty text="暂无数据"></u-empty>
		</view>
		<view class="table" v-else :style="'height:'+height*0.76+'px'" style="overflow: scroll;">
			<u-table>
				<u-tr>
					<u-th>已选省份/直辖市</u-th>
					<u-th>已选城市</u-th>
					<u-th>已选区域</u-th>
				</u-tr>
				<u-tr v-for="(item,key) in serviceArea" :key="key">
					<u-td>{{item.FEntityPROVINCE}}</u-td>
					<u-td>{{item.FEntityCity}}</u-td>
					<u-td>{{item.FEntityCOUNTY}}</u-td>
				</u-tr>
			</u-table>
		</view>
		<view class="container" style="display: block;">
			<view class="table"></view>
			<view class="editTable">
				<u-button hover-class="none" :custom-style="btnStyle" shape="circle" @click="edit">编辑服务区域</u-button>
			</view>
			<u-select v-model='show' :list="list" @confirm="confirm"></u-select>
		</view>
	</view>
</template>

<script>
	import {loading,hidden} from '../../tips/myTips.js'
	import {} from '../../api/apis.js'
	export default {
		onLoad(){
			uni.$u.mpShare.title = '页面分享';
			let that = this
			let userInfo = this.$store.state.userInfo
			this.serviceArea = userInfo.FServiceArea
			this.width = this.$store.state.sysInfo.windowWidth
			this.height = this.$store.state.sysInfo.screenHeight
		},
		onShow(){
			
		},
		data(){
			return {
				btnStyle:{
					background:"#7D5AFC",
					color:"#FFFFFF"
				},
				serviceArea:[],
				list:[],
				show:false,
				width:"",
				height:""
			}
		},
		methods:{
			edit(){
				uni.navigateTo({
					url:'./edit/edit'
				})
			},
			confirm(res){
				console.log(res)
			}
		}
	}
</script>

<style>
	.empty{
		margin-top: 5%;
	}
	.editTable{
		position: absolute;
		left: 5%;
		bottom: 25px;
		width: 90%;
	}
	.area{
		padding: 5% 5%;
	}
</style>
