<template>
	<view>
		<view class="u-font-32 font-bold u-m-32 text-center">门店信息</view>
		<view class="container">
			<view class="form-item required">
				<view class="title"> 归属地</view>
				<view class="input-box u-flex  u-row-between u-col-center" @click="showCitySelect=true">
					<text class="color-999" v-if="!pro_city_area">请选择</text>
					<text class="color-333" v-else>{{pro_city_area}}</text>
					<up-icon name="arrow-down"></up-icon>
				</view>

			</view>


			<view class="form-item required">
				<view class="title"> 营业地址</view>

				<up-input placeholder="营业地址" :placeholder-class="placeholderClass"
					v-model="form.businessAddress"></up-input>
			</view>



			

			<view class="form-item required">
				<view class="title"> 经营场所内设照片</view>
				<my-upload-img v-model="form.insidePic.url" :size="200"></my-upload-img>
			</view>
			<view class="form-item required">
				<view class="title"> 门头照</view>
				<my-upload-img v-model="form.doorPic.url" :size="200"></my-upload-img>
			</view>
			<view class="form-item required">
				<view class="title"> 收银台照片</view>
				<my-upload-img v-model="form.cashierDeskPic.url" :size="200"></my-upload-img>
			</view>

		</view>


		<citySelect v-model="showCitySelect" @city-change="cityChange"></citySelect>

	</view>

</template>

<script setup>
	import {
		computed,
		reactive,
		ref,watch
	} from 'vue';
	import shopSelect from './shop-select.vue'
	import citySelect from '../../components/u-city-select.vue'
	import {
		userTypes,
		sexs,
		contactPersonTypes,
		companyChildTypes,
		certTypes
	} from '@/entryManager/data.js'
	const showCitySelect = ref(false)

	function cityChange(e) {
		console.log('cityChange', e);
		form.mercProv = e.province.regionName;
		form.mercCity = e.city.regionName;
		form.mercArea = e.area.regionName;

		form.mercProvCode = e.province.regionId;
		form.mercCityCode = e.city.regionId;
		form.mercAreaCode = e.area.regionId;
		console.log('form', form);
	}

	const pro_city_area = computed(() => {
		if (form.mercProv && form.mercCity && form.mercArea) {
			const text = form.mercProv + '-' + form.mercCity + '-' + form.mercArea
			console.log('text', text);
			return text
		}
		return ''
	})
	const form = reactive({
		"mercProvCode": "",
		"mercCityCode": "",
		"mercAreaCode": "",
		"mercProv": "",
		"mercCity": "",
		"mercArea": "",
		"businessAddress": "",
		"insidePic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		},
		"doorPic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		},
		"cashierDeskPic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		}
	})

	const placeholderClass = ref('u-font-28')

	const isRequired = ref('required')
	
	
	
	const props=defineProps({
		data:{
			type:Object,
			default:()=>{
				
			}
		}
	})
	
	
	watch(()=>props.data,(newval)=>{
		for(let key in form){
			if(props.data.hasOwnProperty(key)){
				form[key]=props.data[key]
			}
		}
	},{
		deep:true,immediate:true
	})
	
	const emits=defineEmits(['update'])
	watch(()=>form,(newval)=>{
		emits('update',newval)
	},{
		deep:true
	})
</script>

<style lang="scss">
	.container {
		padding: 32rpx 28rpx;
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		background-color: #fff;
	}

	.form-item {
		margin-bottom: 32rpx;

		.title {
			font-weight: 700;
			margin-bottom: 16rpx;
		}

		&.required {
			.title::before {
				content: '*';
				color: red;
			}
		}

		&:last-child {
			margin-bottom: 0;
		}
	}

	.input-box {
		padding: 10px 10px;
		border-radius: 4px;
		border: 1px solid #dadbde;
	}
</style>