<template>
	<div :class="['drawer-container', { 'drawer-container-100': isFull }]">
		<el-drawer v-model="model" :modal="false" size="100%" :lock-scroll="false" modal-class="modal-class">
			<template #header>
				<div class="drawer-header">
					<div class="title">{{ readOnly ? '资讯信息浏览' : type == 1 ? '资讯信息编辑' : '资讯信息创建' }}</div>
					<div class="btn" v-if="type == 1">
						<el-button type="text" @click="handleEditStatus(!readOnly)">{{ readOnly ? '编辑' : '浏览'
						}}</el-button>
						<el-button type="text" v-if="data.status == 2" @click="doNewsPublishFn(data, 1)">撤稿</el-button>
						<el-button type="text" style="color: #ff1818" @click="doDeleteNewsFn(data)">删除</el-button>
						<el-button type="text" @click="clickFull">
							<el-icon v-if="!isFull">
								<FullScreen />
							</el-icon>
							<el-icon v-else>
								<Switch />
							</el-icon>
						</el-button>
					</div>
				</div>
			</template>
			<el-form class="form" :rules="rules" ref="ruleFormRef" :model="form" label-width="95">
				<div class="center">
					<div class="step_bk">
						<div v-if="readOnly || type === 1">
							<strong>报道时间：</strong>
							<span style="color: #0888d7">{{ form.inputDate && formatDate(new Date(form.inputDate),
								'YYYY年mm月dd日 HH:MM') }}</span>
						</div>
						<el-form-item label="标题" style="margin-top: 20px" prop="title" label-width="52">
							<div style="display: flex; width: 800px">
								<el-input placeholder="输入文章标题" v-model="form.title" :max="titleTextMax"
									:maxlength="titleTextMax" @input="inputChange" :disabled="readOnly"></el-input>
								<text style="margin-left: 10px; color: #b3b3b3"> {{ titleTextNum }}/{{ titleTextMax
								}}</text>
							</div>
						</el-form-item>

						<el-form-item prop="summary" label="摘要" label-width="52">
							<el-input v-model="form.summary" show-word-limit maxlength="300" style="margin-top: 10px"
								:rows="5" type="textarea" placeholder="请输入摘要内容" max="300" :disabled="readOnly" />
						</el-form-item>
					</div>

					<div class="step_bk">
						<el-form-item label="媒体来源：" prop="tagSourceSelect">
							<el-select :disabled="readOnly" v-model="form.tagSourceSelect" filterable
								placeholder="选择媒体来源" size="large" style="width: 240px">
								<el-option v-for="item in tagSourceList" :key="item.id" :label="item.name"
									:value="item.id" />
							</el-select>
						</el-form-item>

						<el-form-item label="概念标签：" prop="tagDiySelect">
							<el-select :disabled="readOnly" v-model="form.tagDiySelect" filterable multiple
								placeholder="选择概念标签" size="large" style="width: 240px">
								<el-option v-for="item in tagDiyList" :key="item.id" :label="item.name"
									:value="item.id" />
							</el-select>
						</el-form-item>

						<el-form-item label="行业分类：" prop="industrySelect">
							<el-select :disabled="readOnly" v-model="form.industrySelect" filterable multiple
								placeholder="选择行业分类" size="large" style="width: 240px">
								<el-option v-for="item in industryList" :key="item.id" :label="item.name"
									:value="item.id" />
							</el-select>
						</el-form-item>
					</div>

					<div class="step_bk">
						<editorBox :ueditorData="form.content" @changeMsg="changeMsg" :readOnly="readOnly"></editorBox>
					</div>
				</div>
			</el-form>

			<template #footer v-if="!readOnly">
				<div style="padding: 10px">
					<el-button type="primary" @click="submit(0)">发布</el-button>
				</div>
			</template>
		</el-drawer>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { ElMessage, ElStep, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import editorBox from '/@/components/editorBox.vue';
import uploadImage from '/@/components/upload/image.vue';
import { getTagSource, getTagConcept, getColumn, doNewsSave, getNewsInfoSave, getNewsInfoDetail, getColumnVIP, getIndustrySearch } from '/@/api/api';
import { FullScreen, Switch } from '@element-plus/icons-vue';
import { formatDate } from '/@/utils/formatTime';

const emit = defineEmits(['doNewsPublishFn', 'handleEditStatus', 'doDeleteNewsFn', 'getData']);
const props = defineProps({
	data: {
		type: Object,
		default: () => { },
	},
	readOnly: {
		type: Boolean,
		default: false,
	},
	type: {
		type: Number,
		default: 0,
	},
});
const model = defineModel();
const loading = ref(false);

const route = useRoute();
const router = useRouter();
const detailContent = ref('');

const rules = reactive({
	title: [{ required: true, message: '请填写文章标题', trigger: 'blur' }],
	tagSourceSelect: [{ required: true, message: '请选择来源标签', trigger: 'blur' }],
	columnsVip: [{ required: true, message: '请选择VIP栏目', trigger: 'blur' }],
	// tagDiySelect: [{ required: true, message: '请选择标签类型', trigger: 'blur' }],
});
const ruleFormRef = ref();
const form = ref({
	type: 0,
	column: {
		earlyKnow: {
			show: true,
		},
		showEverything: true,
		everything: {
			type: null,
		},
	},

	showEverything: true,
});
/********************step1 start *************************/
// 文章标题已经输入的字数
const titleTextNum = ref(0);
// 文章标题最大字数限制
const titleTextMax = ref(50);

function inputChange(text) {
	titleTextNum.value = text.length;
}
/********************step1 end *************************/

/********************step2 start *************************/
function changeMsg(value) {
	form.value.content = value.html;
	form.value.contentText = value.text;
}
/********************step2 end *************************/

/********************step3 start *************************/
// 用户选择的栏目列表
// 栏目选择框数组
// const columnNumList = ref([{}, {}]);
// function addColumnNum() {
// 	columnNumList.value.push({});
// }
// // 删除新添加的栏目
// function delColunmNum(index: number) {
// 	columnNumList.value.splice(index, 1);
// }

// 栏目列表（接口获取的待选择列表）
// const columnList1 = ref([]);
// const columnList2 = ref([]);
const columnListVIp = ref([]);

// 获取VIP栏目
async function getColumnVIPFn() {
	let { code, data } = await getColumnVIP({
		page: 1,
		size: 100000,
	});
	if (code == 200) {
		columnListVIp.value = data;
	}
}

// // 获取栏目
// async function getColumnFn(type) {
// 	let { code, data } = await getColumn({
// 		page: 1,
// 		size: 100000,
// 		type,
// 	});
// 	if (code == 200) {
// 		if (type == 0) {
// 			columnList1.value = data;
// 		} else {
// 			columnList2.value = data;
// 		}
// 	}
// }
// 用户选择的来源标签（单选）
// const tagSourceSelect = ref();
// 用户选择的标签类型（多选）
// const tagDiySelect = ref([]);

// 自定义标签列表
const tagDiyList = ref([]);
async function getTagDiyFn() {
	let { code, data } = await getTagConcept();
	if (code == 200) {
		tagDiyList.value = data.map((item: any) => {
			return {
				name: `${item.parentName ? item.parentName + '-' : ''}${item.name ? item.name : ''}`,
				id: item.id,
			};
		});
	}
}

// 来源标签列表
const tagSourceList = ref([]);
async function getTagSourceFn() {
	let { code, data } = await getTagSource({
		page: 1,
		size: 100000,
	});
	if (code == 200) {
		tagSourceList.value = data;
	}
}
// 行业分类列表
const industryList = ref([]);
async function getTndustryFn() {
	let { code, data } = await getIndustrySearch({
		page: 1,
		size: 100000,
	});
	if (code == 200) {
		industryList.value = data.map((item: any) => {
			return {
				name: `${item.primaryName || ''}${item.secondaryName ? '-' + item.secondaryName : ''}`,
				id: item.id,
			};
		});
	}
}
//展示方式列表
const showTypeList = ref([
	{
		name: '无特殊样式',
		value: null,
	},
	{
		name: '封面banner',
		value: 0,
	},
	{
		name: '标题banner',
		value: 1,
	},
]);
/********************step3 end *************************/

const canSubmit = ref(false);
watch(
	() => form.value,
	(val) => {
		// console.log('🚀 ~ val:', val);
		if (form.value.title && form.value.tagSourceSelect && form.value.columnsVip) {
			canSubmit.value = true;
		}
	},
	{
		immediate: true,
		deep: true,
	}
);

const pictureTemp = ref([]);
/**
 * 提交创建
 * @param type  0：发布 1：保存
 */
async function submit(type) {
	// form.value.picture = pictureTemp.value[0]?.url;

	if (!form.value.title) {
		ElMessage.error('请输入标题');
		tabIndex.value = 0;
		await ruleFormRef.value.validate();
		return;
	}

	if (!form.value.tagSourceSelect) {
		ElMessage.error('请选择来源标签');
		tabIndex.value = 2;
		await ruleFormRef.value.validate();
		return;
	}

	if (!form.value.content) {
		ElMessage.error('请输入内容');
		await ruleFormRef.value.validate();
		return;
	}

	// if (!form.value.columnsVip) {
	// 	ElMessage.error('请选择VIP栏目');
	// 	tabIndex.value = 2;
	// 	await ruleFormRef.value.validate();
	// 	return;
	// }

	// if (!form.value.industrySelect) {
	// 	ElMessage.error('请选择分行业类');
	// 	tabIndex.value = 2;
	// 	await ruleFormRef.value.validate();
	// 	return;
	// }

	// if (form.value.column.earlyKnow.show && !form.value.summary) {
	// 	ElMessage.success('选择展示在早知道栏目需要填写摘要');
	// 	return;
	// }

	console.log('🚀 ~ submit ~ form.value:', form.value);
	var tags = [];
	if (form.value.tagSourceSelect) {
		tagSourceList.value.forEach((item, index) => {
			if (item.id == form.value.tagSourceSelect) {
				tags.push(item);
			}
		});
	}
	if (form.value.tagDiySelect) {
		form.value.tagDiySelect.forEach((item, index) => {
			tagDiyList.value.forEach((childItem, childIndex) => {
				if (item == childItem.id) {
					tags.push(childItem);
				}
			});
		});
	}
	let vip = {
		id: form.value.columnsVipChild ? form.value.columnsVipChild : form.value.columnsVip,
		type: form.value.showTypeVip,
	};

	// if (form.value.showTypeVip == -1) {
	// 	form.value.showTypeVip = null;
	// }

	// if (form.value.column?.everything?.type == -1) {
	// 	form.value.column.everything.type = null;
	// }

	let params = {
		// ...form.value,
		id: form.value.id || null,
		newsId: form.value.newsId || null,
		title: form.value.title,
		summary: form.value.summary,
		content: form.value.content,
		// column: {
		// 	vip: vip, // vip栏目
		// 	earlyKnow: {
		// 		show: form.value.column.earlyKnow.show,
		// 		type: form.value.column.earlyKnow.type,
		// 	},
		// 	showEverything: form.value.column.showEverything,
		// 	everything: {
		// 		type: form.value.column.everything.type,
		// 	},
		// },

		tag: {
			source: form.value?.tagSourceSelect || null,
			// field: form.value.tagDiySelect && form.value.tagDiySelect.length > 0 ? form.value.tagDiySelect[0] : null,
			fieldArr: form.value.tagDiySelect,
		},
		industries: form.value.industrySelect,
	};

	if (type == 0) {
		ElMessageBox.confirm('已同步至【资讯精选】，请确认审核无误后可发布。', '提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'warning',
		})
			.then(async () => {
				// 发布
				let { code, data } = await getNewsInfoSave(params);
				if (code == 200) {
					ElMessage.success('操作成功');
					goBack();
				}
			})
			.catch(() => { });
	}
}

