<template>
  <div class="L-projectProgress" id="L-size-main">
    <div class="projectProgress-title" id="L-header">【项目进展】</div>
    <div class="schedule-timeline" :style="Mystyle">
      <el-timeline>
        <el-timeline-item
          v-for="(activity, index) in activities"
          :key="index"
          size="large"
          :class="activity.status == 1 || activity.status == 0 ? 'timeline-item-green' : activity.status == 2 ? 'timeline-item-red' : ''"
        >
          <div slot="dot" class="timeline-dot" :class="activity.status == 2 ? 'timeline-dot-red' : ''">
            <i class="icon iconfont" :class="activity.status == 1 || activity.status == 0 ? 'icon-jc-dian-green' : activity.status == 2 ? 'icon-jc-dian' : ''"></i>
          </div>
          <el-card> <!-- 去除阴影  shadow="never -->
            <div class="schedule-content">
              <div class="card-content-left">
                <div class="schedule-card-title">提交项目材料</div>
                <div class="card-content-one" v-show="activity.status == 0">
                  <span>提醒</span>
                  <span>已提交xxx材料</span>
                </div>
                <div class="card-content-one" v-show="activity.status == 2">
                  <span>提醒</span>
                  <span>请xxx专家审核</span>
                </div>
                <div class="card-content-one" v-show="activity.status == 1">
                  <span>审核结果</span>
                  <span>xxx审核通过</span>
                </div>
                <div class="card-content-two" v-show="activity.status == 1">
                  <span>审核意见</span>
                  <span>xxxxxx</span>
                </div>
                <div class="card-content-two" v-show="activity.status == 0">
                  <span>附件</span>
                  <a>xxx.doc</a>
                </div>
                <div class="card-content-three" v-show="activity.status !== 2">2023-05-11</div>
                <div class="card-content-three-red" v-show="activity.status == 2">请于2023-06-20前审核</div>
              </div>
              <div class="card-content-right" v-if="activity.status !== 0">
                <i class="icon iconfont" :class="activity.status == 2 ? 'icon-jc-daishenpi1-copy' : activity.status == 1 ?  'icon-jc-shenpitongguo-copy' : ''"></i>
              </div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>
<script>
import { declarationRecordsId } from "@/api/jin_ji_hu/project/index"
export default {
  data() {
    return {
      activities: [{
        status: 2,
      }, {
        status: 1,
      }, {
        status: 1,
      }, {
        status: 0,
      }],
      flow:[],
      Mystyle:{
        height:"",
      }
    }
  },
  mounted() {
    this.cancalDebounce();
    window.addEventListener('resize', this.cancalDebounce);
    
    this.getFlow(this.$route.query.userId)
  },
  destroyed() {
    window.removeEventListener('resize', this.cancalDebounce);
  },
  methods:{
    getFlow(id){
      declarationRecordsId(id).then(res=>{
        this.flow = res.data;
      })
    },
    // 屏幕尺寸变化
    cancalDebounce(){
      const element = document.getElementById('L-size-main'); // 通过元素的 ID 获取元素
      const header = document.getElementById('L-header'); // 通过元素的 ID 获取元素
      const elementHeight = element.offsetHeight;
      const headerHeight = header.offsetHeight;
      this.Mystyle.height = elementHeight - headerHeight - 10 + 'px';
    }
  },
}
</script>
