<template>
	<div>
		<el-card :body-style="cardBodyStyle">
			<el-button type="success" @click="handleSave">保存</el-button>
		</el-card>

		<el-card :body-style="cardBodyStyle">
			<el-row>
				<el-col :span="12">
					<el-card :body-style="cardBodyStyle">
						<el-form :model="form" label-width="80px" label-position="right">
							<el-form-item label="主键" v-if="false">
								<el-input v-model="form.id"></el-input>
							</el-form-item>
							<el-form-item label="公司名称">
								<el-input v-model="form.name" style="width: 400px"></el-input>
							</el-form-item>
							<el-form-item label="电话">
								<el-input v-model="form.tel" style="width: 400px"></el-input>
							</el-form-item>
							<el-form-item label="手机">
								<el-input v-model="form.phone" style="width: 400px"></el-input>
							</el-form-item>
							<el-form-item label="邮箱">
								<el-input v-model="form.email" style="width: 400px"></el-input>
							</el-form-item>
							<el-form-item label="网址">
								<el-input v-model="form.website" style="width: 400px"></el-input>
							</el-form-item>
							<el-form-item label="地址">
								<el-input v-model="form.address" style="width: 400px"></el-input>
							</el-form-item>
							<el-form-item label="简介">
								<el-input v-model="form.introduction" :rows="5" type="textarea"
									style="width: 400px"></el-input>
							</el-form-item>
						</el-form>
					</el-card>
				</el-col>
				<el-col :span="12">
					<el-card :body-style="cardBodyStyle">
						<el-text class="mx-1" size="large">首页图片</el-text>
						<el-upload class="avatar-uploader" :action="uploadUrl" :data="uploadData"
							v-model:file-list="fileList" list-type="picture-card" :on-success="handleUploadSuccess"
							:on-remove="handleUploadRemove" :on-preview="handlePictureCardPreview"  :limit="1">
							<el-icon>
								<Plus />
							</el-icon>
						</el-upload> 
						<el-dialog v-model="dialogVisible">
							  <img w-full :src="previewUrl" alt="Preview Image" />  
					<!-- 		<el-image style="width: 100px; height: 100px" :src="previewUrl" :zoom-rate="1.2"
								:max-scale="7" :min-scale="0.2" :preview-src-list="previewList" :initial-index="4"
								fit="cover" :crossorigin="null"/> --> 
						</el-dialog>
						
						
						<el-text class="mx-1" size="large">简介图片</el-text>
						<el-upload class="avatar-uploader"
							:action="uploadUrlIntroduction" :data="uploadDataIntroduction"
							v-model:file-list="fileListIntroduction" list-type="picture-card" :on-success="handleUploadSuccessIntroduction"
							:on-remove="handleUploadRemoveIntroduction" :on-preview="handlePictureCardPreviewIntroduction"  :limit="1">
							<el-icon >
								<Plus />
							</el-icon>
						</el-upload>
						<el-dialog v-model="dialogVisibleIntroduction">
								  <img w-full :src="previewUrlIntroduction" alt="Preview Image" />  
						<!-- 		<el-image style="width: 100px; height: 100px" :src="previewUrl" :zoom-rate="1.2"
									:max-scale="7" :min-scale="0.2" :preview-src-list="previewList" :initial-index="4"
									fit="cover" :crossorigin="null"/> --> 
							</el-dialog>
					</el-card>
				</el-col>
			</el-row>
		</el-card>


	</div>
</template>

