<template>
  <div>
    <!-- 进度管理 -->
    <div v-if="false && COMPANY != 'longguang'" class="fullHeight">
      <!-- <vue-scroll>
          <img  src="@/assets/images/dataBoard/6.png" style="height:auto;width:100%"/>
          </vue-scroll> -->
      <div class="aside fullHeight">
        <div class="blockBox">
          <div class="blockTitle"><!-- 倒计时 -->{{$t('message.dataBoard.countDown')}}
          <!-- 配置项目竣工日期 -->
              <el-tooltip class="configBtn" effect="dark" :content="$t('message.dataBoard.configProjectCompleteDate')" placement="top">
                  <i class="el-icon-s-tools" @click="dialogVisible=true"></i>
              </el-tooltip>
          </div>
          <div class="blockContent">
              <p>
                <!-- 项目整体倒计时： -->
                {{$t('message.dataBoard.projectCountDown')+':'}}
              </p>
              <div class="days">
                  <span class="num">{{endDate?leftDays:'--'}}</span><span>
                    <!-- 天 -->
                    {{$t('message.dataBoard.textList')[0]}}
                  </span>
              </div>
              <img src="@/assets/images/daysBG.png" class="daysBG">
              <p class="endDate"><!-- 竣工时间： -->{{$t('message.dataBoard.completeTime')+':'}}{{endDate}}</p>
              <!-- <div class="numContent">
                  <div class="numBox">
                      <div class="bg1 medium">
                      <span class="num">10</span>
                    </div>
                      <p>完成任务数</p>
                  </div>
                  <div class="numBox">
                      <div class="bg1 medium">
                      <span class="num">10</span>
                    </div>
                      <p>完成率</p>
                  </div>
                  <div class="numBox">
                      <div class="bg1 medium">
                      <span class="num">10</span>
                    </div>
                      <p>延期天数</p>
                  </div>
              </div> -->

          </div>
        </div>
        <div class="blockBox">
          <div class="blockTitle">
            <!-- 状态统计 -->
            {{$t('message.dataBoard.statusStatistics')}}
          </div>
          <div class="blockContent">
              <div class="companyChart" ref="companyChart"></div>
          </div>
        </div>
        <div class="blockBox">
          <div class="blockTitle"><!-- 进度预警 -->{{$t('message.dataBoard.progressAlarm')}}
              <el-select v-model="alarmType" size="mini" class="alarmTypeBox" @change="changeAlarmType">
                <!-- 按人员 -->
                  <el-option :value="1" :label="$t('message.dataBoard.accordingtoPeople')"></el-option>
                  <!-- 按任务 -->
                  <el-option :value="2" :label="$t('message.dataBoard.accordingtoTask')"></el-option>
              </el-select>
          </div>
              <div class="blockContent">
                  <vue-scroll>
                      <table class="greenTable" v-show="alarmType==1">
                      <thead>
                          <tr>
                          <th>
                              <!-- 人员姓名 -->
                              {{$t('message.dataBoard.peopleName')}}
                          </th>
                          <th>
                              <!-- 超期任务数 -->
                              {{$t('message.dataBoard.extendedTaskNum')}}
                          </th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr v-for="(item, index) in alarmList" :key="index">
                          <td>
                              {{ item.personChargeName }}
                          </td>
                          <td>{{ item.num }}</td>
                          </tr>
                      </tbody>
                      </table>
                      <table class="greenTable" v-show="alarmType==2">
                      <thead>
                          <tr>
                          <th>
                              <!-- 任务 -->
                              {{$t('message.dataBoard.task')}}
                          </th>
                          <th>
                              <!-- 负责人 -->
                              {{$t('message.dataBoard.principal')}}
                          </th>
                          <th>
                              <!-- 超期天数 -->
                              {{$t('message.dataBoard.extendedDays')}}
                          </th>
                          </tr>
                      </thead>
                      <tbody>
                          <tr v-for="(item, index) in alarmList" :key="index">
                          <td>
                              {{ item.subitemProjectName }}
                          </td>
                          <td>{{ item.personChargeName }}</td>
                          <td>{{ item.overdueDayNum }}</td>
                          </tr>
                      </tbody>
                      </table>
                      <div
                      class="placeholderBox placeholderBox2"
                      v-if="alarmList.length == 0"
                      >
                      <img src="@/assets/images/noData3.png" alt="" srcset="" />
                      <p>
                        <!-- 暂无数据 -->
                        {{$t('message.dataBoard.nodata')}}
                      </p>
                      </div>
                  </vue-scroll>
          </div>
        </div>
      </div>
      <div class="right fullHeight">
        <div class="blockBox blockBox3" style="height: calc(66.66% - 25px)">
          <div class="blockTitle">
            <!-- 甘特图 -->
              {{$t('message.dataBoard.ganttChart')}}
          </div>
          <div class="blockContent">
              <iframe :src="'doc/ExtGantt/Ext甘特图.html?url='+baseURL+'&projectSn='+$store.state.projectSn+'&token='+$store.state.userInfo.token" id="iframe" class="Extgantt" > </iframe>
          </div>
        </div>
        <div class="blockBox blockBox2">
          <div class="blockTitle">
            <!-- 多维计划 -->
            {{$t('message.dataBoard.manyDimensionsPlan')}}
          </div>
          <div class="blockContent" style="    display: flex;align-items: center;">
            <div class="stageBox">
              <vue-scroll :ops="ops" ref="stageScroll">
                <div
                  class="stageItem"
                  v-for="(item, index) in stageList"
                  :key="index"
                  :class="
                    projectData.constructionStage - 1 > index
                      ? 'finish'
                      : projectData.constructionStage - 1 == index
                      ? 'ongoing'
                      : ''
                  "
                >
                  <div class="statusImg"></div>
                  <p>{{ item.name }}</p>
                  <div class="line" v-show="stageList.length != index + 1"></div>
                </div>
              </vue-scroll>
            </div>
          </div>
        </div>
      </div>
      <el-dialog :modal-append-to-body="false" :title="$t('message.dataBoard.configProjectCompleteDate')" :visible.sync="dialogVisible" width="667px">
          <div style="text-align:center;margin-bottom:30px">
              <el-date-picker size="medium"
              v-model="endDate"
              type="date"
              :placeholder="$t('message.dataBoard.chooseDate')" value-format="yyyy-MM-dd">
          </el-date-picker>
          <!-- <br> -->
          <el-button type="primary" size="medium" @click="saveDataFn" style="margin-left: 20px">
            <!-- 保存 -->
            {{$t('message.dataBoard.save')}}
          </el-button>
          </div>

      </el-dialog>
    </div>
    <!-- <PlanTwo v-else></PlanTwo> -->
    <img src="@/assets/images/dataBoard/wisdomBuild/main.png" style="width: 100%" alt="" />
  </div>
