<template>
  <!-- <object
      :data="route.query.path || 'https://aidoc.sxtvs.net'" 
      style="height:100%;height: 100%;"
      type="text/html"
    ></object> -->
  <!-- <iframe :src="route.query.path" frameborder="0"></iframe> -->
  <div>
    <header_local />
    <div style="padding: 1em">
      <el-form
        style="background: #f9fafc; padding-top: 10px"
        size="default"
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item label="项目名称">
          <el-input v-model="formInline.user" placeholder="项目名称" clearable />
        </el-form-item>
        <el-form-item label="创建日期">
          <el-date-picker
            v-model="formInline.date"
            type="daterange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
          <el-button type="primary" @click="create">创建项目</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="projectName" label="项目名称" />
        <el-table-column prop="createTime" label="创建时间" />
        <el-table-column label="状态">
          <template #default="scope">
            <el-tag type="info" v-if="scope.row.status === 0">未开始</el-tag>
            <el-tag type="primary" v-if="scope.row.status === 1">文件已导入</el-tag>
            <el-tag type="success" v-if="scope.row.status === 3">对比完成</el-tag>
            <el-tag type="danger" v-if="scope.row.status === 4">对比失败</el-tag>
            <el-tag type="warning" v-if="scope.row.status === 2">对比中</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              v-if="scope.row.status < 1"
              :icon="Notification"
              plain
              @click="() => importFilesFun(scope.row.id)"
            >
              导入文件
            </el-button>
            <!-- <el-button size="small" type="warning" @click="() => updetail(scope.row)" plain>修改</el-button> -->
            <el-button
              v-if="scope.row.status === 3"
              size="small"
              type="warning"
              @click="() => getDetail(scope.row)"
              :icon="Tickets"
              plain
            >
              查看结果
            </el-button>
            <el-popconfirm title="确定删除该项目?" @confirm="deleteProject(scope.row.id)">
              <template #reference>
                <el-button size="small" type="danger" plain :icon="Delete">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-pagination
        @current-change="change"
        background
        layout="prev, pager, next"
        :current-page="page"
        :total="total"
      />

      <el-dialog v-model="dialogVisible" title="项目">
        <el-form label-width="auto">
          <el-form-item label="项目名称">
            <el-input v-model="proName" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="createPro"> 提交 </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="showimport" title="导入文件">
        <el-form label-width="auto">
          <el-form-item label="标书文件">
            <el-upload v-model:file-list="file" :limit="1" :auto-upload="false">
              <el-button type="primary">选择</el-button>
              <template #tip>
                <div>请选择一个基准文件</div>
              </template>
            </el-upload>
          </el-form-item>
          <el-form-item label="对比文件">
            <el-upload v-model:file-list="file1" :auto-upload="false" multiple>
              <el-button type="primary">选择</el-button>
              <template #tip>
                <div>请选择一个或多个对比文件</div>
              </template>
            </el-upload>
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button type="primary" @click="subFiles"> 提交 </el-button>
          </div>
        </template>
      </el-dialog>

      <el-dialog v-model="showlook" :title="look.projectName">
        <div>
          <span style="display: inline-block; margin-right: 10px">当前状态:</span>
          <el-tag type="info" v-if="look.status === 0">未开始</el-tag>
          <el-tag type="primary" v-if="look.status === 1">文件已导入</el-tag>
          <el-tag type="success" v-if="look.status === 3">对比完成</el-tag>
          <el-tag type="danger" v-if="look.status === 4">对比失败</el-tag>
          <el-tag type="warning" v-if="look.status === 2">对比中</el-tag>
        </div>
        <br />
        <br />
        <div>基准文件</div>
        <el-divider />
        <el-table :data="look.jzFile || []" stripe>
          <el-table-column prop="fname" label="文件名" />
          <el-table-column prop="fileSize" label="文件大小">
            <template #default="scope"> {{ (scope.row.fileSize / 1048576).toFixed(2) }}M </template>
          </el-table-column>
          <el-table-column prop="createTime" label="上传时间" />
        </el-table>
        <br />
        <br />
        <div>单文件对比</div>
        <el-divider />
        <el-table :data="look.bidFiles || []" stripe>
          <el-table-column prop="fname" label="文件名" />
          <el-table-column prop="fileSize" label="文件大小">
            <template #default="scope"> {{ (scope.row.fileSize / 1048576).toFixed(2) }}M </template>
          </el-table-column>
          <el-table-column prop="similarity" label="相似度(%)">
            <template #default="scope"> <span :style="'color: ' + (scope.row.color || '#606266')" v-text="scope.row.similarity"></span> </template>
          </el-table-column>
          <el-table-column prop="compareTime" label="对比时间" />
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {
  getList,
  createPlag,
  delList,
  upList,
  importFiles,
  upFiles
} from '../../api/plagiarismCheck';
import header_local from '../allMedia/components/header.vue';
import { ElMessage, ElLoading } from 'element-plus';
import { Delete, Tickets, Notification } from '@element-plus/icons-vue';
import { ref } from 'vue';
const dialogVisible = ref(false);
const showimport = ref(false);
const showlook = ref(false);
const look = ref({});
let importId = '';
const tableData = ref([]);
const formInline = ref({
  user: '',
  date: []
});
const page = ref(1);
const total = ref(0);
const proName = ref('');
const file = ref([]);
const file1 = ref([]);
let t = undefined;
const onSubmit = () => {
  getProList();
};

