<template>
  <div>
    <div class="upload">
      <a-upload
        v-model:file-list="fileList"
        list-type="picture-card"
        multiple
        :accept="'.jpg,.jpeg,.png'"
        :showUploadList="false"
        :custom-request="customRequest"
      >
        <div>
          <PlusOutlined />
          <div style="margin-top: 8px">上传图片</div>
        </div>
      </a-upload>
    </div>
    <div class="table">
      状态筛选：
      <a-select
        v-model:value="selectStatus"
        mode="multiple"
        style="width: 90%; margin-top: 5px; margin-bottom: 5px"
        allowClear
        :options="[
          {
            value: 'uploading',
            label: '上传中',
          },
          {
            value: 'done',
            label: '上传成功',
          },
          {
            value: 'error',
            label: '上传失败',
          },
          {
            value: 'updateSuccess',
            label: '插入成功',
          },
          {
            value: 'updateError',
            label: '插入失败',
          },
        ]"
      />
      <a-table
        :columns="uploadColumns"
        :data-source="filterData"
        :pagination="false"
        bordered
        :scroll="{ y: 600 }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'size'">
            {{ parseFloat(record.size / 1024 / 1024).toFixed(2) }} MB
          </template>
          <template v-if="column.dataIndex === 'percent'">
            <a-progress
              v-if="record.status == 'error'"
              :percent="record.percent"
              status="exception"
            />
            <a-progress
              v-if="['done', 'updateSuccess', 'updateError'].includes(record.status)"
              :percent="record.percent"
            />
          </template>
          <template v-if="column.dataIndex === 'status'">
            <a-tag color="processing" v-if="record.status == 'uploading'">上传中</a-tag>
            <a-tag color="success" v-if="record.status == 'done'">上传成功</a-tag>
            <a-tag color="error" v-if="record.status == 'error'">上传失败</a-tag>
            <a-tag color="green" v-if="record.status == 'updateSuccess'">插入成功</a-tag>
            <a-tag color="red" v-if="record.status == 'updateError'">插入失败</a-tag>
          </template>
          <template v-if="column.dataIndex === 'url' || column.dataIndex === 'message'">
            {{ record.url || record.message }}
          </template>
        </template>
      </a-table>
      <div class="updateDiv">
        <a-button type="primary" @click="startUploadCXJGData">
          将上传成功的图片插入到数据库
        </a-button>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { defineProps, ref, watch, onMounted, defineEmits, computed } from 'vue';
  import { PlusOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons-vue';
  import { getAppEnvConfig } from '@/utils/env';
  import axios from 'axios';
  import { UpdatePicturePath } from '@/api/demo/auditlist';
  import { uploadColumns } from './utils';
  import { message } from 'ant-design-vue';

  const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
  const props = defineProps(['allTableData']);

  // 上传列表
  const fileList: any = ref();
  const selectStatus = ref([]);
  const filterData = computed(() => {
    if (fileList.value && selectStatus.value.length > 0) {
      return fileList.value.filter((item) => selectStatus.value.includes(item.status));
    } else {
      return fileList.value;
    }
  });

  // 上传
  const customRequest = (file) => {
    const formData = new FormData();
    formData.append('files', file.file);
    axios({
      method: 'post',
      url: `${VITE_GLOB_INFO_IMAGE_URL}/api/Platform/Upload`,
      params: { project: 'DroneEnforcement' },
      data: formData,
      headers: {
        'Content-type': 'multipart/form-data',
      },
    }).then((res) => {
      const index = fileList.value.findIndex((item) => item.uid === file.file.uid);
      // 上传成功
      if (res.data.code == '200') {
        let data = res.data.result;
        fileList.value[index] = {
          ...fileList.value[index],
          percent: 100,
          status: 'done',
          url: data[0].filePath,
        };
      } else {
        // 上传失败
        fileList.value[index] = {
          ...fileList.value[index],
          percent: 0,
          status: 'error',
          url: '',
          message: res.data.message,
        };
      }
      console.log('fileList',fileList.value)
    });
  };

  // 持续监管-图片插入启动
  let uoloadArray: any = [];
  async function startUploadCXJGData() {
    const list = fileList.value;
    uoloadArray = [];

    if (!list || list.length === 0) return;
    list.forEach((item) => {
      if (item.status === 'done' || item.status === 'updateError') {
        // 三个参数
        let caseid = item.name.split('.').slice(0, -1).join('.');
        let flag = false;
        if (caseid.includes('_CX')) {
          flag = true;
        }
        if (caseid.includes('_')) {
          caseid = caseid.split('_').slice(0, 1).join('_');
        }
        if (flag) {
          caseid = caseid + '_CX';
        }
        const index = fileList.value.findIndex((l) => l.uid === item.uid);
        const path = item.url;
        // 按线索编号分组
        const uoloadArrayIndex = uoloadArray.findIndex((l) => l.caseid === caseid);
        if (uoloadArrayIndex != -1) {
          uoloadArray[uoloadArrayIndex].index += ',' + index;
          uoloadArray[uoloadArrayIndex].path += ',' + path;
        } else {
          uoloadArray.push({
            caseid: caseid,
            index: index.toString(),
            path: path,
          });
        }
      }
    });

    // 持续监管-图片插入
    if (!uoloadArray || uoloadArray.length === 0) return;
    for (let i = 0; i < uoloadArray.length; i++) {
      await UpdateUploadCXJGData(uoloadArray[i]);
    }
  }

  // 持续监管-图片插入
  async function UpdateUploadCXJGData(value) {
    let querys = {
      caseno: value.caseid,
      path: value.path,
    };
    try {
      await UpdatePicturePath(querys).then((res) => {
        if (res) {
          const indexs = value.index.split(',');
          indexs?.forEach((index) => {
            fileList.value[index] = {
              ...fileList.value[index],
              status: 'updateSuccess',
            };
          });
        } else {
          const indexs = value.index.split(',');
          indexs?.forEach((index) => {
            fileList.value[index] = {
              ...fileList.value[index],
              status: 'updateError',
            };
          });
          if (props.allTableData.findIndex((item) => item.caseno == value.caseid)) {
            message.error(`线索【${value.caseid}】不存在！`);
          } else {
            message.error(`线索【${value.caseid}】有未审核的图片，不允许继续上传，请先审核！`);
          }
        }
      });
    } catch (error) {
      const indexs = value.index.split(',');
      indexs?.forEach((index) => {
        fileList.value[index] = {
          ...fileList.value[index],
          status: 'updateError',
        };
      });
      console.error('上传或审核出错:', error);
    }
  }
</script>
<style lang="less" scoped>
  .upload {
    width: 100%;
    margin-left: 20px;
  }
  .table {
    // width: 95%;
    margin-left: 20px;
    margin-right: 20px;
  }
  .updateDiv {
    position: absolute;
    bottom: 10px;
    right: 10px;
    gap: 10px;
  }

  ::v-deep .ant-select-selection-item {
    width: 85px !important;
  }
</style>
