<template>
  <div id="center">
    <div class="down">
      <div class="bg-color-black">
        <div class="d-flex pl-2 pt-2">
          <dv-decoration-9 style="width: 20px; height: 20px" />
          <span class="fs-xl text mx-2">库存占比</span>
        </div>
        <div class="bg-color-black">
          <div class="water">
            <div class="water-title">
              <span>{{ info.proportionStr1 }}</span>
              <dv-percent-pond :config="waterConfig1" class="percent-pond" />
              <span>{{ info.proportionStr2 }}</span>
              <dv-percent-pond :config="waterConfig2" class="percent-pond" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import CenterChart from '@/components/echart/center/centerChartRate'

export default {
  props: ['info'],
  data() {
    return {
      waterConfig1: {
        value: this.info.proportion1,
        borderWidth: 2,
        borderRadius: 5,
        borderGap: 6,
        localGradient: true
      },
      waterConfig2: {
        value: this.info.proportion2,
        borderWidth: 2,
        borderRadius: 5,
        borderGap: 6,
        localGradient: true
      },
      // 通过率和达标率的组件复用数据
      rate: [
        {
          id: 'centerRate1',
          tips: 60,
          colorData: {
            textStyle: '#3fc0fb',
            series: {
              color: ['#00bcd44a', 'transparent'],
              dataColor: {
                normal: '#03a9f4',
                shadowColor: '#97e2f5'
              }
            }
          }
        },
        {
          id: 'centerRate2',
          tips: 40,
          colorData: {
            textStyle: '#67e0e3',
            series: {
              color: ['#faf3a378', 'transparent'],
              dataColor: {
                normal: '#ff9800',
                shadowColor: '#fcebad'
              }
            }
          }
        }
      ]
    }
  },
  components: {
    CenterChart
  },
  methods: {
    updateData(){
      const { waterConfig1 } = this
      this.waterConfig1.value = this.info.proportion1
      this.waterConfig1.borderWidth= 2
      this.waterConfig1.borderRadius= 5
      this.waterConfig1.borderGap= 6
      this.waterConfig1.localGradient= true
      this.waterConfig1 = {...this.waterConfig1}
      const { waterConfig2 } = this
      this.waterConfig2.value = this.info.proportion2
      this.waterConfig2.borderWidth= 2
      this.waterConfig2.borderRadius= 5
      this.waterConfig2.borderGap= 6
      this.waterConfig2.localGradient= true
      this.waterConfig2 = {...this.waterConfig2}
    }
  },
}
</script>

<style lang="scss" scoped>
#center {
  display: flex;
  flex-direction: column;
  padding: 0px 16px 20px 16px;
  .down {
    border-radius: 10px;
    padding-bottom: 0;
    width: 100%;
    display: flex;
    // height: 100px;
    justify-content: space-between;
    .bg-color-black {
      border-radius: 10px;
      width: 100%;
      // flex-wrap: wrap;
      .water {
        // border: #f00 0.1333vw solid;
        width: 100%;
        // display: inline-block;
        // display: inline;
        // border: #f00 0.1333vw solid;
        // .dv-wa-le-po {
        //   height: 40px;
        // }
        .water-title {
          // padding-left: 10px;
          width: 100%;
          height: 50px;
          span {
            float: left;
            text-align: center;
            font-size: 1.2rem;
            width: 20%;
            height: 50px;
            line-height: 50px;
            margin-right: 10px;
            // border: #ff0 0.1333vw solid;
          }
        }
      }
    }
    .ranking {
      padding: 10px;
      width: 59%;
      .dv-scr-rank-board {
        height: 225px;
      }
    }
  }
}

.dv-percent-pond {
  display: block;
  position: relative;
  // width: 300px;
  // // height: 50px;
  float: left;
}
.percent-pond {
  margin-right: 1.2rem;
  width: 25%;
  height: 3rem;
  // border: #f00 0.1333vw solid;
}

.text {
  color: #c3cbde;
  font-size: 1.3rem;
}
</style>
