<template>
  <div class="progress">
    <div
      class="changeTab"
      :class="[currentIndex == index ? `show${index}` : `changeTab${index}`]"
      v-for="(item, index) in tabList"
      :key="index"
      @click="change(index)"
    >
      {{ item.name }}
    </div>
    <!-- 进度管理 -->
    <div class="top" v-show="currentIndex == 0">
      <div class="left1"></div>
      <div class="right">
        <TopRight />
      </div>
    </div>
    <!-- 无人机 -->
    <div class="left2" v-if="currentIndex == 1">
      <UAV></UAV>
    </div>
    <!-- 全景成像 -->
    <div class="views" v-if="currentIndex == 2">
      <!-- <div class="left">
        <div class="leftone">
          <LeftOne />
        </div>
        <div class="lefttwo">
          <LeftTwo />
        </div>
        <div class="leftthree">
          <LeftThree />
        </div>
      </div> -->
      <div class="right">
        <iframe
          src="https://fjvsaps.jqmkj.com:20020/api/main/index?ak=ZJ4J0001&ts=1670286176897&token=%2BpldKJhzmMj5GUhAwJqEpYTsrQ4%3D&proId=2201-440106-04-01-829828-2001&proIdtoken=202212060821"
        ></iframe>
      </div>
    </div>
    <div class="bottom" v-if="currentIndex == 0">
      <vue-scroll :ops="ops">
      <div class="list progress" >
        <div
          class="list-item progress-item"
          v-for="(item, index) in stageList"
          :key="index"
        >
        <div class="partingLine">
          ............
        </div>
        <img
              :src="
                item.status == 0
                  ? require('@/assets/images/zjsj/doing.png')
                  : item.status == 1
                  ? require('@/assets/images/zjsj/doing.png')
                  : require('@/assets/images/zjsj/ed.png')
              "
            />
          <div class="info">
            <span class="label" style="font-size:16px">{{ item.taskName }}</span>
            <span class="label" style="font-size:12px">{{ item.startDate }}</span>
          </div>
         
        </div>
      </div>
    </vue-scroll>
    </div>
  </div>
</template>

<script>
import {
  //  listProgressOfTheTask,
  getProgressTaskParentListApi,
  } from "@/assets/js/api/zhongjianFourth";
import { getProjectDetail } from "@/assets/js/api/baseInfo.js";
import TopRight from "./topRight.vue";
import UAV from './uav.vue'
// import LeftOne from "./leftOne.vue";
// import LeftTwo from "./leftTwo.vue";
// import LeftThree from "./leftThree.vue";
import { mapState } from "vuex";
import { resizeFn } from '../../../../components/videoModule/isc_plugin/video_isc_plugin';

export default {
  components: {
    TopRight,
    UAV,

    //  LeftOne, LeftTwo, LeftThree
  },
  data() {
    return {
      projectData: {
        constructionStage: 10,
      },
      ops: {
        vuescroll: {
          wheelDirectionReverse: true,
        },
      },
      // 完工的数量
      numberOfCompleted: 2,
      // stageList: this.$t("message.companyDiagram.CONSTRUCTIONSTAGE"),
      stageList: [], //施工阶段,
      // 设备列表
      options: [],
      firstValue: undefined,
      secondValue: undefined,
      currentIndex: 0,
      tabList: [
        { name: "进度管理" },
        { name: "无人机巡检" },
        { name: "全景成像测距" },
      ],
    };
  },
  created() {
    this.getDataDateils();
    this.getListProgressData()
  },
  computed: {
    ...mapState(["projectSn"]),
  },
  methods: {
    change(val) {
      // console.log("点击的", val);
      this.currentIndex = val;
    },
    getDataDateils() {
      let data = { projectSn: this.$store.state.projectSn };
      getProjectDetail(data).then((res) => {
        if (res.code == 200) {
          // console.log("查询进度", res);
          this.projectData = res.result;
        }
      });
    },
    //获取进度条数据
    getListProgressData(){
      getProgressTaskParentListApi({
        projectSn:this.$store.state.projectSn
      }).then(res=>{
        this.stageList=res.result

        this.stageList[this.stageList.length-1].startDate = "2016-01-01"
        this.stageList.sort(function(a, b) {
        let obj1 = a['startDate']
        let obj2 = b['startDate']
        const val1 = Math.floor(new Date(obj1).getTime() / 1000)
        const val2 = Math.floor(new Date(obj2).getTime() / 1000)
        return val1 - val2
        // return val2 - val1
      });
      console.log('进度数据',res);
      })
    }
    
    // getList() {
    //   listProgressOfTheTask({
    //     projectSn: this.projectSn,
    //     isNoStart: false,
    //   }).then((res) => {
    //     console.log("查询步骤条列表: ", res);
    //     // state 0未开始, 1进行中, 2已完成
    //     const progress = this.progress;
    //     res.result.forEach((item) => {
    //       if (item.state == 2) {
    //         progress.push({
    //           name: item.subitemProjectName,
    //           date: item.actualEndTime,
    //         });
    //         this.numberOfCompleted++;
    //         console.log("this.numberOfCompleted: ", this.numberOfCompleted);
    //       } else {
    //         progress.push({
    //           name: item.subitemProjectName,
    //           date: item.startTime,
    //         });
    //       }
    //     });
    //     console.log(this.progress);
    //   });
    // },
  },
};
</script>

