<script setup>
import {ref, onMounted} from 'vue';
import request, {download} from "@/utils/request.js";
import {ElTable, ElTableColumn, ElPagination, ElButton, ElDialog} from 'element-plus';

const tableData = ref([]);
const total = ref(0);
const pageSize = ref(10);
const pageNum = ref(1);
const fileList = ref([]);
const dialogVisible = ref(false);

const getList = async () => {
  const res = await request.get('crmComplain/findByPage', {
    params: {
      pageSize: pageSize.value,
      pageNum: pageNum.value,
      conditionJson: ''
    }
  });
  // 格式化 createTime
  tableData.value = res.records.map(record => ({
    ...record,
    createTime: formatDateTime(record.createTime)
  }));
  total.value = res.total;
};

const formatDateTime = (dateTimeString) => {
  const date = new Date(dateTimeString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  const seconds = String(date.getSeconds()).padStart(2, '0');
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
};

const handleSizeChange = (newPageSize) => {
  pageSize.value = newPageSize;
  getList();
};

const showFileList = (files) => {
  fileList.value = files;
  dialogVisible.value = true;
};

const handleCurrentChange = (newPageNum) => {
  pageNum.value = newPageNum;
  getList();
};

const handleDownload = async (filePath,fileName)=>{
  download('/xcrFile/downloadFile',{filePath},fileName)
}

onMounted(() => {
  getList();
});
</script>

<template>
  <div class="p-10px">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="type" label="类型" width="180"/>
      <el-table-column prop="card" label="身份证号" width="180"/>
      <el-table-column prop="content" label="内容" width="180"/>
      <el-table-column prop="enterpriseName" label="企业名称" width="180"/>
      <el-table-column prop="name" label="姓名" width="180"/>
      <el-table-column prop="phone" label="电话" width="180"/>
      <el-table-column prop="remark" label="备注" width="180"/>
      <el-table-column prop="title" label="标题" width="180"/>
      <el-table-column label="文件" width="180">
        <template #default="scope">
          <el-button v-show="scope.row.files.length > 0" type="primary" @click="showFileList(scope.row.files)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="unifiedSocialCreditCode" label="统一社会信用代码" width="180"/>
      <el-table-column prop="createTime" label="创建时间" width="180"/>
    </el-table>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    />
    <!-- 文件列表对话框 -->
    <el-dialog v-model="dialogVisible" title="文件列表" width="50%">
      <ul>
        <li v-for="(file, index) in fileList" :key="index" class="flex w-full justify-between">
          <div>{{ file.fileOriginalName }}</div>
          <div class="pr-20px"><el-button size="small" @click="handleDownload(file.fileUrl,file.fileOriginalName)">下载</el-button></div>
        </li>
      </ul>
    </el-dialog>
  </div>
</template>
