<template>
	<div>
		<el-form label-width="100px" v-loading="loading">
			<el-form-item label="轮播图">
				<div style="display: flex;flex-direction: column;">
					<div style="font-size: 12px;color: #666;">尺寸1000*450</div>
					<div style="display: flex;align-items: center;">
						<el-upload v-model:file-list="LunBoFileList" :action="upfileurl" :headers="headerObj"
							list-type="picture-card" :on-remove="LunBoHandleRemove">
							<el-icon>
								<Plus />
							</el-icon>
						</el-upload>
						<el-button style="margin-left: 12px; height: 60px;" type="primary"
							@click="LunBoSave()">保存</el-button>
					</div>
					<el-input v-model="LunBoUrl" type="textarea" />
				</div>
			</el-form-item>
			<div
				style="border-top: 1px solid #e9e9e9;border-bottom: 1px solid #e9e9e9;padding: 20px 0px;text-align: center;">
				<span v-for="(item,index) in AllConfigs" :key="index">
					<el-form-item :label="item.label" v-if="item.label!='轮播链接'">
						<span v-if="item.label=='客服电话'||item.label=='客服在线时间'">
							<el-input v-model="AllConfigs[index].value" style="width: 300px;" />
						</span>
						<span v-if="item.label=='广告图片'">
							<el-upload v-model:file-list="GuangGaoFileList" limit="3" :action="upfileurl" :headers="headerObj"
								list-type="picture-card">
								<el-icon>
									<Plus />
								</el-icon>
							</el-upload>
						</span>
						<span v-if="item.label=='广告链接'">
							<el-input v-model="AllConfigs[index].value" type="textarea" rows="3"
								style="width: 500px;" />
						</span>

					</el-form-item>
				</span>

				<el-button style="margin-left: 12px; width: 120px; height: 40px;" type="primary"
					@click="ConfigSave()">保存</el-button>
			</div>

		</el-form>
	</div>
</template>

<script setup>
	import {
		onBeforeUnmount,
		ref,
		shallowRef,
		onMounted
	} from 'vue'
	import {
		ElMessage
	} from 'element-plus'
	import {
		UpFileUrl,
		WebMngrSaveLunBo,
		GetAllConfigs,
		SaveWebConfig
	} from '@/api/api.js'
	let loading = ref(false)
	let LunBoFileList = ref([]);
	let LunBoUrl = ref('');
	let GuangGaoFileList = ref([]);
	let upfileurl = UpFileUrl()
	let headerObj = {
		Authorization: 'Bearer ' + sessionStorage.getItem("token")
	}

	let BaseUrl = ref(import.meta.env.VITE_APP_FILE)
	const LunBoUpLoadSuccess = (res) => {
		logo.value = BaseUrl.value + res.data
		Info.value.cover = res.data
	}
	const LunBoHandleRemove = (uploadFile, uploadFiles) => {
		console.log(uploadFile, uploadFiles)
	}

	const LunBoSave = () => {
		console.log(LunBoFileList.value);
		let urls = []
		LunBoFileList.value.forEach((v, i) => {
			if (v.response != undefined) {
				urls.push(v.response.data)
			} else {
				urls.push(v.org_url)
			}

		})
		if (!Array.isArray(LunBoUrl.value)) {
			LunBoUrl.value = toArray(LunBoUrl.value)
		}
		loading.value = true
		WebMngrSaveLunBo({
			urls: urls,
			links:LunBoUrl.value
		}).then(res => {

			loading.value = false
			if (res.status) {
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
				GetConfigFunc()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	let AllConfigs = ref([]);
	const GetConfigFunc = () => {
		loading.value = true
		GetAllConfigs({
			configArray: ['首页轮播', '轮播链接', '客服电话', '客服在线时间', '广告图片', '广告链接']
		}).then(res => {
			AllConfigs.value = []
			loading.value = false
			LunBoFileList.value = []
			GuangGaoFileList.value = []
			if (res.status) {
				res.data.forEach((v, i) => {
					if (v.label == '首页轮播') {
						v.value.forEach((v2, i2) => {
							LunBoFileList.value.push({
								url: BaseUrl.value + v2,
								org_url: v2
							})
						})
						

					} else {
						if (v.label == '轮播链接') {
						 LunBoUrl.value=v.value
						}
						if (v.label == '广告图片') {
							v.value.forEach((v2, i2) => {
								GuangGaoFileList.value.push({
									url: BaseUrl.value + v2,
									org_url: v2
								})
							})

						}
						AllConfigs.value.push(v)
					}

				})
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const ConfigSave = () => {
		let urls = []
		GuangGaoFileList.value.forEach((v, i) => {
			if (v.response != undefined) {
				urls.push(v.response.data)
			} else {
				urls.push(v.org_url)
			}

		})
		AllConfigs.value.forEach((v, i) => {
			if (v.label == '广告图片') {
				AllConfigs.value[i].value = urls
			}
			if (v.label == '广告链接') {
				if (!Array.isArray(v.value)) {
					AllConfigs.value[i].value = toArray(v.value)
				}
			}


		})
		loading.value = true
		SaveWebConfig({
			configInfo: AllConfigs.value
		}).then(res => {
			loading.value = false
			if (res.status) {
				ElMessage({
					message: '保存成功',
					type: 'success',
				})
				GetConfigFunc()
			} else {
				ElMessage.error(res.msg)
			}
		})
	}
	const toArray = (str) => { //字符串转数组
		if (!str) return
		str = str.replace(/，/g, ',')
		if (str.endsWith(',')) {
			// 如果以逗号结尾，则使用slice方法去掉最后一个字符
			str = str.slice(0, -1);
		}
		return str.split(",")
	}
	onMounted(() => {
		GetConfigFunc()
	})
</script>

<style>
</style>