<template>
  <div class="dz-percent-chart-container">
    <div class="dz-bar-container" v-for="(item,index) in chartData" :key="index">
      <div class="title">{{item.title}}</div>
      <div class="bar-groups">
        <div class="bar" :style="{'width': `${item.valueWidth}%`, 'background': legendData[0].color}"></div>
        <div class="total-bar" :style="{'background': legendData[1].color, 'width': `${item.totalWidth}%`}"></div>
      </div>
      <div class="dz-chart-label-contianer">
        <div class="label-groups">
          <div class="num">{{item.num}}{{item.unit}}</div>
          <div class="total-num">{{item.total}}{{item.unit}}</div>
        </div>
      </div>
    </div>
    <div class="dz-percent-chart-legend" v-if="!!legendData && legendData.length == 2">
      <div v-for="(item, index) in legendData" :key="index" class="legend-item">
        <div class="legend-color" :style="{'background': item.color}"></div>
        <div class="legend-title">{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="DzPercentChart">
import {computed, ref, PropType } from 'vue'
const defaultLegend = [{color: '#1D88FF'}, {color: '#DEA70A'}]

interface dzChartData { 
  title: string,
  num: number, 
  total: number, 
  unit: string,
  name: string
}

interface dzLegendData {
  title: string,
  color?:string,
}

interface Props {
  data: dzChartData[],
  legend?: dzLegendData[]
}


const props = withDefaults(defineProps<Props>(),
{
  data: () => [],
  legend: () => {
    return [{color: '#1D88FF', title: ''}, {color: '#DEA70A', title: ''}]
  }
})

const chartData = computed(() => {
  let data:any = []
  if (props.data && props.data.length) {
    data = props.data.map(item => {
      return {
        ...item,
        //@ts-ignore
        valueWidth: item.num >= item.total ? 100 : parseInt(item.num *100 / item.total),
        //@ts-ignore
        totalWidth: item.num <= item.total ? 100 : parseInt(item.total *100 / item.num),
      }
    })
  }
  return data
}) 


const legendData = computed(() => {
  let data: any = []
  if (props.legend && props.legend.length) {
    data = defaultLegend.map((item, index) => {
      return {
        ...item,
        ...props.legend[index]
      }
    })
  }
  return data
}) 


</script>

<style lang='less' scoped>
  @-webkit-keyframes move_wave {
    0% { background-position:532px 0 }
    to { background-position:0 0 }
  }

  @keyframes move_wave {
    0% { background-position:532px 0 }
    to { background-position:0 0 }
  }
.dz-percent-chart-container {
  color: #fff;
  .dz-bar-container {
    width: 100%;
    height: 44px;
    display: flex;
    align-items: center;
    .title {
      width: 58px;
      height: 44px;
      line-height: 18px;
      overflow: hidden;
      color: #D1F9FE;
      border-right: 1px solid #95BEF1;
      text-align: right;
      padding-right: 8px;
    }

    .bar-groups {
      height: 44px;
      flex: 1;
      display: flex;
      justify-content: center;
      flex-direction: column;
        .bar {
          height: 12px;
          display: flex;
          justify-content: center;
          align-items: center;
          background:  #1D88FF;
        }

        .total-bar {
          height: 12px;
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-top: 6px;
          background:  #DEA70A;
          
        }
    }
    .dz-chart-label-contianer {
      .label-groups {
        // background: blue;
        margin-left: 8px;
        text-align: right;
        color: #fff;
        .num {

        }
        .total-num {
          margin-top: 2px;

        }
      }
    }
  }
  .dz-percent-chart-legend {
    display: flex;
    justify-content: center;
    align-items: center;
    .legend-item {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      color: #fff;
      .legend-color {
        width: 10px;
        height: 10px;
        margin-right: 6px;
      }
    }
    .legend-item:last-child {
      margin-right: 0px;
    }
  }
}

</style>
