<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInLeft"
    leave-active-class="animate__slideOutLeft"
  >
    <div class="widget-StatisticalRisk">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">{{contentTitle}}</span>
        </div>
      </div>
      <div class="content-info">
        <div class="rankingOfTypes">
          <div class="title">
            <!-- <div class="icon"></div> -->
            <span class="item-name">{{listTitle}}：</span>
          </div>
          <div class="content">
            <ul class="but_ul">
              <li :key="'but_ul_'+item.id+index" v-for="(item,index) in listData">
                <div class="but_ul_name">{{ item.name }}</div>
                <div class="progressDiv" :class="item.value<60?'disqualification':''">
                  <div class="progressRateDiv"  :style="'width:calc((100% - 70px)*'+(item.value/100)+')'">
                  </div>
                  <div class="progressValue">{{item.value||0}}分</div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="rankingBut">
          <h4>{{contentItemTitle}}：</h4>
          <p>{{contentItemTitleInfo}}</p>
          <div class="resultDiv">
            <span class="resultTitle" >{{resultTitle}}：</span>
            <span class="resultValue" >{{resultValue}}</span>
          </div>
          <div class="rankPmd">
            <el-carousel trigger="click" height="90px">
              <el-carousel-item v-for="(i, k) in list" :key="k">
                <span>{{ i.problem }}</span>
                <i>{{ i.correction }}</i>
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script >
import { getDangerCheckCountData } from '../../../apis'
import { roundFun } from '@/views/groupPage/util'

