<template>
<!-- 规划初稿 -->
<div class="planningFirst pageContent">
<a-space class="search">
	规划名称:<a-input v-model:value="SearchForm._规划名称" />
	完成日期:
	<a-space direction="vertical" :size="12">
		<a-date-picker v-model:value="SearchForm._完成日期" />
	</a-space>
	<div class="btnBox">
		<a-button type="primary" @click="onSearch"> 查询 </a-button>
		<a-button @click="onReset"> 重置 </a-button>
		<a-button class="add" @click="onAddRow"> 新增 </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-else-if="column.key === 'CZ'">
				<a-button class="view" @click="onViewRow(record)">查看</a-button>
				<a-button class="edit" @click="onEditRow(record)">编辑</a-button>
				<a-button class="remove" @click="onDeleteRow(record)">删除</a-button>
			</template>
		</template>
	</a-table>
</div>
<a-modal v-model:visible="AddEditDialog.open" :title="AddEditDialog.title" @ok="onDialogOk" width="800px">
	<a-form ref="DialogForm" :model="AddEditDialog.form" v-if="['add','edit'].includes(AddEditDialog.mode)" :rules="AddEditDialog.formRules">
		<a-form-item v-for="item in AddEditDialog.formOptions" :key="item.label"
			:label="item.label" :name="item.prop" 
		>
			<a-input v-if="item.type === 'input'" v-model:value="AddEditDialog.form[item.prop]"></a-input>
			<a-textarea v-if="item.type === 'textarea'" :auto-size="{minRows:3}" v-model:value="AddEditDialog.form[item.prop]"></a-textarea>
			<a-date-picker v-else-if="item.type === 'date'" v-model:value="AddEditDialog.form[item.prop]" />
			<DIYUPLoad v-else-if="item.type === 'upload'" v-model="AddEditDialog.form[item.prop]" :change="changeUpload" />
		</a-form-item>
	</a-form>
	<a-descriptions v-else-if="AddEditDialog.mode === 'view'" :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>
	<template #footer v-if="AddEditDialog.mode === 'view'"></template>
</a-modal>
</div>
</template>
<script setup name="planningFirst">
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:'操作',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:'',
	mode:'add',
	formRules:{
		'_规划名称':[{required:true,trigger:'change',message:'请输入规划名称！'}],
		'_完成日期':[{required:true,trigger:'change',message:'请选择完成日期！'}],
		'_规划正文':[{required:true,trigger:'change',message:'请输入规划正文！'}],
	},
	formOptions:[
		{label:'规划名称',prop:'_规划名称',type:'input',span:1},
		{label:'完成日期',prop:'_完成日期',type:'date',span:1},
		{label:'规划正文',prop:'_规划正文',type:'textarea',span:2},
		{label:'附件',prop:'',type:'upload',span:2},
	],
	form:{}
});
function onSearch(){

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

function onChangePage(ev){
	Object.assign(tablePage,ev);
	onSearch();
}
function onViewRow(row){
	AddEditDialog.form = JSON.parse(JSON.stringify(row));
	AddEditDialog.mode = 'view';
	AddEditDialog.title = '查看规划';
	AddEditDialog.open = true;
}
function onAddRow(){
	AddEditDialog.form = {};
	AddEditDialog.mode = 'add';
	AddEditDialog.title = '添加规划';
	AddEditDialog.open = true;
}
function onEditRow(row){
	AddEditDialog.form = JSON.parse(JSON.stringify(row));
	AddEditDialog.mode = 'edit';
	AddEditDialog.title = '编辑规划';
	AddEditDialog.open = true;
}
function onDeleteRow(row){

}
function onOpinionRow(row){
	router.push({path:"/basic.info/feedbackView",query:{id:row.id}});
}
function changeUpload(fd){
	return global.uploadFile(fd).then(reg=>{
		return reg;
	})
}
function onDialogOk(){
	const URLs = {
		add:'',
		edit:'',
	}
	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>