<!-- 表格记录 -->
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import userListDialog from './userListDialog.vue'
interface columnsType {
  text: string
  value: string
  width?: string
  align?: string
}
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  buttonType: {
    type: String,
    default: '',
  },
  row: {
    type: Object,
    defaule: () => ({}),
  },
})
const list = ref([])
const total = ref(0)
const columns = ref<columnsType[]>([])
const selectionList = ref([])
const searchQuery = ref({
  limit: 10,
  offset: 1,
})
const loadingTable = ref(false)
// 记录表格数据
const tableData = ref([
  {
    name: '计量人员',
    list: [],
    columns: [
      {
        text: '姓名',
        value: 'name',
        align: 'center',
        selete: true,
        type: 'user',
      },
      {
        text: '计量人员编号',
        value: 'staffNo',
        align: 'center',
      },
      {
        text: '工作部门',
        value: 'deptId',
        align: 'center',
      },
      {
        text: '计量专业',
        value: 'major',
        align: 'center',
      },
      {
        text: '证书编号',
        value: 'verifierCertificateNo',
        align: 'center',
      },
      {
        text: '证书有效期',
        value: 'certificateDate',
        align: 'center',
      },
    ],
  },
  {
    name: '标准配套设备',
    list: [],
    columns: [
      {
        text: '设备名称',
        value: '',
        align: 'center',
        selete: true,
      },
      {
        text: '设备编号',
        value: '',
        align: 'center',
      },
      {
        text: '型号',
        value: '',
        align: 'center',
      },
      {
        text: '测量范围',
        value: '',
        align: 'center',
      },
      {
        text: '使用部门',
        value: '',
        align: 'center',
      },
      {
        text: '检定时间',
        value: '',
        align: 'center',
      },
      {
        text: '检定结果',
        value: '',
        align: 'center',
      },
      {
        text: '有效日期',
        value: '',
        align: 'center',
      },
    ],
  },
  {
    name: '检定规程',
    list: [],
    columns: [
      {
        text: '文件名称',
        value: '',
        align: 'center',
        selete: true,
      },
      {
        text: '文件编号',
        value: '',
        align: 'center',
      },
      {
        text: '文件号',
        value: '',
        align: 'center',
      },
      {
        text: '实施时间',
        value: '',
        align: 'center',
      },
      {
        text: '实施状态',
        value: '',
        align: 'center',
      },
    ],
  },
  {
    name: '重复性考核记录',
    list: [],
    columns: [
      {
        text: '记录编号',
        value: '',
        align: 'center',
      },
      {
        text: '记录名称',
        value: '',
        align: 'center',
      },
      {
        text: '考核时间',
        value: '',
        align: 'center',
      },
      {
        text: '考核结果',
        value: '',
        align: 'center',
      },
    ],
  },
  {
    name: '稳定性考核记录',
    list: [],
    columns: [
      {
        text: '记录编号',
        value: '',
        align: 'center',
      },
      {
        text: '记录名称',
        value: '',
        align: 'center',
      },
      {
        text: '考核时间',
        value: '',
        align: 'center',
      },
      {
        text: '考核结果',
        value: '',
        align: 'center',
      },
    ],
  },
  {
    name: '证书管理',
    list: [],
    columns: [
      {
        text: '证书编号',
        value: '',
        align: 'center',
      },
      {
        text: '证书名称',
        value: '',
        align: 'center',
      },
      {
        text: '证书类型',
        value: '',
        align: 'center',
      },
      {
        text: '证书出具日期',
        value: '',
        align: 'center',
      },
      {
        text: '证书有效期',
        value: '',
        align: 'center',
      },
    ],
  },
])
// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
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
  }
}
watch(() => props, (newVal) => {
  console.log(newVal, 'newVal')
  // 挑选需要展示的数据
  list.value = tableData.value.filter(item => item.name === newVal.name)[0]?.list || []
  columns.value = tableData.value.filter(item => item.name === newVal.name)[0]?.columns || []
  // row数据后续详情编辑需要
}, {
  deep: true,
  immediate: true,
})
// 保存数据
watch(() => tableData, (newVal) => {
  sessionStorage.setItem('tableData', JSON.stringify(newVal))
},
{ immediate: true, deep: true })
const addRowRef = ref()
const select = ref()
// 添加行
const addRowbtn = () => {
  // addRowRef.value.initDialog({ title: '添加', name: props.name })
  list.value.push({})
}
// 编辑行
const editRow = () => {
  if (select.value >= 0) {
    const row: object = list.value.filter((item, index) => index === select.value)[0]
    addRowRef.value.initDialog({ ...row, title: '编辑', name: props.name })
  }
  else {
    ElMessage.warning('请先选择需要编辑的数据')
  }
}
const userListRef = ref()
const listIndex = ref(0)
// 点击输入框中的选择按钮
const selectPerson = (index: number, type: string) => {
  listIndex.value = index
  if (type === 'user') {
    userListRef.value.initDialog()
  }
}
// // 行内添加数据
// const addRowData = (row: any, _: string) => {
//   if (_ === 'update') {
//     list.value = list.value.map((item, index) => {
//       if (index === select.value) {
//         return {
//           ...item,
//           ...row,
//         }
//       }
//       else {
//         return item
//       }
//     })
//   }
//   else {
//     list.value.push(row)
//   }
// }
// 表格选中
const handleSelectionChange = (e: any) => {
  selectionList.value = e
}
// 删除行
const removeRow = () => {
  if (selectionList.value.length > 0) {
    ElMessageBox.confirm(
      '确认删除选中的数据吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    ).then(() => {
      // list.value = list.value.filter((item, index) => !selectionList.value.includes(item))
      list.value.splice(listIndex.value, 1)
      ElMessage.success('删除成功')
    })
  }
  else {
    ElMessage.warning('请先选择需要删除的数据')
  }
}
// 选择完人员的回调函数
const confirmPerson = (e: any) => {
  console.log(e)
  list.value[listIndex.value] = e
}
</script>

