<template>
  <Header class="header" @change-menu="changemenu"></Header>

  <component
    @change-exit="regconChange"
    ref="leftComponent"
    @line-exit="lineDataChange"
    @cad-add="openCadDialog"
    @cad-show="openCadShowDialog"
    @upload-show="uploadShowDialog"
    class="left"
    :is="componentId"
  ></component>
  <Right
    v-if="comid == 'sj'"
    class="right"
    @change-verification="verificationChange"
    @update:findValue="setFindVal"
    @update:lineValue="setLineVal"
    @update:priceFlag="
      (e) => {
        priceFlag = e;
      }
    "
  ></Right>
  <div class="main">
    <div id="viewDiv" ref="mapDiv"></div>
  </div>
  <el-dialog
    v-model="findValue"
    style="background: rgb(0, 0, 0, 0.4)"
    :close-on-click-modal="false"
    :before-close="closeWaitDialog"
    width="30%"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">识别算法</div>
    </template>
    <el-form :model="findForm" label-width="80px">
      <el-row>
        <div class="tableCss">
          <el-table
            :data="profilesList"
            style="width: 100%; height: 210px"
            :row-class-name="tableRowClassName"
            highlight-current-row
            v-if="findValue"
            @current-change="handleCurrentChange"
          >
            <el-table-column prop="createTime" label="存档历史" width="180" />

            <el-table-column prop="address" center label="类型">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.type == 1" round
                  >私有</el-tag
                >
                <el-tag type="info" v-else round>分配</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="createBy" label="用户" />
            <el-table-column prop="address" center label="数据">
              <template #default="scope">
                <el-tag type="primary" v-if="scope.row.privateType == 1" round
                  >初始</el-tag
                >
                <el-tag type="warning" v-else round>编辑</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center" prop="unit">
              <template #default="scope">
                <el-button
                  type="danger"
                  :disabled="!scope.row.type"
                  size="small"
                  @click.stop="profilesDelete(scope.row)"
                  ><span style="color: #fff">删除</span></el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-row>
      <el-row>
        <el-col :span="14">
          <el-form-item label="尺寸:">
            <el-input value="4" readonly />
          </el-form-item>
          <el-form-item label="模型:">
            <el-input value="deeplabv3plus_resnet50" readonly />
          </el-form-item>
          <el-form-item label="GPU:">
            <el-input value="0" readonly />
          </el-form-item>
          <el-form-item label="CKPT:">
            <el-input
              value="best_deeplabv3plus_resnet50_road_ld_osl6.pth"
              readonly
            />
          </el-form-item>

          <el-form-item label="DATASET:">
            <el-input value="road_ID" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="10" style="padding-left: 10px">
          <div class="scroCss">
            <p
              v-for="(item, index) in sseData"
              :class="[
                index == sseData.length - 1 && loading
                  ? 'scroll-to-bottom'
                  : '',
              ]"
            >
              {{ item.time.substring(10, 16) }} {{ item.data }}
            </p>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div class="footBottm">
      <el-button
        type="info"
        style="margin-right: 30px"
        @click="findArea(0)"
        :loading="loading"
        >仅加载/显示已有识别结果</el-button
      >
      <el-button
        type="primary"
        @click="findArea(1)"
        style="margin-right: 50px"
        :loading="loading"
        v-hasPermi="['ldmap:role:edit']"
        >开始识别</el-button
      >
      <el-button
        type="warning"
        @click="closeBtn"
        >取消</el-button
      >
    </div>
  </el-dialog>
  <el-dialog
    style="background: rgb(0, 0, 0, 0.4)"
    v-model="lineValue"
    title=""
    :close-on-click-modal="false"
    :before-close="closeWaitDialog"
    width="30%"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">布线算法</div>
    </template>
    <el-row>
      <div class="tableCss">
        <el-table
          :data="profilesList"
          style="width: 100%; height: 210px"
          :row-class-name="tableRowClassName"
          highlight-current-row
          v-if="lineValue"
          @current-change="handleCurrentChange"
        >
          <el-table-column prop="createTime" label="存档历史" width="180" />

          <el-table-column prop="address" center label="类型">
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.type == 1" round
                >私有</el-tag
              >
              <el-tag type="info" v-else round>分配</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createBy" label="用户" />
          <el-table-column prop="address" center label="数据">
            <template #default="scope">
              <el-tag type="primary" v-if="scope.row.privateType == 1" round
                >初始</el-tag
              >
              <el-tag type="warning" v-else round>编辑</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" prop="unit">
            <template #default="scope">
              <el-button
                type="danger"
                :disabled="!scope.row.type"
                size="small"
                @click.stop="profilesDelete(scope.row)"
                ><span style="color: #fff">删除</span></el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-row>
    <el-row>
      <el-col :span="15">
        <el-form :model="lineForm" label-width="120px">
          <el-form-item label="剪枝次数:">
            <el-input value="2" readonly />
          </el-form-item>
          <el-form-item label="膨胀核大小:">
            <el-input value="5" readonly />
          </el-form-item>
          <el-form-item label="最小区域面积:">
            <el-input value="20" readonly />
          </el-form-item>
          <el-form-item label="最短道路像素点:">
            <el-input value="10" readonly />
          </el-form-item>

          <el-form-item label="污水流速:">
            <el-input value="0.6" readonly />
          </el-form-item>
          <el-form-item label="标注类别:">
            <el-input value="dt" readonly />
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="9" style="padding-left: 10px">
        <div class="scroCss" style="height: 270px">
          <p
            v-for="(item, index) in sseData"
            :class="[
              index == sseData.length - 1 && loading ? 'scroll-to-bottom' : '',
            ]"
          >
            {{ item.time.substring(10, 16) }} {{ item.data }}
          </p>
        </div>
      </el-col>
    </el-row>

    <div class="footBottm">
      <el-button
        type="info"
        style="margin-right: 30px"
        @click="findLine(0)"
        :loading="loading"
        >仅加载/显示已有结果</el-button
      >
      <el-button
        type="primary"
        @click="findLine(1)"
        style="margin-right: 50px"
        v-hasPermi="['ldmap:role:edit']"
        :loading="loading"
        >开始布线</el-button
      >
      <el-button
        type="warning"
        @click="closeBtn"
        >取消</el-button
      >
    </div>
  </el-dialog>
  <el-dialog v-model="priceFlag" title="工程报价" append-to-body width="80%">
    <price-excel
      ref="priceRef"
      v-if="priceFlag"
      :layerId="layerId"
      @update:conSet="
        (e) => {
          setFlag = e;
        }
      "
    ></price-excel>
  </el-dialog>

  <el-dialog v-model="setFlag" title="系统配置" append-to-body width="60%">
    <cost-set :layerId="layerId" v-if="setFlag"></cost-set>
  </el-dialog>
  <!-- 管线编辑 -->
  <el-dialog
    style="background: rgb(0, 0, 0, 0.4)"
    v-model="linetionExit"
    title=""
    :close-on-click-modal="false"
    width="25%"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">管线属性编辑</div>
    </template>
    <line-exit
      :layerId="layerId"
      :detailInfo="detailInfoLine"
      @closeDialog="closeExitLine"
      v-if="linetionExit"
    ></line-exit>
  </el-dialog>
  <!-- 房屋编辑 -->
  <el-dialog
    style="background: rgb(0, 0, 0, 0.4)"
    v-model="recognitionExit"
    title=""
    :close-on-click-modal="false"
    width="30%"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">房屋属性编辑</div>
    </template>
    <recon-exit
      :layerId="layerId"
      :detailInfo="detailInfoHouse"
      @closeDialog="closeRecognition"
      v-if="recognitionExit"
    >
    </recon-exit>
  </el-dialog>
  <!-- 数据核验 -->
  <el-dialog
    style="background: rgb(0, 0, 0, 0.4)"
    v-model="dataAllExit"
    title=""
    :close-on-click-modal="false"
    width="25%"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">数据核验</div>
    </template>
    <data-value-exit
      :layerId="layerId"
      :detailInfo="detailInfoVerification"
      v-if="dataAllExit"
      @closeDialog="
        () => {
          dataAllExit = false;
        }
      "
    ></data-value-exit>
  </el-dialog>
  <!-- cad展示 -->
  <div class="cadCssDialog">
    <el-dialog
      v-model="cadMapbox"
      destroy-on-close
      :title="cadSelectData?.name || ''"
      :close-on-click-modal="false"
      width="80%"
      top="5vh"
    >
      <cad-map :cadSelectData="cadSelectData"> </cad-map>
    </el-dialog>
  </div>

  <!-- 新增cad -->
  <el-dialog
    v-model="addCadDialog"
    title="cad展示"
    destroy-on-close
    :close-on-click-modal="false"
    width="40%"
  >
    <add-cad
      @closeAddDialog="
        () => {
          addCadDialog = false;
        }
      "
    >
    </add-cad>
  </el-dialog>

  <!-- 新增航拍图 -->
  <el-dialog
    v-model="uploadDialog"
    title="上传航拍图"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <layer-upload
      @closeAddDialog="
        () => {
          uploadDialog = false;
        }
      "
    ></layer-upload>
  </el-dialog>
