<template>
  <div>
    <div class="ranking bg-color-black">
      <div class="title d-flex align-center">
         <span>
          <SvgIcon icon-class="tudi" class="text-icon"></SvgIcon>
        </span>
        <span class="fs-xl text">{{ title }}</span>
      </div>

      <dv-scroll-board v-show="type === 3" :config="config" class="dv-scr-board mt-1" />
      <dv-scroll-ranking-board v-show="type !== 3" class="dv-scr-rank-board mt-1" :config="ranking" />
    </div>
  </div>
</template>

<script>
import SvgIcon from "@/components/SvgIcon"
export default {
  components: {
    SvgIcon
  },
  data() {
    return {
    }
  },
  methods: {},
  computed: {
    config () {
      return {
        header: ['年度', '月度', '计划名称'],
        data: this.$store.state.bigdata.safetyPlan.map(i => [i.niandu, i.yuedu, i.jihuamingcheng])
      }
    },
    title () {
      switch (this.type) {
        case 1:
          return '土地资产'
        case 2:
          return '合约中'
        case 3:
          return '安全检查计划'
        default:
          return '土地资产'
      }
    },
    type () {
      return this.$store.state.bigdata.type
    },
    ranking () {
      if (this.type === 1) {
        if (this.$store.state.bigdata.assets[1]) {
          return {
            data: this.$store.state.bigdata.assets[1].map(item => ({
              name: item?.name?.length > 16 ? (item.name.slice(0, 14) + '...') : item.name,
              value: (item.dengjimianji || item.shijimianji) ?? 0
            })),
            carousel: 'single',
            unit: '平方',
            waitTime: 4000,
            rowNum: 3
          }
        }
      } else if (this.type === 2) {
        if (this.$store.state.bigdata.leases) {
          return {
            data: this.$store.state.bigdata.leases.map(item => ({
              name: [...item.land,...item.houses].map(i => i.name)?.toString()?.slice(0, 15),
              value: item.id_leases_to_assets_lease_id_relation?.reduce((pre, cur) => pre + Number(cur.chuzumianji),0)
            })),
            carousel: 'single',
            unit: '平方',
            waitTime: 4000,
            rowNum: 3
          }
        }
      }

    }
  }
}
</script>

<style scoped lang="scss">
.text-icon {
  width: 24px;
  height: 24px;
  color: #1da4a1;
}
.ranking {
  padding: 20px 10px;
  width: 100%;
  .dv-scr-board {
    width: 346px;
    height: 180px;
    padding: 10px;
  }
  .dv-scr-rank-board {
    height: 180px;
    padding: 10px 20px;
  }
  .title {
    display: flex;
    color: #fff;
    padding: 0 20px;
    align-items: center;
    .text {
      padding: 0 8px;
    }
  }
}

::v-deep .dv-scroll-ranking-board .ranking-column .inside-column {
  background: linear-gradient(to left,#7ddacd,#1da4a1);
}
</style>
