<template>
  <div id="cmp1">
    <div class="d-flex pt-2 pl-2">
      <span style="color:#5cd9e8">
        <icon name="align-left"></icon>
      </span>
      <span class="fs-xl text mx-2">管控人在重点场所活跃度</span>
    </div>
    <Echart
      :options="options"
      id="cmp1"
      style="position: absolute;top:.4rem;width: 100%;"
    ></Echart>
  </div>
</template>

<script>
  import Echart from '../../common/echart'
  export default{
    components:{
      Echart,
    },
    data(){
      return{
        options:{}
      }
    },
    mounted() {
      this.init()
    },
    methods:{
      init(){
        let data = [
            {name: '李**', sign:'前科',location:'大山二手专卖店',value: 97},
            {name: '王**', sign:'前科',location:'金凤尚酷网吧',value: 87},
            {name: '张**', sign:'精神病',location:'西红酒店',value: 57},
            {name: '晓**', sign:'前科',location:'永宁万达广场',value: 20},
            {name: '李**', sign:'精神病',location:'金凤金辉酒店',value: 10},
        ]
        let xAxisData = data.map(item => item.name)
        let seriesData = data.map(item => item.value)
        let maxSeriesData = []
        const MAX = Math.max(...seriesData)
        for (let i = 0; i < seriesData.length; i++) {
            maxSeriesData.push(MAX)
        }
        let barLinearColors = [
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
              { offset: 0, color: "#EB3B5A" },
              { offset: 1, color: "#FE9C5A" }
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
              { offset: 0, color: "#FA8231" },
              { offset: 1, color: "#FFD14C" }
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
              { offset: 0, color: "#F7B731" },
              { offset: 1, color: "#FFEE96" }
            ]),
            new echarts.graphic.LinearGradient(0, 1, 1, 1, [
              { offset: 0, color: "#395CFE" },
              { offset: 1, color: "#2EC7CF" }
            ])
        ]

        function rankBarColor (cData) {
            let tempData = []
            cData.forEach((item, index) => {
                tempData.push({
                    value: item,
                    itemStyle: {
                        color: index > 3 ? barLinearColors[3] : barLinearColors[index]
                    }
                })
            })
            return tempData
        }
        function leftBarData(){
          let arr = []
          data.map((item)=>{
            let obj = item.name + '  ' + item.sign + '  ' + item.location
            arr.push(obj)
          })
          return arr
        }
        function rightBarData(){
          let arr = []
          seriesData.map((item)=>{
            let obj = item + '次'
            arr.push(obj)
          })
          return arr
        }
        var option = {
            grid:{
                left:30,
                top:12,
                bottom:0
            },
            tooltip: {
                backgroundColor: 'rgba(50,50,50,.3)',
                textStyle: {
                    color: '#222'
                }
            },
            xAxis: {
              type: "value",
              splitLine: { show: false },
              axisLabel: { show: false },
              axisTick: { show: false },
              axisLine: { show: false }
            },
                yAxis: [
                  {
                    type: "category",
                    inverse: true,
                    axisLine: { show: false },
                    axisTick: { show: false },
                    data: xAxisData,
                    axisLabel: {
                      rich: {
                        nt1: {
                          color: "#fff",
                          backgroundColor: '#EB3B5A',
                          fontSize: 12,
                          align: "center",
                          borderRadius: 25,
                          padding: [0, 3, 0, 3]
                        },
                        nt2: {
                          color: "#fff",
                          backgroundColor: '#FA8231',
                          fontSize: 12,
                          align: "center",
                          borderRadius: 25,
                          padding: [0, 3, 0, 3]
                        },
                        nt3: {
                          color: "#fff",
                          backgroundColor: '#F7B731',
                          fontSize: 12,
                          align: "center",
                          borderRadius: 25,
                          padding: [0, 3, 0, 3]
                        },
                        nt: {
                          color: "#fff",
                          backgroundColor: '#00a9c8',
                          fontSize: 12,
                          align: "center",
                          borderRadius: 25,
                          padding: [0, 3, 0, 3]
                        }
                      },
                      formatter: function(value, index) {
                        let idx = index + 1
                        if (idx <= 3) {
                          return ["{nt" + idx + "|" + idx + "}"].join("\n");
                        } else {
                          return ["{nt|" + idx + "}"].join("\n");
                        }
                      }
                    }
                  },
                  {//名称
                  type: 'category',
                    offset: -10,
                    position: "left",
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: {
                      color: '#fff',
                      align: "left",
                      verticalAlign: "bottom",
                      lineHeight: 20,
                      fontSize: 12
                    },
                    data: leftBarData()
                  },
                  {
                    type: "category",
                    inverse: true,
                    axisTick: "none",
                    axisLine: "none",
                    show: true,
                    axisLabel: {
                      textStyle: {
                        color: "#fff",
                        fontSize: "10"
                      }
                    },
                    data: rightBarData()
                  },
                ],
                series: [
                  {
                    zlevel: 1,
                    type: "bar",
                    barWidth: 6,
                    data: rankBarColor(seriesData),
                    itemStyle: {
                      normal: {
                        barBorderRadius: 30,
                      }
                    },
                    // label: {
                    //   show: true,
                    //   fontSize: 12,
                    //   color: "#fff"
                    // }
                  },
                  {
                    type: "bar",
                    barWidth: 6,
                    barGap: "-100%",
                    itemStyle: {
                      normal: {
                        barBorderRadius: 30,
                        color: '#05325F'
                      }
                    },
                    data: maxSeriesData
                  }
                ]
              };
        this.options = option
      }
    }
  }
</script>

<style lang="less" scoped="scoped">
  #cmp1{
    width: 100%;
    height: 3rem;
    position: relative;
  }
</style>
