<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInRight"
    leave-active-class="animate__slideOutRight"
  >
    <div class="widget-ProjectSituationofQM">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">近期工程情况</span>
          <div class="dateRange">{{ beginTime }}～{{ endTime }}</div>
        </div>
      </div>
      <div class="content-info">
        <!---->
        <!-- <div class="projectContent">
          <div class="pc-topContent">
            <div class="ptc-item">
              <span>分部工程验收：</span><span>5<i>个</i></span>
            </div>
            <div class="ptc-item">
              <span>分项工程验收：</span><span>5<i>个</i></span>
            </div>
          </div>
          <div class="pc-bottomContent">
            <div class="pbc-item">
              <span>224<i>个</i></span> <span>完成功能性试验</span>
            </div>
            <div class="pbc-item">
              <span>224<i>个</i></span> <span>申请检验批</span>
            </div>
            <div class="pbc-item">
              <span>224<i>个</i></span> <span>完成检验批</span>
            </div>
          </div>
        </div> -->
        <!---->
        <div class="bottom3Content">
          <!---->
          <div class="bottom2Content">
            <!---->
            <div class="overallProjectProgress">
              <div class="oppContent">
                <div class="oppItem">
                  <div class="oppItem-content">
                    {{ weeklyInfo }}
                  </div>
                </div>
              </div>
            </div>
            <!---->
            <div class="scanCodeNumber">
              <div class="title">
                <div class="icon"></div>
                <span class="item-name">质量验评记录</span>
              </div>
              <div class="recordsContent">
                <div class="records-item" v-for="(item, index) in recordsList" :key="index">
                  <div class="ri-title">
                    <span>{{ index + 1 }}、</span>
                    <span>{{ item.create_time.split(' ')[0] || '' }}</span>
                    <span>{{ `【${item.name}】` }}</span>
                    <span class="qualityGrade" :class="{ disqualification: item.quality_grade_str == '不合格' }">{{
                      item.quality_grade_str || '暂无'
                    }}</span>
                  </div>
                  <div class="ri-content">{{ item.project_name }}-{{ item.name }}</div>
                </div>
              </div>
            </div>
          </div>
          <!---->
          <div class="constructionRecords">
            <div class="title">
              <div class="icon"></div>
              <span class="item-name">施工记录</span>
              <!-- <span class="item-type">（沟槽开挖）</span> -->
            </div>
            <div class="constructionRecordsContent">
              <el-carousel ref="picCarousel" indicator-position="none" :autoplay="true" @change="changeCarousel">
                <el-carousel-item v-for="(item, index) in pictureList" :key="index">
                  <!-- <div class="consName">
                    <div class="nameWrap">
                      <div class="prjName">白洋冲片区排水管网综合治理工程{{ item.index }}</div>
                      <div class="isQualified">合格</div>
                    </div>
                  </div> -->
                  <div class="consInfo">
                    <div class="infoWrap">
                      <!-- <div class="pipeInfo">排水管网WS01-WS03</div> -->
                      <div class="pipeInfo"></div>
                      <div class="timeInfo">{{ item.createTime }}</div>
                    </div>
                  </div>
                  <!-- <img class="consImg" src="@/views/groupPage/images/项目图册/质量现场.jpg" /> -->
                  <el-image
                    class="consImg"
                    :src="item.img"
                    :preview-src-list="pictureList.map((i) => i.img)"
                  ></el-image>
                </el-carousel-item>
              </el-carousel>
              <div class="switchWidget">
                <div class="leftArrow" @click="clickPrev()"><i class="el-icon-caret-left"></i></div>
                <div class="middleNumber">
                  <div class="activeNum">{{ currentActive }}</div>
                  /{{ pictureList.length }}
                </div>
                <div class="rightArrow" @click="clickNext()"><i class="el-icon-caret-right"></i></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
import moment from 'moment'
import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
import PercentGaugeChart from '../../../components/GaugeChart/percentGaugeChart.vue'
import SupAndConsNumChartVue from '../../../components/ComprehensiveChart/supAndConsNumChart.vue'
import { getImgFiles, getEpcQbsDetailPage } from '../../../apis'
import request from '@/utils/request'
//近期工程情况-质量
@Component({
  name: 'ProjectSituationofQM',
  components: { PercentGaugeChart, SupAndConsNumChartVue }
})
export default class ProjectSituationofQM extends Vue {
  @Prop({ type: Object, default: () => {} }) dataInfo!: any
  beginTime = moment(new Date().setDate(new Date().getDate() - 6)).format('YYYY.MM.DD')
  endTime = moment(new Date()).format('YYYY.MM.DD')
  // beginTime = null
  // endTime = null
  pictureList: Array<any> = []
  currentActive = 1

  weeklyInfo = ''

  recordsList = []

