<template>
  <div class="title">{{ title }}</div>
  <a-table
    :columns="columns"
    :data-source="listResult"
    :pagination="false"
    size="small"
    :scroll="{ y: 100 }"
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'type'">
        <!-- <div
          :style="{
            backgroundColor: `${getColorByType(record.type)}`,
            width: '10px',
            height: '10px',
            display: 'inline-block',
            marginRight: '5px',
          }"
        /> -->
        {{ record.type }}
      </template>
      <template v-if="column.key === 'stats'">
        {{ stats ? stats : '-' }}
      </template>
      <template v-if="column.key === 'area'">
        {{ record.area }}
      </template>
    </template>
    <template #summary>
      <a-table-summary fixed>
        <a-table-summary-row>
          <a-table-summary-cell>合计</a-table-summary-cell>
          <a-table-summary-cell v-for="col in columns.length - 2">
            <a-typography-text></a-typography-text>
          </a-table-summary-cell>
          <a-table-summary-cell>
            <a-typography-text>{{ result }}</a-typography-text>
          </a-table-summary-cell>
        </a-table-summary-row>
      </a-table-summary>
    </template>
  </a-table>
  <div class="bottom">
    <span v-if="props.title == '土地规划查询结果' && result == 0">
      查询的本图斑并未占用耕地（旱地、水浇地、水田）
    </span>
  </div>
</template>

<script setup lang="ts">
  import { defineProps, computed } from 'vue';
  const props = defineProps(['columns', 'data', 'title']);
  const { columns = [], title = '' } = props;
  const result = computed(() => {
    let sum = 0;
    if (props.data) {
      props.data?.forEach((item) => {
        sum += item.area;
      });
      return roundToTwoDecimals(toStandardFloat(squareMetersToMu(sum)));
    } else {
      return 0;
    }
  });
  const listResult = computed(() => {
    let list: any = [];
    if (props.data) {
      props.data?.forEach((item) => {
        let area = roundToTwoDecimals(toStandardFloat(squareMetersToMu(item.area)));
        if (area > 0) {
          list.push({ type: item.type, area: area });
        }
      });
    }
    return list;
  });

  // 平方米转化为亩
  function squareMetersToMu(squareMeters) {
    const MU_PER_SQUARE_METER = 1 / 666.6667;
    const mu = parseFloat(squareMeters) * MU_PER_SQUARE_METER;
    return parseFloat(mu);
  }
  // 检查数字的字符串表示中是否包含 'e-'，如果是，则为科学计数法
  function toStandardFloat(number, precision = 2) {
    if (typeof number === 'number' && number.toString().includes('e-')) {
      return number.toFixed(precision);
    }
    return number;
  }
  // 将数字四舍五入到小数点后四位
  function roundToTwoDecimals(number) {
    return Math.round(number * 10000) / 10000;
  }

  const colotType = [
    { code: '采矿用地', color: '#30123b', linecolor: '#e8500f' },
    { code: '城镇村道路用地', color: '#38266a', linecolor: '#73cbcd' },
    { code: '城镇住宅用地', color: '#3e3892', linecolor: '#dd59e4' },
    { code: '干渠', color: '#424ab4', linecolor: '#2c22f0' }, // 无此项目
    { code: '高教用地', color: '#455dd0', linecolor: '#e95bb0' }, // 无此项目
    { code: '工业用地', color: '#476de5', linecolor: '#53d711' },
    { code: '公路用地', color: '#467ef5', linecolor: '#e8b184' },
    { code: '公用设施用地', color: '#448ffe', linecolor: '#79d81f' },
    { code: '公园与绿地', color: '#3c9ffd', linecolor: '#1097d5' },
    { code: '沟渠', color: '#31aff5', linecolor: '#c44ab8' },
    { code: '灌木林地', color: '#26bfe8', linecolor: '#9879d2' },
    { code: '广场用地', color: '#1cced7', linecolor: '#44e1b5' },
    { code: '果园', color: '#18dbc6', linecolor: '#7a8ecd' },
    { code: '旱地', color: '#1be5b5', linecolor: '#d75c94' },
    { code: '河流水面', color: '#27eea4', linecolor: '#124df0' },
    { code: '机场用地', color: '#3af490', linecolor: '#ca7263' }, // 无此项目
    { code: '机关团体新闻出版用地', color: '#52fa7a', linecolor: '#25f01e' },
    { code: '交通服务场站用地', color: '#6bfe64', linecolor: '#8114ee' },
    { code: '科教文卫用地', color: '#85ff51', linecolor: '#cc57af' },
    { code: '坑塘水面', color: '#9bfe41', linecolor: '#62da47' },
    { code: '裸土地', color: '#adfb38', linecolor: '#68d5a6' },
    { code: '内陆滩涂', color: '#bef434', linecolor: '#e8de6d' },
    { code: '农村道路', color: '#ceeb34', linecolor: '#6f99dc' },
    { code: '农村宅基地', color: '#dde037', linecolor: '#ffffff' }, // 无对应图片
    { code: '其他草地', color: '#ead439', linecolor: '#785ce8' },
    { code: '其他林地', color: '#f4c73a', linecolor: '#e0bc52' },
    { code: '其他园地', color: '#fbb938', linecolor: '#1685e5' },
    { code: '乔木林地', color: '#fea933', linecolor: '#b0e750' },
    { code: '商业服务业设施用地', color: '#fe972b', linecolor: '#1ee152' },
    { code: '设施农用地', color: '#fc8323', linecolor: '#d5973a' },
    { code: '水工建筑用地', color: '#f76f1a', linecolor: '#28dbc3' },
    { code: '水浇地', color: '#f15c13', linecolor: '#c88be9' },
    { code: '水库水面', color: '#e84b0c', linecolor: '#63e99b' },
    { code: '水田', color: '#de3e08', linecolor: '#1f2ed3' },
    { code: '特殊用地', color: '#d23105', linecolor: '#d7e427' },
    { code: '铁路用地', color: '#c42503', linecolor: '#da2d2d' },
    { code: '物流仓储用地', color: '#b31b01', linecolor: '#c83a65' },
    { code: '养殖坑塘', color: '#a11201', linecolor: '#b8cf67' },
    { code: '竹林地', color: '#8d0a01', linecolor: '#eb445d' },
    // { code: '茶园', linecolor: '#2c22f0' },
    // { code: '管道运输用地', linecolor: '#e95bb0' },
    // { code: '裸岩石砾地', linecolor: '#ca7263' },
  ];

  function getColorByType(value) {
    let linecolor = colotType.find((item) => {
      return item.code == value;
    })?.linecolor;
    // return color || '#7a0403';
    return linecolor || '#73c8d9';
  }
</script>
<style lang="scss" scoped>
  .title {
    display: flex;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
  }
  :deep(.ant-table-summary) {
    background: #fafafa;
  }
  .bottom {
    height: 20px;
  }
</style>