// 轮询结果'
const lunxun = () => {
  if (t) clearInterval(t);
  t = setTimeout(() => {
    getProList(true);
  }, 5000);
};

const create = () => {
  importId = '';
  dialogVisible.value = true;
  file.value = [];
  file1.value = [];
};

const updetail = data => {
  proName.value = data.projectName || '';
  importId = data.id || '';
  dialogVisible.value = true;
};

const change = e => {
  page.value = e;
  getProList();
};

const getProList = (noload = false) => {
  getList({
    data: {
      page: page.value,
      pageSize: 10,
      keyword: formInline.value.user
    },
    noload
  }).then(res => {
    tableData.value = res.records || [];
    total.value = res.total;
    lunxun();
  });
};
getProList();

const deleteProject = id => {
  delList({
    id: id
  }).then(res => {
    getProList();
  });
};

const createPro = () => {
  !importId &&
    createPlag({
      projectName: proName.value
    }).then(res => {
      dialogVisible.value = false;
      proName.value = '';
      getProList();
    });
  typeof importId === 'number' &&
    upList({
      id: importId,
      projectName: proName.value
    }).then(res => {
      dialogVisible.value = false;
      proName.value = '';
      getProList();
    });
};

const getDetail = data => {
  showlook.value = true;
  data.jzFile = [data.bidFiles.shift()];
  look.value = data;
};

const importFilesFun = id => {
  showimport.value = true;
  importId = id;
};

const subFiles = () => {
  const data = new FormData();
  const li = [...file.value, ...file1.value];
  for (let i = 0; i < li.length; i++) {
    data.append('files', li[i].raw);
  }
  data.append('id', importId);
  let loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.1)'
  });
  upFiles(data)
    .then(res => {
      const baseFile = res.shift();
      importFiles({
        projectId: importId,
        baseFile,
        compareFiles: res
      })
        .then(r => {
          file.value = [];
          file1.value = [];
          showimport.value = false;
          loading.close();
          getProList();
        })
        .catch(e => {
          ElMessage({
            type: 'error',
            message: '请稍后再试！'
          });
          loading.close();
        });
    })
    .catch(e => {
      ElMessage({
        type: 'error',
        message: '请稍后再试！'
      });
      loading.close();
    });
};
</script>

<style>
.result {
  line-height: 1.5em;
}
</style>
