<!-- 智能巡园界面 -->
<template>
  <div class="container2">
    <div :class="['left', { shrink: isShrunk }]">
      <Qxyj @gybg="gybg" class="title-l-t"></Qxyj>
      <Szts class="title-l-c"></Szts>
      <Chts class="title-l-b"></Chts>
      <div class="arrow arrow-left yse-events" @click="toggleShrink">
        <img src="@/assets/img/znxy/arrow.png" alt="">
      </div>
    </div>
    <div class="center">
      <div class="title-c-t">
        <div class="title-c-t-l"></div>
        <div class="title-c-t-r"></div>
      </div>
      <div class="title-c-c">
        <div class="title-c-c-l">
          <Tsyg @selectDay="selectDay"></Tsyg>
        </div>
        <div class="title-c-c-r">
          <!-- 预警图例 -->
          <YjTuli :tabValue="tabValue" class="tuli"></YjTuli>
        </div>
      </div>
      <!-- <div class="title-c-b">
        <Szyc class="title-c-b-l"></Szyc>
        <Bcyc class="title-c-b-r"></Bcyc>
      </div> -->
    </div>
    <div :class="['right', { shrinkRight: isShrunkRight }]">
      <Nslb @workerPath="workerPath"  @addNsRecord="addNsRecord" @nsAllot="nsAllot" ></Nslb>
      <div class="bar">
        <div class="icon">
          <span>万斤</span>
          <el-icon><CaretRight /></el-icon>
        </div>
        <span>1000</span>
        <span>2000</span>
        <span>3000</span>
      </div>
      <div class="arrow arrow-right yse-events" @click="toggleShrinkRight">
        <img src="@/assets/img/znxy/arrow.png" alt="">
      </div>
    </div>
    <TreeDialog v-if="treeShowDialog" @closeDialog="treeCloseDialog" :showDialog="treeShowDialog" :rowData="treeData"  ></TreeDialog>
    <PdfDialog title="果园报告" :src="gybgFilename+'?v='+new Date().getTime()" :showDialog="showDialog"  @closeDialog="closeDialog"></PdfDialog>
  </div>
</template>

<script setup>
import {ROLE} from "@/api/enum"
import Szts from "./charts/l_c/szts";
import Qxyj from "./charts/l_c/qxyj";
import Gzqdtqyb from "./charts/r_t/Gzqdtqyb";
import Bcyc from "./charts/c_b_r/Bcyc";
import YjTuli from "./com/YjTuli";
import Tsyg from "./com/Tsyg";
import no_img from '../../assets/status/no_img.png'
import * as KMap from '@/utils/ol-map/KMap';
import {useStore} from "vuex"
import {onMounted, ref} from "vue"
import TreeDialog from "../../components/TreeDialog";
import Chts from "./charts/l_b/chts";
import Szyc from "./charts/c_b_l/Szyc";
import Nslb from "./charts/r/Nslb";
import PdfDialog from "../../components/PdfDialog";
import {base_img_url3} from "@/api/config.js"

const props = defineProps({
  tabValue:{
    type: Object,
    default: ()=>{},
  }
});


const emit = defineEmits(["setTreeStyle","addNsRecord","nsAllot","morephoto","workerPath","selectDay"]);
let store = useStore()
let warnModelList = ref([])
const treeShowDialog = ref(false);
const treeData = ref(null);
let state = store.state;
const showDialog = ref(false)
const gybgFilename = ref("")

function gybg(filename){
  showDialog.value = true
  gybgFilename.value = filename

}
function closeDialog(){
  showDialog.value = false
}

function treeCloseDialog(){
  treeShowDialog.value = false;
}
function showTreeDialog(f){
  treeData.value = f;
  treeShowDialog.value = true;
}

function addNsRecord(e){
  emit("addNsRecord",e)
}
function workerPath(e){
  emit("workerPath",e)
}
function nsAllot(e){
  emit("nsAllot",e)
}
function morephoto(){
  emit("morephoto")
}
function selectDay(e){
  emit("selectDay",e)
}

defineExpose({
  showTreeDialog
});

// 左收缩
const isShrunk = ref(false);
const toggleShrink = () => {
  isShrunk.value = !isShrunk.value;
};

// 右收缩
const isShrunkRight = ref(false);
const toggleShrinkRight = () => {
  isShrunkRight.value = !isShrunkRight.value;
};
</script>

