<template>
    <div class="centerDiv">
      <Legend
      ref="legendRef"></Legend>
      <Change ref="changeRef" @changeWhq="changeWhq"></Change>
      <VChange ref="vChangeRef" @changeType="changeType"></VChange>
      <div class="content scrollable" ref="contentDivRef">
          <WhiteDotCharts
            :currentPeriod="currentPeriod"
            :bgColor="bgColors[0]"
            :title="currentPeriod.name"
            :targetName="targetName"
            :targetField="targetField"
            :treeGrowData="treeGrowData"
            :treeId="treeId"
            ref="chartsRef"
          >
          </WhiteDotCharts>
      </div>
    </div>
</template>

<script setup>
import {ref,onMounted,nextTick, toRefs} from "vue";
import WhiteDotCharts from "./charts/PercenCharts";
import Legend from "./charts/Legend";
import Change from "./charts/Change";
import VChange from "./charts/VChange";
const showWhq = ref(1);
const bgColors = ["#FFFFFF","#FFFFFF"];
const periodList = ref([]);
const nsType = ref([]);
const nsData = ref([]);
const treeGrowData = ref([]);
const legendRef = ref(null);
const changeRef = ref(null);
const vChangeRef = ref(null);
const targetName = ref([]);
const targetField = ref([]);
const currentPeriod = ref({ "id":1,
            "name":"白点期",
            "attrFields":["whitePoint"],
            "attrNames":["白点率"]});
const chartsRef = ref(null);
function changeWhq(e){
  console.log(e);
  showWhq.value = e
  let period = periodList.value.find(item=>item.id == e);
  getDataByWhq(e,function(){
    if(period){
      let {attrFields,attrNames,id,name} = period;
      targetName.value = attrNames[0];
      targetField.value = attrFields[0];
      period.nsType = nsType.value;
      currentPeriod.value = period;
      vChangeRef.value.setTypeData(attrFields,attrNames);
    }
  });
}
async function changeType(e){
  let targetField1 = e;
  let index = currentPeriod.value.attrFields.indexOf(targetField1);
  let targetName1 = currentPeriod.value.attrNames[index];
  targetField.value = targetField1;
  targetName.value = targetName1;
  nextTick(()=>{
    chartsRef.value.changeType();
  })
}
const props = defineProps({
  treeId: {
    type: Number,
    default: null,
  },
});
const {treeId} = toRefs(props)
function getDataByWhq(periodId,callback){
  //获取农事类型
  VE_API.tree.nongShiList({periodId:periodId}).then(res=>{
    if(res.code == 0){
      if(legendRef.value){
        legendRef.value.changeLegedData(res.data);
      }
      nsType.value = res.data;
      if(callback){
        callback();
      }
    };
  });
}
async function getPeriod(){
  let {code,data} = await VE_API.lzxt.periodList();
  if(code == 0){
    periodList.value = data;
    if(changeRef.value){
      changeRef.value.setPeriodData(data);
    }
  }
}
onMounted(async()=>{
  await getPeriod();
  getDataByWhq(showWhq.value,function(){
    let period = periodList.value.find(item=>item.id == showWhq.value);
    if(period){
      let {attrFields,attrNames,id,name} = period;
      targetName.value = attrNames[0];
      targetField.value = attrFields[0];
      period.nsType = nsType.value;
      currentPeriod.value = period;
      vChangeRef.value.setTypeData(attrFields,attrNames);
    }
  });
})

function getData(treeId_){
  let forms = new FormData();
  forms.append("treeId",treeId);
  //生长数据列表
  VE_API.tree.treeGrowData(forms).then(res=>{
    if(res.code == 0){
      treeGrowData.value = res.data;
    }
  });
  let forms2 = {treeId:treeId,dateRange:['2023-07-01','2023-08-30'],direction:0,sortField:['startDate'],page:1,limit:10000}
  VE_API.tree.siteList(forms2).then(res=>{
    if(res.code == 0){
      nsData.value = res.data;
    }
  });
}
</script>

<style lang="scss" scoped>
.centerDiv{
  // margin-left: 20px;
  // border: 2px solid #e2dede;
  // padding: 20px;
  position: relative;
  float: left;
  display: flex;
  flex-direction: column-reverse;
}
.centerDiv .content{
  white-space: nowrap;
  overflow-x: auto;
  /* 可选项：也可以设置设置一些其他的样式 */
  width: 100%;
  height: 100%;
  scroll-margin-right: 0px;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 10px;
}
::-webkit-scrollbar-track {
  background-color: #F5F5F5;
  border-radius: 10px;
}
</style>
