<!-- 主附件信息表格 -->
<script lang="ts" setup name="AnnextTable">
import { ElMessage, ElMessageBox } from 'element-plus'
import { useCheckList } from '@/utils/useCheckList'
import selectDeviceMultiple from '@/views/tested/MeasurementPlan/plan/components/selectDevice.vue'
const $props = defineProps({
  data: {
    type: Array,
    default: () => ([]),
  },
})
const $route = useRoute()
// 表头显示标题
const columns = ref([
  {
    text: '智能模型名称',
    value: 'equipmentName',
  },
  {
    text: '规格型号',
    value: 'model',
  },
  {
    text: '出厂编号',
    value: 'manufactureNo',
  },
  {
    text: '厂商',
    value: 'manufacturer',
  },
  {
    text: '所在单位',
    value: 'companyName',
  },
  {
    text: '使用部门',
    value: 'deptName',
  },
  {
    text: '使用岗位',
    value: 'usePosition',
  },
  {
    text: '计量标识',
    value: 'meterIdentifyName',
  },
  {
    text: '证书有效期',
    value: 'certificateValid',
  },
  {
    text: '检定单位',
    value: 'checkOrganization',
  },
])
const list = ref<any[]>([])
// 检查数据列表
function checkCertificateList() {
  return useCheckList(list.value, columns.value as any, '智能模型列表')
}

const SelectionList = ref()
// 表格选中
const handleSelectionChange = (e: any[]) => {
  SelectionList.value = e
}
const deviceRef = ref()
// 添加行
const addRow = () => {
  deviceRef.value.initDialog(true)
}
const confirm = (data: any) => {
  data.forEach((item: any) => {
    // console.log(item)
    if (list.value.every((citem: any) => citem.id !== item.id)) {
      list.value.push(item)
    }
  })
}
// 删除行
const removeRow = () => {
  list.value = list.value.filter((item) => {
    return !SelectionList.value.includes(item)
  })
}
watch(() => $props.data, (newVal) => {
  if (newVal) {
    list.value = newVal
  }
})
defineExpose({
  list,
  checkCertificateList,
})
</script>

<template>
  <detail-block-switch title="智能模型列表">
    <select-device-multiple ref="deviceRef" :status-type="$route.query.statusType" :limit="10" :need-status="true" @add="confirm" />
    <template v-if="!$route.path.includes('detail')" #btns>
      <el-button type="primary" @click="addRow">
        增加行
      </el-button>
      <el-button type="info" @click="removeRow">
        删除行
      </el-button>
    </template>
    <el-table
      ref="multipleTableRef" :data="list" style="width: 100%;" border @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="!$route.path.includes('detail')" 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 v-show="item.required && !$route.path.includes('detail')" style="color: red;">*</span><span>{{ item.text }}</span>
        </template>
        <template #default="scope">
          <span>{{ scope.row[item.value] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </detail-block-switch>
</template>

<style lang="scss" scoped>
.el-dialog {
  width: 700px;
}

.el-select {
  width: 100%;
}
</style>