<template>
	<view class="min-page u-font-28 color-333 bg-f7">
		<view class="container">
			<up-form labelPosition="top" :model="form" :rules="rules" ref="refForm" label-width="700rpx"
				errorType="toast" :label-style="labelStyle">
				<up-form-item prop="shopName" label="店铺名称" :required="returnIsRequired('shopName')">
					<up-input v-model="form.shopName" placeholder="请输入店铺名称"></up-input>
				</up-form-item>
				<up-form-item prop="shopType" label="店铺类型" :required="returnIsRequired('shopType')">
					<up-radio-group v-model="form.shopType" :disabled="isDisabledEdit()">
						<up-radio v-for="(value,key) in shopTypes" :label="value" :name="key"></up-radio>
					</up-radio-group>
				</up-form-item>
				<up-form-item prop="isHeadShop" label="是否为主店" :required="returnIsRequired('isHeadShop')"
					v-if="form.shopType != 'only'">
					<up-switch v-model="form.isHeadShop" :size="20" :disabled="isDisabledEdit()" :inactive-value="0"
						:active-value="1"></up-switch>

				</up-form-item>
				<template v-if="form.isHeadShop == 0 && form.shopType != 'only'">
					<up-form-item label="选择主店" prop="mainId" :required="returnIsRequired('mainId')">
						<headShopSelect v-model="form.mainId" :disabled="isDisabledEdit('mainId')"></headShopSelect>
					</up-form-item>
				</template>

				<up-form-item prop="chainName" label="连锁店扩展店名" :required="returnIsRequired('chainName')">
					<up-input v-model="form.chainName" placeholder="连锁店扩展店名"></up-input>
				</up-form-item>
				<up-form-item prop="logo" label="门店logo" :required="returnIsRequired('logo')">
					<my-upload-img v-model="form.logo" :size="200"></my-upload-img>
				</up-form-item>
				<up-form-item prop="frontImg" label="门店照片" :required="returnIsRequired('frontImg')">
					<my-upload-img v-model="form.frontImg" :size="200"></my-upload-img>
				</up-form-item>
				<up-form-item prop="registerType" label="经营模式" :required="returnIsRequired('registerType')">
					<up-radio-group v-model="form.registerType">
						<up-radio v-for="(value,key) in registerTypes" :label="value" :name="key"></up-radio>
					</up-radio-group>
					<up-alert description="请谨慎修改" type="warning" :show-icon="true"></up-alert>
				</up-form-item>
				<up-form-item prop="tubeType" label="管理方式" :required="returnIsRequired('tubeType')"
					v-if="form.shopType != 'only'">
					<up-radio-group v-model="form.tubeType">
						<up-radio v-for="(value,key) in tubeTypes" :label="value" :name="key*1"></up-radio>
					</up-radio-group>
					<up-alert description="请谨慎修改" type="warning" :show-icon="true"></up-alert>
				</up-form-item>
				<up-form-item prop="profiles" label="试用/正式" :required="returnIsRequired('profiles')">
					<up-radio-group v-model="form.profiles">
						<up-radio v-for="(value,key) in profiless" :label="value" :name="key"></up-radio>
					</up-radio-group>
				</up-form-item>
				<up-form-item prop="activateCode" label="激活码" :required="returnIsRequired('activateCode')">
					<view>
						<up-input v-model="form.activateCode" placeholder="激活码"></up-input>
						<view class="u-font-24 u-m-t-14 color-666">
							注：输入有效激活码表示添加的同时直接激活该店铺。
						</view>
					</view>

				</up-form-item>

				<up-form-item prop="accountName" label="登录账号" :required="returnIsRequired('accountName')">
					<up-input v-model="form.accountName" placeholder="登录账号"></up-input>
				</up-form-item>

				<up-form-item prop="accountPwd" label="登录密码" :required="returnIsRequired('accountPwd')">
					<up-input v-model="form.accountPwd" placeholder="登录密码"></up-input>
				</up-form-item>

				<up-form-item prop="phone" label="联系电话" :required="returnIsRequired('phone')">
					<up-input v-model="form.phone" placeholder="联系电话"></up-input>
				</up-form-item>

				<up-form-item prop="supportDeviceNumber" label="设备数量"
					:required="returnIsRequired('supportDeviceNumber')">
					<up-number-box v-model="form.supportDeviceNumber" input-width="100"></up-number-box>
				</up-form-item>

				<up-form-item prop="districts" label="店铺地址" :required="returnIsRequired('districts')">
					<view class="u-relative w-full">
						<up-input :modelValue="address" placeholder="店铺地址"></up-input>
						<view class="u-absolute position-all" style="z-index: 10;" @click="showAddressSelect=true">
						</view>
					</view>
				</up-form-item>
				<up-form-item prop="lng" label="店铺经度" :required="returnIsRequired('lng')">
					<view class="u-flex u-col-center gap-20">
						<up-input v-model="form.lng" placeholder="经度" disabled></up-input>
						<up-input v-model="form.lat" placeholder="维度" disabled></up-input>
						<my-button @click="chooseLng">选择坐标</my-button>
					</view>
				</up-form-item>

				<up-form-item prop="address" label="店铺详细地址" :required="returnIsRequired('address')">
					<up-input v-model="form.address" placeholder="店铺详细地址"></up-input>
				</up-form-item>
				<up-form-item prop="detail" label="店铺简介" :required="returnIsRequired('detail')">
					<up-textarea v-model="form.detail" placeholder="店铺简介"></up-textarea>
				</up-form-item>

				<up-form-item prop="status" label="状态" :required="returnIsRequired('status')">
					<up-radio-group v-model="form.status">
						<up-radio v-for="(value,key) in statuss" :label="value" :name="key*1"></up-radio>
					</up-radio-group>
				</up-form-item>

			</up-form>
		</view>

		<my-address-select v-model="showAddressSelect" @city-change="cityChange"></my-address-select>
		<my-bottom-btn-group @cancel="uni.navigateBack()" @save="submit"></my-bottom-btn-group>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		computed,
		reactive,
		ref,
		watch,
		watchEffect
	} from 'vue';
	import {
		statuss,
		shopTypes,
		profiless,
		registerTypes,
		tubeTypes
	} from '../data.js'
	import headShopSelect from './components/head-shop-select.vue'
	import * as shopInfoApi from '@/http/api/account/shopInfo.js'

	function chooseLng() {
		uni.chooseLocation({
			keyword: address.value,
			success(res) {
				console.log('res', res);
				form.lat = '' + res.latitude
				form.lng = '' + res.longitude
			}
		})
	}

	function cityChange(e) {
		console.log(e);
		form.provinces = e.province.regionName
		form.cities = e.city.regionName
		form.districts = e.area.regionName
	}



	const showAddressSelect = ref(false)

	const labelStyle = {
		fontWeight: "700"
	}
	const refForm = ref(null)
	const form = reactive({
		id: null,
		shopName: "",
		mainId: "",
		shopType: "only",
		tubeType: 0,
		registerType: "before",
		profiles: "release",
		activateCode: "",
		accountName: "",
		accountPwd: "",
		phone: "",
		supportDeviceNumber: 1,
		lat: "",
		lng: "",
		address: "",
		detail: "",
		status: 1,
		logo: "",
		frontImg: "",
		provinces: "",
		cities: "",
		districts: "",
		chainName: "",
		isHeadShop: 0,
	})
	watch(() => form.isHeadShop, (newval) => {
		form.mainId = ''
	})

	function isDisabledEdit(key) {
		if(options.type==='addBranch'){
			return true
		}
		if (form.id) {
			return true
		} else {
			false
		}
	}
	const address = computed(() => {
		if (form.provinces && form.cities && form.districts) {
			return form.provinces + '-' + form.cities + '-' + form.districts
		}
	})
	const rules = reactive({
		'shopName': {
			type: 'string',
			max: 30,
			required: true,
			message: '请输入店铺名称',
			trigger: ['blur', 'change'],
		},
		'logo': {
			type: 'string',
			required: true,
			message: '请上传门店logo',
			trigger: ['blur', 'change'],
		},
		accountName: {
			max: 30,
			required: true,
			message: '请输入登录账号',
			trigger: ['blur', 'change'],
		},
		phone: {
			max: 30,
			required: true,
			message: '请输入联系电话',
			trigger: ['blur', 'change'],
		},
		districts: {
			max: 30,
			required: true,
			message: '请选择店铺地址',
			trigger: ['blur', 'change'],
		},
		lng: {
			max: 30,
			required: true,
			message: '请选择店铺坐标',
			trigger: ['blur', 'change'],
			// 自定义验证函数，见上说明
			// validator: (rule, value, callback) => {
			// 	return !form.lng?false:true;
			// },
		},
		tubeType: {
			type: 'number',
			max: 30,
			required: true,
			message: '请选择管理方式',
			trigger: ['blur', 'change'],
		},
		mainId: {
			max: 30,
			required: true,
			message: '请选择主店铺',
			trigger: ['blur', 'change'],
		}

	})

	function returnIsRequired(key) {
		if (rules[key] && rules[key].required) {
			return true
		}
		return false
	}

	function submit() {
		refForm.value.validate().then(valid => {
			console.log('valid', valid);
			if (valid) {
				// uni.$u.toast('校验通过')
				save()
			} else {}
		}).catch(() => {
			// 处理验证错误  
		});
	}
	async function save() {
		const res = (form.id) ? await shopInfoApi.editShop(form) : await shopInfoApi.addShop(form)
		if (res) {
			uni.$u.toast(form.id ? '修改成功' : '添加成功')
			setTimeout(() => {
				uni.navigateBack()
			}, 1000)
		}
	}
	const options=reactive({})
	onLoad(async (opt) => {
		Object.assign(options,opt)
		if(opt.type=='addBranch'){
			// 添加分店
			const res = await await shopInfoApi.getShopDetail({
				id: opt.id
			})
			form.isHeadShop=0
			form.mainId=res.id
			form.shopType=res.shopType
			uni.setNavigationBarTitle({
				title: '添加店铺'
			})
			return 
		}else{
			if (opt.id) {
				rules.accountName.required = false
				const res = await await shopInfoApi.getShopDetail({
					id: opt.id
				})
				for (let key in form) {
					form[key] = res[key]
				}
				uni.setNavigationBarTitle({
					title: '编辑店铺'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '添加店铺'
				})
			}
		}
		
	})
	watchEffect(()=>{
		console.log(form.shopType)
		if(form.shopType!='only'&&!form.isHeadShop){
			rules.mainId.required=true
		}
	})
	
</script>

<style lang="scss" scoped>
	.min-page {
		padding: 32rpx 28rpx;
	}

	.container {
		background-color: #fff;
		padding: 12rpx 28rpx;
		border-radius: 16rpx;
	}

	:deep(.input-placeholder) {
		font-size: 28rpx;
	}
</style>