</template>

<script>
import echarts from 'echarts4';;
import { getProjectDetail,getProjectExtendInfoApi,editProjectExtendApi } from "@/assets/js/api/baseInfo.js";
import {selectProgressItemStatisticsApi,
selectProgressItemOverdueListApi,selectPersonOverdueProgressItemNumListApi} from "@/assets/js/api/dataBoard.js"
import {GetDateStr} from "@/assets/js/util"
import PlanTwo from "./plan4";
export default {
  data() {
    return {
      ops: {
        vuescroll: {
          // wheelScrollDuration: 0,
          wheelDirectionReverse: true,
        },
      },
      stageList: this.$t("message.companyDiagram.CONSTRUCTIONSTAGE"),
      projectData: {
        constructionStage: 10,
        videoUrl: "",
      },
      alarmList:[],
      alarmType:1,
      endDate:'',
      dialogVisible:false,
      leftDays:0,
      baseURL:'',
      COMPANY:""
    };
  },
    components: {
        PlanTwo,
    },
    created(){
        this.COMPANY = COMPANY
        console.log(COMPANY);
    },
  mounted() {
      this.baseURL = this.$http.defaults.baseURL;
    this.getDataDateils();
    this.getData()
    this.getData3()
  },
  methods: {
      saveDataFn(){
          if(this.endDate==''){
            // 请选择日期！
              this.$message.error(this.$t('message.dataBoard.pleaseChooseDate')+'!')
              return
          }
          editProjectExtendApi({projectSn: this.$store.state.projectSn,engineeringEndTime:this.endDate}).then(res=>{
              // '保存成功！'
              this.$message.success(this.$t('message.dataBoard.saveSuccess')+'!')
              this.dialogVisible=false
              this.getDaysBetween()
          })
      },
      /**
         * 计算两个日期之间的天数
         * @param dateString1  开始日期 yyyy-MM-dd
         * @param dateString2  结束日期 yyyy-MM-dd
         * @returns {number} 如果日期相同 返回一天 开始日期大于结束日期，返回0
         */
        getDaysBetween(){
            var  startDate = Date.parse(GetDateStr(0,'-'));
            var  endDate = Date.parse(this.endDate);
            if (startDate>endDate){
                return 0;
            }
            if (startDate==endDate){
                return 1;
            }
            var days=(endDate - startDate)/(1*24*60*60*1000);
            // return  days;
            this.leftDays=days
        },
      changeAlarmType(){
          if(this.alarmType==1){
                this.getData3()
          }else{
              this.getData2()
          }
      },
      getData(){
          selectProgressItemStatisticsApi({projectSn: this.$store.state.projectSn}).then(res=>{
              var data = res.result
              // ['未开始','进行中','已完成','已延期']
              this.createdBarCharts(this.$t('message.dataBoard.pieProjectStatus'), [{
                value: data.notStartNum,
                itemStyle: {
                    color: '#848484'
                }
            },{
                value: data.executingNum,
                itemStyle: {
                    color: '#557DED'
                }
            },{
                value: data.completeNum,
                itemStyle: {
                    color: '#44D7B6'
                }
            },{
                value: data.overdueNum,
                itemStyle: {
                    color: '#FE6C7F'
                }
            }], this.$refs.companyChart)
          })
      },
      getData2(){
          selectProgressItemOverdueListApi({projectSn: this.$store.state.projectSn}).then(res=>{
              this.alarmList=res.result
          })
      },
      getData3(){
          selectPersonOverdueProgressItemNumListApi({projectSn: this.$store.state.projectSn}).then(res=>{
              this.alarmList=res.result
          })
      },
      //年龄结构---图表
    createdBarCharts(xData, yData1, el) {
      let that = this;
      let ageChart = echarts.init(el);
      //   ageChart.clear();
      let option = {
        grid: {
          top: 20,
          left: 0,
          bottom: 5,
          right: 20,
          containLabel: true,
        },
        color: ["#5CE2F6", "#5181F6"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          show: false,
          align: "left",
          top: 5,
          left: 0,
          itemWidth: 13,
          itemHeight: 5,
          textStyle: {
            color: "#9fa2ad",
          },
        },

        xAxis: [
          {
            type: "category",
            data: xData,
            boundaryGap: true,
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              color: "#9fa2ad",
              fontSize: 12,
            },
          },
        ],

        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "rgba(231, 233, 243, 0.2)",
            },
          },
          axisLabel: {
            color: "#9fa2ad",
          },
        },
        series: [
          {
            name: /* '任务数', */this.$t('message.dataBoard.taskNum'),
            type: "bar",
            data: yData1,
            barWidth: 36,
          }
        ],
      };

      ageChart.setOption(option);
    },
    //获取项目详情
    getDataDateils() {
      let data = {
        projectSn: this.$store.state.projectSn,
      };
      getProjectDetail(data).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.projectData = res.result;
          //   console.log('this.projectData.constructionStage-4*230',this.projectData.constructionStage-4*230)
          if (parseInt(this.projectData.constructionStage) > 4) {
            this.$refs["stageScroll"].scrollTo(
              {
                x: (this.projectData.constructionStage - 4) * 230,
                // x:'50%'
              },
              500
            );
          }
        }
      });
      getProjectExtendInfoApi(data).then((res) => {
        // console.log(res);
          this.endDate = res.result.engineeringEndTime;
          if(this.endDate){
              this.getDaysBetween()
          }
      });
    },
  },
};
</script>
<style lang="less" scoped>
.numContent {
  display: flex;
  align-items: center;
  justify-content: space-around;
  p{
      font-size: 14px;
    opacity: 0.88;
    margin-top: 10px;
    text-align: center;
  }
}
.companyChart{
    width: 100%;
    height: 100%;
}
/deep/.alarmTypeBox{
    position: absolute;
    top: 20px;
    right: 10px;
    width: 110px;
    opacity: 0.8;
    z-index: 3;
    .el-input__inner{
        background-color: transparent;
        color: white;
        height: 24px;
        line-height: 24px;
        padding: 0 5px;
    }
    .el-input__suffix{
        right: 0px;
    }
    .el-input__icon{
        color: white;
        line-height: 24px;
    }
}
.configBtn{
    position: absolute;
    right: 8px;
    top: 15px;
    font-size: 20px;
    cursor: pointer;
    z-index: 3;
}
.days{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    .num{
        font-size: 46px;
    }
}
.daysBG{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.endDate{
    position: absolute;
    right: 15px;
    bottom: 12px;
    // font-size: 13px;
}
.Extgantt{
  width: 100%;
  height: 100% ;
  border: none;

}
</style>
