<script name="flowRecord" setup>
import Accessory from '@/components/accessory/index.vue'
import NoData from '@/components/noData/index.vue'
defineProps({
  flowData: Array,
  isShowSline: {
    type: Boolean,
    default: false
  }
})
const
  getResultIcon = (item) => {
    if (item.children?.length) {
      return getResultChildIcon(item.children.slice(-1)[0])
    } else {
      if (item.withdrawFlag === 'cancel-end') {
        return 'timelineIcon4'
      } else if (!item.result) {
        return 'timelineIcon2'
      } else if (item.result === 'process-end' || item.nodeType === 'ROOT' || item.result === 'PASS') {
        return 'timelineIcon1'
      } else {
        return 'timelineIcon3'
      }
    }
  },
  getResultChildIcon = (data) => {
    if (data.approvalMode === 'OR') {
      const icons = []
      data.list.forEach(i => {
        icons.push(getResultIcon(i))
      })
      return icons.includes('timelineIcon1') ? 'timelineIcon1' : icons.includes('timelineIcon3') ? 'timelineIcon3' : icons.includes('timelineIcon4') ? 'timelineIcon4' : 'timelineIcon2'
    } else if (data.approvalMode === 'AND') {
      const icons = []
      data.list.forEach(i => {
        icons.push(getResultIcon(i))
      })
      return icons.includes('timelineIcon3') ? 'timelineIcon3' : icons.includes('timelineIcon2') ? 'timelineIcon2' : icons.includes('timelineIcon4') ? 'timelineIcon4' : 'timelineIcon1'
    } else {
      return 'timelineIcon1'
    }
  }
</script>

<template>
  <el-timeline v-if="flowData?.length" class="flowRecord">
    <el-timeline-item
      v-for="(item, index) in flowData"
      :key="index"
    >
      <template #dot>
        <svg-icon v-if="item.nodeType==='CC'" name="timelineIcon1" />
        <svg-icon v-else :name="getResultIcon(item)" />
      </template>
      <div>
        <template v-if="item.nodeType==='ROOT'||item.nodeType==='CC'">
          <div class="flex items-center">
            <svg-icon name="portraitIcon" class="text-32 mr-8" />
            <p class="font-semibold">{{ item.nodeType==='ROOT'?'发起':'抄送' }}</p>
          </div>
          <div class="ml-40">
            <p class="mb-8">{{ item?.user?.userName||'-' }}（{{ item?.user?.orgName||'-' }}）</p>
            <p class="text-info">{{ item&&item.finishTime }}</p>
          </div>
        </template>
        <template v-else>
          <div class="flex items-center">
            <p class="font-semibold mr-8">{{ item.parallelChildren?.length?'并行分支':item.name }}<span v-if="item.withdrawFlag==='cancel-end'">被撤回</span></p>
            <a class="flex items-center" @click="item.isHideChild=!item.isHideChild">
              <span>{{ item.isHideChild?'展开':'收起' }}</span>
              <el-icon v-if="item.isHideChild"><ArrowDownBold /></el-icon>
              <el-icon v-else><ArrowUpBold /></el-icon>
            </a>
          </div>
          <p v-if="isShowSline" class="sline"></p>
          <el-timeline v-if="item.children?.length&&!item.isHideChild" class="pt-26 childTimeLine">
            <el-timeline-item v-for="(child,key) in item.children" :key="key">
              <template #dot>
                <svg-icon v-if="child.nodeType==='CC'" name="timelineIcon1" />
                <svg-icon v-else :name="getResultChildIcon(child)" />
              </template>
              <div class="flex items-center">
                <svg-icon name="portraitIcon" class="text-32 mr-8" />
                <p class="font-semibold">
                  {{ child.name }}
                  <span v-if="child.withdrawFlag==='cancel-end'" class="text-info">（被撤回）</span>
                  <span v-if="child.list.length>1" class="text-info">{{ child.approvalMode==='OR'?'（或签）':child.approvalMode==='AND'?'（会签）':'' }}</span>
                </p>
              </div>
              <div class="ml-40">
                <div class="flex w-full">
                  <p v-for="(list,k) in child.list" :key="k" class="flex items-center mr-4">
                    <svg-icon v-if="list.nodeType!=='CC'" :name="getResultIcon(list)" class="mr-4" />
                    <span>{{ list?.user?.userName||'' }}</span>
                    <span class="text-info">（{{ list?.user?.orgName||'' }}）</span>
                  </p>
                </div>
                <div v-for="(list,k) in child.list" :key="k">
                  <div v-if="list.auditInfo" class="bg-gray-100 p-8 mt-8">
                    <div class="flex justify-between text-info">
                      <p>{{ list?.user?.userName||'' }}</p>
                      <p>{{ list.finishTime }}</p>
                    </div>
                    <p v-if="list.auditInfo" class="text-info" style="word-break: break-all;">意见：<span>{{ list.auditInfo.text }}</span></p>
                    <div v-if="list.auditInfo&&list.auditInfo.attachments?.length" class="flex text-info">
                      <span>附件：</span>
                      <div>
                        <p v-for="(file,fileIndex) in list.auditInfo.attachments" :key="fileIndex" class="mb-4">
                          <accessory :file-name="file.fileName" :file-id="file.fileId" />
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
          <div v-else-if="item.parallelChildren?.length&&!item.isHideChild" class="bx-timeline">
            <div class="flex overflow-x-auto mt-8 justify-between">
              <p class="top-line"></p>
              <flow-record
                v-for="(parallel, parallelIndex) in item.parallelChildren"
                :key="parallelIndex"
                :flow-data="[parallel]"
                class="pt-20 timeline"
                :is-show-sline="true"
              />
            </div>
          </div>
        </template>
      </div>
    </el-timeline-item>
  </el-timeline>
  <no-data v-else />
</template>

<style lang="less">
.flowRecord{
  .childTimeLine{
    .el-timeline-item:not(:last-child){
      .el-timeline-item__tail{
          display: inherit;
        }
    }
  }
  .bx-timeline{
    position: relative;
    .top-line{
      position: absolute;
      width: 100%;
      height: 1px;
      background: rgba(0, 0, 0, 0.15);
      top: 0;
    }
    .timeline:nth-of-type(1){
      background: #fff;
      position: relative;
      z-index: 2;
      &:after{
        content: '';
        position: absolute;
        top: 0;
        height: 1px;
        background: rgba(0, 0, 0, 0.15);
        left: 6px;
        right: 0;
      }
    }
    .timeline:last-of-type{
      background: #fff;
      position: relative;
      z-index: 2;
      &:after{
        content: '';
        position: absolute;
        top: 0;
        height: 1px;
        background: rgba(0, 0, 0, 0.15);
        left: 0;
        width: 6px;
      }
    }
  }
  .sline{
    width: 1px;
    height: 20px;
    background: rgba(0, 0, 0, 0.15);
    position: absolute;
    left: 6px;
    top: -18px;
  }

}
</style>
