<template>
	<a-card>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-row :gutter="16">
				<a-divider orientation="left" style="margin-top: -5px">首页信息</a-divider>
				<a-col :span="6">
					<a-form-item label="主页标语图片：" :name="['indexInfo', 'sloganUrl']">
						<upload ref="uploadRef" :upload-mode="'pic'" :upload-number="1"
								@uploadDone="uploadDone"/>
					</a-form-item>
				</a-col>

				<a-col :span="14">
					<a-form-item label="主页描述：" :name="['indexInfo', 'remark']">
						<a-textarea v-model:value="formData.indexInfo.remark" placeholder="请输入主页描述"
									:auto-size="{ minRows: 2, maxRows: 3 }"/>
					</a-form-item>
				</a-col>

				<a-col :span="24">
					<a-form-item label="主页标语：" :auto-link="false">
						<template v-for="(tag, index) in state.tags" :key="'tag' + index">
							<a-tag closable @close="handleClose(tag)">
								{{ tag }}
							</a-tag>
						</template>
						<a-input
							v-if="state.inputVisible"
							ref="inputRef"
							v-model:value="state.inputValue"
							type="text"
							size="small"
							:style="{ width: '160px', height: '30px' }"
							@blur="handleInputConfirm"
							@keyup.enter="handleInputConfirm"
						/>
						<a-tag v-else style="background: #fff; border-style: dashed" @click="showInput">
							<plus-outlined/>
							添加服务
						</a-tag>
					</a-form-item>
				</a-col>

				<a-divider orientation="left" style="margin-top: -5px">硬件产品</a-divider>
				<a-col :span="12">
					<a-form-item label="硬件产品描述：" :name="['productInfo', 'remark']">
						<a-textarea v-model:value="formData.productInfo.remark" placeholder="请输入硬件产品描述"
									:auto-size="{ minRows: 2, maxRows: 3 }"/>
					</a-form-item>
				</a-col>

				<a-divider orientation="left" style="margin-top: -5px">软件服务</a-divider>
				<a-col :span="12">
					<a-form-item label="软件服务描述：" :name="['softwareInfo', 'remark']">
						<a-textarea v-model:value="formData.softwareInfo.remark" placeholder="请输入软件服务描述"
									:auto-size="{ minRows: 2, maxRows: 3 }"/>
					</a-form-item>
				</a-col>

				<a-divider orientation="left" style="margin-top: -5px">成功案例</a-divider>
				<a-col :span="12">
					<a-form-item label="成功案例描述：" :name="['successInfo', 'remark']">
						<a-textarea v-model:value="formData.successInfo.remark" placeholder="请输入成功案例描述"
									:auto-size="{ minRows: 2, maxRows: 3 }"/>
					</a-form-item>
				</a-col>

				<a-divider orientation="left" style="margin-top: -5px">关于我们</a-divider>
				<a-col :span="11">
					<a-form-item label="关于我们描述：" :name="['aboutUsInfo', 'remark']">
						<a-textarea v-model:value="formData.aboutUsInfo.remark" placeholder="请输入关于我们描述"
									:auto-size="{ minRows: 2, maxRows: 3 }"/>
					</a-form-item>
				</a-col>
				<a-col :span="12">
					<a-button @click="addTab">新增数量信息</a-button>
					<a-tabs v-model:activeKey="activeIndex" hide-add type="editable-card"
							@edit="deleteTab" style="margin-top: 15px">
						<a-tab-pane v-for="(item, index) in formData.aboutUsInfo.items"
									:key="'item' + (index + 1)" :tab="item.title" closable>
							<a-row>
								<a-col :span="11">
									<a-form-item label="名称：" :name="['aboutUsInfo', 'items', index, 'title']">
										<a-input v-model:value="item.title" autocomplete="off"
												 show-count :maxlength="20" placeholder="请输入名称"/>
									</a-form-item>
								</a-col>
								<a-col :span="2"></a-col>
								<a-col :span="11">
									<a-form-item label="数量：" :name="['aboutUsInfo', 'items', index, 'num']">
										<a-input v-model:value="item.num" autocomplete="off"
												 show-count :maxlength="10" placeholder="请输入数量"/>
									</a-form-item>
								</a-col>
							</a-row>
						</a-tab-pane>
					</a-tabs>
				</a-col>

				<a-divider orientation="left" style="margin-top: -5px">联系我们</a-divider>
				<a-col :span="11">
					<a-form-item label="公司地址：" :name="['contactInfo', 'address']">
						<a-textarea v-model:value="formData.contactInfo.address" placeholder="请输入公司地址"
									:auto-size="{ minRows: 2, maxRows: 3 }"/>
					</a-form-item>
				</a-col>
				<a-col :span="11">
					<a-form-item label="工作时间：" :name="['contactInfo', 'workInfo']">
						<a-textarea v-model:value="formData.contactInfo.workInfo" placeholder="请输入工作时间"
									:auto-size="{ minRows: 2, maxRows: 3 }"/>
					</a-form-item>
				</a-col>

				<a-col :span="11">
					<a-form-item label="联系电话：" :name="['contactInfo', 'phone']">
						<a-textarea v-model:value="formData.contactInfo.phone" placeholder="请输入联系电话"
									:auto-size="{ minRows: 2, maxRows: 3 }"/>
					</a-form-item>
				</a-col>
				<a-col :span="11">
					<a-form-item label="电子邮箱：" :name="['contactInfo', 'email']">
						<a-textarea v-model:value="formData.contactInfo.email" placeholder="请输入电子邮箱"
									:auto-size="{ minRows: 2, maxRows: 3 }"/>
					</a-form-item>
				</a-col>
			</a-row>
		</a-form>
		<a-button type="primary" v-if="hasPerm('website:base:save')"
				  @click="onSubmit" :loading="submitLoading">保存
		</a-button>
	</a-card>
