<template>
  <Card title="实际进度">
    <!-- <div class="topDiv">
      <div class="buildindDiv">
        楼层
        <el-select placeholder="请选择" @change="checkBuild" v-model="floorId">
          <el-option
            v-for="(item, index) in buildList"
            :key="index"
            :value="item.id"
            :label="item.name"
          >
          </el-option>
        </el-select>
      </div>
      <div class="buildindDiv">
        专业
        <el-select placeholder="请选择" @change="checkMajor" v-model="major">
          <el-option
            v-for="(item, index) in MajorList"
            :key="index"
            :value="item"
            :label="item"
          >
          </el-option>
        </el-select>
      </div>
    </div> -->
    <div class="list" style="position: relative; height: 130%">
      <vue-scroll v-if="todoList.length">
        <div class="list-item" v-for="(item, index) in actualList" :key="index">
          <!-- <div class="delay orange">
            <span
              class="delayDiv"
              :class="[
                item.dataTypeName === '已完成'
                  ? 'Color2'
                  : item.dataTypeName === '已逾期'
                  ? 'Color1'
                  : item.dataTypeName === '进行中'
                  ? 'Color3'
                  : item.dataTypeName === '未开始'
                  ? 'Color5'
                  : 'Color4',
              ]"
              >{{ item.dataTypeName }} {{ Number(item.day) }} 天</span
            >
           
          </div> -->

          <!-- <div class="endTime">
            <div class="todo" style="margin-left:20px;padding-top: 30px;">地下室结构施工
            </div>

          </div> -->
          <div class="endTime">
            <div class="todo" style="padding: 20px 0 0 20px">
              {{ item.taskName }}
            </div>
          </div>

          <!-- <el-progress :percentage="item.progressRatio"></el-progress> -->
          <div class="startTime">
            <img
              style="width: 16px; height: 16px"
              src="~@/assets/images/zjsj/dateIcon.png"
              alt=""
            />
            <span class="grey">计划开始时间：</span
            ><span class="blue">{{ item.startDate }}</span>
          </div>
          <div class="endTime">
            <img
              style="width: 16px; height: 16px"
              src="~@/assets/images/zjsj/dateIcon.png"
              alt=""
            />
            <span class="grey">计划结束时间：</span
            ><span class="blue">{{ item.finishDate }}</span>
          </div>
          <div class="endTime">
            <img
              style="width: 16px; height: 16px"
              src="~@/assets/images/zjsj/dateIcon.png"
              alt=""
            />
            <span class="grey">实际开始时间：</span
            ><span class="blue">{{ item.actualStartDate }}</span>
          </div>
          <div class="endTime">
            <span class="grey">状态：</span>
            <span style="color: orange" v-if="item.status == 1">{{
              item.status == 1 ? "提前" : item.status == 2 ? "正常" : "延迟"
            }}</span>
            <span style="color: green" v-if="item.status == 2">{{
              item.status == 1 ? "提前" : item.status == 2 ? "正常" : "延迟"
            }}</span>
            <span style="color: red" v-if="item.status == 3">{{
              item.status == 1 ? "提前" : item.status == 2 ? "正常" : "延迟"
            }}</span>
          </div>
        </div>
      </vue-scroll>
      <div
        v-else
        class="empty"
        style="
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
        "
      >
        <img src="@/assets/images/noData3.png" />
        <div style="text-align: center; color: #5b626b; font-size: 14px">
          暂无数据
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import {
  getLastSevenDaysApi,
  getProjectFloorApi, //楼层列表
  getMajorListByFloorIdApi, //专业列表
  getactualProgressApi,
  getProgressTApi,
} from "@/assets/js/api/zhongjianFourth";
import { mapState } from "vuex";

