
<template>
  <div class="dataline-panel">
    <DataLineColor v-for="(item, index) in data" 
    :label="item.label"
    :value="item.number"
    :color="configColors[index]"/>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'

const DataLineColor = {
  name: 'DataLineColor',
  props: {
    color: {
      type: String,
      default: '#ff0000'
    },
    label: {
      type:String,
      default: '线条颜色'
    },
    value: {
      type: String,
      default: "0"
    }
  },
  render(h) {

    return  h('div', { 
      style: { 
        backgroundImage: `-webkit-linear-gradient(left,${this.color}50, #00000010)` ,
        display: 'flex',
        justifyContent: 'flex-start',
        alignItems: 'center',
        height: '2vh',
        marginBottom: '.6vh',
      } 
    }, [
      h('div', { 
        style: { 
          background: this.color, 
          width: '.21vw', 
          height: '100%', 
        } 
      }),
      h('div', {
        style: {
          margin: '0px .6vw',
          flex: '1 1',
          display: 'flex',
          justifyContent: 'space-between',
        }
      }, [
        h('div', {
        style: {
          justifySelf: 'flex-start',
        }
        }, this.label),
        h('div', null , [
          h(CountTo, {
            props: {
              startVal: 0,
              endVal: Number(this.value),
              separator: '',
              duration: 2000,
            }
          }
          )
        ])
      ]),
    ])
  }
}

export default {
  name: 'DataLinePanel',
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  components: {
    DataLineColor
  },
  data() {
    return {
      configColors: [
        "#F35A4C",
        "#EA9C47",
        "#3ECD7E",
        "#0496FF",
        "#9438FA",
        "#FFFF00",
        "#EF5AA1",
        "#0000FF"
      ]
    }
  }
}
</script>

<style  lang="less">
.dataline-panel {
  padding-top: 10px;
}

</style>