</template>

<script setup name="websiteBase">

import {cloneDeep} from 'lodash-es'
import {required} from '@/utils/formRules'
import baseApi from '@/api/website/baseApi'
import Upload from "@/components/XnUpload/index.vue"

// 抽屉状态
const formRef = ref()
const uploadRef = ref()
// 表单数据
const formData = ref({
	indexInfo: {},
	productInfo: {},
	softwareInfo: {},
	successInfo: {},
	aboutUsInfo: {},
	contactInfo: {},
})
const submitLoading = ref(false)
// 标签相关
const inputRef = ref()
const state = ref({
	tags: [],
	inputVisible: false,
	inputValue: '',
})
const handleClose = (removedTag) => {
	const tags = state.value.tags.filter(tag => tag !== removedTag)
	state.value.tags = tags
	formData.value.indexInfo.services = [...tags]
}
const showInput = () => {
	state.value.inputVisible = true
	nextTick(() => {
		inputRef.value.focus()
	})
}
const handleInputConfirm = () => {
	const inputValue = state.value.inputValue
	let tags = state.value.tags
	if (inputValue && tags.indexOf(inputValue) === -1) {
		tags = [...tags, inputValue]
	}
	state.value = {
		tags,
		inputVisible: false,
		inputValue: '',
	}
	formData.value.indexInfo.services = [...tags]
};
// tab相关
const activeIndex = ref('item1')
// 添加tab页
const addTab = () => {
	let items = formData.value.aboutUsInfo.items
	let name = '名称' + (items.length + 1)

	let singleNode = {
		title: name,
		num: ''
	}
	items.push(singleNode)
	formData.value.aboutUsInfo.items = [...items]
	activeIndex.value = 'item' + items.length
}

// 删除tab页
const deleteTab = (targetName) => {
	let removeIndex
	let items = formData.value.aboutUsInfo.items
	items.forEach((node, index) => {
		if ('item' + (index + 1) === targetName) {
			removeIndex = index
		}
	})
	// 移除数据
	items.splice(removeIndex, 1)
	// 设置tab选中
	activeIndex.value = "item1"
}
// 默认要校验的
const formRules = {}
// 验证并提交数据
const onSubmit = () => {
	formRef.value.validate().then(() => {
		submitLoading.value = true
		const formDataParam = cloneDeep(formData.value)

		baseApi.saveData(formDataParam)
			.then(() => {
				// detail()
			})
			.finally(() => {
				submitLoading.value = false
			})
	})
}
const detail = () => {
	baseApi.detail().then(record => {
		let recordData = cloneDeep(record)
		let baseData = {
			indexInfo: {
				remark: '',
				sloganUrl: '',
				services: []
			},
			productInfo: {
				remark: '',
			},
			softwareInfo: {
				remark: '',
			},
			successInfo: {
				remark: '',
			},
			aboutUsInfo: {
				remark: '',
				items: []
			},
			contactInfo: {
				address: '',
				phone: '',
				email: '',
				workInfo: '',
			},
		}
		formData.value = Object.assign(baseData, recordData)
		console.info("formData.value", formData.value)
		handleInfo()

	})
}
detail()
// 处理额外信息
const handleInfo = () => {
	// 主页服务
	let indexInfo = formData.value.indexInfo
	let services = indexInfo.services
	if (services && services.length > 0) {
		state.value = {
			tags: services,
			inputVisible: false,
			inputValue: '',
		}
	}
	// 图片
	let sloganUrl = []
	if (indexInfo.sloganUrl) {
		sloganUrl.push({url: indexInfo.sloganUrl})
	}
	nextTick(() => {
		uploadRef.value.setFileList(sloganUrl)
	})
}

const uploadDone = (data) => {
	if (data.length > 0) {
		formData.value.indexInfo.sloganUrl = data[0].url
	} else {
		formData.value.indexInfo.sloganUrl = null
	}
}
</script>

<style scoped>

</style>
