<!-- 表格记录 -->
<script lang="ts" setup>
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[]>,
    required: true,
  },
  list: {
    type: Array,
    required: true,
  },
  total: {
    type: Number,
    default: 0,
  },
  buttonType: { // 控制增加行按钮是否显示
    type: String,
    default: '',
  },
  title: { // 控制增加行按钮是否显示
    type: String,
    default: '',
  },
})
const emits = defineEmits(['changePage', 'addRow', '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 addRow = () => {
  emits('addRow')
}
// 点击删除行
const deleteRow = () => {
  emits('deleteRow', props.title)
}
// 多选发生改变
const handleSelectionChange = (object: object[]) => {
  emits('handleSelectionChange', object, props.title)
}
// 点击选择的时候
const selectPerson = (index: string, text: string) => {
  emits('selectPerson', index, text)
}
</script>

<template>
  <detail-block :title="title">
    <template #btns>
      <el-button v-if="buttonType !== 'detail'" type="info" :disabled="buttonType === 'detail'" @click="deleteRow">
        删除行
      </el-button>
      <el-button v-if="buttonType !== 'detail'" type="primary" :disabled="buttonType === 'detail'" @click="addRow">
        增加行
      </el-button>
    </template>
    <el-table
      :data="list"
      border
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column 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" :label="item.text" :prop="item.value">
        <template #header>
          <span style="color: red;">*</span><span>{{ item.text }}</span>
        </template>
        <template v-if="item.text === '姓名' || item.text === '设备名称' || item.text === '文件名称'" #default="scope">
          <el-input v-model="scope.row.name" placeholder="请输入或者选择" class="input">
            <template #append>
              <el-button size="small" :disabled="buttonType === 'detail'" @click="selectPerson(scope.$index, item.text)">
                选择
              </el-button>
            </template>
          </el-input>
        </template>
        <template v-else #default="scope">
          <el-input v-model="scope.row[item.value]" :placeholder="`${item.text}`" class="input" />
        </template>
      </el-table-column>
    </el-table>
  </detail-block>
</template>