<!--
@ 作者: 鲁智强
@ 时间: 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 zjr from './zjr.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:'',
	},
	addPostBox: false,
	editPostCont:false,
	edPostCont:false,
	zjrPostBox: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:10,
	name:"",
	dimension:"",
	attribute:"",
	orgidlist:[]as String[],
	type:"",
})
// 获取数据
const pages = ref(0)
const pagesizes = ref(4)
const newtarlist=()=>{
	const add = formdate.type.toString()
	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);
        });
}
newtarlist()
// 新增数据
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;
}
// 状态
function editPostState(classId:number,state:number){
	console.log("改变状态--------->",classId,state)
	const add  =classId.toString()
	let statusVal = 1
	if( state == 1) statusVal = 2;
	deltarget({id:add,state:statusVal,istrue:2})
	newtarlist()
}
// 删除数据
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 resetChecked=()=> {
	formdate.orgidlist = []
	newtarlist()
}
const handle=(data:any)=>{
	formdate.orgidlist = data.id.toString().split(',')
	newtarlist()
}
const handleedit=(val:any)=>{
	data.editPostCont=true,
	rowInfo.value=val;
}
const handleErd=(val:any)=>{
	data.edPostCont=true,
	rowInfo.value=val;
}
const jkl=(val:any)=>{
	data.zjrPostBox=true;
	rowInfo.value = val;
}
onMounted(()=>{
	jjjs()
	newtarlist()
})
</script>
<template>
		<el-container class="m-4">
			<div class="qwe">
				<el-button type="primary" style="width: 170px" size="large" @click="resetChecked">全选</el-button>
				<el-tree ref="orgTreeRef" v-model="formdate.orgidlist" multiple node-key="id" class="orgTree" :data="tableData" :props="orgTreeProps" :default-expand-all="false" @node-click="handle"/>
			</div>
			<el-divider direction="vertical"/>
			<el-col :span="22">
				<el-container class="wer">
				<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-form-item label-width="">
					<el-button type="primary" @click="newtarlist"><el-icon><Search /></el-icon>查询</el-button>
					<el-button class="new_btn" type="warning" @click="addtableData"><el-icon><Plus /></el-icon>新增</el-button>
				</el-form-item>
				</el-container>	
				<el-table  class="m-1" :data="table" style="width: 100%">
					<el-table-column label="考核指标">
						<template #default="scope">
							<a v-if="scope.row.scoringmethod == 2" style="color:#409eff" @click="jkl(scope.row)">{{scope.row.title}}</a>
							<a v-if="scope.row.scoringmethod == 1">{{scope.row.title}}</a>						
						</template>
					</el-table-column>
					<el-table-column prop="dimensiontitle" label="考核维度"/>
					<el-table-column prop="scoringmethod" label="指标性质">
						<template #default="scope">
							<span v-if="scope.row.scoringmethod== 1">定量考核</span>
							<span v-if="scope.row.scoringmethod== 2">定性考核</span>
						</template>
					</el-table-column>
					<el-table-column prop="unites" label="计量单位" />
					<el-table-column prop="cycle" label="考核周期">
							<template #default="scope">
							<span v-if="scope.row.cycle== 4" class="el-tag">季度</span>
							<span v-if="scope.row.cycle== 5" class="el-tag">月</span>
							<span v-if="scope.row.cycle== 6" class="el-tag">年</span>
						</template>
					</el-table-column>
					<el-table-column prop="cycleattr" label="计分方式">
						<template #default="scope">
							<span v-if="scope.row.cycleattr== 1" class="el-tag">自动计分</span>
							<span v-if="scope.row.cycleattr== 2" class="el-tag">手动计分</span>
						</template>
					</el-table-column>
					<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="share" label="辅助计数"/>
					<el-table-column prop="" label="状态" width="70">
					<template #default="scope">
						<el-switch v-model="scope.row.status" class="ml-2" inline-prompt style="--el-switch-on-color: #ff4949; --el-switch-off-color: #13ce66" @change="editPostState(scope.row.id,scope.row.state)"/>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="250">
					<template #default="{ row }">
					<el-button type="primary" link @click="handleErd(row)"><el-icon><EditPen /></el-icon>关联部门</el-button>
					<el-button type="primary" link @click="handleedit(row)"><el-icon><EditPen /></el-icon>编辑</el-button>
					<el-button type="primary" link @click="handleDel(row)"><el-icon><Delete /></el-icon>删除</el-button>
					</template>
					</el-table-column>
				</el-table>
			</el-col>
		</el-container>
		<pagination v-if="total > 0" v-model:page="formdate.page" v-model:pagesize="formdate.pagesize" :total="total" @pagination="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.length"></ED>
		<zjr v-if="data.zjrPostBox" v-model="data.zjrPostBox" :row-info="rowInfo" :title="title" :array-num="tableData.length"></zjr>
  </template>
<style  lang='scss' scoped>
*{
	font-weight: bolder;
}
.horizontal-controls {
  display: flex;
  float: left;
}
.aaa{
	display:flex;
}
.el-divider--vertical{
  display:inline-block;
  width:1px;
  height:812px;
  margin:0 8px;
  vertical-align:middle;
  position:relative;
}
.qwe{
	margin:-15px 10px 0 -14px;
}
.wer{
	margin: -7px 0 0 15px;
}
/* 可以根据需要调整样式 */
</style>
