<!-- 表格记录 -->
<script lang="ts" setup name="TemplateTable">
import type { PropType } from 'vue'
import type { TableColumn } from '@/components/NormalTable/table_interface'

const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  columns: {
    // type: Array as PropType<TableColumn[]>,
    type: Array as any,
    required: true,
  },
  list: {
    type: Array,
    required: true,
  },
  total: {
    type: Number,
    default: 0,
  },
  buttonType: { // 控制增加行按钮是否显示
    type: String,
    default: '',
  },
  title: { // 控制增加行按钮是否显示
    type: String,
    default: '',
  },
})
const emits = defineEmits(['changePage', 'deleteRow', 'handleSelectionChange', 'selectPerson'])
const searchQuery = ref({
  limit: 10,
  offset: 1,
})

// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
const changePage = (val: { size?: number; page?: number }) => {
  if (val && val.size) {
    searchQuery.value.limit = val.size
  }
  if (val && val.page) {
    searchQuery.value.offset = val.page
  }
  emits('changePage', searchQuery)
}
// 多选发生改变
const handleSelectionChange = (object: object[]) => {
  emits('handleSelectionChange', object, props.title)
}
// 点击选择的时候
const selectPerson = (index: string, text: string) => {
  emits('selectPerson', index, text)
}
</script>

<template>
  <el-table
    :data="list"
    border
    style="width: 100%;"
    @selection-change="handleSelectionChange"
  >
    <el-table-column v-if="buttonType !== 'detail'" type="selection" width="55" />
    <el-table-column align="center" label="序号" width="80" type="index" />
    <el-table-column v-for="(item, index) in columns" :key="index" align="center" :width="item.width" :label="item.text" :prop="item.value">
      <template #header>
        <span style="color: red;">*</span><span>{{ item.text }}</span>
      </template>
      <template v-if="item.text === '姓名' && buttonType !== 'detail' || item.text === '设备名称' && buttonType !== 'detail' || item.text === '文件名称' && buttonType !== 'detail'" #default="scope">
        <el-input v-model="scope.row.name" disabled placeholder="请选择" class="input">
          <template #append>
            <el-button size="small" :disabled="buttonType === 'detail'" @click="selectPerson(scope.$index, item.text)">
              选择
            </el-button>
          </template>
        </el-input>
      </template>
    </el-table-column>
  </el-table>
</template>