</template>

<script setup lang="ts">
import Header from "./header.vue";
import sjLeft from "./comLeft/sjLeft.vue";
import cadLeft from "./comLeft/cadLeft.vue";
import Right from "./comRight/right.vue";
import LdMap from "./map/LdMap.vue";
import priceExcel from "./comRight/priceExcel";
import costSet from "./comRight/costSet";
import useMapDataStore from "@map/store/modules/mapData";
import useMapLogStore from "@map/store/modules/mapLog";
import lineExit from "./comExit/lineExit";
import addCad from "./cadMap/addCad";
import reconExit from "./comExit/reconExit";
import dataValueExit from "./comExit/dataExit";
import layerUpload from "./comExit/layerUpload";
import cadMap from "./cadMap";
import { recognitionQuery, verificationQyery } from "@map/api/exit.js";
import emitter from "@map/utils/emitter";
import html2canvas from "html2canvas";
import { ElMessage } from "element-plus";
const $ldMap = inject("$ldMap"); // 调用全局变量
const $ldBox = inject("$ldBox"); // 调用全局变量
import { ElMessageBox } from 'element-plus'
const componentId = ref(sjLeft);
const comid = ref("sj");
const changemenu = (e) => {
  if (comid.value != e) {
    comid.value = e;
    document.getElementById("viewDiv").innerHTML = "";
    switch (e) {
      case "sj":
        componentId.value = sjLeft;
        break;
      case "cad":
        componentId.value = cadLeft;
        $ldBox.init();
        break;
    }
  }
};