const tabIndex = ref(0);

function stepChange(index: number) {
	tabIndex.value = index;
}

function goBack() {
	model.value = false;
	emit('getData');
}

const infoData = ref({});
// 获取新闻详情
async function getInfo() {
	let { code, data } = await getNewsInfoDetail({ id: props.data.id });
	if (code == 200) {
		infoData.value = data;
		form.value = data;

		// 如果返回的栏目为空，填上默认字段
		if (!form.value.column) {
			form.value.column = {
				vip: null,
				everything: null,
			};
		}
		// 如果返回的栏目为空（早知道），填上默认字段
		if (!form.value.column?.earlyKnow) {
			form.value.column.earlyKnow = {
				show: false,
			};
		}
		form.value.columnsVip = data.column?.vip?.id;
		// 媒体来源
		form.value.tagSourceSelect = data.tag?.source?.id;
		// 付费类型，目前这个字段灭用
		form.value.type = 0;
		// 初始化上传的封面
		if (form.value.picture) {
			pictureTemp.value = [
				{
					url: form.value.picture,
				},
			];
		}
		// 初始化标题字数
		titleTextNum.value = form.value.title.length;
		// VIP展示方式
		form.value.showTypeVip = data.column.vip?.type;
		// 初始化概念标签（多选）
		form.value.tagDiySelect = [];
		data.tag?.fieldArr?.forEach((item) => {
			form.value.tagDiySelect.push(item.id);
		});
		// 初始化行业分类（多选）
		form.value.industrySelect = [];
		data?.industry?.forEach((item) => {
			form.value.industrySelect.push(item.id);
		});
		// 如果频道标签有子标签
		if (data.column?.vip?.child) {
			vipChange(data.column.vip.id);
			form.value.columnsVipChild = data.column.vip.child.id;
		}
		// 初始化天下事字段
		if (!form.value.column.everything) {
			form.value.column.everything = {
				type: null,
			};
		}

		detailContent.value = data.content;
		// 判断是否只读状态，显示标红内容
		if (props.readOnly) {
			form.value.content = props.data.content;
		} else {
			form.value.content = data.content;
		}

		// if (form.value.showTypeVip == null) {
		// 	form.value.showTypeVip = -1;
		// }

		// if (form.value.column?.everything?.type == null) {
		// 	form.value.column.everything.type = -1;
		// }
	}

	// form.value.content = form.value.content.replaceAll('\n\n\n\n', '\n');

	form.value.content = form.value.content.replace(/\n{3,}/g, '\n');
}