<style lang="scss" scoped>
.container2{
  height: 100%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 999;
  position: absolute;
  /* background-color: aqua; */
  /* opacity: 0.05; */
}
.left{
  top: 100/16*1rem;
  left: 16/16*1rem;
  position: absolute;
  width: 480/16*1rem;
  height: calc(100% - 10rem);
  z-index: 1000;
  background: #011217;
  transition: transform 0.5s ease; /* 平滑过渡效果 */
  &.shrink {
    transform: translateX(-(496/16*1rem));
  }
}
.arrow{
  position: absolute;
  background: #033341;
  border: 1px solid rgba(2,237,224,0.33);
  padding: 12px 0;
  top: 45%;
  cursor: pointer;
}

.arrow-left{
  right: -25px;
  border-left: none;
}

.shrink {
  transform: translateX(-(496/16*1rem));
  .arrow{
    border: 1px solid rgba(2,237,224,0.33);
    border-right: none;
    transform: rotate(180deg);
  }
}

.center{
  top: 124/16*1rem;
  left:  calc(40/16*1rem + 40/16*1rem + 440/16*1rem);
  right:  calc(40/16*1rem + 40/16*1rem + 440/16*1rem);
  position: absolute;
  height: calc(100% - 10rem);
  z-index: 1000;
}
.right{
  top: 100/16*1rem;
  right: 16/16*1rem;
  position: absolute;
  width: 480/16*1rem;
  height: calc(100% - 10rem);
  transition: transform 0.5s ease; /* 平滑过渡效果 */
  .bar{
    width: 100%;
    height: 19px;
    margin-top: 5px;
    background: linear-gradient(90deg, #5F5AC8, #7A92EB, #DFC323, #EA8E10, #A30D06);
    border-radius: 9px;
    border: 1px solid rgba(255,255,255,0.7);
    color: #FFFDFD;
    display: flex;
    justify-content: space-around;
    .icon{
      display: flex;
      align-items: center;
    }
  }
  &.shrinkRight {
    transform: translateX(496/16*1rem);
  }
}
.arrow-right{
  left: -25px;
  border-left: none;
  transform: rotate(180deg);
}

.shrinkRight {
  transform: translateX(496/16*1rem);
  .arrow{
    border: 1px solid rgba(2,237,224,0.33);
    border-right: none;
    transform: rotate(0);
  }
}
.title-l-t{
  height: 31.5%;
  position: relative;
  border: 1px solid rgba(81, 233, 240, 0.6);
  background: #011217;
}
.title-l-c{
  box-sizing: border-box;
  margin-top: 22px;
  height: 31.5%;
  position: relative;
  border: 1px solid rgba(81, 233, 240, 0.6);
  background: #011217;
}
.title-l-b{
  box-sizing: border-box;
  margin-top: 22px;
  height: 31.5%;
  position: relative;
  border: 1px solid rgba(81, 233, 240, 0.6);
  background: #011217;
}
.title-r-t{
  position: relative;
  height: 33.3%;
}
.title-r-c{
  box-sizing: border-box;
  padding-top: 7px;
  position: relative;
  height: 33.3%;
}
.title-r-b{
  box-sizing: border-box;
  padding-top: 7px;
  position: relative;
  height: 33.3%;
}
.title-c-t{
  position: relative;
  height: 33.3%;
  .title-c-t-l{
    position: relative;
    height: 100%;
    width: 48%;
    float: left;
  }
  .title-c-t-r{
    position: relative;
    height: 100%;
    width: 48%;
    float: right;
  }
}
.title-c-c{
  box-sizing: border-box;
  padding-top: 7px;
  position: relative;
  height: 65.8%;
  .title-c-c-l{
    position: relative;
    height: 100%;
    width: 48%;
    float: left;
  }
  .title-c-c-r{
    position: relative;
    height: 100%;
    width: 48%;
    float: right;
    .tuli{
      position: absolute;
      right: 0%;
      bottom: 10%;
    }
  }
}
.title-c-b{
  box-sizing: border-box;
  padding-top: 2px;
  height: 31.5%;
  .title-c-b-l{
    position: relative;
    height: 100%;
    width: 48%;
    float: left;
    background: #1c0101;
    border: 1px solid rgba(255,8,8,0.6);
  }
  .title-c-b-r{
    position: relative;
    height: 100%;
    width: 48%;
    float: right;
    background: #011217;
    border: 1px solid rgba(81, 233, 240, 0.6);
  }
}


</style>