const tableRowClassName = ({ row, rowIndex }) => {
  if (rowIndex === 1) {
    return "warning-row";
  } else if (rowIndex === 3) {
    return "success-row";
  }
  return "";
};

const mapDiv = ref();
const posterimg = ref();

let mapdata = useMapDataStore();
let mapLog = useMapLogStore();
const { sseData, profilesList, secen,clientId } = storeToRefs(mapdata);

const setFlag = ref(false);
const priceRef = ref();
watch(clientId,(val)=>{
  loading.value=Boolean(val)
})
watch(setFlag, (val) => {
  !val && priceRef.value.init();
});
const { layerId } = storeToRefs(mapdata);
const show = ref<Boolean>(false);

const findForm = ref<findFormType>({
  name: "",
});

const lineForm = ref<lineFormType>({
  name: "",
});
//航拍图
const uploadDialog = ref(false);
const uploadShowDialog = () => {
  uploadDialog.value = true;
};
//cad
const cadMapbox = ref(false);
const cadSelectData = ref();
const addCadDialog = ref(false);
const openCadDialog = () => {
  addCadDialog.value = true;
};

const openCadShowDialog = (e) => {
  cadMapbox.value = true;
  cadSelectData.value = e;
};

//编辑特征物
const recognitionExit = ref(false);
const detailInfoHouse = ref({});
const regconChange = (e) => {
  detailInfoHouse.value = e;
  recognitionExit.value = true;
};
const closeRecognition = (e) => {
  recognitionExit.value = false;
  if (e) {
    $ldMap.setReconLabel(
      e.geometryId,
      (e.extend.houseMaterial || "") + (e.extend.houseFloors || "")
    );
  }
};
//编辑管线
const linetionExit = ref(false);
const detailInfoLine = ref({});
const leftComponent = ref();
const lineDataChange = (data) => {
  detailInfoLine.value = data;
  linetionExit.value = true;
};
const closeExitLine = (e) => {
  linetionExit.value = false;
  if (e) {
    let { color, width } = mapdata.setLineStyle[detailInfoLine.value.diameter];
    leftComponent.value.exitLineMaterial({
      ...detailInfoLine.value,
      color,
      width,
    });
  }
};
//编辑数据核验