  clickPrev() {
    ;(this.$refs['picCarousel'] as any).prev()
  }
  clickNext() {
    ;(this.$refs['picCarousel'] as any).next()
  }
  changeCarousel(active, prev) {
    this.currentActive = active + 1
  }
  get projectCode() {
    return this.$store.state.bigScreen.currentProjectCode
  }
  @Watch('dataInfo')
  onChangMehod() {
    this.getPageData()
  }
  mounted() {
    this.getImgData()
  }
  async getPageData() {
    if (!this.dataInfo) return
    const { start_date, end_date, quality_content } = this.dataInfo || {}
    // this.beginTime = start_date.split(' ')[0]
    // this.endTime = end_date.split(' ')[0]
    this.weeklyInfo = quality_content
    const res = await getEpcQbsDetailPage({ project_code: this.projectCode })
    let { code, result } = res
    if (code != 1) return
    result.records.sort((a, b) => {
      return b.create_time.localeCompare(a.create_time)
    })
    result.records = result.records.filter(
      (item) => moment(new Date()).diff(moment(item.create_time), 'days') < moment(new Date()).daysInMonth()
    )
    this.recordsList = result.records
    console.log('质量验评记录', this.recordsList)
  }
  async getImgData() {
    const res = await getImgFiles({ size: 999, imgType: 'tjfxzl', groupCode: this.projectCode, isShow: 1 })
    const { code, result } = res
    if (code != 1) return
    let list = []
    result.records.forEach((item) => {
      item.img =
        request.defaults.baseURL +
        'base/file/loadImg' +
        '?remotePath=' +
        item.path +
        '&access_token=' +
        sessionStorage.getItem('token')
      list.push(item)
    })
    this.pictureList = list
  }
}
</script>

