<!--
@ 作者: 鲁智强
@ 时间: 2023-09-19 09:13:14
@ 备注: 
-->
<script lang='ts' setup>
import {ref,reactive,onMounted} from 'vue'
import Diolog from './diolog.vue'
import Edit from './editdialog.vue'
import ED from './edcialog.vue'
import { addPostCont,tarlist,deltarget } from '@/api/opk/api'
import { editPostCont } from '@/api/opk/pulic/api'
import { formItemValidateStates, TableV2SortOrder } from 'element-plus';
// eslint-disable-next-line vue/require-prop-types
const { addShow, title } = defineProps(['addShow', 'title'])
const data = reactive({
	formInline:{
		region:'',
	},
	title:"",
	addPostBox: false,
	editPostCont:false,
	edPostCont:false,
})
const orgTreeProps ={
   label: 'name',
   children:'child'
}
const orgTreeProp ={
   label: 'title',
   children:'childen'
}
const formdat = {
	someProp:"",
}
const total =ref(0)
let rowInfo = ref<any>({})
const postIds = ref<number[]>([])
const tableData = ref<any>([]);
const tables = ref<any>([]);
// 获取侧栏数据
function jjjs(){
	addPostCont("/hrapi/org/govthree","post")
	    .then(data => {
        	tableData.value = data.data[3].child[14].child;
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
}
jjjs()
function editPost(){
	editPostCont()
		.then(data => {
			tables.value = data.data.list;
		})
}
editPost()
const table = ref<any>([])
const formdate = reactive({
	page:0,
	pagesize:20,
	name:"",
	dimension:"",
	attribute:"",
	orgidlist:[]as String[],
	type:"",
})
// 获取数据
const pages = ref(0)
const pagesizes = ref(4)
const newtarlist = () =>{
	const add = formdate.type.toString()
	const edd = formdate.orgidlist.toString()
	formdate.orgidlist = edd.split(',')
	tarlist({page:formdate.page,pageSize:formdate.pagesize,name:formdate.name,dimension:formdate.dimension, attribute:add,orgidlist:formdate.orgidlist})
		.then(data=>{
			table.value = data.data.list
			total.value = data.data.total;
		})
		.catch(error => {
          	console.error('Error fetching data:', error);
        });
}
// 新增数据
const addtableData = ()=>{
	data.addPostBox = true;
}
// 添加行
const addRow = (val:any)=> {
        tableData.value.push(val);
}
// 编辑行
const editRow = (val:any)=> {
        let index =tableData.value.findIndex(
          (item:any) => item.id === val.id
        );
        tableData.value.splice(index, 1, val);
}
// 关闭弹窗
const closeDetail = ()=>{
	data.addPostBox = false;
}
// 删除数据
const handleDel = (val:any) => {
		const dictTypeIds = [val.outID || postIds.value].join(",");
        let dictTypeIdAry = dictTypeIds.split(",")
  			ElMessageBox.confirm("你确定删除这条信息吗?", "提示", {
    			confirmButtonText: "确认",
    			cancelButtonText: "取消",
    			type: "warning",
  			})
    		.then(() => {
				const delid = new String(val.id)
				handleSure(val)
				console.log(val.id)
				deltarget({id:delid,state:3,istrue:2}).then(()=>
					ElMessage.success("删除成功"))
				newtarlist()
   		 	})
    		.catch(() => {
      			alert('用户取消了删除操作');
    		});
};
const handleSure = (val:any)=> {
    const index = tableData.value.findIndex((item:any) => item.id === val.id);
    if(index!=-1){
		tableData.value.splice(index, 1);
		}
}
const handle=(data:any)=>{
	formdate.orgidlist = data.id
	console.log(formdate.orgidlist)
}
const handleedit=(val:any)=>{
	data.editPostCont=true,
	rowInfo.value=val;
}
const handleErd=(val:any)=>{
	data.edPostCont=true,
	rowInfo.value=val;
}
onMounted(()=>{
	jjjs()
})
</script>
<template>
	<div>
		<el-row style="width: 100%">
			<el-tree ref="orgTreeRef" v-model="formdate.orgidlist" show-checkbox clearable multiple node-key="id" class="orgTree" :data="tableData" :props="orgTreeProps" :default-expand-all="false" @check="handle"/>
			<el-col :span="22">
				<div class="horizontal-controls">
				<el-form-item label="考核指标">
					<el-input v-model="formdate.name" placeholder="请输入考核指标" clearable/>
				</el-form-item>
				<el-form-item label="指标名称">
					<el-tree-select ref="orgTreeRef" v-model="formdate.dimension" clearable node-key="outId" class="orgTree" :data="tables" :props="orgTreeProp" :default-expand-all="false"/>
				</el-form-item>
				<el-form-item v-model="formdate" label="指标名称">
				<el-select v-model="formdate.type" placeholder="请输入名称" clearable>
					<el-option label="定性指标" :value="1" />
					<el-option label="定量指标" :value="2" />
				</el-select>
				</el-form-item>
					<el-button @click="newtarlist">查询</el-button>
					<el-button class="new_btn" type="success" @click="addtableData">新增</el-button>
				</div>	
				<el-table :data="table" border style="width: 100%">
					<el-table-column prop="title" label="考核指标"/>
					<el-table-column prop="dimensiontitle" label="考核维度"/>
					<el-table-column prop="scoringmethod" label="指标性质"/>
					<el-table-column prop="unites" label="计量单位" />
					<el-table-column prop="cycleattr" label="考核周期" />
					<el-table-column prop="" label="计分方式"/>
					<el-table-column prop="relevantdepartments" label="关联部门">
						<template #default="scope">
							<el-select v-model="formdat.someProp" placeholder="查看详情">
								<el-option v-for="item in scope.row.relevantdepartmentsmap" :key="item.key" :label="item.title" :value="item.title"></el-option>
							</el-select>
						</template>
					</el-table-column>
					<el-table-column prop="reportmap[0].title" label="数据提交"/>
					<el-table-column prop="state" label="辅助计数"/>
					<el-table-column prop="" label="状态" width="70">
					<template #default="scope">
						<el-switch v-model="scope.row.status" />
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="200">
					<template #default="{ row }">
					<el-button type="success" link @click="handleErd(row)">查看详情</el-button>
					<el-button type="success" link @click="handleedit(row)">修改</el-button>
					<el-button type="danger" link @click="handleDel(row)">删除</el-button>
					</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-row>
		<pagination v-if="total > 0" v-model:page="formdate.page" v-model:pagesize="formdate.pagesize" :total="total" @click="newtarlist"/>
		<Diolog v-if="data.addPostBox" v-model="data.addPostBox" :title="title" :array-num="tableData.length" @add-row="addRow" @edit-row="editRow"></Diolog>
		<Edit v-if="data.editPostCont" v-model="data.editPostCont" :row-info="rowInfo" :title="title" :array-num="tableData.length"></Edit>
		<ED v-if="data.edPostCont" v-model="data.edPostCont" :row-info="rowInfo" :title="title" :array-num="tableData.ength"></ED>
	</div>
  </template>
<style  lang='scss' scoped>
*{
	font-weight: bolder;
}
.horizontal-controls {
  display: flex;
  float: left;

}

/* 可以根据需要调整样式 */
</style>
