<template>
  <div>
    <a-table class="ant-table-striped" :loading="loading" size="small" :dataSource="props.dataSource" :columns="columns"
             :pagination="{showSizeChanger:true,defaultPageSize:20,total:total}" :scroll="{x:'max-content'}"

             :rowKey="'userid'"
             @change="onChange"
             :row-class-name="(_record, index) => (index % 2 === 1 ? 'table-striped' : null)"  bordered>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'status'">
          <a-tag :color="utils.statusAndColor(record.status)">{{record.status}}</a-tag>
        </template>
        <slot v-else name="tb_cell" :data="{column, record}"></slot>
      </template>
    </a-table>
  </div>
</template>

<script setup>
  import Api  from '@/api/api'
  import utils from '@/utils/utils'
  import { useAuthStore } from '@/stores/modules/auth'
  import { useBaseStore } from '@/stores/modules/base'
  import {defineEmits, defineExpose, onMounted, ref} from "vue";
  import {useRouter} from "vue-router";
  import {storeToRefs} from "pinia";
  import {re} from "mathjs";
  const emit = defineEmits(['list','onSelect'])
  const store = useAuthStore()
  const base = useBaseStore()
  let { tableRecord,fullscreen} = storeToRefs(base)
  const router = useRouter()
  const loading = ref(false)
  const columns = ref([])
  const total = ref(0)
  const selectedRowKeys = ref([])
  const props = defineProps({
    param: Object,
    tableName:String,
    dataSource:Array,
    keyRouteName:String,
    searchType:Array,
    detailPage:Object,
    noAutoQuery:Boolean
  })

  const onChange = (pagination, filters, sorter, { currentDataSource })=>{
    selectedRowKeys.value = tableRecord.value.map(e=>e.itemid)
    props.param.content.pageNumber = pagination.current
    props.param.content.pageSize = pagination.pageSize
    tableData()
  }
  const getTableLayout = ()=>{
    let _app = {}
    _app = JSON.parse(sessionStorage.getItem('app'))
    columns.value = _app.meta.tables[props.tableName].tablecols.map(e=>{
      return {
        title:e.title,
        dataIndex:e.columnname,
        width:e.width == 0?'150':e.width,
        ellipsis:true,
        fixed:e.columnname == 'operation'?'right':''
      }
    })
  }
  const onSelectChange =(changableRowKeys, selectedRows)=>{
    selectedRowKeys.value = changableRowKeys;
    emit('onSelect',selectedRows)
  }

  const tableData = async()=>{
    loading.value = true
    const res = await Api.requested(props.param)
    let  selects = ref([])
    res.data.forEach(item=>{
      if (item.isleader === 1){
        console.log(item)
        if (item.enddate !== {}){
          selectedRowKeys.value = [item.userid]
          selects.value[0] = item
          console.log(selects.value,2222)

          return
        }
      }
    })
    emit('onList',res.data)
    emit('onSelect',selects.value)
    total.value = res.total
    loading.value = false
  }
  defineExpose({
    tableData,
  })
  onMounted (()=>{
    getTableLayout()
    props.noAutoQuery ? '' : tableData()
  })
</script>

<style scoped>

</style>