<template>
  <div>
    <!-- 添加证书信息组件 -->
    <add-row ref="addRowRef" @add="addRowData" />
    <div class="header">
      <div class="title">
        <!-- {{ $props.name }} -->
      </div>
      <span class="btns">
        <el-button v-if="buttonType !== 'detail'" type="info" @click="removeRow">
          删除行
        </el-button>
        <el-button v-if="buttonType !== 'detail'" type="primary" @click="addRowbtn">
          添加行
        </el-button>
        <!-- <el-button v-if="buttonType !== 'detail'" type="primary" @click="editRow">
          编辑行
        </el-button> -->
      </span>
    </div>
    <!-- 表格区域 -->
    <el-table
      :data="list"
      border
      style="width: 100%;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="38" />
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column
        v-for="item in columns"
        :key="item.value"
        :prop="item.value"
        :label="item.text"
        align="center"
      >
        <template #header>
          <span style="color: red;">*</span><span>{{ item.text }}</span>
        </template>
        <template #default="scope">
          <el-input v-model="scope.row[item.value]" :autofocus="true" :placeholder="`${item.text}`" class="input">
            <template v-if="item.selete" #append>
              <el-button size="small" :disabled="buttonType === 'detail'" @click="selectPerson(scope.$index, item.type)">
                选择
              </el-button>
            </template>
          </el-input>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <!-- 选择用户列表组件 -->
  <user-list-dialog ref="userListRef" @add="confirmPerson" />
</template>

<style lang="scss" scoped>
.header {
  background-color: #fff;
  // height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  position: relative;

  .title {
    // font-weight: 700;
  }

  .btns {
    position: absolute;
    right: 40px;
    top: -4.5vh;
  }
}

:deep(.el-radio__label) {
  display: none;
}
// 样式
</style>