<template>
	<div class="writting-wrapper">
		<div class="writting-header">
			<div class="tab-box">
				<div class="tab" :class="{ tabActive: item.active }" v-for="(item, index) in tabList" :key="index">
					{{ item.name }}
				</div>
			</div>
			<div class="edit-box"></div>
			<div class="btn-box"></div>
		</div>
		<div class="writting-main">
			<div class="sider">
				<div class="sider-box1">
					<div class="header">报文主题</div>
					<div class="title-box">
						<div class="title">主题名称</div>
						<el-input
							style="width: 476px; height: 32px"
							class="title-input"
							placeholder="输入主题名称，如：大而美法案"
							v-model="writtingTitle"
						/>
					</div>
					<div class="description-box">
						<div class="title">主题描述</div>
						<el-input
							class="description-input"
							type="textarea"
							style="width: 476px"
							:rows="8"
							placeholder="输入报文主题描述，如：从科技领域方面分析大而美法案通过后对中国可能产生的影响"
							v-model="descText"
						/>
					</div>
				</div>
				<div class="sider-box2">
					<div class="header">报文模板</div>
					<div class="template-box">
						<div
							class="template"
							:class="{ tempActive: tempActiveIndex === index }"
							v-for="(temp, index) in tempList"
							:key="index"
              @click="handleClickTemp(item,index)"
						>
							<div class="header">
								<div class="title">{{ temp.title }}</div>
								<div class="icon">
									<img src="./assets/images/template-icon.png" alt="" />
								</div>
							</div>
							<div class="content">{{ temp.desc }}</div>
							<div class="active-icon" v-if="tempActiveIndex === index">
								<img src="./assets/images/active-icon.png" alt="" />
							</div>
							<div class="selected-icon" v-if="tempActiveIndex === index">
								<img src="./assets/images/selected-icon.png" alt="" />
							</div>
						</div>
					</div>
					<div class="tips">
						<div class="tips-icon">
							<img src="./assets/images/tips-icon.png" alt="" />
						</div>
						<div class="tips-text">内容由AI生成，无法确保真实准确，仅供参考</div>
					</div>
				</div>
				<div class="submit-btn">
					<div class="submit-icon">
						<img src="./assets/images/ai.png" alt="" />
					</div>
					<div class="submit-text">生成报文</div>
				</div>
			</div>
			<div class="content-box"></div>
		</div>
	</div>
</template>

<script setup>
import { ref } from "vue";

const writtingTitle = ref("");

const descText = ref("");

const tabList = ref([
	{
		name: "写报",
		active: true
	},
	{
		name: "收藏",
		active: false
	},
	{
		name: "问答",
		active: false
	}
]);

const tempList = ref([
	{
		title: "主题报",
		desc: "基于特定主题生成各维度的综合分析报告"
	},
	{
		title: "统计速报",
		desc: "基于定期更新的数据源生成各关键指标统计"
	}
]);

const tempActiveIndex = ref(0);

const handleClickTemp = (item,index) => {
  tempActiveIndex.value = index
}


</script>

