<template>
  <section class="land_area_all">
    <section class="_left">
      <section class="_circle">{{ _circleNum }}</section>
      <section class="_text">{{ allNum }}万亩</section>
    </section>
    <section class="_right _scroll">
      <section
        v-for="(item, i) in list"
        :key="`right_${i}`"
        class="list_item w100"
        :class="[item.id == ac ? 'active' : '']"
        @click="handleAc(item.id)"
      >
        <span class="_label">
          <span class="_spot" :style="{ background: item.color }"></span>
          {{ item.label }}
        </span>
        <span class="_value">{{ item.value }}万亩</span>
      </section>
    </section>
  </section>
</template>

<script setup>
import { ref, watch, computed } from 'vue';
const props = defineProps({
  data: {
    type: Array,
    default: () => {
      return [
        { value: 58.9, label: '灌溉水田' },
        { value: 56.1, label: '基地地' },
        { value: 60.8, label: '望天田' },
        { value: 60.6, label: '水浇地' },
        { value: 32.6, label: '林地' },
        { value: 25.8, label: '育苗地' },
        { value: 56.0, label: '果园' },
        { value: 52.4, label: '草地' },
        { value: 6.3, label: '观测用地' },
        { value: 6.1, label: '监测用地' },
      ];
    },
  },
});
const list = ref([]);
const ac = ref(0);
const allNum = ref(0);
const currNum = ref(0);

watch(
  () => props.data,
  () => {
    list.value = props.data.map((v, i) => {
      allNum.value += v.value;
      return {
        id: i,
        ...v,
        color: randomColor(),
      };
    });
    list.value.sort((a, b) => b.value - a.value);
    console.log('list', list.value);
  },
  {
    immediate: true,
  }
);
function randomColor() {
  let obj = {
    r: 0,
    g: 0,
    b: 0,
  };
  Object.keys(obj).forEach((key) => {
    obj[key] = Math.floor(Math.random() * 256);
  });
  return `rgb(${obj.r},${obj.g},${obj.b})`;
}
function handleAc(val) {
  ac.value = val;
  currNum.value = list.value.find((v) => v.id == val).value ?? 0;
}
const _circleNum = computed(() => {
  let s = ((currNum.value / allNum.value) * 100).toFixed(1);
  console.log('s----------', currNum.value, allNum.value, s);
  return s + '%';
});
</script>

<style lang="scss" scoped>
.land_area_all {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  height: 100%;
  ._left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    ._circle {
      padding-top: 18%;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'JinBuTi';
      width: 80%;
      aspect-ratio: 1/1;
      font-size: 18px;
      color: #fff;
      border-radius: 50%;
      background: url('../../../assets/images/land/countCircleBG.png') no-repeat center center / cover;
    }
    ._text {
      width: 100%;
      height: 40px;
      background: url('../../../assets/images/land/countTextBG.png') no-repeat center center / cover;
      text-align: center;
      line-height: 40px;
      color: #fff;
      font-size: 20px;
      font-weight: bold;
      text-shadow: 0 0 4px #fff;
    }
  }
  ._right {
    padding-right: 4px;
    height: 100%;
    overflow-y: auto;
    .list_item {
      padding: 0 24px;
      position: relative;
      display: flex;
      grid-template-columns: 60% 40%;
      justify-content: space-between;
      align-items: center;
      height: 32px;
      color: #fff;
      cursor: pointer;
      user-select: none;
      &.active {
        background-color: rgba($color: #4aeb82, $alpha: 0.4);
        border: 1px solid rgba($color: #008f32, $alpha: 08);
        border-radius: 4px;
        overflow: hidden;
        .spot {
          transform: scale(1.2);
        }
        ._label,
        ._value {
          font-size: 18px;
        }
      }
      ._label {
        ._spot {
          display: inline-block;
          position: absolute;
          left: 8px;
          top: 50%;
          transform: translateY(-25%);
          width: 8px;
          height: 8px;
          border-radius: 50%;
        }
      }
      ._value {
        text-align: right;
      }
    }
  }
}
</style>
