<template>
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)"/>
      </template>
      <template #bodyCell="{ column, record }">
          <JUpload  v-if="column['dataIndex']=='uploadFile'"  ref="uploadRef"  :value="setUploadIniValue(column,record)"  @change="emitValue($event,column,record)" />
      </template>
    </BasicTable>             
</template>
<script lang="ts" setup>
  import { ref, reactive, defineExpose, nextTick, defineProps, computed } from 'vue';
  import {BasicTable, useTable, TableAction,EditRecordRow,BasicColumn} from '/@/components/Table';
  import { cloneDeep, concat } from 'lodash-es';
  import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
  

  const props = defineProps({
    fieldKey:  { require: true, type: String },
    values: {require: true,type: Array  },
  });


  const labelCol= { span: 2 };
  const wrapperCol= { span: 20 };
  const uploadRef = ref();

  const columns: BasicColumn[] = [
    {
      title: ' 需要上传的文件',
      dataIndex:'name',
      align: "left",
      resizable: true,
      edit:true,
      editComponent:"Input",
      width: 200,

    },
    {
      title: '已上传的文件地址',
      dataIndex:'fileurl',
      align: "left",
      resizable: true,
      edit:true,
      editComponent:"Input",
      width: 200
    },
    {
      title: '上传',
      dataIndex: 'uploadFile',
      align: "left",
      resizable: true,
      edit:true,
      width: 100,
    },

  ];

  const tableData = ref<Array<any>>([]);
  const [registerTable,{reload,getDataSource,deleteTableDataRecord}] = useTable({
    title: "",
    dataSource:tableData,
    columns: columns,
    showTableSetting:false,
    pagination:false,
    canResize: true,
    size:'small',
    showIndexColumn: false,
    scroll: { y: 300 },
    bordered:false,
    actionColumn: {
      width: 80,
      title: '操作',
      fixed: 'right',
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },        
  });

  function setIniTabData() {
    if(props.values) {
      nextTick(() => {
        tableData.value =  props.values||[]
        for(let i=0;i<tableData.value.length;i++) {
          tableData.value[i]["isEdit"] = true
        }
      });
    } else {
      tableData.value.push({
        name:'',
        fileurl:'',
        key:0,
        isEdit:true
      })
    }
  }

  function getTableAction(record) {
    return [
      {
        label: '+',
        onClick: handleAddRow.bind(null, record),
      },
      {
        label: '-',
        onClick: handleDelete.bind(null, record),
      },
    ];
  }

  function handleEdit(record:EditRecordRow) {
   if(record['isEdit']) {
    record.onEdit?.(false, false);
    record['isEdit'] = false
   } else {
    record.onEdit?.(true, false);
    record['isEdit'] = true
   }
  }

  function emitValue(event,column,record) {
    
    record['editValueRefs'][column.dataIndex] = event
    record[column['dataIndex']] = event

    record['fileurl'] = event
  }

  function setUploadIniValue(column,record) {
    record['editValueRefs'][column.dataIndex] = record[column['dataIndex']]
    return record[column['dataIndex']]
  }

  function handleAddRow(record:EditRecordRow) {
     let data = getDataSource();
     const newRow: EditRecordRow = {};
     newRow['editable'] =  true
     newRow['resizable'] =  true
     newRow['isNew'] =  true

     if(!record) {
      data.push(newRow)
    } else {
      data.splice(newRow['key'], 0, newRow);
    }
    newRow.onEdit?.(true);
    newRow['isEdit'] = true
  }

  function handleDelete(record) {
    deleteTableDataRecord(record.key)
  }

  function getData() {
    let retTableData = [];
    let tableDatas = getDataSource()

    for(let i=0;i<tableDatas.length;i++) {
      let dataRow = tableDatas[i]['editValueRefs'];
      if(dataRow) {
        if(dataRow.fileurl) { 
          retTableData.push(dataRow.name + "|" + dataRow.fileurl)
        }   
      }
    }
    let retObj = {}
    if(retTableData.length>0) {
      retObj["value"] = retTableData;
    }
  
    retObj["field"] = props.fieldKey;
    return retObj 
  }


  setIniTabData();

  defineExpose({
    getData
});
 

</script>

<style scope>
.underline-input {
border-left:none;
border-top:none;
border-right:none;
width: 100%;
}
</style>