<template>
  <div class="bi-template-view">
    <a-row class="template-total-view">
      <a-col :span="7" style="padding-right: 18px;">
        <div class="title-view">
          <card-title class="card-title-view" v-if="pageInfo.content.stationNum">
            <template #icon>
              <img src="@/assets/bi/technology/icon-horn.png" alt="">
            </template>
            <span>
                站点数量:<text class="color-orange">{{ pageInfo.content.stationNum }}</text>
              </span>
          </card-title>
          <card-title class="card-title-view" v-if="pageInfo.content.deviceNum">
            <template #icon>
              <img src="@/assets/bi/technology/icon-facility.png" alt="">
            </template>
            <span>
              设备数量:<text class="color-orange">{{ pageInfo.content.deviceNum }}</text>
            </span>
          </card-title>
          <card-title class="card-title-view" v-if="pageInfo.content.pointNum">
            <template #icon>
              <img src="@/assets/bi/technology/icon-node.png" alt="">
            </template>
            <span>
              节点数量:<text class="color-orange">{{ pageInfo.content.pointNum }}</text>
            </span>
          </card-title>
        </div>
      </a-col>
      <a-col :span="10"/>
      <a-col :span="7" style="padding-left: 18px;">
        <div class="title-view">
          <card-title :type="1" v-if="pageInfo.content.yearEmissionReduction">
            <span style="margin-left: 25px">
              {{ pageInfo.content.yearEmissionReduction }}
            </span>
          </card-title>
        </div>
      </a-col>
    </a-row>
    <div class="template-midden-view">
      <a-row class="template-midden-chart-view" :gutter="24">
        <a-col :span="7" class="template-midden-chart-col-view">
          <div class="template-midden-chart-item-wrapper" v-for="(item,index) in pageInfo.cardList.leftTop"
               :key="index">
            <chart-wrapper :title="item.cardName" :unit="item.unit" isDownload
                           :requestParams="{
                              stationId: route.query.stationId,
                              isPre: route.query.isPre
                           }"
                           :public="{
                              chartType:item.chartType,
                              cardKey: item.key,
                              dashboardConfigId: item.configId
                            }">
              <template #chart>
                <component :is="EnumChartType[item.chartType]"
                           :configType="0"
                           isDownload
                           :public="{cardKey: item.key,dashboardConfigId: item.configId,chartType: item.chartType,tablePre:2}"
                           :totalType="1"></component>
              </template>
              <template #extra>
                <img :src="iconRight" alt="">
              </template>
            </chart-wrapper>
          </div>
        </a-col>
        <!--    地图      -->
        <a-col :span="10" class="template-midden-map-view"
               :style="{'background-image': `url(${pageInfo.coreBackground.url || backgroundCover })`}">
          <map-title v-if="pageInfo.coreMain" :data="pageInfo.coreMain"/>
          <map-foot class="map-foot" v-if="pageInfo.coreSubStatData.length" :data="pageInfo.coreSubStatData"></map-foot>
        </a-col>
        <a-col :span="7" class="template-midden-chart-col-view">
          <!--     右侧图表       -->
          <div class="template-midden-chart-item-wrapper" v-for="(item,index) in pageInfo.cardList.rightTop"
               :key="index">
            <chart-wrapper :title="item.cardName"
                           :unit="item.unit"
                           :requestParams="{
                             stationId: route.query.stationId,
                             isPre: route.query.isPre
                           }"
                           :public="{
                             chartType:item.chartType,
                             cardKey: item.key,
                             dashboardConfigId: item.configId
                           }">
              <template #chart>
                <component :is="EnumChartType[item.chartType]"
                           isDownload
                           :configType="0"
                           :public="{cardKey: item.key,dashboardConfigId: item.configId,tablePre:2}"
                           :totalType="1">
                </component>
              </template>
              <template #extra>
                <img :src="iconRight" alt="">
              </template>
            </chart-wrapper>
          </div>

        </a-col>
      </a-row>
      <a-row class="template-midden-table-view">
        <a-col class="template-midden-table-item-wrapper" v-for="(item,index) in pageInfo.cardList.bottomList"
               :span="index == 0 ? 17 : 7">
          <chart-wrapper :title="item.cardName" icon-show
                         :requestParams="{
                          stationId: route.query.stationId,
                          isPre: route.query.isPre
                        }"
                         :public="{
                           chartType: item.chartType,
                           cardKey: item.key,
                           dashboardConfigId: item.configId,
                         }"
                         :unit="item.unit">
            <template #chart>
              <component :is="EnumChartType[item.chartType]"
                         :configType="0"
                         isDownload
                         :pageTemplate="pageInfo.pageTemplate"
                         :public="{cardKey: item.key,chartType:item.chartType,dashboardConfigId: item.configId, preview: index==1?2:0,tablePre:2}"
                         :totalType="0"></component>
            </template>
            <template #extra>
              <img :src="iconRight" alt="">
            </template>
          </chart-wrapper>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import ChartWrapper from "@/views/bi/template/technology/components/chart-wrapper.vue";
