<template>
  <div class="pic-box">
    <div class="pic-header">
      <span>{{ filSuccessList.length }}张图片正在上传，已上传{{ picturesNum }}张。</span>
      <a-progress :percent="percentage" status="active" />
    </div>
    <div class="pic-list">
      <ImageUpload
        file-list="fileList"
        :maxSize="20"
        :maxNumber="10"
        :api="imgApi"
        :multiple="true"
        @delete="handleRemove"
      />
    </div>
    <div class="btn-box">
      <a-button type="primary" class="ml-2" color="info" @click="submit">确认</a-button>
      <a-button type="primary" class="ml-2" color="info" danger>重置</a-button>
      <a-button class="ml-2" color="info" @click="close">关闭</a-button>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { ImageUpload } from '@/components/Upload';
  import { uploadApi } from '@/api/sys/upload';
  import { useMessage } from '@/hooks/web/useMessage';
  import { addImageexif } from '@/api/monitor';

  const emit = defineEmits(['closeModel']);
  const { createMessage } = useMessage();
  const picturesNum = ref(0);
  const percentage = ref(0);
  const props = defineProps({
    taskId: String,
  });
  const fileList: any = ref([]);
  const filSuccessList: any = ref([]);
  async function imgApi(file, progress) {
    const obj: any = await uploadApi(file, progress);
    console.log(obj);
    if (obj.data.result.length > 0) {
      fileList.value.push(file);
      filSuccessList.value.push(obj.data.result[0]);
    }
    console.log(fileList.value);
    console.log(filSuccessList.value);
  }
  function handleRemove(file) {
    console.log(file);
    var currentIndex = (fileList.value || []).findIndex((element) => element.uid === file.uid);
    fileList.value.splice(currentIndex, 1);
    filSuccessList.value.splice(currentIndex, 1);
  }
  function getArr(arr, num) {
    let newArr = [...arr]; // 因为splice会改变原数组，要深拷贝一下
    let list = [];
    for (let i = 0; i < newArr.length; ) {
      list.push(newArr.splice(i, num));
    }
    return list;
  }
  async function submit() {
    console.log(filSuccessList.value);
    if (filSuccessList.value.length == 0) {
      return createMessage.warning('请选择上传文件');
    }
    var fileList = filSuccessList.value;
    // 把所有文件分为以五个为单位的二维数组
    fileList = getArr(filSuccessList.value, 5);
    for (let i = 0; i < fileList.length; i++) {
      var list: any = [];
      fileList[i].forEach((obj) => {
        list.push({
          lng: obj.lng,
          lat: obj.lat,
          path: obj.path,
          uploadTime: obj.dateTime,
          remark: obj.remark,
          taskId: props.taskId,
        });
      });
      console.log(list);
      const obj = await addImageexif(list);
      if (obj) {
        picturesNum.value = picturesNum.value + 5;
        percentage.value = accMul(
          accDiv(picturesNum.value, filSuccessList.value.length),
          100,
        ).toFixed(2);
      }
    }
  }
  // 除法
  function accDiv(arg1, arg2) {
    let t1 = 0,
      t2 = 0,
      r1,
      r2;
    try {
      t1 = arg1.toString().split('.')[1].length;
    } catch (e) {}
    try {
      t2 = arg2.toString().split('.')[1].length;
    } catch (e) {}
    r1 = Number(arg1.toString().replace('.', ''));
    r2 = Number(arg2.toString().replace('.', ''));
    return (r1 / r2) * Math.pow(10, t2 - t1);
  }
  //乘法：
  function accMul(arg1, arg2) {
    let m = 0,
      s1 = arg1.toString(),
      s2 = arg2.toString();
    try {
      m += s1.split('.')[1].length;
    } catch (e) {}
    try {
      m += s2.split('.')[1].length;
    } catch (e) {}
    return (Number(s1.replace('.', '')) * Number(s2.replace('.', ''))) / Math.pow(10, m);
  }
  function close() {
    emit('closeModel');
  }
</script>
<style lang="less" scoped>
  .pic-box {
    .pic-header {
    }
    .pic-list {
      height: 55vh;
      overflow: auto;
    }
    .btn-box {
      padding: 10px 0 0 0;
      display: flex;
      align-items: ce nter;
      justify-content: center;
    }
  }
</style>
