<script setup lang="ts" name="FlowTimeline">
import { ref, reactive, computed, h } from 'vue'
// import { Icon, Tag } from 'vant'
// import useUserStore from '@/store/modules/user'
// import defaultAvatar from '@/static/image/default-avatar.png'

// const userStore = useUserStore()
import Personal from './personal.vue'
const props = defineProps<{
  nodeData: any
}>()

// 当前节点index
const active = computed(() => {
  return nodeList.value.findIndex(node => props.nodeData?.nodeRunList?.some(item => item.nodeCode === node.nodeCode)) ?? 0
})

// 当前节点 nodeRunList approveUserName人员名称
const approveUserName = computed(() => {
  return props.nodeData?.nodeRunList.find(item => nodeList.value?.some(node => item.nodeCode === node.nodeCode))?.approveUserName
})

// 节点列表
const nodeList = computed(() => {
  if (!props.nodeData) return []
  const nodeData = JSON.parse(JSON.stringify(props.nodeData))
  return nodeData?.nodeList?.map(item => {
    item.userTypeParams = JSON.parse(item.userTypeParams)
    return item
  }) ?? []
})


</script>

<template>
  <div>
    <div class="flow-title">流程</div>
    <uv-steps class="flow" direction="column" :current="active" :customStyle="{padding:'30rpx'}">
      <template v-for="(node, index) in nodeList" :key="index">
        <uv-steps-item>
          <!-- 已审批节点图标 -->
          <template v-slot:icon>
            <div class="flow-node" :class="{guide: node.nodeType === '4',unactive : index > active}">


              <!-- <uv-icon v-if="index === 0"  :custom-style="'width: 72rpx;height: 72rpx;display:flex;align-items:center;justify-content:center;'" name="play-right-fill" color="#fff" size="24"></uv-icon>
              <uv-icon v-else-if="index === nodeList.length - 1" :custom-style="'width: 72rpx;height: 72rpx;display:flex;align-items:center;justify-content:center;'" name="pause" color="#fff" size="24"></uv-icon>
              <uv-icon v-else-if="node.nodeType === '7'" :custom-style="'width: 72rpx;height: 72rpx;display:flex;align-items:center;justify-content:center;'" name="list-dot" color="#fff" size="24"></uv-icon>
              <uv-icon v-else-if="node.nodeType === '4'" :custom-style="'width: 72rpx;height: 72rpx;display:flex;align-items:center;justify-content:center;'" name="list" color="#07c160" size="24"></uv-icon>
              
              <text v-else class="iconfont icon-user"></text>  -->

              

             <text v-if="index === 0" class="iconfont icon-play" style="display: inline-block;margin: 0 20rpx;"></text> 
             <text v-else-if="index === nodeList.length - 1" class="iconfont icon-finish" style="display: inline-block;margin: 0 20rpx;"></text> 
             <text v-else-if="node.nodeType === '4'" class="iconfont icon-guide" style="display: inline-block;margin: 0 20rpx;"></text> 
             <text v-else-if="node.nodeType === '7'" class="iconfont icon-guide-o" style="display: inline-block;margin: 0 20rpx;"></text> 
             <text v-else class="iconfont icon-manager-o" style="display: inline-block;margin: 0 20rpx;"></text> 
             
            </div>
          </template>
          <!-- 当前节点图标 -->
          <!-- <template v-slot:activeIcon>
            <div class="flow-node">
              <uv-icon v-if="index === nodeList.length - 1" :custom-style="'width: 72rpx;height: 72rpx;display:flex;align-items:center;justify-content:center;'" name="pause" color="#fff" size="24"></uv-icon>
              <uv-icon v-else-if="node.nodeType === '7'" :custom-style="'width: 72rpx;height: 72rpx;display:flex;align-items:center;justify-content:center;'" name="list-dot" color="#fff" size="24"></uv-icon>
              <text v-else class="iconfont icon-user" ></text> 
              <uv-icon  :custom-style="'width: 72rpx;height: 72rpx;display:flex;align-items:center;justify-content:center;'" name="more-dot-fill" color="#fff" size="24"></uv-icon>
            </div>
          </template> -->
          <!-- 未审批节点图标 -->
          <!-- <template v-slot:inactiveIcon>
            <div class="flow-node inactive">
              <uv-icon v-if="index === nodeList.length - 1" :custom-style="'width: 72rpx;height: 72rpx;display:flex;align-items:center;justify-content:center;'" name="pause" color="#fff" size="24"></uv-icon>
              <uv-icon v-else-if="node.nodeType === '7'" :custom-style="'width: 72rpx;height: 72rpx;display:flex;align-items:center;justify-content:center;'" name="list-dot" color="#fff" size="24"></uv-icon>
              <uv-icon v-else-if="node.nodeType === '4'" :custom-style="'width: 72rpx;height: 72rpx;display:flex;align-items:center;justify-content:center;'" name="list" color="#07c160" size="24"></uv-icon>

            </div>
          </template> -->
          <template v-slot:title>
            <uv-row justify="space-between"  :class="{unactiveContent: index > active}">
              <div style="font-size: 28rpx;padding-left: 30rpx;">
                <div :style="{color: index > active ? '#969799' : '#333'}" v-if="node.nodeType === '4'">条件</div>
                <div v-else :style="{color: index > active ? '#969799' : '#333'}">{{ node.nodeName }}</div>
                <!-- 节点名下的员工名称 -->
                <div class="flow-user">
                  <!-- <el-col v-if="index === 0">{{ props.nodeData?.approvalList?.[0]?.endTime }}</el-col> -->
                  <uv-col v-if="index === 0" :style="{color: index > active ? '#969799' : '#333'}">{{ props.nodeData?.approvalList?.[0]?.endTime }}</uv-col>
                  <uv-col v-else-if="index === nodeList.length - 1" :style="{color: index > active ? '#969799' : '#333'}">{{ node.updateTime }}</uv-col>
                  <uv-col v-else-if="node.nodeType === '4'" :style="{color: index > active ? '#969799' : '#333'}">{{ node.nodeName }}</uv-col>
                  <!-- 上级岗位 上级部门，没有userTypeParams -->
                  <uv-col v-else-if="['5', '6'].includes(node.userType)" :style="{color: index > active ? '#969799' : '#333'}">
                    {{ {5:'上级岗位',6:'上级部门'}[node.userType] }}
                  </uv-col>
                  <!-- 多人审核方式 -->
                  <uv-col
                    :style="{color: index > active ? '#969799' : '#333'}"
                    v-else-if="
                      node.nodeType === '3' &&
                        (
                          node.doUserNames?.length ||
                          node.userTypeParams?.length ||
                          (active === index && approveUserName)
                        )
                    " >
                    {{ node.doUserNames?.length || (active === index && approveUserName) ? (node.doUserNames?.split(',')?.length ?? 0) + (active === index && approveUserName ? 1 : 0) : node.userTypeParams?.length || 0 }}人{{ {0:'依次审核',1:'会签',2:'或签'}[node.signType] }}
                  </uv-col>
                </div>
              </div>
              <!-- 节点名下的员工名称 -->
              <div class="flow-users">
                <div class="flow-users-box">
                  <!-- 已审批人 -->
                  <template v-if="node.doUserNames?.length">
                    <template v-if="node.doUserNames?.length">
                      <template v-for="(doUser, indexDo) in node.doUserNames.split(',').reverse()" :key="`doUser${indexDo}`">
                        <Personal :approved="active >= index" :name="doUser" />
                      </template>
                    </template>
                  </template>
                  <!-- 流程当前运行节点 审批人 -->
                  <template v-if="active === index && approveUserName">
                    <Personal :name="approveUserName" :active="active === index" />
                  </template>
                  <!-- 审批人、抄送人 -->
                  <template
                    v-if="
                      node.userTypeParams?.length &&
                        (
                          !node.doUserNames?.length &&
                          (active !== index || !approveUserName) ||
                          node.nodeType === '7'
                        )
                    ">
                    <template v-for="(person, indexPerson) in node.userTypeParams" :key="`person${indexPerson}`">
                      <Personal :name="person.name" :approved="node.nodeType === '7' && active > index" :active="active === index" />
                    </template>
                  </template>
                </div>
              </div>
            </uv-row>
            <uv-divider v-if="index < nodeList.length - 1"></uv-divider>
          </template>
        </uv-steps-item>
      </template>
    </uv-steps>
    <div class="flow-title">历程信息</div>
    <div class="approvalList">
      <uv-steps  direction="column" :active="(props.nodeData?.approvalList?.length ?? 1) - 1">
        <template v-for="(item, index) in props.nodeData?.approvalList?.length ? props.nodeData.approvalList : []" :key="index">
          <uv-steps-item>


            <template v-slot:title>
              <div class="approvalList-time">{{ item.endTime }}</div>
              <div class="approvalList-box">
              <div class="approvalList-title">
                <div class="approvalList-item">
                  <div class="approvalList-item-label">审核人：</div>
                  <div class="approvalList-item-value">{{ item.userName }}</div>
                </div>
                <div class="approvalList-item">
                  <div class="approvalList-item-label">审批结果：</div>
                  <div class="approvalList-item-value">{{ ['退回', '通过', '通过', '任务终止', '任务转派'][item.completeOption] }}</div>
                </div>
              </div>
              <div class="approvalList-content">
                <div class="approvalList-content-label">审批意见：</div>
                <div class="approvalList-content-value">{{ item.view || '无' }}</div>
              </div>
            </div>
            </template>
            
            
          </uv-steps-item>
        </template>
      </uv-steps>

    </div>
  </div>
