<!--
@ 作者: 鲁智强
@ 时间: 2023-09-19 09:13:14
@ 备注: 
-->
<script lang='ts' setup>
import {ref,reactive,onMounted} from 'vue'
import { organdpost,posttarget,set_posttarget } from '@/api/opk/api'
import { addPostCont,tarlist,deltarget } from '@/api/opk/api'
import { editPostCont } from '@/api/opk/pulic/api'
import { departmentprogramme,edit_depart,edit_depart_progra } from '@/api/opk/news/api'
import { ge_copy } from '@/api/opk/zxy/news/api'
import { formItemValidateStates, TableV2SortOrder } from 'element-plus';
import { getDictFormData } from '@/api/dict'
import Dialog from './dialog.vue'
import Dialoglog from './dialoglog.vue'
import Yg from './yg.vue'
// eslint-disable-next-line vue/require-prop-types
const { addShow, title } = defineProps(['addShow', 'title'])
const data = reactive({
	formInline:{
		region:'',
	},
	title:"",
	addPostBox: false,
	edPostBox:false,
	ygPostBox:false,
})
const orgTreeProps ={
   label: 'name',
   children:'child'
}
const orgTreeProp ={
   label: 'title',
   children:'childen'
}
const formdat = {
	someProp:"",
}
const total =ref(0)
const 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:"",
	type:"",
	value1:"2023",
})
// 获取数据
const tableq = ref([])
const postt = ()=>{
	const ass = new Date(formdate.value1);
	const qwe = ass.getFullYear();
	const zjr = qwe.toString();
	departmentprogramme({orgid:formdate.orgidlist,year:zjr,version:formdate.name})		
		.then(data => {
			tableq.value = data.data;
			total.value = data.data.count;
		})
}
// 新增数据
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:string,state:number){
	console.log("改变状态--------->",classId,state)
	let statusVal = 1
	if( state == 1) statusVal = 2;
	edit_depart({id:classId,state:statusVal,istrue:2})
	postt()
}
// 删除数据
const handleDel = (val:any) => {
		const dictTypeIds = [val.outID || postIds.value].join(",");
        let dictTypeIdAry = dictTypeIds.split(",")
  			ElMessageBox.confirm("你确定删除这条信息吗?", "提示", {
    			confirmButtonText: "确认",
    			cancelButtonText: "取消",
    			type: "warning",
  			})
    		.then(() => {
				const add = val.key.toString()
				handleSure(val)
				console.log(val.id)
				edit_depart({id:add,state:3,istrue:2}).then(()=>
					ElMessage.success("删除成功"))
					postt()
			})	
};
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 = ""
	postt()
}
const handle=(data:any)=>{
	formdate.orgidlist = data.id.toString()
	postt()
}
const handleErd=(val:any)=>{
	data.edPostBox=true;
	rowInfo.value=val;
}
const handleio=(val:any)=>{
	data.ygPostBox=true;
	rowInfo.value = val;
}
interface SpanMethodProps {
  row: User
  column: TableColumnCtx<User>
  rowIndex: number
  columnIndex: number
}
const flitterData4 = (data)=>{
      let spanOneArr = []
      let concatOne = 0
      data.forEach((item,index)=>{
        if(index === 0){
          spanOneArr.push(1)
        }else{
          //name 修改
          if(item.ENTERNAME === data[index - 1].ENTERNAME){ //第一列需合并相同内容的字段
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          }else{
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return  {
        one: spanOneArr,
      }
    }
function objectSpanMethod({row, column, rowIndex, columnIndex}){
      if(columnIndex === 0 ) {
        // this.tableData  修改
        const _row = (flitterData4(tableq).one)[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
}
onMounted(()=>{
	jjjs()
	postt()
})
</script>
<template>
	<div class="m-2">
		<el-container clss="m-4">
			<div class="qwe">
			<el-button type="primary" style="width: 140px" size="large" @click="resetChecked">全选</el-button>
			<el-tree ref="orgTreeRef" v-model="formdate.orgidlist" 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 style="width:200px"/>
				</el-form-item>
				<el-form-item label="年度:" label-width="90">
						<el-date-picker v-model="formdate.value1" type="year"/>
				</el-form-item>
				<el-form-item label-width="25">
					<el-button type="primary" @click="postt"><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="tableq" :span-method="objectSpanMethod" border style="width: 100%">
					<el-table-column prop="groupname,deaprtname," label="部门">
						<template #default="scope"> 
						{{scope.row.groupname}}{{scope.row.deaprtname}}
						</template>
					</el-table-column>
					<el-table-column prop="year" label="年" width="70"/>
					<el-table-column prop="key" label="版本号"/>
					<el-table-column prop="time" label="时间" />
					<el-table-column prop="state" 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.key,scope.row.state)"/>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="228">
					<template #default="{ row }">
					<el-button type="primary" link @click="handleio(row)"><el-icon><View /></el-icon>查看详情</el-button>
					<el-button type="primary" link @click="handleErd(row)"><el-icon><DocumentChecked /></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" @click="postt"/>
			<Dialog v-if="data.addPostBox" v-model="data.addPostBox" :title="title" :array-num="tableData.length" @add-row="addRow" @edit-row="editRow"></Dialog>
			<Dialoglog v-if="data.edPostBox" v-model="data.edPostBox" :title="title" :row-info="rowInfo"></Dialoglog>
			<Yg v-if="data.ygPostBox" v-model="data.ygPostBox" :title="title" :row-info="rowInfo"></Yg>
		</div>
  </template>
<style  lang='scss' scoped>
.qwe {
	margin:-8px 0 0 -6px;
	float:right;
}
.wer{
	margin:-5px 0 0 20px;
	font-weight:normal;
}
.horizontal-controls {
  display: flex;
  float: left;

}
.el-divider--vertical{
  display:inline-block;
  width:1px;
  height:812px;
  margin:0 8px;
  vertical-align:middle;
  position:relative;
}

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