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

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

export default {
  name: "transverseBar",
  data() {
    return {
    };
  },
  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) {
        this.chart.changeData(newVal);
      }
    }
  },
  mounted() {
    // this.data = [
    //   { type: "固城湖", value: 45, cat: "4", cc: "1." },
    //   { type: "百家湖", value: 54, cat: "4" },
    //   { type: "莫愁湖莫愁湖asd", value: 65, cat: "4" },
    //   { type: "玄武湖", value: 80, cat: "3" },
    //   { type: "金川河", value: 110, cat: "2" },
    //   { type: "秦淮河", value: 187, cat: "1" }
    // ];
    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",
        "auto"
      ]
    });
    chart.scale({
      value: {
        min: 0,
        alias: "问题"
      }
    });
    chart.axis("driverName", {
      title: null,
      tickLine: null,
      line: null,
      label: {
        offset: this.$root.$options.filters.filterPx(0.2,this.fontSize),
        textStyle: {
          fill: "#ffffff",
          fontSize: this.$root.$options.filters.filterPx(0.17, this.fontSize),
          fontWeight: 300
        },
        // custom: true, // 使用自定义文本
        // htmlTemplate(text, item, index) {
        //   if (index == 5) {
        //     return (
        //       '<div class="radio"><div class="radio-dev one">1</div><div>' +
        //       text +
        //       "</div></div>"
        //     );
        //   } else if (index == 4) {
        //     return (
        //       '<div class="radio"><div class="radio-dev two">2</div><div>' +
        //       text +
        //       "</div></div>"
        //     );
        //   } else if (index == 3) {
        //     return (
        //       '<div class="radio"><div class="radio-dev three">3</div><div>' +
        //       text +
        //       "</div></div>"
        //     );
        //   } else {
        //     return (
        //       '<div class="radio"><div class="radio-dev other">' +
        //       (index==2?4:(index==1?5:(index==0)?6:0))+
        //       "</div><div>" +
        //       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.09,this.fontSize))
      .label("totalNum", {
        textStyle: {
          fill: "#ffffff",
          fontSize: this.$root.$options.filters.filterPx(0.17,this.fontSize),
        },
        offset: 10
      });
    chart.render();
    this.chart = chart;
  },
  methods: {}
};
</script>

<style lang="less">
.transverseBar {
  >div{
    display: flex;
    align-items: center;
    height: 2.008rem;
  }
  .radio {
    display: flex;
    font-family: PingFangSC-Regular;
    font-size: 0.17rem;
    align-items: center;
    .radio-dev {
      width: 0.2rem;
      height: 0.2rem;
      line-height: 0.2rem;
      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 {
      overflow: hidden;
      text-overflow: ellipsis;
      -o-text-overflow: ellipsis;
      white-space: nowrap;
      margin-left: 0.105rem;
      font-size: 0.16rem;
      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>