</template>

<style lang="less" scoped>
.flex1 {
  flex: 1;
}

.flow {
  padding-bottom: 40rpx; /* 2rem × 20 = 40rpx */
  &-title {
    flex-wrap: wrap;
    margin: 32rpx 0 24rpx; /* 1.6rem×20=32rpx；1.2rem×20=24rpx */
    padding-left: 32rpx; /* 1.6rem×20=32rpx */
    font-size: 32rpx; /* 1.6rem×20=32rpx */
    font-weight: bold;
  }
  /* 人员卡片 */
  &-users {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    &-box {
      display: flex;
      flex-wrap: wrap;
    }
  }
  &-node {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 72rpx; /* 3.6rem×20=72rpx */
    height: 72rpx; /* 3.6rem×20=72rpx */
    background-color: #4773FC;
    border-radius: 12rpx; /* 保留 em 单位 */
    color: #fff;
    // font-size: 48rpx; /* 2.4rem×20=48rpx */
    /* 未激活 */
    &.inactive {
      background-color: #c8c9cc;
    }
    &.guide {
      background-color: #fff;
      border: 4rpx solid #07c160; /* 0.2rem×20=4rpx */
      color: #07c160;
    }
    &.unactive {
       background-color: #c8c9cc;
    }
    &-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: -8rpx; /* -0.4rem×20=-8rpx */
      bottom: -4rpx; /* -0.2rem×20=-4rpx */
      border-radius: 100%;
      border: 4rpx solid #fff; /* 0.2rem×20=4rpx */
      color: #fff;
      font-size: 20rpx; /* 1rem×20=20rpx */
      &.finish {
        background-color: #07c160;
      }
      &.inactive {
        background-color: #ff976a;
      }
    }
  }
  &-time {
    color: #969799;
    font-size: 24rpx; /* 1.2rem×20=24rpx */
  }
  &-user {
    margin-top: 4rpx; /* 0.2rem×20=4rpx */
    color: #969799;
    font-size: 28rpx;
  }
}