const isShowVipChild = ref(false);
const vipChildList = ref([]);
function vipChange(val) {
	let selectItem = {};
	columnListVIp.value.forEach((item, index) => {
		if (item.id == val) {
			selectItem = item;
		}
	});

	// 如果有二级栏目
	if (selectItem.children && selectItem.children.length > 0) {
		isShowVipChild.value = true;
		vipChildList.value = selectItem.children;

		form.value.columnsVipChild = vipChildList.value[0].id;
	} else {
		isShowVipChild.value = false;
		form.value.columnsVipChild = null;
	}
}

function handleEditStatus(val) {
	// 判断是否只读状态，显示标红内容
	if (val) {
		form.value.content = props.data.content;
	} else {
		form.value.content = detailContent.value;
	}

	emit('handleEditStatus', val);
}

function doNewsPublishFn(item, status) {
	emit('doNewsPublishFn', item, status);
}

function doDeleteNewsFn(item) {
	emit('doDeleteNewsFn', item);
}

// 放大
const isFull = ref(false);
function clickFull() {
	isFull.value = !isFull.value;
}

// 页面加载时
onMounted(async () => {
	console.log('🚀 ~ file: index.vue:13 ~ onMounted ~ onMounted:');
	NextLoading.done();
	await getColumnVIPFn();

	//如果是编辑进来
	if (props.type == 1) {
		getInfo();
	}
	// 自定义标签列表
	getTagDiyFn();
	// 来源标签列表
	getTagSourceFn();
	// 栏目列表
	// getColumnFn();
	// 行业分类列表
	getTndustryFn();
});

watch(
	() => props.data,
	(newVal, oldVal) => {
		getInfo();
	}
);
</script>

<style scoped lang="scss">
.drawer-container {
	:deep(.modal-class) {
		width: calc(100% - 560px);
		inset: 0 0 0 auto !important;
		transition: all 0.3s ease-in-out;
	}
}

.drawer-container-100 {
	:deep(.modal-class) {
		width: calc(100% - 220px);
		inset: 0 0 0 auto !important;
	}
}

.step_bk {
	padding: 20px 30px;
	border-bottom: 1px solid #eee;
}

.drawer-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 20px;

	.btn {
		display: flex;
		align-items: center;
	}
}
</style>
