<template>
	<div>
		<!-- 顶部 start -->
		<div class="top">
			<el-page-header @back="goBack"> </el-page-header>

			<div>
				<el-button type="primary">发布</el-button>
				<el-button>保存</el-button>
			</div>
		</div>
		<!-- 顶部 end -->

		<div class="step_bk">
			<div class="page_title">封面</div>

			<el-form-item label="文章封面">
				<div class="r_upload">
					<!-- <uploadImage></uploadImage> -->
					<uploadImage v-model:file-list="form.picture" :limit="1" :fileSize="20 * 1024"> </uploadImage>
					<text>请上传jpg，png格式的图片，大小不超过20M</text>
				</div>
			</el-form-item>

			<div class="page_title">VIP配置</div>
			<el-form-item label="付费类型：" style="margin-top: 20px">
				<el-radio-group v-model="form.type">
					<el-radio :value="0" size="large">免费</el-radio>
					<el-radio :value="1" size="large">VIP</el-radio>
				</el-radio-group>
			</el-form-item>

			<el-form-item>
				<div class="page_title">输入快讯内容</div>
				<el-input
					v-model="form.summary"
					show-word-limit
					maxlength="300"
					style="margin-top: 10px"
					:rows="10"
					type="textarea"
					placeholder="输入快讯内容 "
				/>
			</el-form-item>
		</div>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, reactive, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import { ElMessage } from 'element-plus';
import router from '/@/router';
import uploadImage from '/@/components/upload/image.vue';
import { getTagSource, getTagDiy, getColumn } from '/@/api/api';

const form = ref({
	type: 0,
});

function goBack() {
	router.back();
}

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

<style scoped lang="scss">
.top {
	width: 100%;
	height: 80px;
	background-color: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 20px;
	padding-right: 20px;

	:deep(.el-steps--simple) {
		background-color: transparent;
	}
}

.step {
	display: flex;
	align-items: center;
	// gap: 50px;
	height: 100%;

	.step_item {
		display: flex;
		align-items: center;
		width: 227px;
		height: 100%;
		justify-content: center;
		position: relative;
		cursor: pointer;
	}

	.step_num {
		color: #fff;
		background-color: #1890ff;
		width: 24px;
		height: 24px;
		display: flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		border-radius: 100px;
		margin-left: -10px;
	}

	.step_title {
		font-size: 14px;
		margin-left: 10px;
	}

	.line {
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 3px;
	}
}

.step_bk {
	margin: 20px;
	padding: 20px;
	background-color: white;
	border-radius: 10px;
}

.form {
	margin-top: 30px;
}

.r_upload {
	display: flex;
	align-items: center;

	text {
		margin-left: 10px;
		color: #b3b3b3;
		font-size: 12px;
	}
}

.columns_title {
	display: flex;
}
.column_del {
	margin-left: 40px;
	color: #ff4d4f;
	border: 1px solid #ff4d4f;
	padding: 3px 5px;
	border-radius: 3px;
	cursor: pointer;
}
</style>
