<template>
	<view class="container">
		<HeaderCustom title='企业修改' :showBack="true"></HeaderCustom>
		<div class="formBox">
			<uv-form labelPosition="left" :model="formField" labelWidth="100" :rules="rules" ref="form">
				<uv-form-item required label="企业名称" prop="company_name">
					<uv-input  v-model="formField.company_name" border="none"
						placeholder="请输入企业名称">
					</uv-input>
				</uv-form-item>
				<uv-form-item required label="姓名" prop="contact_person">
					<uv-input  v-model="formField.contact_person" border="none"
						placeholder="请输入姓名">
					</uv-input>
				</uv-form-item>
				<uv-form-item required label="手机号码" prop="contact_phone">
					<uv-input  v-model="formField.contact_phone" border="none"
						placeholder="请输入手机号码">
					</uv-input>
				</uv-form-item>
				<uv-form-item required label="邮箱" prop="contact_email">
					<uv-input  v-model="formField.contact_email" border="none"
						placeholder="请输入邮箱">
					</uv-input>
				</uv-form-item>
				<uv-form-item required label="地址" prop="address" @click="openAddressPicker">
					<uv-input  v-model="formField.address" readonly border="none"
						placeholder="请选择地址">
					</uv-input>
					<uv-picker ref="addressPicker" :columns="addressList" keyName="name" @change="addressChange"
						@confirm="confirm">
					</uv-picker>
				</uv-form-item>
				<uv-button type="primary" text="提交" customStyle="margin-top: 10px"
					@click="submit"></uv-button>
			</uv-form>
		</div>
	</view>
</template>

