<template>
  <div class="height100n bi-rotation-contanier" style="width:100%" ref="biRotationList">
    <tsEmpty v-if="!config_.data||config_.data.length==0"></tsEmpty>
    <dv-scroll-ranking-board
      v-else
      :config="config_"
      style="width:100%;height:100%"
      :key="uuid"
      ref="dvScrollRankingBoard"
      id="dvScrollRankingBoard"
    />
  </div>
</template>

<script>
export default {
  name: 'biRotationList',
  components: {},
  props: {
    config: {
      // 属性内容
      type: Object,
      default: () => {
        return {}
      }
    },
    isEditable: {
      // 是否编辑
      type: Boolean,
      default: false
    },
    biData: {
      // bi预览后的data
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      uuid: this.$utils.uuid(6),
      config_: this.getConfig(),
      loading: false
    }
  },
  created() {},
  mounted() {
    this.changeRowNumbers()
    this.changeTextColor()
  },
  methods: {
    getConfig() {
      if (this.isEditable) {
        this.config.data = [
          {
            name: '数据1',
            value: 55123
          },
          {
            name: '数据2',
            value: 12022
          },
          {
            name: '数据3',
            value: 78932
          },
          {
            name: '数据4',
            value: 63411
          },
          {
            name: '数据5',
            value: 44231
          },
          {
            name: '数据6',
            value: 56632
          }
        ]
      } else {
        this.config.data = [...this.biData]
      }
      return this.config
    },
    // 字体色
    changeTextColor() {
      // document.getElementById('dvScrollRankingBoard').style.color =
      //   this.config.textColor || '#fff'
      // this.$refs.dvScrollRankingBoard.$el.style.color = this.config.textColor || '#fff'
    },
    // 序号
    changeRowNumbers() {
      let biRotationListDom = this.$refs.biRotationList
      if (biRotationListDom) {
        this.config.rowNumbers
          ? biRotationListDom.classList.remove('noRank')
          : biRotationListDom.classList.add('noRank')
      }
      // let rankDom = document
      //   .getElementById('biRotationList')
      //   .getElementsByClassName('rank')
      // if (rankDom) {
      //   for (let item of rankDom) {
      //     item.style.display = this.config.rowNumbers ? 'block' : 'none'
      //     console.log(item.style.display)
      //   }
      //   this.$forceUpdate()
      // }
    },
    // 刷新组件
    refreshKey() {
      this.uuid = this.$utils.uuid(6)
    }
  },
  watch: {
    'config.rowNum': {
      handler(n) {
        this.config_.rowNum = n
        this.refreshKey()
      },
      deep: true
    },
    'config.carousel': {
      handler(n) {
        this.config_.carousel = n
        this.refreshKey()
      },
      deep: true
    },
    'config.sort': {
      handler(n) {
        this.config_.sort = n
        this.refreshKey()
      },
      deep: true
    },
    'config.waitTime': {
      handler(n) {
        this.config_.waitTime = n
        this.refreshKey()
      },
      deep: true
    },
    'config.rowNumbers': {
      // 序号
      handler(n) {
        this.changeRowNumbers()
      },
      deep: true
    },
    'config.textColor': {
      // 字体色
      handler(n) {
        this.changeTextColor()
      },
      deep: true
    },
    biData: {
      handler(n) {
        this.config_ = this.getConfig()
        this.refreshKey()
      },
      deep: true
    }
    // config: {
    //   handler(n) {
    //     this.config_ = this.getConfig()
    //   },
    //   deep: true
    // }
  },
  beforeDestroy: function() {}
}
</script>
<style lang="less" scoped>
.bi-rotation-contanier {
  width: calc(100% - 10px) !important;
  height: 100%;
  padding: 0 5px;
  /deep/.dv-scroll-ranking-board {
    .ranking-column {
      margin-top: 0;
      .inside-column {
        background: linear-gradient(-90deg, #02d9fd, #0071fc) !important;
        border-radius: 4px;
      }
    }
    .ranking-info {
      color: var(--base-black);
      .rank {
        color: var(--base-black);
      }
      .info-name {
        color: #9ba0a5;
        font-weight: 400;
      }
    }
  }
}
.noRank {
  /deep/.rank {
    display: none;
  }
}
</style>
