<template>
  <div>
    <vxe-pulldown ref="pulldownRef" popup-class-name="dropdown-table" transfer>
      <template #default>
        <vxe-input v-model="searchName" suffix-icon="vxe-icon-table" placeholder="实现下拉分页表格" @keyup="keyupEvent" @focus="focusEvent"></vxe-input>
      </template>

      <template #dropdown>
        <div class="dropdown-table-body">
          <CommonTable ref="refCommonTable"></CommonTable>
        </div>
      </template>
    </vxe-pulldown>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick,defineProps} from 'vue'
import { VxePulldownInstance } from 'vxe-pc-ui'
import CommonTable  from './CommonTable.vue'


const pulldownRef = ref<VxePulldownInstance>()
const refCommonTable = ref()

const props = defineProps({  
  columns: {  
    type: Array,  
    required: true  
  }  
})

const focusEvent = () => {
  const $pulldown = pulldownRef.value
  if ($pulldown) {
    $pulldown.showPanel()

    setData()
  }
}

const keyupEvent = () => {
 
}

function setData(){
  const columns = props.columns;
  let newColumns = columns.map(column => {  
      return {  
          field:column.code,
          title:column.title,
          tp: column.tp,
          formTp: column.formTp,
          editRender: { name: 'input' }
      };   
   });  

  let datas= []

   nextTick(async ()=>{
    refCommonTable.value.iniTable(newColumns,datas)
   })
  

}

defineExpose({
  setData,
});

</script>

<style lang="scss">
.dropdown-table {
  background-color: #fff;
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.1);
  .dropdown-table-body {
    width: 1000px;
    height: 300px;
  }

  .dropdown-table-footer {
    border-top: 1px solid #e8eaec;
  }
}
</style>
