<template>
  <centerMap :dialog-title="'土地类型'" @mapclick="doMapclick">
    <template #header>
      <div class="land-map-pop-header">
        <div class="title">土地类型</div>
        <div class="value">总：{{ all + unit }}</div>
      </div>
    </template>
    <template #dialogContent>
      <div class="land-map-pop-content">
        <div v-for="(n, index) in list" :key="index" class="list-item">
          <div class="title">
            <div class="before">
              <div class="b-content" :style="{ background: n.color }"></div>
            </div>
            <span class="title-val"> {{ n.title }}</span>
          </div>
          <div class="value">{{ n.value }}{{ unit }}</div>
        </div>
      </div>
    </template>
  </centerMap>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from 'vue';

const unit = ref('万亩');
const list = reactive([
  { title: '望天田', value: '60.8', color: '#01FEFD' },
  { title: '菜地', value: '60.8', color: '#FEF906' },
  { title: '水浇地', value: '60.8', color: '#02FD94' },
  { title: '果园', value: '60.8', color: '#FE7F03' },
  { title: '灌溉水田', value: '60.8', color: '#41BDFC' },
  { title: '旱地', value: '60.8', color: '#FC0003' },
]);
function doMapclick() {
  list.forEach((v) => {
    v.value = Number(v.value) + 1 * (Math.floor(Math.random() * (6 - 2 + 1)) + 2.12).toFixed(0);
  });
}
const all = computed(() => {
  let n = 0;
  list.forEach((v) => {
    n += v.value;
  });
  return n;
});
</script>

<style lang="scss" scoped>
.land-map-pop-header {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 3px;
  .title,
  .value {
    display: inline-block;
    vertical-align: middle;
    color: $color-white;
  }
  .title {
    font-size: 18px;
  }
  .value {
    font-size: 14px;
  }
}
.land-map-pop-content {
  width: 100%;
  gap: 10px;
  display: inline-flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .list-item {
    width: calc((100% - 10px) / 2);
    display: inline-flex;
    justify-content: space-between;
    padding: 6px 0;
    .title {
      display: inline-flex;
      justify-content: flex-start;
      .before {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
      }
      .b-content {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        display: inline-block;
      }
      .before,
      .title-val {
        display: inline-block;
        vertical-align: middle;
        padding: 0 5px 0 2px;
        color: $color-white;
      }
    }

    .value {
      display: inline-block;
      text-align: right;
      color: $color-white;
      font-size: 12px;
    }
  }
}
</style>
