<template>
  <div class="comandTransverseBar" :id="id"></div>
</template>

<script>
import G2 from "@antv/g2";
import { mapGetters } from "vuex";

export default {
  name: "comandTransverseBar",
  data() {
    return {
      chart:{}
    };
  },
  props: {
    width: {
      type: Number,
      default() {
        return 0;
      }
    },
    height: {
      type: Number,
      default() {
        return 0;
      }
    },
    id: {
      type: String,
      default() {
        return '';
      }
    },
    dataList:{
      type:Array,
      default(){
        return []
      }
    }
  },
  computed: {
    ...mapGetters(["fontSize"])
  },
  watch:{
    dataList: {
      deep: true,
      handler: function (newVal, oldVal) {
        let data = JSON.parse(JSON.stringify(newVal))
        if (data && data.length > 0) {
          for (let i = 0; i < data.length; i++) {
            if (i == 0) {
              data[i].cat = 1
            } else if (i == 1) {
              data[i].cat = 2
            } else if (i == 2) {
              data[i].cat = 3
            }else{
              data[i].cat = 4
            }
          }
        }
        this.chart.changeData(data.reverse())
      }
    }
  },
  mounted() {
    let me=this
    const chart = new G2.Chart({
      container: this.id,
      autoFit: true,
      height: this.height,
      width: this.width,
      padding: [
        "auto",
        this.$root.$options.filters.filterPx(0.5,this.fontSize),
        "auto",
        this.$root.$options.filters.filterPx(1,this.fontSize)
      ]
    });
    chart.scale({
      value: {
        min: 0,
        alias: "问题"
      }
    });
    chart.axis("driverName", {
      title: null,
      tickLine: null,
      line: null,
      label: {
        offset: this.$root.$options.filters.filterPx(0.9,this.fontSize),
        custom: true, // 使用自定义文本
        htmlTemplate(text, item, index) {
          if (index==me.dataList.length-1) {
            return (
              '<div class="radio"><div class="radio-dev one">1</div><div title="'+text+'">' +
              text +
              "</div></div>"
            );
          } else if (index==me.dataList.length-2) {
            return (
              '<div class="radio"><div class="radio-dev two">2</div><div title="'+text+'">' +
              text +
              "</div></div>"
            );
          } else if (index==me.dataList.length-3) {
            return (
              '<div class="radio"><div class="radio-dev three">3</div><div title="'+text+'">' +
              text +
              "</div></div>"
            );
          } else {
            return (
              '<div class="radio"><div class="radio-dev other">' +
              index+
              "</div><div title="+text+">" +
              text +
              "</div></div>"
            );
          }
        }
      }
    });
    chart.axis("totalNum", {
      label: null,
      grid: null,
      title: null
    });
    chart.tooltip(false);
    chart.legend(false);
    chart.coord().transpose();
    chart
      .interval()
      .opacity(1)
      .position("driverName*totalNum")
      .color("cat", value => {
        if (value == 1) {
          return "#EB1005";
        }
        if (value == 2) {
          return "#FB9A08";
        }
        if (value == 3) {
          return "#EFE134";
        }
        return "#2F858F";
      })
      .size(this.$root.$options.filters.filterPx(0.069,this.fontSize))
      .label("totalNum", {
        textStyle: {
          fill: "#ffffff",
          fontSize: this.$root.$options.filters.filterPx(0.14,this.fontSize),
        },
        offset: 10
      });
    chart.render();
    this.chart = chart;
  },
  methods: {}
};
</script>

<style lang="less">
.comandTransverseBar {
  >div{
    display: flex;
    align-items: center;
  }
  .radio {
    display: flex;
    font-family: PingFangSC-Regular;
    font-size: 0.17rem;
    align-items: center;
    .radio-dev {
      width: 0.156rem;
      height: 0.156rem;
      line-height: 0.156rem;
      border-radius: 50%;
      box-shadow: 0 0 0.04rem #00e7e3;
      border: 0.01rem solid rgba(255, 255, 255, 0.5);
      text-align: center;
      font-size: 0.1rem;
    }
    > div:last-child {
      width: 0.587rem;
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 0.105rem;
      font-size: 0.14rem;
      color: #ffffff;
    }
  }

  .one {
    color: #dd1006;
    border-color: #dd1006 !important;
  }

  .two {
    color:#FB9A08;
    border-color: #FB9A08 !important;
  }

  .three {
    color: #EFE134;
    border-color: #EFE134 !important;
  }

  .other {
    color: #2F858F;
    border-color: #2F858F !important;
  }
}
</style>
