<template>
  <div class="rank">
    <custom-rank-List :chart-config="state" />
  </div>
</template>

<script setup>
import { reactive, watch } from 'vue';
import { isEmpty } from '@/utils';

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

const state = reactive({
  attr: { w: '100%', h: 240 },
  option: {
    // 数据
    dataset: [],
    type: 'row',
    rowNum: 6,
    isAnimation: true,
    waitTime: 2,
    unit: '万元',
    sort: true,
    height: 12,
    color: 'linear-gradient(90deg,rgba(53,208,192,0.00), #35d0c0)',
    textColor: '#fff',
    borderRadius: '12px',
    carousel: 'single',
    indexPrefix: 'TOP',
    indexFontSize: 22,
    leftFontSize: 16,
    rightFontSize: 16,
    valueFormatter: (item) => {
      return item.value;
    },
  },
});

watch(
  () => props.data,
  (val) => {
    if (!isEmpty(val)) {
      state.option.dataset = val;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
</script>
<style scoped lang="scss">
.rank {
  padding: 10px 20px;

  &:deep(.row-item) {
    .ranking-info {
      color: #35d0c0 !important;
      font-family: 'DingTalk JinBuTi, DingTalk JinBuTi-Regular';
      font-weight: 700;
    }

    .inside-column {
      border-radius: 8px;
    }
  }

  &:deep(.row-item-1) {
    .ranking-info {
      color: #fe7f03 !important;
    }
    .ranking-value {
      color: #fe7f03 !important;
    }
    .inside-column {
      background: linear-gradient(90deg, rgba(254, 127, 3, 0), #fe7f03) !important;
    }
  }

  &:deep(.row-item-2) {
    .ranking-info {
      color: #fef906 !important;
    }
    .ranking-value {
      color: #fef906 !important;
    }
    .inside-column {
      background: linear-gradient(90deg, rgba(254, 249, 6, 0), #fef906) !important;
    }
  }

  &:deep(.row-item-3) {
    .ranking-info {
      color: #02fd94 !important;
    }
    .ranking-value {
      color: #02fd94 !important;
    }
    .inside-column {
      background: linear-gradient(90deg, rgba(2, 253, 148, 0), #02fd94) !important;
    }
  }
}
</style>
