<template>
  <div class="comp-content">
    <el-drawer
      v-model="visible"
      :size="400"
      title="审核状态"
      :close-on-click-modal="false"
      @close="closeFun"
    >
      <div class="content">
        <div class="step-list">
          <div v-for="(item, index) in stepList" :key="index" class="step-item" :class="{ active: index <= currentIndex }">
            <div class="left">
              <div class="pic">
                <el-icon :size="18"><CircleCheck class="icon" /></el-icon>
              </div>
            </div>
            <div class="right">
              <div class="item">
                <el-tag v-if="item.nodeStatus === 2" type="success">{{ NODE_STATUS[item.nodeStatus] }}</el-tag>
                <el-tag v-if="item.nodeStatus === 1" type="warning">{{ NODE_STATUS[item.nodeStatus] }}</el-tag>
                <el-tag v-if="item.nodeStatus === 0" type="info">{{ NODE_STATUS[item.nodeStatus] }}</el-tag>
              </div>
              <div class="item">{{ item.nodeName }}：{{ item.nodeUserName }}</div>
              <div v-if=" item.showTime" class="item">操作时间：{{ item.showTime }}</div>
              <div v-if="item.approveDesc" class="des">
                <div class="tip">
                  审核人添加了评论：
                </div>
                <div class="text">
                  {{ item.approveDesc }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { CircleCheck } from '@element-plus/icons-vue';
import { systemQueryApproveFlowStatusApi } from '@/api/system/systemApprove';

// TODO 接入字典
const NODE_STATUS: any = {
  '0': '未审批',
  '1': '审批中',
  '2': '已完成',
};

interface Props {
  modelValue: boolean;
  flowId: string;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: false,
  flowId: '',
});

watch(() => props.modelValue, (val: boolean) => {
  visible.value = val;
  if (val) {
    getDetailDataFun();
  } else {
    currentIndex.value = 0;
    stepList.value = [];
  }
});

const emit = defineEmits(['update:modelValue']);

const stepList = ref<any>([]);

const visible = ref(false);
const currentIndex = ref(0);

const getDetailDataFun = () => {
  const params = {
    flowId: props.flowId,
  };
  systemQueryApproveFlowStatusApi(params).then((res: any) => {
    if (res.code === 200) {
      res.data.forEach((item: any, index: number) => {
        if (item.nodeStatus > 0) {
          currentIndex.value = index;
        }
      });
      stepList.value = res.data;
    }
  });
};

const closeFun = () => {
  emit('update:modelValue', false);
};
</script>

<style lang="scss" scoped>
.comp-content {
  .content {
    width: 100%;
    height: 100%;
    .step-list {
      display: flex;
      flex-direction: column;
      .step-item {
        flex: 1;
        display: flex;
        padding-bottom: 10px;
        &:last-child {
          ::after {
            display: none;
          }
        }
        &.active {
          .left {
            &::after {
              background-color: var(--el-color-success);
            }
            .pic {
              .icon {
                color: var(--el-color-success);
              }
            }
          }
        }
        .left {
          position: relative;
          &::after {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            bottom: -10px;
            margin-left: -1px;
            width: 2px;
            background-color: var(--el-text-color-disabled);
          }
          .pic {
            position: relative;
            width: 20px;
            height: 20px;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--el-bg-color);
            .icon {
              color: var(--el-text-color-disabled);
            }
          }
        }
        .right {
          flex: 1;
          padding: 0 10px 10px;
          .item {
            font-size: 14px;
            color: var(--el-text-color-regular);
            margin-bottom: 4px;
          }
          .des {
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 14px;
            background-color: var(--el-bg-color-page);
            .tip {
              color: var(--el-text-color-regular);
              font-size: 12px;
              margin-bottom: 4px;
            }
            .text {
              color: var(--el-text-color-regular);
            }
          }
        }
      }
    }
  }
}
</style>
