<template>
    <div style="height: 95%;">
      <vxe-grid v-bind="gridOptions" ref="gridRef">
          <template #toolbarButtons>
              <vxe-button status="primary" @click="handleCustomImport">自定义导入</vxe-button>
              <vxe-button status="primary" @click="handleExport">导出数据</vxe-button>
          </template>
      </vxe-grid>
      <Import ref="refImport" @callback="importCallback"></Import>
    </div>
  </template>

  <script lang="ts" setup>
  import { ref,reactive,onMounted } from 'vue'
  import Import from './components/import.vue'
  import type { VxeGridProps,VxeTableInstance } from 'vxe-table'
  import { defHttp } from '/@/utils/http/axios';

  const addCheckAndItemsUrl = '/audit/auditProjectItem/batchAddCheckAndItems';
  const getProjectChecks = '/audit/auditProject/getProjectChecks';

  const gridRef = ref<VxeTableInstance>()
  const refImport = ref()

  const gridOptions = reactive<VxeGridProps<any>>({
      border: true,
      stripe: true,
      loading: false,
      height:'auto',
      showOverflow: true,
      showHeaderOverflow: true,
      columnConfig: {
        resizable: true
      },
      editConfig: {
        trigger: 'click',
        mode: 'cell'
      },
      toolbarConfig: {
        refresh: false,
        zoom: true,
        custom: true,
        export: true,
        print: true,
        slots: {
          buttons: 'toolbarButtons'
        }
      },
      rowConfig: {
        isHover: true
      },
      exportConfig: {
        type: 'xlsx'
      },
      importConfig: {
        types: ['xlsx']
      },
      checkboxConfig: {
        highlight: true,
        range: true
      },

      columns: [
        {type:'seq', title:"序号", width: 50 },
        {field:'item',title:'条目', sortable: true,width:"10%"},
        {field:'actNames',title:'控制活动', sortable: true,width:"30%"},

        {field:'content',title:'检查方法内容', sortable: true,width:100, showHeaderOverflow: true, showOverflow: 'title', showFooterOverflow: true},
        {field:'complineContent',title:'条目内容', sortable: true, showHeaderOverflow: true, showOverflow: 'title', showFooterOverflow: true},
        {field:'fileName',title:'文件名称', sortable: true,width:"20%"},
        {field:'cgrpPath',title:'分组', sortable: true,width:"10%"},
     
      ],
      data: []
    })

  
  const handleCustomImport = () => {
    refImport.value.iniData(gridOptions.columns)
  }
  
  const handleImport = () => {
    const $grid = gridRef.value
    if ($grid) {
      $grid.openImport()
    }
  }

  const handleExport = () => {
    const $grid = gridRef.value
    if ($grid) {
      $grid.openExport()
    }
  }

  const iniData = async () => {
    gridOptions.loading = true
    gridOptions.data = await defHttp.get({ url: getProjectChecks, params: {id:3}});
    console.log( gridOptions.data)
    gridOptions.loading = false
  }

  const importCallback = async (datas) => {
    const transformedData = transformData(datas,3);
    await defHttp.post({ url: addCheckAndItemsUrl, params: transformedData});
    await iniData();
  }


  function transformData(originalArray,projectId) {
    return originalArray.map(item => ({
        item: item.item,
        content: item.complineContent,
        fileName: item.fileName,
        checkMethods: [{
            actNames: item.actNames,
            content: item.content,
            projectid:projectId,
        }]
    }));
  }

  onMounted(() => {
    iniData()
  })



  </script>
  