<style lang="scss" scoped>
.writting-wrapper {
	width: 100%;
	height: 100%;
	background: orange;
	.writting-header {
		height: 60px;
		box-sizing: border-box;
		border-bottom: 1px solid rgba(234, 236, 238, 1);
		border-top: 1px solid rgba(234, 236, 238, 1);
		box-shadow: 0px 0px 20px 0px rgba(25, 69, 130, 0.1);
		background: rgba(255, 255, 255, 1);
		display: flex;
		.tab-box {
			display: flex;
			margin-left: 130px;
			margin-top: 13px;
			width: 260px;
			height: 46px;
			justify-content: space-between;
			.tab {
				color: rgba(95, 101, 108, 1);
				font-family: Microsoft YaHei;
				font-size: 20px;
				font-weight: 400;
				line-height: 30px;
			}
			.tabActive {
				color: rgba(5, 95, 194, 1);
				font-family: Microsoft YaHei;
				font-size: 20px;
				font-weight: 700;
				line-height: 30px;
				border-bottom: 4px solid rgba(5, 95, 194, 1);
			}
		}
	}
	.writting-main {
		display: flex;
		height: calc(100% - 60px);
		.sider {
			width: 520px;
			box-sizing: border-box;
			border-right: 1px solid rgba(234, 236, 238, 1);
			border-top: 1px solid rgba(234, 236, 238, 1);
			background: rgba(255, 255, 255, 1);
			position: relative;
			.sider-box1 {
				margin-top: 21px;
				margin-left: 22px;
				.header {
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
				}
				.title-box {
					margin-top: 15px;
					.title {
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
					}
					.title-input {
						margin-top: 15px;
					}
				}
				.description-box {
					margin-top: 24px;
					.title {
						height: 24px;
						color: rgba(95, 101, 108, 1);
						font-family: Microsoft YaHei;
						font-size: 16px;
						font-weight: 400;
						line-height: 24px;
					}
					.description-input {
						margin-top: 12px;
						height: 200px;
					}
				}
			}
			.sider-box2 {
				margin-top: 24px;
				margin-left: 22px;
				.header {
					height: 24px;
					color: rgba(59, 65, 75, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 700;
					line-height: 24px;
				}
				.template-box {
					margin-top: 19px;
					height: 120px;
					display: flex;
					gap: 16px;

					.template {
						width: 230px;
						height: 120px;
						box-sizing: border-box;
						border: 1px solid rgba(234, 236, 238, 1);
						border-radius: 4px;
						position: relative;
            cursor: pointer;
						.active-icon {
							width: 24px;
							height: 24px;
							position: absolute;
							top: 0;
							right: 0;
							z-index: 99;
							img {
								width: 100%;
								height: 100%;
							}
						}
						.selected-icon {
							width: 8px;
							height: 6px;
							position: absolute;
							top: -4px;
							right: 3px;
							z-index: 100;
							img {
								width: 8px;
								height: 6px;
							}
						}
						.header {
							display: flex;
							justify-content: space-between;
							height: 50px;
							.title {
								height: 24px;
								// color: rgba(59, 65, 75, 1);
								color: #333;
								font-family: Microsoft YaHei;
								font-size: 16px;
								font-weight: 700;
								line-height: 24px;
								margin-left: 15px;
								margin-top: 16px;
							}
							.icon {
								margin-top: 15px;
								margin-right: 16px;
								width: 30px;
								height: 30px;
								border-radius: 15px;
								background: rgba(231, 243, 255, 1);
								img {
									width: 17px;
									height: 14px;
									margin-top: 8px;
									margin-left: 7px;
								}
							}
						}
						.content {
							margin: 0 auto;
							width: 200px;
							height: 48px;
							margin-top: 10px;
							color: rgba(132, 136, 142, 1);
							font-family: Microsoft YaHei;
							font-size: 16px;
							font-weight: 400;
							line-height: 24px;
						}
					}
					.tempActive {
						border: 1px solid rgba(5, 95, 194, 1);
						background: rgba(246, 250, 255, 1);
					}
				}
				.tips {
					margin-top: 19px;
					height: 22px;
					display: flex;
					.tips-icon {
						width: 14px;
						height: 16px;
						margin-top: 3px;
						img {
							width: 100%;
							height: 100%;
						}
					}
					.tips-text {
						margin-left: 8px;
						color: rgba(132, 136, 142, 1);
						font-family: Microsoft YaHei;
						font-size: 14px;
						font-weight: 400;
						line-height: 22px;
					}
				}
			}
			.submit-btn {
				position: absolute;
				left: 22px;
				bottom: 13px;
				width: 476px;
				height: 36px;
				border-radius: 4px;
				background: rgba(5, 95, 194, 1);
				display: flex;
				justify-content: center;
				.submit-icon {
					/* AI-logo */
					width: 21px;
					height: 15px;
					margin-top: 10px;
					img {
						width: 100%;
						height: 100%;
					}
				}
				.submit-text {
					height: 24px;
					margin-top: 5px;
					color: rgba(255, 255, 255, 1);
					font-family: Microsoft YaHei;
					font-size: 16px;
					font-weight: 400;
					line-height: 24px;
					margin-left: 8px;
				}
			}
		}
		.content-box {
			flex: 1;
			background: #f7f8f9;
		}
	}
}

:deep(.el-input__wrapper) {
	background: #f7f8f9;
}

:deep(.el-input__inner::placeholder) {
	color: rgba(132, 136, 142, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

:deep(.el-input__inner) {
	color: #333;
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

:deep(.el-textarea__inner) {
	background: #f7f8f9;
}

:deep(.el-textarea__inner) {
	color: #333;
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

:deep(.el-textarea__inner::placeholder) {
	color: rgba(132, 136, 142, 1);
	font-family: Microsoft YaHei;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}
</style>