<template>
  <!-- <div class="data-screen-div"> -->
    <div class="right-data-div">
      <div class="currentCounty">
        {{ props.currentCounty.name }}
      </div>
      <TitleSelect :landType="landType" @changeLandType="changeLandType"/>
      <template v-if="firstPage">
        <div class="top-select">
          <TopSelect :landType="landType" :countyId="props.countyId"/>
        </div>
        <div class="data-statistics">
          <DataStatistics :landType="landType" :countyId="props.countyId"/>
        </div>
        <div class="trend-statistics">
          <TrendStatistics :landType="landType" :countyId="props.countyId"/>
        </div>
      </template>
      <template v-else>
        <div class="patch-sumary">
          <PatchSummary :countyId="props.countyId" :landType="landType"/>
        </div>
      </template>
      
      <div class="page-turning" @click="() => firstPage = !firstPage">
        <span >{{firstPage? '排名 ' : '汇总 '}}</span>
        <img src="/statistical/arrow.png" alt="">
      </div>
      <div class="right-decoration"></div>
    </div>
  <!-- </div> -->
</template>

<script setup lang="ts">
import { ref, onMounted, defineProps, defineEmits } from "vue"
import TitleSelect from './TitleSelect/index.vue'
import TopSelect from './TopSelect/index.vue'
import DataStatistics from './DataStatistics/index.vue'
import TrendStatistics from './TrendStatistics/index.vue'
import PatchSummary from './PatchSummary/index.vue'

const props = defineProps(['countyId','currentCounty'])
const emits = defineEmits(["changeLandType"])
const firstPage = ref(true)
const landType = ref('农用地')
const changeLandType = (value) => {
  landType.value = value
  emits("changeLandType",value);
}
</script>

<style lang="scss" scoped>
// .data-screen-div{
//   position: absolute;
//   top: 0;
//   left: 0;
//   width: 100%;
//   height: 100%;
  .right-data-div{
    position: absolute;
    top:0px;
    width: 462px;
    height: 100%;
    background: linear-gradient(to right,rgba(0, 0, 0, 0),rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9),rgba(0, 0, 0, 0.9));
    right: 0px;
    padding: 74px 42px 15px 21px;
    padding-top:88px;
    .currentCounty{
      color:#fff;
      padding:20px 0px 0px 20px;
      font-size:18px;
      margin-bottom:20px;
      font-weight: bold;
    }
    .top-select{
      height:16%;
    }
    .data-statistics{
      height:38%;
    }
    .trend-statistics{
      height: calc( 44% - 120px);
    }
    .patch-sumary{
      height: calc( 100% - 140px);
    }
  }
// }
.page-turning{
  position: absolute;
  top: 102px;
  right: 34px;
  width: 74px;
  height: 30px;
  background: url('@/assets/statistical/page_turning.png');
  background-size: cover;
  font-family: Microsoft YaHei;
  font-weight: 400;
  font-size: 13px;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  img{
    width:18px;
  }
}
.right-decoration{
  position: absolute;
  right: 10px;
  width: 69px;
  background: url('@/assets/statistical/right_decoration.png');
  background-size: cover;
  height: 100%;
  top: 0;
  z-index: 0;
}
</style>