export default {
  name: 'StatisticalRisk',
  components: {  },
  props:{
    //总标题
    contentTitle:{
      type:String,
      default:"信息",
    },
    //列表标题
    listTitle:{
      type:String,
      default:"信息分析结果"
    },
    //内容子标题
    contentItemTitle:{
      type:String,
      default:"评分最低会议纪要分析"
    },
    //内容子标题内容
    contentItemTitleInfo:{
      type:String,
      default:"2025年4月28日宜昌两网二期工程第XX次建设管理协 调周例会"
    },
    resultTitle:{
      type:String,
      default:"评价结果"
    },
    resultValue:{
      type:String,
      default:"信息协同度良好，反馈较及时，准确度较高，偶尔存在信息滞后。"
    },
    listData:{
      type:Array,
      default:()=>[{
        id:1,
        value:50,
        name:"01 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      },
      {
        id:2,
        value:70,
        name:"02 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      }
      ,
      {
        id:2,
        value:70,
        name:"02 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      }
      ,
      {
        id:2,
        value:70,
        name:"02 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      }
      ,
      {
        id:2,
        value:70,
        name:"02 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      }
      ,
      {
        id:2,
        value:70,
        name:"02 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      }
      ,
      {
        id:2,
        value:70,
        name:"02 宜昌二期“两网”项目部周例会第2期会议纪要 20200923",
      }]
    },//列表数据
  },
  data() {
    return {
      riskPercent: 0,
      staList: [],
      chartData: {},
      rectifyList: [
        { title: '待整改', num: 3 },
        { title: '整改中', num: 3 },
        { title: '已整改', num: 3 }
      ],
      rankingBarChartData: null,
      list: [
        {
          problem: '信息共享不及时，导致项目进度滞后。',
          correction: '充分利用信息共享平台，确保及时沟通。'
        },
        {
          problem: '12121信息共享不及时，导致项目进度滞后。',
          correction: '1212充分利用信息共享平台，确保及时沟通。'
        }
      ],
      projectCode: this.$store.state.bigScreen.currentProjectCode
    }
  },

  mounted() {
    // this.getPageData()
  },

  methods: {
    async getPageData() {
      let xData = [],
        reportArr = [],
        completeArr = []

      const DangerCheckCountData = await getDangerCheckCountData({ code: this.projectCode })
      if (!DangerCheckCountData.result) return
      const { yhsbNum, yhzgNum, hiddenEcharts, hidenRicks } = DangerCheckCountData.result || {}
      const { seriesDatas, xaxis } = hiddenEcharts || {}
      this.riskPercent = roundFun(yhzgNum / yhsbNum, 2) * 100
      this.staList = [
        { name: '隐患整改', value: yhzgNum + '个' },
        { name: '隐患上报', value: yhsbNum + '个' }
      ]
      xData = xaxis.map((item) => this.getMonth(item))
      seriesDatas.forEach((item) => {
        if (item.name == '累计上报') reportArr = item.seriesData
        if (item.name == '累计完成') completeArr = item.seriesData
      })
      this.chartData = {
        xData,
        report: reportArr,
        complete: completeArr
      }
      this.rankingBarChartData = hidenRicks.slice(0, 5) //默认取前五条
    },
    getMonth(item) {
      let month = item.split('-')[1]
      month = month[0] == '0' ? month.slice(1) : month
      return month + '月'
    },

    format(percentage) {
      return (percentage += '分')
    }
  }
}
</script>
<style lang="scss" scoped>
.rankPmd span {
  font-weight: 400;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 300px;
  padding-left: 43px;
  color: #ffffff;
  height: 22px;
  line-height: 22px;
  display: inline-block;
  margin-bottom: 10px;
  background: url('~@/assets/images/jczc/wt1.png') no-repeat center left;
  margin-left: 8px;
}
.rankPmd i {
  margin-left: 8px;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 300px;
  height: 22px;
  line-height: 22px;
  padding-left: 43px;
  display: inline-block;
  background: url('~@/assets/images/jczc/zg1.png') no-repeat center left;
}
.rankingBut h4 {
  font-weight: bold;
  font-size: 14px;
  color: #1adbff;
  padding-left: 7px;
  line-height: 24px;
  margin-bottom: 5px;
}
.rankingBut p {
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  line-height: 20px;
  padding-left: 40px;
  background: url('~@/assets/images/jczc/baog.png') no-repeat center left;
}
.animate__slideInLeft,
.animate__slideOutLeft {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-StatisticalRisk {
  z-index: 2;
  //position
  top: 0.505208rem /* 97/192 */;
  margin-left: $size20 /* 20/192 */;
  position: absolute;
  //size
  height: 2.604167rem /* 500/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;
      }
    }
  }
  .content-info {
    width: 100%;
    padding: 10px;
    height: calc(100% - 30px);
    display: inline-block;
    font-family: Source Han Sans CN;
    background: linear-gradient(0deg, rgba(14, 167, 255, 0.16) 0%, rgba(14, 167, 255, 0.02) 100%);
    .title {
      width: 100%;
      display: flex;
      margin-bottom: 10px;
      .icon {
        height: 0.072917rem /* 14/192 */;
        width: 0.078125rem /* 15/192 */;
        margin: 0 0.046875rem /* 9/192 */;
        background: url('~@/views/groupPage/images/三角.png') no-repeat center center;
        background-size: 100% 100%;
      }
      .item-name {
        font-family: Source Han Sans CN;
        color: #0ea7ff;
        font-size: 0.072917rem /* 14/192 */;
        font-weight: 500;
      }
    }
    .rankingOfTypes {
      width: 100%;
      height: calc(100% - 205px /* 292/192 */);
      .content {
        width: 100%;
        height: calc(100% - 30px);
        position: relative;
        .but_ul{
          height: 100%;
          overflow-y:auto;
        }
      }
    }
    .but_ul_name{
      color:white;
      font-size: 12px;
    }
    .progressDiv{
      width: 100%;
      position: relative;
      float: left;
      height: 39px;
      padding: 7px 0px 15px 0px;
      display: flex;
      align-items: center;
    }
      .progressRateDiv{
        float: left;
        height: 14px;
        background: linear-gradient(90deg, #0e7bc9 0%, #91a9bd 100%);
        position: relative;
        &::after {
          content: '';
          position: absolute;
          top: -2px;
          left: calc(100% + 3px);
          width: 19.5px;
          height: 3px;
            // background-color: black; /* 斜线的颜色 */
          transform: rotate(100deg); /* 旋转角度 */
          transform-origin: left top; /* 旋转原点 */
          background:  #91a9bd ;
        }
      }
      .progressValue{
        padding-left: 10px;
        width: 60px;
        float: left;
        /* 设置字体透明 */
        color: transparent;
        /* 设置线性渐变，从红色渐变到蓝色 */
        background-image:linear-gradient(180deg, #3ca4ee 0%, #ffffff 50%, #3ca4ee 100%);
        /* 使用 -webkit-background-clip 属性将背景剪裁至文本形状 */
        -webkit-background-clip: text;
        /* 非Webkit内核浏览器需要使用标准前缀 */
        background-clip: text;
        /* 把当前元素设置为行内块，以便能够应用背景 */
        display: inline-block;
        font-size: 16px;
    }
    .disqualification{
      .progressRateDiv{
        background:linear-gradient(90deg, #de951bf0 0%, #ccb895f0 100%) ;
        &::after {
          background: #ccb895f0  ;
        }
      }
      .progressValue{
        background-image:linear-gradient(180deg, #de951bf0 0%, #ffffff 50%, #de951bf0 100%) ; 
      }
    }
  }
  .resultDiv{
    color: rgb(230,184,107);
    padding: 10px;
  }
  /deep/.el-carousel__arrow{
    display: none !important;
  }
}

</style>