<template>
<!-- 规划完成 -->
<div class="planningFirstSuccess pageContent">
<a-space class="search">
	规划名称:<a-input v-model:value="SearchForm._规划名称" />
	<div class="btnBox">
		<a-button type="primary" @click="onSearch"> 查询 </a-button>
		<a-button @click="onReset"> 重置 </a-button>
	</div>
</a-space>
<div class="list">
	<a-table :dataSource="tableData" :pagination="tablePage" :columns="tableColumns" @change="onChangePage">
		<template #bodyCell="{ column, record,index }">
			<template v-if="column.key === 'INDEX'">{{index+1}}</template>
			<template v-if="column.key === '_状态'">
				<a-tag v-if="record['_状态']" color="green">已发布</a-tag>
				<a-tag v-else color="red">未发布</a-tag>
			</template>
			<template v-else-if="column.key === 'CZ'">
				<a-button class="view" @click="onViewRow(record)">查看</a-button>
				<!-- <a-button class="edit" @click="onEditRow(record)">发布</a-button> -->
			</template>
		</template>
	</a-table>
</div>
<a-modal v-model:visible="AddEditDialog.open" :title="AddEditDialog.title" @ok="onDialogOk" width="800px"
	ok-text="发布"
>
	<a-descriptions :column="2">
		<a-descriptions-item v-for="item in AddEditDialog.formOptions"
			:label="item.label" :key="item.label" :span="item.span"
		>{{AddEditDialog.form[item.prop]}}</a-descriptions-item>
	</a-descriptions>
</a-modal>
</div>
</template>
<script setup name="planningFirstSuccess">
import global from "@/api/basic.info/global.js";
import { useRouter } from "vue-router";

const router = useRouter();
const SearchForm = reactive({
	_规划名称:'',
});
const tableColumns = [
	{title:'序号',width:100,align:'center',key:'INDEX'},
	{title:'规划名称',dataIndex:'_规划名称'},
	{title:'发布时间',dataIndex:'_发布时间'},
	{title:'状态',key:'_状态'},
	{title:'操作',width:400,key:'CZ'},
];
const tablePage = reactive({
	total:0,
	current:1,
	size:20,
});
const tableData = ref([{'':'12456789'}]);
const DialogForm = ref(null);
const AddEditDialog = reactive({
	open:false,
	title:'',
	formOptions:[
		{label:'规划名称',prop:'_规划名称',type:'input',span:1},
		{label:'正文',prop:'_正文',type:'textarea',span:2},
		{label:'附件',prop:'_附件',type:'upload',span:2},
	],
	form:{}
});
function onSearch(){

}
function onReset(){
	SearchForm._规划名称 = '';
	tablePage.current = 1;
	onSearch();
}

function onChangePage(ev){
	Object.assign(tablePage,ev);
	onSearch();
}
function changeUpload(fd){
	return global.uploadFile(fd).then(reg=>{
		return reg;
	})
}
function onViewRow(row){
	AddEditDialog.form = JSON.parse(JSON.stringify(row));
	AddEditDialog.mode = 'view';
	AddEditDialog.title = '查看规划';
	AddEditDialog.open = true;
}
function onDialogOk(){
	DialogForm.value.validate().then(reg=>{

	})
}
</script>
<style lang="less" scoped>
.view { background-color: rgba(112, 125, 233); color: #fff; }
.edit { background-color: rgba(210, 176, 61); color: #fff; }
.remove { background-color: rgba(255, 70, 70); color: #fff; }
.add { background-color: rgba(83, 184, 36); color: #fff; }
.pageContent{
	background:#fff; padding:10px 20px;
	.search{
		padding:10px 0;
		.btnBox{
			display:flex;
			>*{ margin-right:10px; }
		}
	}
}

</style>