<script setup>
	import {
		ref,
		reactive,
		onBeforeMount,
		getCurrentInstance
	} from 'vue'
	const {
		proxy
	} = getCurrentInstance()

	import style from '@/tools/style'
	const cardBodyStyle = ref(style.card)
	const inputStyle = ref(style.input)

	onBeforeMount(() => {
		getData()
		getImage()
		getImageIntroduction()
	})

	const form = ref({
		id: '',
		name: '',
		tel: '',
		phone: '',
		email: '',
		website: '',
		address: '',
		introduction: '',
		memo: '',
	})

	const getData = () => {
		var url = 'portal/Info/query'
		var param = {}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				console.log(response.data.data)
				if (response.data.data) {
					form.value = response.data.data
				} else {
					form.value = {
						id: '',
						name: '',
						tel: '',
						phone: '',
						email: '',
						website: '',
						address: '',
						introduction: '',
						memo: '',
					}
				}

			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}



	const handleSave = () => {
		var url = 'portal/Info/save'
		var param = {
			json: JSON.stringify(form.value),
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == 0) {
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
				getData()
			} else {
				ElMessage({
					message: '操作失败' + response.data.msg,
					type: 'error'
				})
			}
		})
	}



    //图片上传 
	const uploadUrl = ref(import.meta.env.VITE_BASE_API + '/framework/Common/uploadFile')
	const uploadData = ref({
		fId: 'portal-main',
		userId: localStorage.getItem('userId'),
		belongId: localStorage.getItem('belongId')
	})
	const fileList = ref([])
	const handleUploadSuccess = (
		response,
		uploadFile
	) => {
		
		getImage()
	} 
	const handleUploadRemove = (
		uploadFile, uploadFiles
	) => {
		var url = 'framework/Common/removeFile'
		var param = {
			id: uploadFile.id
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				ElMessage.success('操作成功！')
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}
	const dialogVisible = ref(false)
	const previewUrl = ref('')

	const handlePictureCardPreview = (uploadFile) => {
		previewUrl.value = uploadFile.url
		dialogVisible.value = true
	}
	const previewList = ref([])
	const getImage = () => {
		var url = 'framework/Common/queryFile'
		var param = {
			fId: 'portal-main'
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				fileList.value = []
				previewList.value = []
				for (var item of response.data.data) {
					fileList.value.push({
						id: item.id,
						url: import.meta.env.VITE_IMAGE_API + '/' +
							'portal-main' + '/' + item.id +
							'.' + item.fileType
					})
					previewList.value.push(
						import.meta.env.VITE_IMAGE_API + '/' +
						'portal-main' + '/' + item.id +
						'.' + item.fileType
					)
				}
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	} 
	 //图片上传 
	
	
	
	
	
	
	//图片上传 
	const uploadUrlIntroduction = ref(import.meta.env.VITE_BASE_API + '/framework/Common/uploadFile')
	const uploadDataIntroduction = ref({
		fId: 'portal-introduction',
		userId: localStorage.getItem('userId'),
		belongId: localStorage.getItem('belongId')
	})
	const fileListIntroduction = ref([])
	const handleUploadSuccessIntroduction = (
		response,
		uploadFile
	) => {
		getImageIntroduction()
	} 
	const handleUploadRemoveIntroduction = (
		uploadFile, uploadFiles
	) => {
		var url = 'framework/Common/removeFile'
		var param = {
			id: uploadFile.id
		}
		proxy.$axios.post(url, param).then(response => {
			if (response.data.code == '0') {
				ElMessage.success('操作成功！')
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	}
	const dialogVisibleIntroduction = ref(false)
	const previewUrlIntroduction = ref('')
	
	const handlePictureCardPreviewIntroduction = (uploadFile) => {
		previewUrlIntroduction.value = uploadFile.url
		dialogVisibleIntroduction.value = true
	}
	const previewListIntroduction = ref([])
	const getImageIntroduction = () => {
		var url = 'framework/Common/queryFile'
		var param = {
			fId: 'portal-introduction'
		}
		proxy.$axios.get(url, param).then(response => {
			if (response.data.code == '0') {
				for (var item of response.data.data) {
					fileListIntroduction.value = []
					previewListIntroduction.value = []
					
					fileListIntroduction.value.push({
						id: item.id,
						url: import.meta.env.VITE_IMAGE_API + '/' +
							'portal-introduction' + '/' + item.id +
							'.' + item.fileType
					})
					previewListIntroduction.value.push(
						import.meta.env.VITE_IMAGE_API + '/' +
						'portal-introduction' + '/' + item.id +
						'.' + item.fileType
					)
				}
			} else {
				ElMessage.error('操作失败！' + response.data.msg)
			}
		})
	} 
	 //图片上传 
	
	
</script>

<style>
	.avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}


	.avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	.avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	.el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
</style>