<style lang='scss' scoped>
.animate__slideInRight,
.animate__slideOutRight {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-ProjectSituationofQM {
  z-index: 2;
  //position
  bottom: $size10 /* 10/192 */;
  margin-right: $size20 /* 20/192 */;
  right: 0;
  position: absolute;
  //size
  height: calc(100% - 0.557292rem /* 107/192 */);
  width: 2.083333rem /* 400/192 */;
  .head {
    height: 0.166667rem /* 32/192 */;
    width: 100%;
    background: linear-gradient(-90deg, rgba(43, 167, 255, 0.2) 0%, rgba(43, 167, 255, 0.08) 100%);
    font-family: Source Han Sans CN-HEAVY;
    .title {
      width: 100%;
      height: 100%;
      display: flex;
      font-weight: 400;
      align-items: center;
      .icon {
        height: 0.166667rem /* 32/192 */;
        width: 0.34375rem /* 66/192 */;
        background: url('~@/views/groupPage/images/模块图标/统计分析/工程情况.png') no-repeat center center;
        background-size: 100% 100%;
      }
      span {
        flex: 1;
        font-weight: bold;
        font-size: 0.083333rem /* 16/192 */;
        color: #ffffff;
        padding: 0.041667rem /* 8/192 */;
        background: linear-gradient(0deg, #9bd2fa 0%, #ffffff 100%);
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .dateRange {
        height: 0.0625rem /* 12/192 */;
        font-size: 0.072917rem /* 14/192 */;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .content-info {
    width: 100%;
    height: calc(100% - 0.166667rem);
    font-family: Source Han Sans CN;
    .projectContent {
      height: 0.755208rem /* 145/192 */;
      margin-top: 0.052083rem /* 10/192 */;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-flow: column;
      background: rgba(6, 34, 57, 0.76);
      padding: 0 0.104167rem /* 20/192 */;
      font-size: 0.072917rem /* 14/192 */;
      font-weight: 400;
      color: #84bde5;
      .pc-topContent {
        height: 0.3125rem /* 60/192 */;
        width: 100%;
        display: flex;
        justify-content: space-between;
        position: relative;
        .ptc-item {
          display: flex;
          align-items: center;
          & span:nth-of-type(2) {
            font-size: 0.104167rem /* 20/192 */;
            font-family: Agency FB;
            font-weight: bold;
            color: #ffffff;
            background: linear-gradient(90deg, #1e9dff 0%, #01eae2 100%);
            background-clip: text;
            -webkit-text-fill-color: transparent;
            i {
              font-family: Source Han Sans CN-MEDIUM;
              font-size: 0.09375rem /* 18/192 */;
            }
          }
        }
        .ptc-item:last-child > span:nth-of-type(2) {
          background: linear-gradient(90deg, #fdb332 0%, #01eae2 100%);
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .pc-topContent::before {
        content: '';
        position: absolute;
        margin: auto 0;
        bottom: 0;
        width: 100%;
        height: 0.005208rem /* 1/192 */;
        background: rgba(255, 255, 255, 0.24);
      }
      .pc-bottomContent {
        height: calc(100% - 0.3125rem /* 60/192 */);
        width: 100%;
        display: flex;
        justify-content: space-between;
        .pbc-item {
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: center;
          & span:first-of-type {
            font-size: 0.083333rem /* 16/192 */;
            font-family: Agency FB;
            font-weight: bold;
            color: #ffffff;
            margin-bottom: 0.0625rem /* 12/192 */;
            i {
              font-family: Source Han Sans CN-HEAVY;
              font-size: 0.072917rem /* 14/192 */;
            }
          }
        }
      }
    }
    .title {
      width: 100%;
      display: flex;
      align-items: center;
      .icon {
        height: 0.072917rem /* 14/192 */;
        width: 0.078125rem /* 15/192 */;
        margin-right: 0.046875rem /* 9/192 */;
        background: url('~@/views/groupPage/images/三角.png') no-repeat center center;
        background-size: 100% 100%;
      }
      .item-name,
      .item-type {
        font-family: Source Han Sans CN;
        color: #0ea7ff;
        font-size: 0.072917rem /* 14/192 */;
        font-weight: 500;
      }
      .item-type {
        color: #89c3ec !important;
      }
      .symbol {
        margin-left: 0.052083rem /* 10/192 */;
        width: 0.208333rem /* 40/192 */;
        height: 0.104167rem /* 20/192 */;
        font-size: 0.072917rem /* 14/192 */;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #ffffff;
        background: linear-gradient(90deg, #2188d3, #9c2bec);
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .bottom3Content {
      height: 100%;
      // height: calc(100% - 0.807292rem /* 155/192 */);
      width: 100%;
      background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0) 100%);
    }
    .overallProjectProgress {
      margin-top: 0.052083rem /* 10/192 */;
      width: 100%;
      height: calc(100% - 1.380208rem /* 265/192 */);
      .oppContent {
        width: 100%;
        height: 100%;
        background: rgba(6, 34, 57, 0.76);
        overflow: auto;
        .oppItem {
          width: 100%;
          padding: 0.052083rem /* 10/192 */;
          color: #feffff;
          font-family: Source Han Sans CN;
          font-size: 0.072917rem /* 14/192 */;
          .oppItem-title {
            color: #17aaff;
          }
          .oppItem-content {
            // padding: 0.026042rem /* 5/192 */ 0;
            line-height: 0.114583rem /* 22/192 */;
          }
        }
      }
    }
    .scanCodeNumber {
      margin-top: 0.052083rem /* 10/192 */;
      width: 100%;
      height: 1.25rem /* 240/192 */;
      .recordsContent {
        margin-top: 0.052083rem /* 10/192 */;
        height: calc(100% - 0.125rem /* 24/192 */);
        width: 100%;
        background: rgba(6, 34, 57, 0.76);
        overflow-y: auto;
        .records-item {
          width: 100%;
          display: flex;
          flex-flow: column;
          padding: 0.052083rem /* 10/192 */;
          .ri-title {
            width: 100%;
            font-size: 0.072917rem /* 14/192 */;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #feffff;
            line-height: 0.09375rem /* 18/192 */;
            & span:first-of-type {
              font-family: Source Han Sans CN-Medium;
              color: #16aaff;
            }
            .qualityGrade {
              display: inline-block;
              min-width: 0.166667rem /* 32/192 */;
              height: 0.09375rem /* 18/192 */;
              background: linear-gradient(-90deg, #09be78, #069161);
              border-radius: 2px;
            }
            .disqualification {
              background: linear-gradient(-90deg, #e95555, #f22840);
            }
          }
          .ri-content {
            margin-top: 0.026042rem /* 5/192 */;
            width: 100%;
            font-size: 0.072917rem /* 14/192 */;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #84bde5;
            padding: 0 0.104167rem /* 20/192 */;
            line-height: 0.09375rem /* 18/192 */;
          }
        }
      }
    }
    .bottom2Content {
      width: 100%;
      height: calc(100% - 1.40625rem /* 270/192 */);
      overflow: auto;
    }
    .constructionRecords {
      margin-top: 0.052083rem /* 10/192 */;
      width: 100%;
      height: 1.354167rem /* 260/192 */;
      .constructionRecordsContent {
        width: 100%;
        height: calc(100% - 0.072917rem /* 14/192 */);
        display: flex;
        flex-flow: column;
        align-items: center;
        justify-content: flex-end;
        .el-carousel {
          width: 90%;
          height: 80%;
          /deep/ .el-carousel__container {
            height: 100% !important;
          }
          .consImg {
            height: 100%;
            width: 100%;
          }
          .consName,
          .consInfo {
            position: absolute;
            background: rgba(0, 0, 0, 0.4);
            width: 100%;
            height: 0.177083rem /* 34/192 */;
            line-height: 0.177083rem /* 34/192 */;
            font-size: 0.072917rem /* 14/192 */;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
          }
          .consName {
            top: 0;
          }
          .consInfo {
            bottom: 0;
            z-index: 999;
          }
          .nameWrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .isQualified {
              width: 0.322917rem /* 62/192 */;
              text-align: center;
              background: rgba(13, 162, 100, 0.9);
              border-radius: 0px 0px 0px 30px;
            }
          }
          .infoWrap {
            display: flex;
            align-items: center;
            justify-content: space-between;
          }
        }
        .switchWidget {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 0.557292rem /* 107/192 */;
          color: rgba(137, 195, 236, 1);
          height: 0.072917rem /* 14/192 */;
          margin: 0.052083rem /* 10/192 */;
          .leftArrow,
          .rightArrow {
            font-size: 0.072917rem /* 14/192 */;
            cursor: pointer;
          }
          .middleNumber {
            display: flex;
            .activeNum {
              color: #2ba7ff;
            }
          }
        }
      }
    }
  }
}
</style>