<template>
  <div class="AiRanking" :class="'AiRanking-' + theme">
    <component :is="subType" :theme="theme" :data="data"></component>
  </div>
</template>

<script>
  import Ranking1 from './components/Ranking1'
  import Ranking2 from './components/Ranking2'
  import Ranking3 from './components/Ranking3'
  export default {
    name: 'AiRanking',

    components: {
      Ranking1,
      Ranking2,
      Ranking3
    },

    props: {
      data: {
        type: Array,
        default: () => []
      },

      theme: {
        type: String,
        default: '0'
      },

      subType: {
        type: String,
        default: 'Ranking1'
      }
    }
  }
</script>

<style lang="scss" scoped>
  .AiRanking {
    height: 100%;

    * {
      box-sizing: border-box;
    }

    ::-webkit-scrollbar {
      width: 5px;
      height: 14px;
    }

    ::-webkit-scrollbar-corner {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      min-height: 20px;
      background-clip: content-box;
      box-shadow: 0 0 0 5px rgba(116, 148, 170, 0.5) inset;
    }

    ::-webkit-scrollbar-track {
      box-shadow: 1px 1px 5px rgba(116, 148, 170, 0.5) inset;
    }

    &.AiRanking-1 {
      ::-webkit-scrollbar {
        width: 5px;
        height: 14px;
      }

      ::-webkit-scrollbar-corner {
        background: transparent;
      }

      ::-webkit-scrollbar-thumb {
        min-height: 20px;
        background-clip: content-box;
        box-shadow: 0 0 0 5px rgba(250, 181, 108, 0.5) inset;
      }

      ::-webkit-scrollbar-track {
        box-shadow: 1px 1px 5px rgba(50, 181, 108, 0.5) inset;
      }
    }
  }
</style>
