<template>
  <div class="table-box">
    <div class="card flex mb-2">
      <div class="flex-1">
        <div class="mb-1">1、上传文件</div>
        <div>
          <el-upload
            class="avatar-uploader"
            :action="'https://jsonplaceholder.typicode.com/posts/'"
            :show-file-list="false"
            accept=".xls, .xlsx"
            :on-progress="uploadVideoProcess"
          >
            <el-button type="primary" plain :icon="Upload">上传文件</el-button>
          </el-upload>
          <!-- 进度条 -->
          <el-progress v-if="progressFlag" :percentage="loadProgress" />
          <div class="mt-2 text-sm text-gray-400"> 仅支持1个文件上传，格式为xls和xlsx </div>
          <div class="mt-1 text-blue-500 underline">下载模板</div>
        </div>
      </div>
      <div class="flex-1">
        <div class="mb-1">2、检查数据</div>
        <div>
          <div class="flex items-center">
            <el-button type="danger">检查</el-button>
            <span class="ml-2"> 通过 </span>
          </div>
          <!-- 进度条 -->
          <el-progress v-if="progressFlag" :percentage="loadProgress" />
          <div class="mt-2 text-sm text-gray-400">下载检查结果</div>
        </div>
      </div>
      <div class="flex-1">
        <div class="mb-1 text-center">3、上传数据</div>
        <div class="pr-4">
          <el-form ref="formRef" inline :model="form" :rules="rules" label-width="85px">
            <el-form-item class="w-full" label="导入编号：" prop="name">
              <el-input v-model="form.name" placeholder="请输入" style="width: 100%" />
            </el-form-item>
            <el-form-item class="w-full" label="资管公司：" prop="name">
              <el-select v-model="form.name" placeholder="请选择" style="width: 100%">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-form>
          <el-button type="primary">上传</el-button>
        </div>
      </div>
    </div>
    <div>
      <ProTable :config="config" :data="data">
        <!-- 表格 header 按钮 -->
        <template #left_buttons>
          <el-button type="primary">新增菜单 </el-button>
        </template>
      </ProTable>
    </div>
    <caseDetailModal ref="caseDetailModalRef" />
  </div>
</template>

<script setup lang="jsx" name="import">
  import caseDetailModal from './components/caseDetailModal.vue';
  import { reactive, ref } from 'vue';
  import { ElButton } from 'element-plus';
  import { Upload, Delete } from '@element-plus/icons-vue';

  const progressFlag = ref(false);
  const proTable = ref(undefined);
  const options = ref([]);
  const loadProgress = ref(0);
  const caseDetailModalRef = ref();
  const isFold = ref(true);
  const config = reactive({
    columns: [
      {
        field: 'name',
        title: '导入编号',
        search: { el: 'input', span: 1.5, props: { clearable: true } },
      },
      {
        field: 'name',
        title: '委案合同',
        search: { el: 'input', span: 1.5, props: { clearable: true } },
      },
      {
        field: 'code',
        title: '资产类型',
        enum: options,
        search: { el: 'select', props: { filterable: true }, span: 1.5 },
        fieldNames: { label: 'genderLabel', value: 'genderValue' },
      },
      {
        field: 'role',
        title: '借款平台',
        enum: options,
        search: { el: 'select', props: { filterable: true }, span: 1.5 },
        fieldNames: { label: 'genderLabel', value: 'genderValue' },
      },
      {
        field: 'role',
        title: '资管公司',
        enum: options,
        search: { el: 'select', props: { filterable: true }, span: 1.5 },
        fieldNames: { label: 'genderLabel', value: 'genderValue' },
      },
      {
        field: 'role',
        title: '案件总数',
      },
      {
        field: 'role',
        title: '案件总金额',
      },
      {
        field: 'role',
        title: '客户总数',
      },
      {
        field: 'action',
        title: '撞库次数',
        width: 200,
        slots: {
          default: ({ row }) => {
            return (
              <>
                <ElButton link type="primary" icon={Delete} onClick={() => linkZK(row)}>
                  10
                </ElButton>
              </>
            );
          },
        },
      },
      {
        field: 'action',
        title: '文件地址',
        width: 200,
        slots: {
          default: ({ row }) => {
            return (
              <>
                <ElButton link type="primary" icon={Delete} onClick={() => downfile(row)}>
                  10
                </ElButton>
              </>
            );
          },
        },
      },
      {
        field: 'role',
        title: '创建日期',
        search: {
          el: 'date-picker',
          props: { type: 'daterange', valueFormat: 'YYYY-MM-DD' },
          span: 1.5,
        },
      },
    ],
  });
  const form = reactive({
    name: '',
    code: '',
    role: '',
  });
  const uploadVideoProcess = (event, file, fileList) => {
    progressFlag.value = true; // 显示进度条
    loadProgress.value = parseInt(event.percent); // 动态获取文件上传进度
    if (loadProgress.value >= 100) {
      loadProgress.value = 100;
      setTimeout(() => {
        progressFlag.value = false;
      }, 1000); // 一秒后关闭进度条
    }
  };
  const linkZK = (row) => {
    caseDetailModalRef.value.openModal(JSON.parse(JSON.stringify(row)));
  };
  const downfile = (row) => {};
  const data = [
    { name: 'admin', code: 'admin', role: 'superadmin' },
    { name: 'account1', code: 'account1', role: 'user' },
    { name: 'account2', code: 'account2', role: 'user' },
    { name: 'account3', code: 'account3', role: 'user' },
  ];
</script>
