<template>
	<div class="w100">
		<el-row class="w100 pd10 countersign-item" v-for="(item, index) in props.data" :key="index">
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
				<el-form-item label="办理部门：">{{ item.handlerOrgName }} ({{item.statusText}})</el-form-item>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
				<el-form-item label="期满时间：">{{ formatDate(item.stepExpiredTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
				<el-form-item label="办理时间：">{{ formatDate(item.handleTime, 'YYYY-mm-dd HH:MM:SS') }}</el-form-item>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
				<el-form-item label="办理人：">{{ item.handlerName }}</el-form-item>
			</el-col>
			<el-col>
				<el-form-item label="办理意见："
					><p class="formatted-text">{{ item.opinion }}</p></el-form-item
				>
			</el-col>
			<el-col v-if="item.files && item.files.length">
				<el-form-item label="附件："> <annex-list name="附件列表" readonly businessId="" classify="查看附件" v-model="item.files" /></el-form-item>
			</el-col>
			<el-col v-if="item.traces && item.traces.length">
				<el-form-item label="发起会签：">
					<!-- 展开收起 -->
					<el-button type="primary" link @click="itemNodeClick(item)">
						{{ isOpen(item.id) ? '隐藏' : '显示'
						}}<SvgIcon
							name="ele-DArrowRight"
							class="ml5 collapse-item__arrow"
							style="transition: transform 0.3s; transform: rotate(-90deg)"
							:style="isOpen(item.id) ? 'transform: rotate(90deg)' : 'transform: rotate(-90deg)'"
						/>
					</el-button>
				</el-form-item>
			</el-col>
			<el-col v-if="item.traces && item.traces.length">
				<el-collapse-transition>
					<div class="countersign-item-children" v-show="isOpen(item.id)" :key="item.id">
						<!-- 嵌套组件 -->
						<countersign-data
							:data="item.traces"
							class="countersign-item-children-box"
							:expandedKeys="props.expandedKeys"
							:current="state.curNameId"
							:defaultExpandAll="props.defaultExpandAll"
							@node-click="(e:any)=>emit('node-click', e)"
						/>
					</div>
				</el-collapse-transition>
			</el-col>
		</el-row>
	</div>
</template>
<script setup lang="ts">
import { computed, defineAsyncComponent, onMounted, reactive, watch } from 'vue';
import { removeDuplicate } from '@/utils/arrayOperation';
import { formatDate } from '@/utils/formatTime';

const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue')); // 附件列表
const emit = defineEmits(['node-click']);
const props = defineProps({
	// 数据
	data: {
		type: <any>Array,
		default: [],
	},
	current: Number, //保存当前点击节点的id
	expandedKeys: {
		// 默认展开数组
		type: Array,
		default: <EmptyArrayType>[],
	},
	defaultExpandAll: {
		// 展开全部
		type: Boolean,
		default: false,
	},
});
const state = reactive<any>({
	expandedKeys: [], // 当前列表需要展开的节点id组成的数组
	curNameId: 0, //保存current的值
});
const isOpen = computed(() => {
	return (id: string) => {
		// 判断节点id在不在数组中，在则显示，不在则隐藏
		return state.expandedKeys.includes(id);
	};
});
watch(
	() => props.expandedKeys,
	(newVal) => {
		state.expandedKeys = newVal;
	},
	{
		immediate: true,
	}
);
watch(
	() => props.current,
	(val) => {
		state.curNameId = val;
	},
	{
		deep: true,
		immediate: true,
	}
);
// 获取全部可以展开的内容
let arr: any = [];
const getAllKeys = (val: any) => {
	if (!val || !val.length) return [];
	val.forEach((item: any) => {
		if (item.traces && item.traces.length) {
			arr.push(item.id);
			getAllKeys(item.traces);
		}
	});
	return removeDuplicate(arr);
};
// 点击节点 （展开收起）
const itemNodeClick = (item: any) => {
	emit('node-click', item);
	if (item.traces && item.traces.length) {
		const index = state.expandedKeys.findIndex((i: any) => i === item.id);
		if (index != -1) {
			// 如果当前节点id存在数组中，则删除
			state.expandedKeys.splice(index, 1);
		} else {
			// 如果当前节点id不存在数组中，则添加
			state.expandedKeys.push(item.id);
		}
	}
};
onMounted(() => {
	if (props.defaultExpandAll) {
		state.expandedKeys = getAllKeys(props.data);
	}
});
</script>
<style lang="scss" scoped>
.countersign-item {
	background-color: var(--el-color-info-light-9);
	border-radius: var(--el-border-radius-base);
	margin-bottom: 15px;
	&:last-child {
		margin-bottom: 0;
	}
	.collapse-item__arrow {
		margin: 0 8px 0 auto;
		transition: transform var(--el-transition-duration);
		font-weight: 300;
	}
	&-children {
		&-box {
			.countersign-item {
				background-color: var(--el-color-white);
				border: var(--el-border);
				border-radius: var(--el-border-radius-base);
			}
		}
	}
}
</style>
