<template>
<!-- 意见反馈 -->
<div class="feedback 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>
	</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="onFeedbackRow(record)">反馈</a-button>
			</template>
		</template>
	</a-table>
</div>
<a-modal v-model:visible="FeedbackDialog.open" :title="FeedbackDialog.title" @ok="onDialogOk" width="800px">
	<a-descriptions>
		<a-descriptions-item v-for="item in FeedbackDialog.planOptions"
			:label="item.label" :key="item.label" :span="item.span"
		>{{FeedbackDialog.form[item.prop]}}</a-descriptions-item>
	</a-descriptions>
	<a-form ref="DialogForm" :model="FeedbackDialog.form" :rules="FeedbackDialog.formRules">
		<a-form-item v-for="item in FeedbackDialog.formOptions" :key="item.label"
			:label="item.label" :name="item.prop" 
		>
			<a-input v-if="item.type === 'input'" v-model:value="FeedbackDialog.form[item.prop]"></a-input>
			<a-textarea v-if="item.type === 'textarea'" :auto-size="{minRows:3}" v-model:value="FeedbackDialog.form[item.prop]"></a-textarea>
			<a-select v-else-if="item.type === 'select'" v-model:value="FeedbackDialog.form[item.prop]">
				<a-select-option v-for="citem in item.values" :key="citem.valiue" :value="citem.value">{{citem.label}}</a-select-option>
			</a-select>
			<DIYUPLoad v-else-if="item.type === 'upload'" v-model="FeedbackDialog.form[item.prop]" :change="changeUpload" />
		</a-form-item>
	</a-form>
</a-modal>
</div>
</template>
<script setup name="feedback">
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:'操作',width:400,key:'CZ'},
];
const tablePage = reactive({
	total:0,
	current:1,
	size:20,
});
const tableData = ref([{'':'12456789'}]);
const DialogForm = ref(null);
const FeedbackDialog = reactive({
	open:false,
	title:'',
	row:undefined,
	formRules:{
		'填写意见':[{required:true,trigger:'change',message:'请输入填写意见！'}],
	},
	formOptions:[
		{label:'填写意见',prop:'填写意见',type:'textarea',span:1},
		{label:'附件',prop:'附件',type:'upload',span:1},
	],
	planOptions:[
		{label:'规划名称',prop:'规划名称',type:'input',span:1},
		{label:'收集处室',prop:'收集处室',type:'select',span:1},
		{label:'规划正文',prop:'规划正文',type:'textarea',span:2},
		{label:'附件',prop:'',type:'upload',span:2},
	],
	form:{}
});
function onSearch(){

}
function onReset(){
	SearchForm._规划名称 = '';
	SearchForm._截止日期 = '';
}
function onChangePage(ev){
	Object.assign(tablePage,ev);
	onSearch();
}

function onFeedbackRow(row){
	FeedbackDialog.form = row;
	FeedbackDialog.title = '填写意见';
	FeedbackDialog.open = true;
}
function changeUpload(fd){
	return global.uploadFile(fd).then(reg=>{
		return reg;
	})
}
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; }
.opinion { 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>