const dataAllExit = ref(false);
const detailInfoVerification = ref({});
const verificationChange = () => {
  verificationQyery({ layersId: layerId.value }).then((res) => {
    dataAllExit.value = true;
    detailInfoVerification.value = res.data;
  });
};

const findValue = ref<Boolean>(false);
const lineValue = ref<Boolean>(false);
const loading = ref(false);
const setFindVal = (e) => {
  mapdata.getProfilesList().then((res) => {
    findValue.value = e;
    sseData.value = [];
  });
};
const setLineVal = (e) => {
  mapdata.getProfilesList().then((res) => {
    lineValue.value = e;
    sseData.value = [];
  });
};

const current = ref("");
const handleCurrentChange = (e) => {
  e&&(current.value = e.id)
};
const profilesDelete = (e) => {
  mapdata
    .delProfiles(e.id)
    .then((res) => {

      mapdata.getProfilesList().then((res) => {});
    })
    .catch((e) => {});
};
function closeBtn(){
closeWaitDialog(()=>{

  lineValue.value=false;
  findValue.value = false;
  loading.value = false;
})
}
function closeWaitDialog(fun){

  console.log(clientId.value)
  if(clientId.value){
    ElMessageBox.confirm("数据加载中，是否确定关闭", {
      confirmButtonText: "关闭",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {

        mapdata.closeSse();
        fun();
      })
      .catch(() => {

      });
  }else{
    fun();
  }
}
const priceFlag = ref(false);
function findArea(override) {
  // loading.value = true;
  $ldMap.removeAllLayer();
  if (override) {
    mapdata
      .setMapData(override)
      .then(() => {
        setValue();
      })
      .catch((e) => {


      });
  } else {
    if (current.value) {
      mapdata.setMapByHistry(current.value).then((res) => {
        current.value = "";
        setValue();
      });
    } else {
      loading.value = false;
      ElMessage({ message: "请先选择存档历史", type: "warning" });
    }
  }
  function setValue() {
    mapLog.clearExitContent();
    if (findValue.value) {
      findValue.value = false;
      loading.value = false;
      mapLog.addContent({
        mapType: "regon", //regon:特征物，line:线
        actionType: "data", //add,exit,del,
        isrevoke: false, //是否允许撤回,
      });
      $ldMap.removeAllLayer();
      $ldMap.addDefaultData(mapdata.road, "Road");
      $ldMap.addDefaultData(mapdata.house, "House");
      $ldMap.addDefaultData(mapdata.river, "River");
      $ldMap.addDeviceData(mapdata.station, "Station");
    }
  }
}
function findLine(override) {
  // loading.value = true;
  if(override){
    mapdata
    .setLineData(override)
    .then((res) => {
      setLine()
    })
    .catch(() => {
      // loading.value = false;
    });

  }else{
    if(current.value){

    mapdata.setHisctoryByline(current.value).then((res) => {
      current.value=''
      setLine()
    }) } else {
      loading.value = false;
      ElMessage({ message: "请先选择存档历史", type: "warning" });
    }

  }


  function setLine(){
    mapLog.clearExitContent();
      if (lineValue.value) {
        mapLog.addContent({
          mapType: "line", //regon:特征物，line:线
          actionType: "data", //add,exit,del,
          isrevoke: false, //是否允许撤回,
        });
        loading.value = false;
        lineValue.value = false;
      }

  }
}
onMounted(() => {
  //初始化地图

  emitter.on("line", (e) => {
    console.log(e);
    if (e) {
      lineDataChange(e);
    }
  });
});
</script>

<style scoped lang="scss">
:deep(.el-dialog__body) {
  padding: 0;
}
.dialogDeep {
  background: #000;
}
.main {
  height: 100vh;
}
:deep(.el-form-item__label) {
  color: #fff;
}
:deep(.el-textarea__inner) {
  background: transparent;
  color: #fff;
}
:deep {
  .el-input__wrapper {
    background: rgb(0, 0, 0, 0.1);
  }
  .el-input__inner {
    color: #fff;
  }
}
.scroll-to-bottom {
  scroll-snap-align: end;
}
.my-header {
  color: #fff;
}
.header {
  position: fixed;
  z-index: 1;
  width: 100vw;
  background: linear-gradient(
    to top,
    rgba(11, 38, 61, 0.9),
    rgba(11, 38, 61, 0.9)
  );
}
.left {
  width: 20%;
  position: fixed;
  z-index: 1;
  top: 80px;

  height: calc(100vh - 60px);
}
.right {
  width: 20%;
  position: fixed;
  z-index: 1;
  top: 80px;
  right: 0;
  background: rgb(0, 26, 61, 0.5);
  height: calc(100vh - 60px);
}
.footBottm {
  display: flex;
  justify-content: end;
}
#viewDiv {
  width: 100%;
  height: 100%;
  z-index: 0;
}
:deep(.el-checkbox) {
  margin-right: 0px;
  width: 33.33%;
}