import Card from "../components/Card.vue";
export default {
  components: { Card },
  data() {
    return {
      // 激活的tab
      activeTab: 0,
      todoList: [],
      buildList: [],
      floorId: "",
      MajorList: [],
      major: "",
      actualList: [],
    };
  },
  created() {
    this.getList();
    this.getData();
  },
  computed: {
    ...mapState(["projectSn"]),
  },
  methods: {
    getData() {
      //查询实际进度
      getProgressTApi({ projectSn: this.$store.state.projectSn }).then(
        (res) => {
          console.log("实际进度数据", res);
          this.actualList = res.result;
        }
      );
    },
    //------------分割线
    checkBuild(val) {
      console.log("楼层改动值 ： ", val);
      this.floorId = val;
      this.getMajorList();
    },
    checkMajor(val) {
      console.log("专业改动值 ： ", val);
      this.major = val;
      this.getLastSevenDaysData();
    },
    //查询楼层列表
    getList() {
      getProjectFloorApi({ projectSn: this.$store.state.projectSn }).then(
        (res) => {
          console.log("楼层数据", res);
          this.buildList = res.result;
          if (res.result.length >= 1) {
            this.floorId = res.result[0].id;
            this.getMajorList();
          }
        }
      );
    },
    //查询专业
    getMajorList() {
      getMajorListByFloorIdApi({
        floorId: this.floorId,
      }).then((res) => {
        console.log("专业", res.result);
        this.MajorList = res.result;
        if (res.result.length >= 1) {
          this.major = res.result[0];
          this.getLastSevenDaysData();
        }
      });
    },
    // 进度任务列表
    getLastSevenDaysData() {
      getactualProgressApi({
        floorId: this.floorId,
        major: this.major,
      }).then((res) => {
        this.todoList = res.result;
        //         day 已延期：状态为未开始；已逾期：状态为进行中;为空时表示正常

        //  status 状态，0未开始 ,1进行中，2已完成 默认未开始
        this.todoList.forEach((res) => {
          if (res.status == 0 && res.day != null) {
            res.dataTypeName = "已延期";
          } else if (res.status == 1 && res.day != null) {
            res.dataTypeName = "已逾期";
          } else if (res.status == 0) {
            res.dataTypeName = "未开始";
          } else if (res.status == 1) {
            res.dataTypeName = "进行中";
          } else if (res.status == 2) {
            res.dataTypeName = "已完成";
          }
        });
        console.log("进度任务列表数据", this.todoList);
      });
    },
    compareTime(gettime) {
      var today = new Date(); //获取当前时间
      gettime = gettime.replace(/-/g, "/");
      var endTime = new Date(gettime); //自己的时间
      console.log(
        "today",
        today + ":endTime -",
        endTime + "--today.getTime() :",
        today.getTime() + ": endTime.getTime() -- ",
        endTime.getTime()
      );
      if (today.getTime() > endTime.getTime()) {
        return true;
      } else {
        return false;
      }
    },
    // 计算时间差
    dateDiff(date1, date2) {
      let date1Str = date1.split("-"); //将日期字符串分隔为数组,数组元素分别为年.月.日
      //根据年 . 月 . 日的值创建Date对象
      let date1Obj = new Date(date1Str[0], date1Str[1] - 1, date1Str[2]);
      let date2Str = date2.split("-");
      let date2Obj = new Date(date2Str[0], date2Str[1] - 1, date2Str[2]);
      let date3Obj = new Date();
      console.log(
        "date1Obj",
        date1Obj + ":date2Str -",
        date2Str + "--date3Obj :",
        date3Obj
      );

      let t1 = date1Obj.getTime(); //开始时间
      let t2 = date2Obj.getTime(); //结束时间
      let t3 = date3Obj.getTime(); //
      let dateTime = 1000 * 60 * 60 * 24; //每一天的毫秒数
      let minusDays = Math.floor((t2 - t1) / dateTime); //计算出两个日期的天数差
      let halfyear = Math.floor((t3 - t1) / dateTime); //计算出两个日期的天数差
      let days = Math.abs(minusDays); //取绝对值
      let halfyeardays = Math.abs(halfyear); //取绝对值
      this.diff = days + 1;
      return days + 1;
    },
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
  },
};
</script>

<style lang="less" scoped>
.tabs {
  display: flex;
  color: #fff;
  .tab {
    width: 100px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    &.checked {
      color: #2de1fa;
    }
  }
}
.topDiv {
  display: flex;
  .buildindDiv {
    width: 220px;
    height: 50px;
    .el-select {
      // background: transparent;
      width: 120px;
      margin: 20px 15px 0 0;
      //   background: url("~@/assets/images/zjsj/frameBG.png") no-repeat;
      // background-size: 100% 100%;
      background: transparent;
    }
  }
  ::v-deep .el-input--suffix .el-input__inner {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid #66d3d8 !important ;
    z-index: 999;
  }
  ::v-deep .el-select-dropdown__item {
    width: 100px !important;
  }
}

.list {
  padding-top: 20px;
  // padding-left: 25px;
  height: calc(100% - 17px);
  color: #fff;
  .list-item {
    width: 400px;
    height: 220px;
    background: url("~@/assets/images/zjsj/frameBG.png") no-repeat;
    background-size: 88% 100%;
    font-size: 16px;
    .todo {
      width: 330px;
      font-size: 24px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &:not(:last-child) {
      margin-bottom: 20px;
    }
    &:not(:first-child) {
      // margin-top: 50px;
    }
    div {
      &:not(:first-child) {
        margin-top: 15px;
        margin-left: 20px;
      }
    }
  }
  .delayDiv {
    width: 120px;
    height: 30px;
    line-height: 30px;
    background: url("~@/assets/images/zjsj/framBG2.png") no-repeat;
    background-size: 100% 100%;
    font-size: 14px;
    margin-left: 20px;
    text-align: center;
  }
}
::v-deep .el-progress-bar {
  width: 85%;
}
::v-deep .el-progress__text {
  color: #fff;
}
::v-deep .el-progress-bar__inner {
  background-color: #5ce2f6;
}
.grey {
  color: #ccc;
  margin-left: 10px;
  font-weight: normal;
}
.blue {
  color: #66d4d9;
}
.orange {
  color: #f56c35;
}

.Color1 {
  color: red;
  display: inline-block;
  margin-top: 20px;
}
.Color2 {
  color: green;
  display: inline-block;
  margin-top: 20px;
}
.Color3 {
  color: yellow;
  display: inline-block;
  margin-top: 20px;
}
.Color4 {
  color: red;
  display: inline-block;
  margin-top: 20px;
}
.Color5 {
  color: gray;
  display: inline-block;
  margin-top: 20px;
}
</style>
