<!-- 表格记录 -->
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import addRow from './addRow.vue'
interface columnsType {
  text: string
  value: string
  width?: string
  align?: string
}
const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  title: {
    type: String,
    required: true,
  },
  row: {
    type: Object,
    defaule: () => ({}),
  },
})
const list = ref([])
const total = ref(0)
const columns = ref<columnsType[]>([])
const searchQuery = ref({
  limit: 10,
  offset: 1,
})
const loadingTable = ref(false)
// 记录表格数据
const tableData = ref([
  {
    name: '周检记录',
    list: [],
    columns: [
      {
        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',
      },
      {
        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',
      },
    ],
  },
  {
    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 })
}
// 编辑行
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 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 removeRow = () => {
  console.log(select.value)
  if (select.value >= 0) {
    ElMessageBox.confirm(
      '确认删除选中的数据吗？',
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      },
    ).then(() => {
      list.value = list.value.filter((item, index) => index !== select.value)
      select.value = -1
      ElMessage.success('删除成功')
    })
  }
  else {
    ElMessage.warning('请先选择需要删除的数据')
  }
}
</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="title !== '详情'" type="info" @click="removeRow">
          删除行
        </el-button>
        <el-button v-if="title !== '详情'" type="primary" @click="addRowbtn">
          添加行
        </el-button>
        <el-button v-if="title !== '详情'" type="primary" @click="editRow">
          编辑行
        </el-button>
      </span>
    </div>
    <!-- 表格区域 -->
    <normal-table
      id="print"
      :data="list" :total="total" :columns="columns as any"
      :query="{ limit: searchQuery.limit, offset: searchQuery.offset }"
      :list-loading="loadingTable"
      style="padding-top: 20px;background-color: #fff;"
      @change="changePage"
    >
      <template #preColumns>
        <el-table-column label="" width="55" align="center">
          <template #default="scope">
            <el-radio v-model="select" :label="scope.$index" class="radio" />
          </template>
        </el-table-column>
        <el-table-column label="序号" width="55" align="center">
          <template #default="scope">
            {{ (searchQuery.offset - 1) * searchQuery.limit + scope.$index + 1 }}
          </template>
        </el-table-column>
      </template>
    </normal-table>
  </div>
</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: -22px;
  }
}

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