<template>
  <div>
    <el-timeline class="time-line">
      <el-timeline-item v-for="(item, index) in props.data" :key="index" :type="item.type" size="large" hollow hide-timestamp>
        <!-- 左侧展示 -->
        <div class="left-container" v-if="!item.parentId">
          <div class="flex">
            <div class="left-container-inner text-no-wrap" :style="'background-color:var(--el-color-' + item.type + ')'">
              <TextTooltip :content="item.name" placement="top" effect="dark"/>
            </div>
            <div class="right-triangle" :style="'border-left:20px solid var(--el-color-' + item.type + ')'"></div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right-container" v-else>
          <div class="flex">
            <div class="left-triangle" :style="'border-right:20px solid var(--el-color-' + item.type + ')'"></div>
            <div class="right-container-inner text-no-wrap" :style="'background-color:var(--el-color-' + item.type + ')'">
              <TextTooltip :content="item.name" placement="top" effect="dark"/>
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <el-card class="card">
          <!-- 正常流转 -->
          <div class="icon color-primary" v-if="item.traceType === 1" :style="'background-image:url(' + getImageUrl('order/processNormal.png') + ')'">
            {{ item.traceTypeText }}
          </div>
          <!-- 其他状态 -->
          <div class="icon color-danger" :style="'background-image:url(' + getImageUrl('order/processReturn.png') + ')'" v-else>
            {{ item.traceTypeText }}
          </div>
          <el-tag round size="large" class="tag mr10 mb10">
            <span>{{ item.handler }}</span>
          </el-tag>
          <el-row class="infos mt10">
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
              <p class="infos-title">接办人</p>
              <p class="infos-inner">{{ item.acceptorName }}</p>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
              <p class="infos-title">接办时间</p>
              <p class="infos-inner">{{ formatDate(item.acceptTime, 'YYYY-mm-dd HH:MM:SS') }}</p>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
              <p class="infos-title">办理人</p>
              <p class="infos-inner">{{ item.handlerName }}</p>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
              <p class="infos-title">办理时间</p>
              <p class="infos-inner">{{ formatDate(item.handleTime, 'YYYY-mm-dd HH:MM:SS') }}</p>
            </el-col>
            <el-col :xs="24" :sm="12" :md="12" :lg="4" :xl="4">
              <p class="infos-title">期满时间</p>
              <p class="infos-inner">{{ formatDate(item.stepExpiredTime, 'YYYY-mm-dd HH:MM:SS') }}</p>
            </el-col>
          </el-row>
          <div class="opinion" v-if="item.opinion">
            <span class="opinion-title">意见</span>
            <text-ellipsis :content="item.opinion" :rows="1"> </text-ellipsis>
          </div>
          <div class="files" v-if="item.files && item.files.length">
            <span class="opinion-title">附件</span>
            <annex-list name="附件列表" readonly businessId="" classify="查看附件" v-model="item.files" class="mt5"/>
          </div>
        </el-card>
        <!-- 展开收起 -->
        <div class="pt10">
          <div style="position: absolute; left: -5px" v-if="item.traces && item.traces.length">
            <SvgIcon name="iconfont icon-tianjiawenjian" size="24px" :color="'var(--el-color-' + item.type + ')'" />
          </div>
          <el-button :type="item.type" @click="itemNodeClick(item)" v-if="item.traces && item.traces.length">
            {{ 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>
        </div>
        <el-collapse-transition>
          <div v-if="item.traces && item.traces.length" class="item-children mt20" v-show="isOpen(item.id)" :key="item.id">
            <!-- 嵌套组件 -->
            <process-time-line
              :data="item.traces"
              class="sub-time-line"
              :expandedKeys="props.expandedKeys"
              :current="state.curNameId"
              :defaultExpandAll="props.defaultExpandAll"
              @node-click="(e:any)=>emit('node-click', e)"
            />
          </div>
        </el-collapse-transition>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script setup lang="ts" name="processTimeLine">
import { defineAsyncComponent, computed, reactive, watch, onMounted } from 'vue';
import { getImageUrl } from '@/utils/tools';
import { formatDate } from '@/utils/formatTime';
import { removeDuplicate } from '@/utils/arrayOperation';

const AnnexList = defineAsyncComponent(() => import('@/components/AnnexList/index.vue')); // 附件列表
const TextTooltip = defineAsyncComponent(() => import('@/components/TextTooltip/index.vue'));
const TextEllipsis = defineAsyncComponent(() => import('@/components/TextEllipsis/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>
.time-line {
  margin-top: 20px;
  margin-left: 150px;
  .collapse-item__arrow {
    margin: 0 8px 0 auto;
    transition: transform var(--el-transition-duration);
    font-weight: 300;
  }
  //左侧内容
  .left-container {
    position: absolute;
    left: -140px;
    top: -10px;
    &-inner {
      width: 110px;
      padding: 0 10px;
      text-align: center;
      border-top-left-radius: 18px;
      border-bottom-left-radius: 18px;
      background: var(--el-color-primary);
      height: 36px;
      line-height: 36px;
      color: var(--hotline-color-white);
    }
    .right-triangle {
      width: 0;
      height: 0;
      border: 18px solid transparent;
      border-left: 18px solid var(--el-color-primary);
    }
  }
  .card {
    position: relative;
    overflow: initial;
    .tag {
      padding: 10px 20px;
      span {
        font-weight: bold;
        font-size: var(--el-font-size-medium);
      }
    }
    .icon {
      position: absolute;
      right: -10px;
      top: 0;
      width: 95px;
      height: 33px;
      background-size: contain;
      background-repeat: no-repeat;
      text-align: center;
      line-height: 24px;
    }
    .infos {
      &-title {
        color: var(--hotline-bg-grey-color);
      }
      &-inner {
        margin-top: 10px;
      }
    }
    .opinion {
      display: flex;
      margin-top: 20px;
      &-title {
        color: var(--hotline-bg-grey-color);
        margin-right: 10px;
        display: inline-block;
        width: 40px;
      }
    }
    .files {
      margin-top: 10px;
      display: flex;
    }
  }
  .item-children {
    padding: 20px;
		border-radius: 10px;
    &:nth-child(even) {
      background-color: var(--hotline-bg-main-color);
    }
    &:nth-child(odd) {
      background-color: var(--hotline-order-CrculationRecord-color);
    }
    .sub-time-line {
      .time-line {
        margin: 0;
        .right-container {
          position: absolute;
          left: 4px;
          top: -10px;
          &-inner {
            width: 110px;
            padding: 0 10px;
            text-align: center;
            border-top-right-radius: 18px;
            border-bottom-right-radius: 18px;
            background: var(--el-color-primary);
            height: 36px;
            line-height: 36px;
            color: var(--hotline-color-white);
          }
          .left-triangle {
            width: 0;
            height: 0;
            border: 18px solid transparent;
            border-right: 18px solid var(--el-color-primary);
          }
        }
        .card {
          margin-left: 160px;
        }
      }
    }
    .bottom {
      :deep(.el-timeline-item__timestamp.is-bottom) {
        margin-bottom: 0 !important;
      }
      :deep(.el-timeline-item__timestamp) {
        font-weight: bold;
        font-size: var(--el-font-size-medium);
        color: var(--el-color-primary);
      }
    }
  }
}
// 线颜色
:deep(.el-timeline-item__tail) {
  border-left: 1px solid #bfcdff;
}
/* :deep(.el-timeline-item:last-child .el-timeline-item__tail){
	display: block;
}*/
</style>
