<template>
  <div class="bi-template-view">
    <a-row class="template-total-view">
      <a-col :span="7" style="padding-right: 18px;">
        <div class="title-view">
          <span v-if="pageInfo.content.stationNum">站点数量:{{ pageInfo.content.stationNum }}</span>
          <span v-if="pageInfo.content.deviceNum">设备数量:{{ pageInfo.content.deviceNum }}</span>
          <span v-if="pageInfo.content.pointNum">节点数量:{{ pageInfo.content.pointNum }}</span>
        </div>
      </a-col>
      <a-col :span="10"/>
      <a-col :span="7" style="padding-left: 18px;">
        <div class="title-view title-view-center">
<!--            <span>-->
              {{ pageInfo.content.yearEmissionReduction }}
<!--            </span>-->
        </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" icon-show
                           :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"
                           :pageTemplate="Number(pageInfo.pageTemplate)"
                           :public="{cardKey: item.key, dashboardConfigId: item.configId,tablePre:2}"
                           :totalType="0"></component>
              </template>
              <template #extra>
                <img class="icon-open" src="../../../../assets/bi/icon-open.png" 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" class="map-title"/>
          <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"
                           :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"
                           :pageTemplate="Number(pageInfo.pageTemplate)"
                           :public="{cardKey: item.key,dashboardConfigId: item.configId,tablePre:2}"
                           :totalType="0"></component>
              </template>
              <template #extra>
                <img class="icon-open" src="../../../../assets/bi/icon-open.png" 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
                         }">
            <template #chart>
              <component :is="EnumChartType[item.chartType]"
                         isDownload
                         :configType="0"
                         :pageTemplate="pageInfo.pageTemplate"
                         :public="{cardKey: item.key,dashboardConfigId: item.configId, chartType: item.chartType, preview: index==1?2:0, tablePre:2}"
                         :totalType="0"></component>
            </template>
            <template #extra>
              <img class="icon-open" src="../../../../assets/bi/icon-open.png" alt="">
            </template>
          </chart-wrapper>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import ChartWrapper from "@/views/bi/template/default/components/chart-wrapper.vue";
import MapTitle from "@/views/bi/template/default/components/map-title.vue";
import MapFoot from "@/views/bi/template/default/components/map-foot.vue";
import {useRoute} from "vue-router";
const route = useRoute()
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 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>
.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;
      padding-right: 15%;
      box-sizing: border-box;
      justify-content: space-between;

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

    .title-view-center{
      justify-content: center;
      padding-right: 0;
    }
  }

  .template-midden-view {
    padding-top: 10px;
    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;
}

.icon-open{
  margin-right: 5px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
</style>