:deep(.esri-view .esri-view-surface:focus::after) {
  outline: none !important;
}

:deep(.esri-popup__footer) {
  display: none !important;
}
.scroCss {
  border: 1px solid #fff;
  width: 100%;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  padding: 5px;
  font-size: 13px;
  height: 230px;
  color: #fff;
  border-radius: 5px;
}
.tableCss {
  border: 1px solid #fff;
  width: 100%;
  height: 210px;
  border-radius: 5px;
  padding: 5px;
  margin: 5px 0 10px 10px;
}
.cadCssDialog {
  width: 80%;
}
:deep(.ivu-tabs-nav .ivu-tabs-tab) {
  padding: 8px 5px !important;
}
:deep(.el-table tr) {
  background: transparent;
  color: #fff;
}
:deep(.el-table) {
  width: 90%;
  margin: 0 auto;
  background: transparent;
  height: calc(100vh - 170px);
}
:deep(.el-table tr):hover {
  background: transparent;
}

:deep(.el-table__body tr.current-row > td.el-table__cell) {
  background-color: rgba(27, 124, 125, 0.5) !important;
}
:deep(
    .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell
  ) {
  background: rgb(184, 224, 250, 0.5) !important;
}
:deep(.el-table th.el-table__cell) {
  background: transparent;
}

:deep(.el-table__row) {
  &:hover {
    background: rgb(184, 224, 250);
    border: 1px solid #313463;
  }
}
</style>
