<template>
  <div id="userCityBarBox">
    <div id="userCityBar" ref="bar_wrap">
      <div v-for="(userData,index) in userDatas" class="userBarText" :key="index">
        <span>
          <li><i>{{index + 1}}.</i>{{userData.city}}</li><a>{{userData.percentage.toFixed(0)}}%</a>
        </span>
        <user-bar :percentage="userData.percentage/100" :linearColors="userData.linearColors" :strokeWidth="12">
        </user-bar>
      </div>
    </div>
  </div>
</template>

<script>
  import userBar from '@/components/progress/progress.vue' // 进度条
  export default {
    components: {
      'user-bar': userBar
    },
    data() {
      return {
        chart: null,
        cityNames: [], // 名称
        cityValues: [], // 值
        options: {},
        userDatas: [], // 数据
        barStyle: [
          [{
            v: 25,
            s: '#f52828',
            e: '#f52828'
          }, {
            v: 50,
            s: '#f52828',
            e: '#f52828'
          }, {
            v: 75,
            s: '#f52828',
            e: '#f52828',
            ef: true
          }, {
            v: 100,
            s: '#f52828',
            e: '#f52828'
          }],
          [{
            v: 25,
            s: '#FF9900',
            e: '#FF9900'
          }, {
            v: 50,
            s: '#FF9900',
            e: '#FF9900'
          }, {
            v: 75,
            s: '#FF9900',
            e: '#FF9900',
            ef: true
          }, {
            v: 100,
            s: '#FF9900',
            e: '#FF9900'
          }],

          [{
            v: 25,
            s: '#1be319',
            e: '#1be319'
          }, {
            v: 50,
            s: '#1be319',
            e: '#1be319'
          }, {
            v: 75,
            s: '#1be319',
            e: '#1be319',
            ef: true
          }, {
            v: 100,
            s: '#1be319',
            e: '#1be319'
          }],
          [{
            v: 25,
            s: '#66abfb',
            e: '#66abfb'
          }, {
            v: 50,
            s: '#66abfb',
            e: '#66abfb'
          }, {
            v: 75,
            s: '#66abfb',
            e: '#66abfb',
            ef: true
          }, {
            v: 100,
            s: '#66abfb',
            e: '#66abfb'
          }]
        ]
      }
    },
    props: {
      moreUserCount: {
        type: Number,
        default: 0
      }
    },

    created() {
      this.getDelDate()
    },
    // mounted() {
    //   setTimeout(() => {
    //     this.getDelDate()
    //   }, 500)

    // },

    watch: {
      'options': {
        handler(newval, oldval) {
          if (newval !== oldval) {
            this.$nextTick(() => {
              this.echartsBarInit()
            })
          }
        },
        deep: true
      }
    },

    methods: {

      // 获取数据
      async getDelDate() {
        let _this = this
        const res = await this.$get(this.$guiApi.guideHome.cityQuery)
        if (res.code == 0) {
          let datas = res.data
          datas.forEach((val, index) => {
            val.percentage = _this.perCentage(val.more)
            if (index <= 2) {
              val.linearColors = _this.barStyle[index]
            } else {
              val.linearColors = _this.barStyle[3]
            }

            _this.userDatas.push(val)
          })
          //   this.echartsBarSetOptions();
        }
      },

      // 使用echars 方法生成 进度条
      echartsBarSetOptions() {
        let _this = this
        const options = {
          grid: {
            left: 10,
            containLabel: true
          },
          xAxis: {
            type: 'value',
            show: false
          },
          yAxis: {
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              color: 'black',
              fontSize: 20
            },
            data: this.cityNames.reverse()
          },
          series: [ // 系列列表。每个系列通过 type 决定自己的图表类型
            {
              name: '%', // 系列名称
              type: 'bar', // 柱状、条形图
              barWidth: 10, // 柱条的宽度,默认自适应
              data: this.cityValues.reverse(), // 系列中数据内容数组
              label: { // 图形上的文本标签
                show: true,
                position: 'left', // 标签的位置
                offset: [-5, 20], // 标签文字的偏移，此处表示向上偏移40
                formatter: '{c}{a}', // 标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
                color: 'black', // 标签字体颜色
                fontSize: 16 // 标签字号
              },
              itemStyle: { // 图形样式
                normal: { // normal 图形在默认状态下的样式;
                  barBorderRadius: 10, // 柱条圆角半径,单位px.
                  color: new _this.$echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                        offset: 0,
                        color: '#22B6ED' // 柱图渐变色起点颜色
                      },
                      {
                        offset: 1,
                        color: '#3FE279' // 柱图渐变色终点颜色
                      }
                    ]
                  )
                }
              },
              zlevel: 1 // 柱状图所有图形的 zlevel 值,
              // zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
            },
            {
              name: '进度条背景',
              type: 'bar',
              barGap: '-100%', // 不同系列的柱间距离，为百分比。
              barWidth: 10,
              data: [100, 100, 100, 100, 100, 100, 100, 100, 100, 100],
              color: '#dedee2', // 柱条颜色
              itemStyle: {
                normal: {
                  barBorderRadius: 10
                }
              }
            }
          ]
        }
        this.options = options
      },

      // 调用  echarts  生成进度条
      echartsBarInit() {
        // this.chart = this.$echarts.init(this.$refs.bar_wrap);// 初始化echarts实例
        // this.chart.setOption(this.options)
      },

      // 计算百分比  转换为 两位整数
      perCentage(molecule) {
        let total = this.moreUserCount
        if (molecule == 0 || total == 0) {
          return 0
        }
        return ((molecule / total).toFixed(2) * 100)
      }
    }
  }

</script>

<style lang='scss' scoped>
  #userCityBarBox {
    width: 100%;
    position: relative;
    padding-bottom: 13px;

    .userBarText {
      width: 90%;
      margin: 24px 24px;
      /* box-sizing: border-box;
      display: flex; */
      align-items: center;

      span {
        float: left;
        width: 100%;

        li {
          font: normal 1.1em Arial, Helvetica, sans-serif;
          color: #000;
          margin-left: 10px;
          float: left;
          font-size: 20px;

          i {
            display: inline-block;
            font-size: 22px;
            margin-right: 10px;
            vertical-align: top;
          }
        }

        a {
          float: right;
          font-size: 20px;
          display: inline-block;
          margin-top: 3px;
          color: #000;
        }
      }

      div {
        width: 98%;
        padding-left: 10px;
        margin-top: 2px;
      }
    }

    .userBarText:first-child {
      span {
        /* li {
          color: rgba(118, 103, 213, 1);

          i {
            color: rgba(118, 103, 213, 1);
          }
        } */

        a {
          color: #f52828;
        }
      }
    }

    .userBarText:nth-child(2) {
      span {
        /* li {
          color: rgba(0, 73, 198, 1);

          i {
            color: rgba(0, 73, 198, 1);
          }
        } */

        a {
          color: #FF9900;
        }
      }
    }

    .userBarText:nth-child(3) {
      span {
        /* li {
          color: rgba(245, 188, 83, 1);

          i {
            color: rgba(245, 188, 83, 1);
          }
        } */

        a {
          color: #1be319;
        }
      }
    }
  }

</style>