.flow {
  padding-left: 130rpx; /* 6.5rem×20=130rpx */
  :deep(.van-step__circle-container) {
    left: -60rpx; /* -3rem×20=-60rpx */
  }
  :deep(.van-step__line) {
    left: -60rpx; /* -3rem×20=-60rpx */
  }
  :deep(.uv-steps-item) {
    // .van-step {
      margin-top: 20rpx; /* 1rem×20=20rpx */
      padding-top: 0;
      margin-left: 50rpx;
      &:first-child {
        margin-top: 0;
      }
      // .van-step__title {
      //   display: flex;
      //   flex-direction: column;
      //   justify-content: center;
      //   min-height: 76rpx; /* 3.8rem×20=76rpx */
      // }
    // }
  }
}
.icon-user {
  font-size: 72rpx;
}
.approvalList {
  padding: 0 40rpx 20rpx; /* 2rem×20=40rpx；1rem×20=20rpx */
  color: #333;
  &-box {
    padding: 16rpx 0 0; /* 0.8rem×20=16rpx */
  }
  &-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &-item {
    display: flex;
    align-items: center;
    &-label {

    }
    &-value {

    }
  }
  &-content {
    display: flex;
    margin-top: 8rpx; /* 0.4rem×20=8rpx */
    &-label {

    }
    &-value {
      flex: 1;
      overflow: hidden;
      text-align: justify;
    }
  }
  :deep(.van-steps) {
    padding-left: 40rpx; /* 2rem×20=40rpx */
  }
}
.approvalList-box {
  .approvalList-item {
    .approvalList-item-label {
      font-size: 28rpx;
      color: #4773fc;
    }

    .approvalList-item-value {
      font-size: 28rpx;
      color: #4773fc;
    }
    
  }
}
.approvalList-content {
    .approvalList-content-label {
      font-size: 28rpx;
      color: #4773fc;
    }
    .approvalList-content-value {
      font-size: 28rpx;
      color: #4773fc;
    }
}
.approvalList-time {
    font-size: 28rpx;
    color: #4773fc;
}
.unactiveContent {
  .grey-text { 
    color: #969799;
  }

}
</style>