import CardTitle from "@/views/bi/template/technology/components/card-title.vue";
import MapTitle from "@/views/bi/template/technology/components/map-title.vue";
import MapFoot from "@/views/bi/template/technology/components/map-foot.vue";
import iconRight from "@/assets/bi/technology/icon-arrow-right.png";
import {useRoute} from "vue-router";

const EnumChartType: any = {
  1: 'large-combine',
  2: 'large-combine',
  3: 'large-combine',
  4: 'large-stack',
  5: 'large-combine',
  6: 'large-pie',
  7: 'large-k',
  8: 'large-water',
  9: 'large-gauge',
  10: 'large-sankey',
  11: 'large-section',
  12: 'large-ranking',
  13: 'large-screen-status',
  14: 'card-base',
  15: 'large-table',
  16: 'large-table',
  17: 'card-chart-pie-statistics',
  18: 'large-combine',
};

const route = useRoute()

const props = defineProps({
  pageInfo: {
    type: Object,
    default: () => {
      return {
        cardList: {
          leftTop: [],
          bottomList: [],
          rightTop: []
        },
        coreSubStatData: [],
        background: {},
        pageTemplate: 2,
        coreBackground: {},
        header: {
          date: true,
          weather: true,
          network: true
        },
        coreMain: {},
        pageName: "",
        content: {}
      }
    }
  },
  // 中央图片
  backgroundCover: {
    type: String,
    default: ''
  }
})
</script>

<style lang="less" scoped>
.color-orange {
  font-size: 14px;
  font-weight: bold;
  color: #F3921D;
  margin: 0 5px;
}

.bi-template-view {
  width: 100%;
  height: 100%;

  .template-total-view, .template-midden-view, .template-table-view {
    padding: 0 32px;
  }

  .template-total-view {
    top: 80px;
    position: absolute;
    width: 100%;
    height: 30px;

    .title-view {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      .card-title-view {
        width: 32.8%;
      }
    }
  }

  .template-midden-view {
    padding-top: 18px;
    height: 100%;

    .template-midden-chart-view {
      height: calc(100% - 220px);

      .template-midden-chart-col-view {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .template-midden-chart-item-wrapper {
          width: 100%;
          height: calc(100% / 3);
          margin-bottom: 8px;
        }
      }
    }

    .template-midden-map-view {
      background-repeat: no-repeat;
      height: 100%;
      position: relative;
      background-size: contain;
      background-position: center;

      .map-foot {
        position: absolute;
        bottom: 0;
      }
    }

    .template-midden-table-view {
      height: 235px;

      .template-midden-table-item-wrapper {
        width: 100%;
        height: 100%;

        &:nth-child(2) {
          padding-left: 16px;
          box-sizing: border-box;
        }
      }
    }
  }
}

:deep(.arco-spin-mask) {
  background: transparent;
}
</style>