<template>
	<div class="index">
		<div class="colHeader">
			<div class="page_title">新闻列表</div>

			<div class="headerControls">
				<el-input v-model="form.keyword" placeholder="输入标题关键字进行搜索" class="input-with-select">
					<template #append>
						<el-button icon="Search" />
					</template>
				</el-input>
				<el-button type="primary" icon="Plus" @click="goDetail">创建新文章</el-button>
			</div>
		</div>

		<tableComponents :tableData="tableData" style="margin-top: 20px" @sortChange="sortChange">
			<el-table-column prop="title" label="内容" align="center" width="300" />

			<el-table-column prop="status" align="center" width="120">
				<template #header>
					<el-dropdown trigger="click" @command="handleCommand">
						<div class="el-dropdown-link">
							<span>发布状态</span>
							<el-image :src="icon_table_filter" style="width: 20px; height: 20px"></el-image>
							<!-- <el-icon class="el-icon--right">
								<Filter />
							</el-icon> -->
						</div>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item :command="null">全部</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</template>
				<template v-slot="scope">
					<!-- 新闻状态 0-草稿 1-未发布 2-已发布 -->
					<div class="r_point" :style="{ color: '#000' }">
						<div class="point" :style="{ backgroundColor: scope.row.status == 2 ? '#52C41A' : '#D9D9D9' }"></div>
						<text v-if="scope.row.status == 0">草稿</text>
						<text v-if="scope.row.status == 1">未发布</text>
						<text v-if="scope.row.status == 2">已发布</text>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="updateTime" label="编辑时间" sortable align="center" />
			<el-table-column prop="createTime" label="发布时间" sortable align="center" />
			<el-table-column label="操作" align="center" width="250">
				<template v-slot="scope">
					<div class="option">
						<el-button type="text" v-if="scope.row.status == 2" @click="doNewsPublishFn(scope.row, 1)">下架</el-button>
						<el-button type="text" v-else @click="doNewsPublishFn(scope.row, 2)">上架</el-button>
						<el-button type="text" style="color: #ff1818">删除</el-button>
					</div>
				</template>
			</el-table-column>
		</tableComponents>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { onMounted, reactive, ref } from 'vue';
import { NextLoading } from '/@/utils/loading';
import tableComponents from '/@/components/tableComponents/index.vue';
import icon_table_filter from '/@/assets/icon_table_filter.png';
import { useRoute, useRouter } from 'vue-router';

import { getNewsFast } from '/@/api/api';

const route = useRoute();
const router = useRouter();

const form = ref({});
const tableData = reactive({
	data: [],
	total: 0,
	page: 1,
	size: 20,
});

function goDetail() {
	router.push({
		path: 'addnews',
	});
}

// 获取列表
async function getData() {
	let { code, data, total } = await getNewsFast({
		...form.value,
	});
	if (code == 200) {
		tableData.data = data;
		tableData.total = total;
	}
}

/**
 * 表格排序改变
 * @param row
 */
function sortChange(row) {
	if (row.order == 'ascending') {
		form.value.direction = 'asc';
	} else if (row.order == 'descending') {
		form.value.direction = 'desc';
	}
	form.value.orderBy = row.prop;
	getData();
}

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

<style scoped lang="scss">
.index {
	background-color: white;
	padding: 20px;
	border-radius: 10px;
}
</style>
