<!--
 * @Descripttion: 
 * @version: 
 * @Author: ysh
 * @Date: 2023-05-09 17:31:06
 * @LastEditors: wrh
 * @LastEditTime: 2025-02-11 15:03:44
-->
<template>
  <div class="segment-box">
    <a-row justify="center" class="title">影像解译<svg-icon icon-class="MaterialSymbolsCloseRounded" class-name='close'
        @click="$emit('close')" /></a-row>
    <div class="header">
      预处理
    </div>
    <table style="width: 1000px;">
      <tr>
        <td style="width: 160px; border-right: darkgreen 2px solid;" bgcolor="rgb(125,125,125)">
          <span style="font-size: 16px; color:#fff;">影像数据整理</span>
        </td>
        <td style="background: linear-gradient(-40deg,darkgreen 20%, rgb(209, 238, 209) 80%, rgb(209, 238, 209))">
          <el-form>
            <el-form-item label="选择影像">
              <el-input v-model="pathString" placeholder="请选择文件夹路径">
                <template #append>
                  <el-button icon="Folder" @click="handleOpenDialog"></el-button>
                </template>
              </el-input>
            </el-form-item>
            <el-row style="margin-bottom: 10px;">
              <el-text style="font-weight: 700; color:darkgreen;">{{ '已完成' + percentage }}</el-text>
              <el-text style="font-weight: 700; color:darkgreen; margin-left: 80px;">{{ '剩余' + remainNum }}</el-text>
              <el-button style="margin-left: 500px;" type="primary" @click="confirmDeleteNodataTiff">开始</el-button>
              <el-button style="margin-left: 10px;" @click="cancelDataSource">取消</el-button>
            </el-row>
          </el-form>
        </td>
      </tr>

    </table>
    <!-- 文件目录对话框 -->
    <el-dialog v-model="openFileDialog" title="选择文件路径" width="480px" :close-on-click-modal="false" :align-center="true">
      <Folder :folderList="folderList" :pathList="pathList" @changePath="changePath" @changeBackPath="changeBackPath"
        @handleConfirm="confirmPath" @cancel="openFileDialog = false"></Folder>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import useMapStore from '@/store/modules/maps';
import { getCurrentInstance, ref } from 'vue';
import { getPath } from '@/api/map/multidatasource';
import { deleteTiff, getProcessValue } from '@/api/image/segment';
import Folder from '../cesium/folder.vue';
const maps = useMapStore().$state.olmap;
const { proxy } = getCurrentInstance();
const percentage = ref<String>("");
const remainNum = ref<String>("");
const pathString = ref<String>("");
const openFileDialog = ref<Boolean>(false);
const pathList = ref<String[]>([]);
const folderList = ref<String[]>([]);
// 点击打开文件目录对话框时
function handleOpenDialog() {

  openFileDialog.value = true;
  pathList.value = [];
  let pathName = " ";
  getPath({ pathName: pathName }).then(res => {
    if (res.code == 200) {
      folderList.value = res.data.folderList;
    }
  })


}

// 当路径改变时，重新请求新的目录列表
function changePath(val: String[]) {
  for (let v of val) {
    if (v != "") {
      pathList.value.push(v);
    }
  }
  let pathName;
  if (pathList.value.length == 0) {
    pathName = " ";
  } else if (pathList.value.length == 1) {
    pathName = pathList.value[0] + '/';
  }
  else {
    pathName = pathList.value.join('/');
  }
  getPathByName(pathName);
}
// 回退路径事件
function changeBackPath(val) {
  let pathName;
  pathList.value = val;
  if (pathList.value.length == 0) {
    pathName = " ";
  } else if (pathList.value.length == 1) {
    pathName = " ";
  }
  else {
    pathName = pathList.value.join('/');
  }
  getPathByName(pathName);
}

// 根据路径名查询目录
function getPathByName(pathName) {
  getPath({ pathName: pathName }).then(res => {
    if (res.code == 200) {
      let forlist = res.data.folderList;
      let list: Array<String> = [];
      if (pathName == " ") {
        folderList.value = forlist;
        pathList.value = [];
      } else {
        for (let f of forlist) {
          f = f.includes("\\") ? f.split('\\') : f.split('/');
          f = f[f.length - 1];
          list.push(f);
        }
        folderList.value = list;
      }
    }
  })
}
// 当点击确认路径按钮时
function confirmPath() {
  pathString.value = pathList.value.join('\/');
  openFileDialog.value = false;
}
//确认添加数据
function confirmDeleteNodataTiff() {
  deleteTiff({ basePath: pathString.value }).then(res => {

  })
  var timer;
  clearInterval(timer)
  getProcess()
  function getProcess() {
    timer = setInterval(function () { //隔200毫秒获取进度
      getProcessValue().then(res => {
        percentage.value = res.data.percentage
        remainNum.value = res.data.remain
      });
    }, 200)
  }
  // cancelDataSource();
}
// 取消添加数据
function cancelDataSource() {
  pathString.value = '';
  percentage.value = '';
  remainNum.value = '';
}
</script>

<style scoped>
.header {
  text-align: left;
  line-height: 40px;
  font-size: 18px;
  font-weight: 800;
  position: relative;
  color: white;
  background: linear-gradient(-40deg, darkgreen 5%,rgb(209, 238, 209) 80%, darkgreen 15%);
}

.segment-box {
  width: 1000px;
  height: 800px;
}

.title {
  line-height: 50px;
  font-size: 16px;
  font-family: '微软雅黑';
  background-color: #151515;
  color: #fff;
  position: relative;
}

.close {
  font-size: 20px;
  position: absolute;
  right: 5px;
  top: 8px;
  cursor: pointer;
}

.close:hover {
  color: yellow;
}

.el-form {
  font-weight: 700;

  :deep(.el-form-item__label) {
    color: darkgreen
  }
}

:deep(.el-button) {
  --el-button-hover-text-color: white;
  background-color: green;
  border-color: green;
}</style>