<template>
  <div style="padding: 20px;">
    <BasicTable @register="registerTable"/>
  </div>
</template>

<script setup lang="ts">
import { ref, defineProps, h } from "vue"
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { ProjectSupervise } from '@/api/earlywarning/index'
import { getAppEnvConfig } from '@/utils/env';
import { Image } from 'ant-design-vue';

const { VITE_GLOB_INFO_IMAGE_URL } = getAppEnvConfig();
const props = defineProps(['id'])
const rawColumns = [
  {
    "title": "监管-是否存在问题",
    "dataIndex": "iswenti_rc"
  },
  {
    "title": "监管-问题类型",
    "dataIndex": "wentileixing_rc"
  },
  {
    "title": "监管-其他情况说明",
    "dataIndex": "qtqksm_rc"
  },
  {
    "title": "监管-整改方式",
    "dataIndex": "zgfs_rc"
  },
  {
    "title": "监管-整改期限",
    "dataIndex": "zgqx_rc"
  },
  {
    "title": "监管-核查人员",
    "dataIndex": "hechauser_rc"
  },
  {
    "title": "监管-核查时间",
    "dataIndex": "hechatime_rc"
  },
  {
    "title": "监管-现场外景照片",
    "dataIndex": "wjzp_rc",
    "width":165,
  },
  {
    "title": "监管-现场内景照片",
    "dataIndex": "njzp_rc",
    "width":165,
  },
  {
    "title": "整改-整改方式",
    "dataIndex": "zgfs_rczg"
  },
  {
    "title": "整改-办理人员",
    "dataIndex": "hechauser_rczg"
  },
  {
    "title": "整改-办理时间",
    "dataIndex": "hechatime_rczg"
  },
  {
    "title": "整改-现场外景照片",
    "dataIndex": "wjzp_rczg",
    "width":165,
  },
  {
    "title": "整改-现场内景照片",
    "dataIndex": "njzp_rczg",
    "width":165,
  },
  {
    "title": "复核-是否整改完成",
    "dataIndex": "iswenti_rcfh"
  },
  {
    "title": "复核-问题类型",
    "dataIndex": "wentileixing_rcfh"
  },
  {
    "title": "复核-其他情况说明",
    "dataIndex": "qtqksm_rcfh"
  },
  {
    "title": "复核-整改方式",
    "dataIndex": "zgfs_rcfh"
  },
  {
    "title": "复核-整改期限",
    "dataIndex": "zgqx_rcfh"
  },
  {
    "title": "复核-核查人员",
    "dataIndex": "hechauser_rcfh"
  },
  {
    "title": "复核-核查时间",
    "dataIndex": "hechatime_rcfh"
  },
  {
    "title": "复核-现场外景照片",
    "dataIndex": "wjzp_rcfh",
    "width":165,
  },
  {
    "title": "复核--现场内景照片",
    "dataIndex": "njzp_rcfh",
    "width":165,
  }
]
const columns = rawColumns.map((col) => {
  if (col.dataIndex.includes('wjzp') || col.dataIndex.includes('njzp')) {
    return {
      ...col,
      customRender: ({ record }) => {
        const urls = record[col.dataIndex]?.split(',') || [];
        return h(
          'div',
          {
            style: {
              display: 'flex',
              gap: '8px',
              flexWrap: 'wrap',
            },
          },
          urls.map((url) => {
            return url && h(Image, {
              src: `${VITE_GLOB_INFO_IMAGE_URL}/${url}`,
              width: 60,
              height: 60,
              preview: true,
              style: {
                objectFit: 'cover',
                borderRadius: '4px',
              },
            })
          })
        );
      },
    };
  }
  return col;
});
const [registerTable, { getForm }] = useTable({
  title: '历史项目',
  api: ProjectSupervise,
  columns,
  rowKey: 'id',
  useSearchForm: false,
  showTableSetting: true,
  bordered: true,
   beforeFetch: (params) => {
    let resultParams = {
      ProjectId: props.id,
      IsLishi: 1,
      ...params
    }
    return resultParams;
  },
});
</script>

<style lang="scss" scoped></style>
