<template>
  <transition
    appear
    name="animate__animated animate__move"
    enter-active-class="animate__fadeInUp"
    leave-active-class="animate__fadeOutDown"
  >
    <div class="widget-InspectionsNum">
      <div class="head">
        <div class="title">
          <div class="icon"></div>
          <span class="site-info"><i>子系统协同情况</i></span>
        </div>
      </div>
      <div class="content-info">
        <ul class="but_ul">
          <li>
            <span>信息</span>
            <div class="showBarDiv" :class="parseFloat(informationValue)<60?'disqualification':''">
              <div class="barDiv"  :style="'width:calc((100% - 40px)*'+(parseFloat(informationValue||'0')/100)+')'"></div>
              <div class="barValue">{{informationValue}}</div>
            </div>
          </li>
          <li>
            <span>目标</span>
            <div class="showBarDiv" :class="parseFloat(objectiveValue)<60?'disqualification':''">
              <div class="barDiv"  :style="'width:calc((100% - 40px)*'+(parseFloat(objectiveValue||'0')/100)+')'"></div>
              <div class="barValue">{{objectiveValue}}</div>
            </div>
          </li>
          <li>
            <span>资源</span>
            <div class="showBarDiv" :class="parseFloat(resourceValue)<60?'disqualification':''">
              <div class="barDiv"  :style="'width:calc((100% - 40px)*'+(parseFloat(resourceValue||'0')/100)+')'"></div>
              <div class="barValue">{{resourceValue}}</div>
            </div>
          </li>
          <li>
            <span>利益</span>
            <div class="showBarDiv" :class="parseFloat(benefitValue)<60?'disqualification':''">
              <div class="barDiv"  :style="'width:calc((100% - 40px)*'+(parseFloat(benefitValue||'0')/100)+')'"></div>
              <div class="barValue">{{benefitValue}}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>

<script lang="ts">
//安全巡查次数统计
export default {
  name: 'Center',
  components: {},
  props: {
    informationValue:{
      type:String,
      default:'59'
    },
    objectiveValue:{
      type:String,
      default:'34'
    },
    resourceValue:{
      type:String,
      default:'78'
    },
    benefitValue:{
      type:String,
      default:'56'
    },
  },
  data() {
    return {}
  },
  mounted() {},

  methods: {}
}
</script>
<style>

.but_ul > li > span {
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  padding: 0px 13px 0px 26px;
}

</style>
<style lang='scss' scoped>
.but_ul > li:first-child {
  background: url('~@/assets/images/jczc/jdt1.png') no-repeat center left;
  background-size: 18px 18px;
}
.but_ul > li:nth-child(2) {
  background: url('~@/assets/images/jczc/jdt2.png') no-repeat center left;
  background-size: 18px 18px;
}
.but_ul > li:nth-child(3) {
  background: url('~@/assets/images/jczc/jdt3.png') no-repeat center left;
  background-size: 18px 18px;
}
.but_ul > li:nth-child(4) {
  background: url('~@/assets/images/jczc/jdt4.png') no-repeat center left;
  background-size: 18px 18px;
}
.but_ul > li {
  height: 30px;
  color: #ffffff;
  display: flex;
  flex-flow: row;
  align-items: center;
  width:100% ;
  padding: 3.5px 0px;
}
.animate__fadeInUp,
.animate__fadeOutDown {
  animation-duration: 3s; //动画持续时间
  animation-delay: 0s; //动画延迟时间
}
.widget-InspectionsNum {
  left: calc((100% - 970px)/2);
  position: absolute;
  font-family: Source Han Sans CN;

  height: 200px;
  bottom: 15px;
  width: 970px;
  .head {
    height: 0.166667rem /* 32/192 */;
    width: 100%;
    background: linear-gradient(-90deg, rgba(43, 167, 255, 0.08) 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;
      background: linear-gradient(0deg, #036dbe 0%, rgba(22, 194, 247, 0.3) 100%);
      border-radius: 0px 0px 30px 30px;
      span {
        flex: 1;
        font-weight: bold;
        font-size: 16px;
        font-weight: bold;
        font-size: 0.083333rem;
        color: #ffffff;
        text-align: center;
        //background: linear-gradient(0deg, #9bd2fa 0%, #ffffff 100%);
        //background-clip: text;
        //-webkit-text-fill-color: transparent;
        i {
          background: url('~@/assets/images/jczc/xtqk.png') no-repeat center center;
          display: inline-block;
          width: 100%;
          height: 27px;
          line-height: 27px;
        }
      }
    }
  }
  .content-info {
    position: relative;
    padding: 20px;
  }
  .content-info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(14, 167, 255, 0.7) 0%, rgba(14, 167, 255, 0.2) 100%);
    z-index: -1;
    opacity: 0.3;
  }
  .showBarDiv{
    display: flex;
    flex-flow: row;
    align-content: center;
    width: calc(100% - 80px);
    .barDiv{
      float: left;
      height: 14px;
      background: linear-gradient(90deg, #0e7bc9 0%, #91a9bd 100%);
      position: relative;
    }
    .barValue{
        padding-left: 10px;
        width: 40px;
        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{  
    .barDiv{
      background:linear-gradient(90deg, #de951bf0 0%, #ccb895f0 100%) ;
    }
    .barValue{
      background-image:linear-gradient(180deg, #de951bf0 0%, #ffffff 50%, #de951bf0 100%) ; 
    }
  }
}
</style>
