<template>
  <el-dialog
      class="my-dialog yse-events"
      :align-center="true"
      with-header="false"
      destroy-on-close
      :model-value="showDialog"
      @close="closeDialog()"
      :modal="true"
  >
    <div class="dialog-box">
      <div class="title">
        <div class="myclose cursor-pointer" @click="closeDialog"></div>
      </div>
      <div class="my-body">
        <div class="left">
          <div class="img-box">
            <img class="img" :src="base_img_url2 + currentImg + '?imageView2/1/w/1000/interlace/1'" />
          </div>
          <div class="img-list">
            <ImageSelect  v-if="imageList.length > 0" :label="rowData.get('code')" :imageList="imageList"  @selectImg="selectImg"  :current="currentImgId"></ImageSelect>
          </div>
        </div>
        <div class="right">
          <div class="basic green-tabs">
            <el-tabs v-model="basicTabVal">
              <el-tab-pane  name="first">
                <template #label>
                <span class="tab-label"  @click="showZNSB = true;">
                  <span>
                    <el-icon><Document /></el-icon>
                    基本信息
                  </span>
                </span>
                </template>
                <div class="context">
                  <div class="name">编号</div>
                  <div class="val">{{rowData.get("code")}}</div>
                  <div class="name">树种</div>
                  <div class="val">{{rowData.get("pz")}}</div>
                  <div class="name">冠幅</div>
                  <div class="val">无</div>
                  <div class="name">树龄</div>
                  <div class="val">无</div>
                  <div class="name">产量估计</div>
                  <div class="val">无</div>
                  <div class="name">成本投入</div>
                  <div class="val">无</div>
                  <div class="name">经纬度</div>
                  <div class="val">{{location}}</div>
                  <div class="name"></div>
                  <div class="val"></div>
                </div>
              </el-tab-pane>
              <el-tab-pane v-if="false"  name="second">
                <template #label>
                <span class="tab-label"  @click="showZNSB = true;">
                  <span>
                    <el-icon><Checked /></el-icon>
                    农事列表
                  </span>
                </span>
                </template>
                <div class="table">
                  <el-row class="row row-bg" :gutter="0">
                    <el-col :span="2"><div class="head" >时间</div></el-col>
                    <el-col :span="2"><div class="head" >温度</div></el-col>
                    <el-col :span="2"><div class="head" >天气</div></el-col>
                    <el-col :span="2"><div class="head" >下发人</div></el-col>
                    <el-col :span="2"><div class="head" >物候期</div></el-col>
                    <el-col :span="4"><div class="head" >药物</div></el-col>
                    <el-col :span="2"><div class="head" >配比/倍</div></el-col>
                    <el-col :span="2"><div class="head" >用量</div></el-col>
                    <el-col :span="2"><div class="head" >作用</div></el-col>
                    <el-col :span="2"><div class="head" >方式</div></el-col>
                    <el-col :span="2"><div class="head" >执行人</div></el-col>
                  </el-row>
                  <div v-for="(item,index) in nsList" :key="index" >
                    <el-row class="row row-bg" :gutter="0">
                      <el-col :span="2"><div class="text1" >{{item.startDate.substr(5)}}</div></el-col>
                      <el-col :span="2"><div class="text2" >{{item.wendu}}</div></el-col>
                      <el-col :span="2"><div class="text2"  >{{item.tianqi}}</div></el-col>
                      <el-col :span="2"><div class="text2"  >{{item.createdName}}</div></el-col>
                      <el-col :span="2"><div class="text2" >{{item.periodName}}</div></el-col>
                      <el-col :span="4"><div class="text2"  >{{ item.actionName }}</div></el-col>
                      <el-col :span="2"><div class="text2"  >{{ item.peibi }}</div></el-col>
                      <el-col :span="2"><div class="text2"  >{{ item.yongliang }}</div></el-col>
                      <el-col :span="2"><div class="text2" >{{ item.nsTypeName }}</div></el-col>
                      <el-col :span="2"><div class="text2"  >{{ item.execStyle }}</div></el-col>
                      <el-col :span="2"><div class="text2"  >{{ item.executorName }}</div></el-col>
                    </el-row>
                  </div>
                      <el-pagination class="smallpagination " small @update:current-page="loadNsList"
                                     :current-page="params.page" :page-size="params.limit"  layout="pager" :total="params.total" />
                </div>
              </el-tab-pane>
              <el-tab-pane name="third" v-if="false">
                <template #label>
                  <span class="tab-label" @click="showTotalInfo">
                    <span>
                      <el-icon><Discount /></el-icon>
                      统计信息
                    </span>
                  </span>
                </template>
                <div class="table">
                  <TreeInfoLineDialog ref="treeInfoLineDialog" :treeId="treeId" v-show="!showZNSB"></TreeInfoLineDialog>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
          <div class="grow" v-if="showZNSB">
            <div class="tabs">
              <div class="item" @click="clickTabs(1)" :class="getTabsSelectActive(1)">智能识别</div>

            </div>
            <div class="content">
              <img src="@/assets/tree_model.png">
              <div class="pop-info">
                <div class="item"><div class="label">果实颜色：</div><div class="val">{{ rowData.get("colorName") || "无" }}</div></div>
                <div class="item"><div class="label">果实大小：</div><div class="val">{{ rowData.get("gsdx") }}cm</div></div>
                <div class="item"><div class="label">果实密度：</div><div class="val">{{ rowData.get("gsmd") || "无"}} </div></div>
                <div class="item"><div class="label">果实数量：</div><div class="val">{{ rowData.get("gssl") || "无"}}</div></div>
                <div class="item"><div class="label">叶片卷曲度：</div><div class="val">{{ rowData.get("ypjqd") || "无"}}</div></div>
                <div class="item"><div class="label">病虫害：</div><div class="val">{{ rowData.get("bh") == 1 ?"有病害" :"无病害" }}</div></div>
                <div class="item"><div class="label">叶片光泽度：</div><div class="val">{{ rowData.get("ypgzd") || "无"}}</div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import {onMounted, toRefs, ref,watch} from "vue";