<script setup>
	import {
		computed,
		onMounted,
		ref
	} from "vue";
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		useAuthStore,
		useUserStore
	} from "@/store";
	import {
		regions
	} from '/static/json/regions.js'
	import HeaderCustom from '/components/HeaderCustom/HeaderCustom.vue'
	import RPC from "@/utils/request";

	const authStore = useAuthStore()
	const userStore = useUserStore()
	
	const props = defineProps({
		id: [String],
	});
	
	if (props.id && props.id !== 'null') {
		RPC.post("/enterprise/detail", {
			id: Number(props.id),
		}).then((res) => {
			formField.value = {
				...res.enterprise || {}
			};
		});
	}

	function copyText(text) {
		uni.setClipboardData({
			data: text,
			success: function() {
				uni.showToast({
					title: '复制成功',
					icon: 'success',
				});
			},
			fail: function() {
				uni.showToast({
					title: '复制失败',
					icon: 'none',
				});
			},
		})
	}

	onShow(() => {
		if (!authStore?.isLoggedIn) {
			uni.switchTab({
				url: `/pages/index/index`,
			});
			uni.showToast({
				title: "请先登录",
				icon: "none",
			})
			return
		}
	})

	const form = ref(null)
	const formField = ref({
		contact_person: '',
		phone: '',
		email: '',
		address: '',
		company_name: '',
	})
	const pickType = type => {
		const index = formField.value.type.findIndex(item => item === type)
		if (index >= 0) {
			formField.value.type.splice(index, 1)
		} else {
			formField.value.type.push(type)
		}
	}
	const rules = {
		'company_name': {
			type: 'string',
			required: true,
			message: '请填写企业名称',
			trigger: ['blur', 'change']
		},
		'name': {
			type: 'string',
			required: true,
			message: '请填写姓名',
			trigger: ['blur', 'change']
		},
		'contact_phone': {
			type: 'string',
			required: true,
			message: '请填写手机号码',
			trigger: ['blur', 'change']
		},
		'contact_email': {
			type: 'string',
			required: true,
			message: '请填写邮箱',
			trigger: ['blur', 'change']
		},
		'address': {
			type: 'string',
			required: true,
			message: '请选择地址',
			trigger: ['blur', 'change']
		}
	}
	const submit = () => {
		// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
		form.value.validate().then(res => {
			// uni.showToast({
			// 	icon: 'success',
			// 	title: '校验通过'
			// })
			RPC.post('/enterprise/update', formField.value).then(res => {
				uni.showToast({
					icon: 'success',
					title: '操作成功'
				})
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			})
		}).catch(errors => {
			// uni.showToast({
			// 	icon: 'error',
			// 	title: '校验失败'
			// })
		})
	}

	const provinces = ref([])
	const citys = ref([])
	const areas = ref([])

	const addressList = computed(() => [provinces.value, citys.value, areas.value])

	const addressPicker = ref(null)

	const pickerValue = ref(['0', '0', '0'])
	const defaultValue = ref(['3442', '1', '2'])


	const addressChange = e => {
		const {
			columnIndex,
			index,
			indexs
		} = e
		// 改变了省
		if (columnIndex === 0) {
			citys.value = provinces.value[index]?.children || []
			areas.value = citys.value[0]?.children || []
			addressPicker.value.setIndexs([index, 0, 0], true)
		} else if (columnIndex === 1) {
			areas.value = citys.value[index]?.children || []
			addressPicker.value.setIndexs(indexs, true)
		}
	}

	const confirm = e => {
		// console.log('确认选择的地区：', e);
		// uni.showToast({
		// 	icon: 'none',
		// 	title: `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
		// })
		formField.value.address = `${e.value[0].name}/${e.value[1].name}/${e.value[2].name}`
	}

	const handlePickValueDefault = () => {
		pickerValue.value[0] = provinces.value.findIndex(item => Number(item.id) == defaultValue.value[0]);
		// 设置市
		citys.value = provinces.value[pickerValue.value[0]]?.children || [];
		pickerValue.value[1] = citys.value.findIndex(item => Number(item.id) == defaultValue.value[1]);
		// 设置区
		areas.value = citys.value[pickerValue.value[1]]?.children || [];
		pickerValue.value[2] = areas.value.findIndex(item => Number(item.id) == defaultValue.value[2]);
		// 重置下位置
		addressPicker.value.setIndexs([pickerValue.value[0], pickerValue.value[1], pickerValue.value[2]], true);
	}

	const openAddressPicker = () => {
		addressPicker.value.open()
		handlePickValueDefault()
	}

	const getData = () => {
		provinces.value = regions.sort((left, right) => (Number(left.code) > Number(right.code) ?
			1 : -1));
		handlePickValueDefault()
	}
	onMounted(() => {
		getData()
	})
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		min-height: 100vh;
		background-color: #f8f8f8;
	}

	.titleBox {
		background-color: #fff;
		padding: 20px 4vw;

		.title {
			font-size: 16px;
			font-weight: 700;
		}

		.line {
			width: 5vw;
			height: 2px;
			background-color: #3F70FF;
			margin-top: 4px;
			margin-bottom: 8px;
		}

		.desc {
			font-size: 12px;
			font-weight: 500;
			line-height: 18px;
		}
	}

	.formBox {
		padding: 10px;

		:deep(.uv-form) {
			background-color: #fff;
			padding: 10px;
			border-radius: 10px;

			.uv-form-item {
				background-color: #F4F4F4;
				margin-bottom: 10px;
				border-radius: 10px;
				padding-left: 20px;
			}
		}

		.type_select_box {
			display: flex;
			flex-wrap: wrap;
			gap: 15px;
			padding-right: 20px;
			margin-top: 10px;

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				background-color: #fff;
				font-size: 12px;
				width: 90px;
				height: 70px;
				border-radius: 6px;

				.img {
					width: 20px;
					height: 20px;
					margin-bottom: 6px;
				}

				&.selected {
					border: 1px solid #3F70FF;
					background-color: rgba(63, 112, 255, 0.1);
				}
			}
		}
	}

	.infoBox {
		margin-top: 20px;
		padding: 10px 5vw;
		background-color: #fff;
		border-radius: 10px;
		font-size: 16px;

		.line {
			display: flex;
			margin: 10px 0;

			.key {
				width: 70px;
				font-weight: 700;
			}
		}
	}
</style>