<template>
	<a-row :gutter="10">
		<a-col :xs="24" :sm="24" :md="7" :lg="7" :xl="7" class="mb-3">
			<a-card :bordered="false">
				<div class="account-center-avatarHolder">
					<div class="avatar" v-viewer>
						<img v-if="pigData?.imgUrl" :src="pigData?.imgUrl" />
						<div v-else style="padding-top: 20px">暂无图片</div>
					</div>
					<div class="username">{{pigData?.name}}</div>
				</div>
				<div class="account-center-detail">
					<p>
						<i class="group"></i>
						<span>规模：{{pigData?.size}}</span>
					</p>
					<p>
						<i class="address"></i>
						<span>{{pigData?.location}}{{pigData?.detailLocation}}</span>
					</p>
				</div>
				<a-divider />
			</a-card>
		</a-col>
		<a-col :xs="24" :sm="24" :md="17" :lg="17" :xl="17">
			<a-card
				:bordered="false"
				style="width: 100%"
			>
				<a-form
					ref="formRef"
					:model="formData"
					:rules="formRules"
					v-bind="layout"
					:label-col="{ ...layout.labelCol, offset: 0 }"
					:wrapper-col="{ ...layout.wrapperCol, offset: 0 }"
				>
					<a-form-item label="猪场名称：" name="name">
						<span>{{ formData.name }}</span>
					</a-form-item>
					<a-form-item label="所在区域" name="location">
						<a-cascader
							v-model:value="formData.locationList"
							@change="areaChange"
							:options="area"
							:fieldNames="{ label: 'name', value: 'name', children: 'children' }"></a-cascader>
					</a-form-item>
					<a-form-item label="详细地址：" name="detailLocation">
						<a-input v-model:value="formData.detailLocation" placeholder="请输入详细地址" allow-clear />
					</a-form-item>
					<a-form-item label="图片：" name="imgUrl">
						<x-img-upload @onImgChange="onImgChange"></x-img-upload>
					</a-form-item>
					<a-form-item label="规模：" name="size">
						<a-input v-model:value="formData.size" placeholder="请输入规模" allow-clear />
					</a-form-item>
					<a-form-item :wrapper-col="{ ...layout.wrapperCol, offset: 4 }">
						<a-button type="primary" :loading="submitLoading" @click="onSubmit">保存猪场信息</a-button>
					</a-form-item>
				</a-form>

			</a-card>
		</a-col>
	</a-row>
</template>

<script setup name="pigMenu">
	import bizPigApi from "@/api/biz/bizPigApi";
	import area from '@/assets/json/area.json'
	import XImgUpload from "@/components/XnUpload/XImgUpload.vue"
	import {required} from "@/utils/formRules";
	import {cloneDeep} from "lodash-es";
	import tool from "@/utils/tool";

	const formRef = ref()
	const formData = ref({})
	const submitLoading = ref(false)
	// 默认要校验的
	const formRules = {
		location: [required('请选择所在区域')],
		detailLocation: [required('请输入详细地址')],
		imgUrl: [required('请上传图片')],
		size: [required('请输入规模')]
	}

	const areaChange = (value) => {
		formData.value.location = value.join('-')
	}

	const onImgChange = (item) => {
		if (item.length > 0) {
			formData.value.imgUrl = item[0]
		} else {
			formData.value.imgUrl = undefined
		}
	}
	// 验证并提交数据
	const onSubmit = () => {
		formRef.value
			.validate()
			.then(() => {
				submitLoading.value = true
				let form = new FormData()
				form.append('id', formData.value.id)
				form.append('name', formData.value.name)
				form.append('location', formData.value.location)
				form.append('detailLocation', formData.value.location)
				form.append('imgUrl', formData.value.imgUrl)
				form.append('size', formData.value.size)
				form.append('orgId', tool.data.get('SNOWY_ORG_ID'))
				bizPigApi.editPig(form).then(() => {
					initPig()
				}).finally(() => {
					submitLoading.value = false
				})
			})
			.catch(() => {
				submitLoading.value = false
			})
	}
	const layout = {
		labelCol: {
			span: 4
		},
		wrapperCol: {
			span: 12
		}
	}

	const pigData = ref({})
	const initPig = () => {
		bizPigApi.getPig().then(res => {
			pigData.value = cloneDeep(res)
			formData.value = cloneDeep(res)
			formData.value.locationList = formData.value.location ? formData.value.location.split('-'): []
		})
	}

	onMounted(() => {
		initPig()
	})
</script>

<style lang="less" scoped>
	.account-center-avatarHolder {
		text-align: center;
		margin-bottom: 24px;
	& > .avatar {
		  margin: 0 auto;
		  width: 104px;
		  height: 104px;
		  margin-bottom: 20px;
		  border-radius: 50%;
		  overflow: hidden;
	img {
		height: 100%;
		width: 100%;
	}
	}
	.mask {
		border-radius: 50%;
		position: absolute;
		margin-top: -104px;
		width: 104px;
		height: 104px;
		background: rgba(101, 101, 101, 0.6);
		color: #ffffff;
		opacity: 0;
		font-size: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.mask-notImg {
		border-radius: 50%;
		position: absolute;
		margin-top: -24px;
		width: 104px;
		height: 104px;
		background: rgba(101, 101, 101, 0.6);
		color: #ffffff;
		opacity: 0;
		font-size: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.avatar a:hover .mask {
		opacity: 1;
	}
	.avatar a:hover .mask-notImg {
		opacity: 1;
	}
	.username {
		font-size: 20px;
		line-height: 28px;
		font-weight: 500;
		margin-bottom: 4px;
	}
	}

	.account-center-detail {
	p {
		margin-bottom: 8px;
		padding-left: 26px;
		position: relative;
	}
	i {
		position: absolute;
		height: 14px;
		width: 14px;
		left: 0;
		top: 4px;
		background: url(https://gw.alipayobjects.com/zos/rmsportal/pBjWzVAHnOOtAUvZmZfy.svg);
	}
	.title {
		background-position: 0 0;
	}
	.group {
		background-position: 0 -22px;
	}
	.address {
		background-position: 0 -44px;
	}
	}
	.teamTitle {
		font-weight: 500;
		margin-bottom: 12px;
	}
	.account-center-team {
	.members {
	a {
		display: block;
		margin: 12px 0;
		line-height: 24px;
		height: 24px;
	.member {
		font-size: 14px;
		line-height: 24px;
		max-width: 100px;
		vertical-align: top;
		margin-left: 12px;
		transition: all 0.3s;
		display: inline-block;
	}
	}
	}
	}
</style>