import {base_img_url2} from "../api/config"
import ImageSelect from "./ImageSelect";
import TimeLine from "./TimeLine";
import TreeInfoLineDialog from "./chartDialog/TreeInfoLineDialog";
const emit = defineEmits(["closeDialog"]);
const title = ref(null)
const imageList = ref([])
const basicTabVal = ref("first");
const tabsActiveVal = ref(1);
const nsList = ref([]);
const lastDay = ref(null);
const currentImgId = ref(null);
const treeId = ref(null);
const location = ref(null)
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: true,
  },
  rowData: {
    type: Object,
    default: null,
  },
});
const {rowData, showDialog } = toRefs(props);
const currentImg = ref("")
const showZNSB = ref(true);
const treeInfoLineDialog = new ref(null);
onMounted(async () => {
  let arr = rowData.value.getGeometry().getCoordinates();
  location.value =arr[0] + ","  +  arr[1];
  treeId.value = rowData.value.getProperties().id;
  title.value = rowData.value.code  + "果树详细信息";
  // loadNsList();
  loadImages(treeId.value);

})
// const params = ref({page:1,limit:4});

async function loadImages(id){
  let {code,data} = await VE_API.tree_grow_data.growDataByTreeId({treeId:id,limit:7});
  let array = []
  for(let i = data.length - 1; i >=0; i--){
    if(i == 0){
      lastDay.value = new Date(data[i].createDate).getTime();
      currentImgId.value = data[i].id;
      currentImg.value = data[i].img
    }
    array.push({id:data[i].id, src:data[i].img, date:data[i].createDate})
  }
  imageList.value = array;
}

// async function loadNsList(page){
//   params.value["treeId"] = rowData.value.get("id");
//   params.value["page"] = page;
//   let {code,data,count} = await VE_API.nsjy.page(params.value)
//   params.value["total"] = count;
//   nsList.value = data;
// }

function selectImg(obj){
  currentImgId.value = obj.id;
  currentImg.value = obj.src;
}

function clickTabs(val){
  tabsActiveVal.value = val;
}
function getTabsSelectActive(val){
  return tabsActiveVal.value == val ? "active" : "";
}

function closeDialog(){
  showDialog.value = false;
  emit("closeDialog")
}
function showTotalInfo(){
  // let tree = rowData.value.getProperties();
  // treeInfoLineDialog.value.load(tree.id);
  showZNSB.value = false;
}
</script>

<style lang="scss" scoped>
$title-height:44px;
$body-height:calc(100% - $title-height);

