<template>
  <div class="card content-box">
    <div class="top-inner">
      <div class="topbox">
        <div class="title1-1">1、上传文件</div>
        <div class="bgwhit" style="padding-left: 77px">
          <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"></el-progress>
          <div class="remark">
            仅支持1个文件上传，格式为xls和xlsx
          </div>
          <div class="textclick">下载模板</div>
        </div>
      </div>
      <div class="topbox">
        <div class="title1-1">2、检查数据</div>
        <div class="bgwhit">
          <div style="display: flex;align-items: center;">
            <el-button type="danger" style="width: 61px;"
            >检查</el-button>
            <span class="remark" style="margin-left: 10px;">
              通过
            </span>
          </div>
          <!-- 进度条 -->
          <el-progress v-if="progressFlag" :percentage="loadProgress"></el-progress>
          <div class="textclick">下载检查结果</div>
        </div>
      </div>
      <div class="topbox">
        <div class="title1-1" style="text-align:center;">3、上传数据</div>
        <div class="bgwhit" style="padding-right: 15px">
          <el-form ref="formRef" inline :model="form" :rules="rules" label-width="85px">
            <el-form-item label="导入编号：" prop="name">
              <el-input v-model="form.name" placeholder="请输入" style="width: 100%"/>
            </el-form-item>
            <el-form-item 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" style="margin-left: auto;width: 61px;"
          >上传</el-button>
        </div>
      </div>
    </div>
    <div class="bottom-inner">
      <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 } 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, props: { clearable: true } } },
      { field: 'name', title: '委案合同', search: { el: 'input', span: 1, props: { clearable: true } } },
      {
        field: 'code',
        title: '资产类型',
        enum: options,
        search: { el: 'select', props:{filterable:true }, span: 1 },
        fieldNames:{ label:"genderLabel", value: "genderValue" }
      },
      {
        field: 'role',
        title: '借款平台',
        enum: options,
        search: { el: 'select', props:{filterable:true }, span: 1 },
        fieldNames:{ label:"genderLabel", value: "genderValue" }
      },
      {
        field: 'role',
        title: '资管公司',
        enum: options,
        search: { el: 'select', props:{filterable:true },span: 1 },
        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 },
      },
    ],
  });
  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>
<style lang="scss" scoped>
.card {
  background: #f0f2f5;
}
.top-inner {
  display: flex;
  width: 100%;
  .topbox {
    width: calc(100% / 3);
  }
  .bgwhit {
    height: 174px;
    width: 100%;
    background: #fff;
    flex-direction: column;
    display: flex;
    justify-content: center;
  }
}
.el-form-item {
  width: 100%;
}
.title1-1{
  margin-bottom: 15px;
}
.textclick {
  cursor: pointer;
  color: #266BDD;
  text-decoration: underline;
}
.remark {
  color: rgba(0, 0, 0, 0.45);
  font-size: 14px;
}
.bottom-inner {
  width: 100%;
  margin-top: 35px;
  :deep(.table-search) {
    background: #f0f2f5;
    border: none;
    box-shadow: none;
  }
}

</style>