<style lang="less" scoped>
.progress {
  width: 100%;
  height: 100%;
  margin-top: 20px;
  position: relative;
  overflow: hidden;

  // background: url(../assets/temp/4.png) no-repeat;
  // background-size: 100% 100%;
  .changeTab {
    line-height: 38px;
    text-align: center;
    z-index: 99;
    cursor: pointer;
  }
  .changeTab0 {
    position: absolute;
    top: 5%;
    left: 30%;
    width: 212px;
    height: 38px;
    background-image: url(../assets/temp/tab.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .changeTab1 {
    position: absolute;
    top: 5%;
    left: 40%;
    width: 212px;
    height: 38px;
    background-image: url(../assets/temp/tab.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .changeTab2 {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 212px;
    height: 38px;
    background-image: url(../assets/temp/tab.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .show0 {
    position: absolute;
    top: 5%;
    left: 30%;
    width: 212px;
    height: 38px;
    z-index: 98;
    background-image: url(../assets/temp/untab.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .show1 {
    position: absolute;
    top: 5%;
    left: 40%;
    width: 212px;
    z-index: 98;
    height: 38px;
    background-image: url(../assets/temp/untab.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  .show2 {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 212px;
    z-index: 98;
    height: 38px;
    background-image: url(../assets/temp/untab.png);
    background-size: 100%;
    background-repeat: no-repeat;
  }

  .left2 {
    width: 100%;
    height: 100%;
   
    color: #fafbfa;
  }

  .top {
    height: 74%;
    display: flex;
    justify-content: space-between;
    .left1 {
      width: 80%;
      height: 100%;
      background-image: url(../assets/temp/progress.png);
      background-repeat: no-repeat;
      background-size: 100%;
      color: #fafbfa;
    }
    .right {
      width: calc(20% - 25px);
      height: 100%;
    }
  }
}
.views {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  // .left {
  //   width: 22%;
  //   margin-right: 1%;
  //   height: 100%;
  //   .leftone {
  //     height: 40%;
  //   }
  //   .lefttwo {
  //     height: 30%;
  //   }
  //   .leftthree {
  //     height: 30%;
  //   }
  // }
  .right {
    width: 100%;
    height: 98%;
    // background-image: url(../assets/temp/tab3.png);
    background-repeat: no-repeat;
    background-size: 100%;
    color: #fafbfa;
    iframe {
      width: 100%;
      height: 100%;
    }
  }
}

::v-deep .el-input__suffix {
  display: none;
  height: 30px;
}

::v-deep .el-input--suffix .el-input__inner {
  border: 0;
  border-radius: 4px;
  height: 30px;
  padding-left: 30px;
  padding-right: 0px;
  color: #fff;
  background: #506173;
  // background-image: url('../assets/images/common/triangle.png');
}
.bottom {
  height: 26%;
  width: 100%;
  color: #fff;
  display: grid;
  place-items: center;
  margin-left: 20px;
  // overflow: scroll;

  // display: flex;
  // align-items: center;
  // position: relative;
  .progress {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;

    .progress-item {
      position: relative;
      display: flex;
      flex-shrink: 0;
      flex-direction: column;
      align-items: center;
      width: 125px;
      color: #fff;
      margin: 0 20px 0 40px;
      .progress-item-dot {
        width: 10px;
        height: 10px;
        background-color: #fff;
        border-radius: 50%;

        &::after {
          content: "";
          position: absolute;
          top: 4px;
          transform: translateX(-99%);
          display: block;
          width: 125px;
          height: 2px;
          background: #fff;
        }

        &.active {
          &::after {
            background: #6dc6d8;
          }
        }

        &::before {
          content: "";
          position: relative;
          z-index: 9;
          display: block;
          width: 10px;
          height: 10px;
          background-color: #fff;
          border-radius: 50%;
        }
      }

      .info {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 10px;
        height: 60px;
        margin-left: -125px;
        .label {
          margin-bottom: 20px;
        }
      }

      &:first-child {
        .progress-item-dot {
          &::after {
            display: none;
          }
        }
      }
    }
    .progress-item:nth-child(7) {
      width: 135px;
    }
    .partingLine{
       margin:0 0 0 65px;
}
img{
  width: 40px;
  height: 50px;
  margin: -30px 0 0px -121px;
}
  }
}

</style>
