<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__slideInLeft"
    leave-active-class="animate__slideOutLeft"
  >
    <div class="widget-StatisticalSecurity">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info">目标</span>
        </div>
      </div>
      <div class="content-info">
        <div class="rankingOfTypes">
          <div class="content">
            <div class="lengthChartContent">
              <DesignAndConsChart :chartData="chartData" />
            </div>
          </div>
        </div>
        <div class="rankingBut">
          <h4>评分最低会议纪要分析：</h4>
          <p>2025年4月28日宜昌两网二期工程第XX次建设管理协 调周例会</p>
          <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 DesignAndConsChart from '../../../components/ComprehensiveChart/designAndConsChart.vue'

export default {
  name: 'StatisticalSecurity',
  components: { DesignAndConsChart },
  data() {
    return {
      riskPercent: 0,
      staList: [],
      chartData: {
        legendData: ['新增验收', '新增评定'],
        xData: ['2024-12', '2025-01', '2025-02', '2025-03', '2025-04', '2025-05'],
        spvData: ['0', '0', '0', '0', '0', '0'],
        consData: ['0', '0', '0', '0', '0', '0'],
        yAxisName: '单位：个',
        seriesName: ['新增验收', '新增评定']
      },
      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() {},

  methods: {
    format(percentage) {
      return (percentage += '分')
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
    height: 200px;
}
.lengthChartContent {
  height: calc(100% - 0.125rem /* 24/192 */);
  width: 100%;
}
.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;
  margin-bottom: 15px;
  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-StatisticalSecurity {
  z-index: 2;
  //position
  bottom: 0.052083rem /* 10/192 */;
  margin-left: $size20 /* 20/192 */;
  position: absolute;
  //size
  height: calc(100% - 3.265625rem /* 627/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;
      }
    }
  }
  @mixin positionCenter() {
    display: flex;
    align-items: center;
  }
  .content-info {
    width: 100%;
    height: calc(100% - 0.166667rem);
    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%);
    .riskLevel {
      margin-top: 0.052083rem /* 10/192 */;
      height: calc(100% - 0.40625rem /* 78/192 */);
      width: 100%;
      @mixin contentCenter() {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .hierarchy {
        height: 0.125rem /* 24/192 */;
        margin: 0.026042rem /* 5/192 */ 0;
        width: 100%;
        display: flex;
        .subhierarchy {
          height: 100%;
          font-size: 0.072917rem /* 14/192 */;
          font-family: Source Han Sans CN;
          font-weight: 500;
          color: #fefefe;
          @include contentCenter();
        }
        .sh0 {
          width: 0.385417rem /* 74/192 */;
          background-color: #ed2727;
        }
        .sh1 {
          width: 0.364583rem /* 70/192 */;
          background-color: #d6791f;
        }
        .sh2 {
          width: 0.520833rem /* 100/192 */;
          background-color: #efa82d;
        }
        .sh3 {
          width: calc(100% - 1.270833rem /* 244/192 */);
          background-color: #d4c953;
        }
      }
      .hierarchyChart {
        width: 100%;
        // height: calc(100% - 0.25rem /* 48/192 */);
        height: calc(100% - 0.072917rem /* 14/192 */);
      }
    }
  }
}
</style>