<!-- 进度 -->
<script lang="ts" setup name="ProgressBar">
import { ElMessage } from 'element-plus'
import { detailQualityRegistration } from '@/api/quality/internal/registration'
const $router = useRouter()
// 内部审核进度
const scheduleList = ref([
  {
    stageType: '1',
    stageTypeName: '内审组建立',
    scheduleTime: '2020.11.05',
    remarks: '',
    isCompleted: '1', // 是否完成(0 未完成 1 完成)
    scheduleUserList: [] as any[],
  },
  {
    stageType: '2',
    stageTypeName: '内部审核计划公示',
    scheduleTime: '2020.11.05',
    remarks: '',
    isCompleted: '1', // 是否完成(0 未完成 1 完成)
    scheduleUserList: [] as any[],
  },
  {
    stageType: '3',
    stageTypeName: '《内部审核检查表》编制',
    scheduleTime: '2020.11.05',
    remarks: '',
    isCompleted: '1', // 是否完成(0 未完成 1 完成)
    scheduleUserList: [] as any[],
  },
  {
    stageType: '4',
    stageTypeName: '首次会议',
    scheduleTime: '2020.11.05',
    remarks: '',
    isCompleted: '1', // 是否完成(0 未完成 1 完成)
    scheduleUserList: [] as any[],
    scheduleFileList: [] as any[],
  },
  {
    stageType: '5',
    stageTypeName: '现场审核',
    scheduleTime: '2020.11.05',
    remarks: '',
    isCompleted: '1', // 是否完成(0 未完成 1 完成)
    scheduleUserList: [] as any[],
  },
  {
    stageType: '6',
    stageTypeName: '内审组内部会议',
    scheduleTime: '2020.11.05',
    remarks: '',
    isCompleted: '0', // 是否完成(0 未完成 1 完成)
    scheduleUserList: [] as any[],
    scheduleFileList: [] as any[],
  },
  {
    stageType: '7',
    stageTypeName: '交换意见',
    scheduleTime: '2020.11.05',
    remarks: '',
    isCompleted: '0', // 是否完成(0 未完成 1 完成)
    scheduleUserList: [] as any[],
  },
  {
    stageType: '8',
    stageTypeName: '末次会议',
    scheduleTime: '2020.11.05',
    remarks: '',
    isCompleted: '0', // 是否完成(0 未完成 1 完成)
    scheduleUserList: [] as any[],
    scheduleFileList: [] as any[],
  },
  {
    stageType: '9',
    stageTypeName: '措施制定',
    scheduleTime: '2020.11.05',
    remarks: '',
    isCompleted: '0', // 是否完成(0 未完成 1 完成)
    scheduleUserList: [] as any[],
  },
  {
    stageType: '10',
    stageTypeName: '措施实施',
    scheduleTime: '2020.11.05',
    remarks: '',
    isCompleted: '0', // 是否完成(0 未完成 1 完成)
    scheduleUserList: [] as any[],
  },
  {
    stageType: '11',
    stageTypeName: '效果验证',
    scheduleTime: '2020.11.05',
    remarks: '',
    isCompleted: '0', // 是否完成(0 未完成 1 完成)
    scheduleUserList: [] as any[],
  },
  {
    stageType: '12',
    stageTypeName: '记录存档',
    scheduleTime: '2020.11.05',
    remarks: '',
    isCompleted: '0', // 是否完成(0 未完成 1 完成)
    scheduleUserList: [] as any[],
  },
]) as any
</script>

<template>
  <div class="workbench-content-pro-container">
    <div v-for="(item) in scheduleList" :key="item.stageTypeName" class="content-pro">
      <div class="circle" :class="item.isCompleted === '1' ? 'true' : 'false'" />
      <div class="name">
        {{ item.stageTypeName }}
      </div>
      <div class="time">
        {{ item.scheduleTime }}
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.workbench-content-pro-container {
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top: 15px;
  position: relative;

  &::after {
    display: block;
    content: "";
    width: 90%;
    height: 3px;
    background-color: #5d93ff;
    position: absolute;
    top: 6px;
    z-index: 1;
    padding: 0 15px;
    left: 50%;
    transform: translateX(-50%);
  }

  .content-pro {
    text-align: center;
    position: relative;
    z-index: 2;

    .circle {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      margin: 0 auto;
    }

    .true {
      background-color: #5d93ff;
    }

    .false {
      background-color: #666;
    }

    .name,
    .time {
      margin-top: 10px;
    }
  }

  .title {
    font-size: 16px;
    padding: 0;
    margin: 0 0 6px;
    white-space: nowrap;
  }
}
</style>