.dialog-box{
  font-family: PingFangSC-Regular, PingFang SC;
  position: absolute;
  left: calc(50% - 700px);
  top:calc(50% - 316px);
  width: 1400px;
  height: 632px;
  background: rgba(1,17,22,0.8);
  box-shadow: 0px 0px 20px 0px #00FFF0;
  border-radius: 4px;
  border: 2px solid rgba(81,233,240,0.6);

  .title{
    position: relative;
    width: 100%;
    height: $title-height;
    box-sizing: border-box;
    background: rgba(0,77,101,0.8);
    border-radius: 4px 4px 0px 0px;
    border-bottom: 2px solid rgba(81,233,240,0.3);
    .myclose{
      position: absolute;
      right: 0px;
      top: calc($title-height / 2 - 8px);
      margin-right: 20px;
      width: 16px;
      height: 16px;
      background-image: url("@/assets/img/close.png");
      background-size: 100% 100%;
    }
  }
  .my-body{
    width: 100%;
    height: $body-height;
    box-sizing: border-box;
    padding: 21px;
    .left{
      float: left;
      width: 48%;
      height: 100%;
      .img-box{
        height: 85%;
        background: rgba(0,77,101,0.6);
        border-radius: 4px;
        border: 1px solid rgba(81,233,240,0.3);
        box-sizing: border-box;
        .img{
          height: 100%;
          width: 100%;
        }
        .time_line_box{
          height: 14%;
        }
      }
      .img-list{
        height: 15%;
      }
    }
    .right{
      float: right;
      width: 50%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .basic{
        width: 100%;
        height: 50%;
        .tab-label{
          width: 80px;
          height: 25px;
          span{
            height: 14px;
            line-height: 14px;
            display: flex;
            align-items: center;
            justify-content: space-around;
          }
        }
        .context{
          display: flex;
          flex-wrap: wrap;
          font-size: 12px;
          font-weight: 400;
          color: #FFFFFF;
          .name{
            background-color: #0E3B47;
            width: 20%;
            height: 38px;
            padding: 9px;
            text-align: right;
            box-sizing: border-box;
            border: 1px solid rgba(81,233,240,0.3)
          }
          .val{
            background-color: #011B24;
            width: 30%;
            height: 38px;
            padding: 9px;
            box-sizing: border-box;
            text-align: left;
            border: 1px solid rgba(81,233,240,0.3)
          }
        }

        .table{
          font-size: 12px;
          color: #FFFFFF;
          .row{
            width: 100%;
            height: 38px;
            background-color: #032C3980;
            box-sizing: border-box;
            border: 1px solid rgba(81,233,240,0.3);
            display: flex;
            align-items: center;
            justify-content: space-around;
            .text1{font-weight: 600;color: #00FFF0; text-align: center;
            }
            .text2{font-weight: 600;color: #D09C00; text-align: center;
            }

            .head{
              color: #B4FFFB; text-align: center;
            }
          }
        }

      }
      .grow{
        width: 100%;
        height: 50%;
        .tabs{
          font-size: 14px;
          font-weight: 400;
          color: #B4FFFB;
          height: 36px;
          line-height: 36px;
          text-align: center;
          display: flex;
          box-sizing: border-box;
          .item{
            cursor: pointer;
            flex-grow:1;
            height: 100%;
            background-color: #011B24;
            border: 1px solid rgba(81,233,240,0.3)
          }
          .active{
            color: #00FFF0;
            background: rgba(3,44,57,0.8);
            box-shadow: inset 0px 0px 20px 4px rgba(0,255,240,0.5);
            border: 1px solid #51E9F0;
          }
        }
        .content{
          position: relative;
          width: 100%;
          height: calc(100% - 36px);
          border: 1px solid rgba(81,233,240,0.3);
          padding: 10px;
          box-sizing: border-box;
          text-align: center;
          img{
            height: 100%;
            width: 40%;
          }
          .pop-info{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            top: 12px;
            right: 12px;
            position: absolute;
            width: 160px;
            height: 215px;
            background: rgba(3,44,57,0.8);
            border: 1px solid rgba(81,233,240,0.3);
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            .item{
              width: 100%;
              .label{
                color: #B4FFFB;
                float: left;
                text-align: left;
                width: 60%;
                padding-left: 10px;
                box-sizing: border-box;
              }
              .val{
                color: #FFFFFF;
                float: right;
                text-align: left;
                width: 40%;
              }
            }
          }
        }
      }

    }
  }

}

</style>
