<template>
	<view class="address">
		<view class="form">
			<u-form :model="form" ref="uform" label-width="190" label-align="center">
				<u-form-item label="居住地址" prop="address" :required="true">
					<u-input disabled v-model="form.address" @click="show = true" placeholder="点击选择居住地址"></u-input>
					<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="save"></u-select>
				</u-form-item>
				<u-form-item label="详细地址" prop="detail" :required="true">
					<u-input v-model="form.detail" type="textarea" placeholder="请输入详细地址(如:XXX街道,XXX小区)"></u-input>
				</u-form-item>
				<u-form-item label="服务区域" prop="area">
				</u-form-item>
			</u-form>
			<u-table v-if="area.length !== 0">
				<u-tr>
					<u-th>已选省份</u-th>
					<u-th>已选城市</u-th>
					<u-th>已选区域</u-th>
				</u-tr>
				<u-tr v-for="(item,index) in area" :key="index">
					<u-td>{{item.FEntityPROVINCE}}</u-td>
					<u-td>{{item.FEntityCity}}</u-td>
					<u-td>{{item.FEntityCOUNTY}}</u-td>
				</u-tr>
			</u-table>
			<view class="btn">
				<u-button hover-class="none" :custom-style="btnStyle" shape="circle" @click="confirm">确定</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {loading,hidden,toast} from '../../tips/myTips.js'
	import {getAddress,edit} from '../../api/apis.js'
	export default {
		onLoad(){
			this.init()
			uni.$u.mpShare.title = '页面分享';
		},
		onShow(){
			
		},
		onReady(){
			this.$refs.uform.setRules(this.rules)
		},
		data(){
			return {
				btnStyle:{
					background:"#7D5AFC",
					color:'#FFFFFF'
				},
				form:{
					address:'',
					detail:''
				},
				area:[],
				rules:{
					address:[
						{
							required: true,
							message:'请选择居住地址',
							trigger:['blur']
						}
					],
					detail:[
						{
							required: true,
							message:'请输入详细地址',
							trigger:['blur']
						}
					]
				},
				show:false,
				list:[],
				params:{
					Model:{
						FID:this.$store.state.userInfo.Id,
						FPROVINCE_ID:'',
						FPROVINCE:'',
						FCity_ID:'',
						FCity:'',
						FCOUNTY_ID:'',
						FCOUNTY:'',
						FAdress:''
					}
				}
			}
		},
		methods:{
			init(){
				let that = this
				let userInfo = this.$store.state.userInfo
				
				if(userInfo.FPROVINCE || userInfo.FCity || userInfo.FCOUNTY){
					this.form.address = userInfo.FPROVINCE + userInfo.FCity + userInfo.FCOUNTY
					console.log(userInfo)
					this.params.Model.FPROVINCE = userInfo.FPROVINCE
					this.params.Model.FPROVINCE_ID = userInfo.FPROVINCE_ID
					this.params.Model.FCity = userInfo.FCity
					this.params.Model.FCity_ID = userInfo.FCOUNTY_ID
					this.params.Model.FCOUNTY = userInfo.FCOUNTY
					this.params.Model.FCOUNTY_ID = userInfo.FCOUNTY_ID
				}
				if(userInfo.FAdress){
					this.form.detail = userInfo.FAdress
					this.params.Model.FAdress = userInfo.FAdress
				}
				if(userInfo.FServiceArea.length !== 0){
					this.area = userInfo.FServiceArea
				}
				
				loading()
				getAddress().then((res) => {
					hidden()
					console.log("城区信息:",res)
					if(res.data.code == 0){
						that.list = res.data.result
					}else{
						toast(res.data.message)
					}
				})
			},
			save(res){
				this.form.address = res[0].label + res[1].label + res[2].label
				this.params.Model.FPROVINCE = res[0].label
				this.params.Model.FPROVINCE_ID = res[0].value
				this.params.Model.FCity = res[1].label
				this.params.Model.FCity_ID = res[1].value
				this.params.Model.FCOUNTY = res[2].label
				this.params.Model.FCOUNTY_ID = res[2].value
			},
			confirm(){
				let that = this
				if(this.form.address!=""){
					if(this.form.detail!=""){
						this.$refs.uform.validate(valid => {
							if(valid){
								this.params.Model.FAdress = this.form.detail
								loading()
								edit(this.params).then((res) => {
									hidden()
									console.log("传递参数:",this.params)
									console.log("请求信息:",res)
									if(res.data.code == 0){
										uni.navigateBack()
									}else{
										toast(res.data.message)
									}
								})
							}
						})
					}
					else{
						toast('请输入详细地址')
					}
					
				}
				else{
					toast('请选择地址')
				}
				
			}
		},
		computed:{
			
		}
	}
</script>

<style>
	.btn{
		margin: 5% auto;
		width: 95%;
	}
</style>
