<template>
  <BasicTable @register="registerTable" >
    <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'fileUploadPath'">
            <a-button type="link" v-for="(item,index) in parsePathsValue(record.fileUploadPath)" :key="index" :href="item.url" target="_blank">
              {{item.name}}
            </a-button>
          </template>
          <template v-else-if="column.key === 'problemItem'">
              <JEllipsisFormat :isLink="true" :value="record.problemItem" :length="60" @click="goToPage(record)"/>
          </template>
          <template v-else-if="column.key === 'problemExample'">
              <JEllipsisFormat :isLink="true" :value="record.problemExample" :length="60"  @click="goToPageDetail(record)"/>
          </template>
      </template>
  </BasicTable>
  <StProbemModal @register="registerModal"></StProbemModal>
</template>
<script lang="ts" setup>
import { defineExpose } from 'vue';
import { BasicColumn, BasicTable, useTable } from '/@/components/Table';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import JEllipsisFormat from '/@/views/standardlib/components/JEllipsisFormat.vue';
import { list } from '/@/views/standardlib/problem/StProblem.api';
import StProbemModal from  '/@/views/standardlib/problem/components/StProblemModal.vue';
import { useModal } from '/@/components/Modal';
import { useRouter } from 'vue-router';

const [registerModal, {openModal}] = useModal();
const router = useRouter()
// const props = defineProps({
//   actInfo: Map,
// });
const columns: BasicColumn[] = [
{
    title: '问题项',
    align:"left",
    dataIndex: 'problemItem'
   },
   {
    title: '问题示例',
    align:"left",
    dataIndex: 'problemExample'
   },
  ];
const [registerTable,{setProps,reload}] = useTable({
      title: '',
      api: list,
      columns: columns,
      bordered: true,
      immediate: false,
      showIndexColumn: false,
      beforeFetch(params) {
          params = Object.assign(params,{ column: 'updatedTime', order: 'desc' })
        },
    });

function goToPage(record) {
  router.push({path: '/standardlib/problem',query:{bizNo: record.id}})
  }
function getFileName(path) {
    if (path.lastIndexOf('\\') >= 0) {
      let reg = new RegExp('\\\\', 'g');
      path = path.replace(reg, '/');
    }
    return path.substring(path.lastIndexOf('/') + 1);
  }
  
  function uidGenerator() {
    return '-' + parseInt(Math.random() * 10000 + 1, 10);
  }
// 解析数据库存储的逗号分割
function parsePathsValue(paths) {
  console.log(paths)
    if (!paths || paths.length == 0) {
      return [];
    }
    let list: any[] = [];
    for (const item of paths.split(',')) {
      let url = getFileAccessHttpUrl(item);
      list.push({
        uid: uidGenerator(),
        name: getFileName(item),
        status: 'done',
        url: url,
        response: { status: 'history', message: item },
      });
    }
    return list;
  }

  function goToPageDetail(record: Recordable) {
     openModal(true, {
       record,
       isUpdate: true,
       showFooter: false,
     });
}

  defineExpose({setProps,reload})
</script>