<!-- 任务单列表 -->
<script lang="ts" setup name="EditPlatform">
import { ElMessage, ElMessageBox } from 'element-plus'
const $props = defineProps({
  data: {
    type: Array,
    default: () => ([]),
  },
  status: {
    type: String,
    required: true,
  },
})
const dialogStatus = ref('update') // 对话框类型：create,update
// 表头显示标题
const columns = ref([
  {
    text: '统一编号',
    value: 'name',
    required: true,
    isSelect: false, // 是否下拉框
  },
  {
    text: '设备名称',
    value: 'information',
    required: true,
    isSelect: false, // 是否下拉框
  },
  {
    text: '型号',
    value: 'location',
    required: true,
    isSelect: false, // 是否下拉框
  },
  {
    text: '附件',
    value: 'location',
    required: true,
    isSelect: false, // 是否下拉框
  },
  {
    text: '接收状态',
    value: 'location',
    required: true,
    isSelect: false, // 是否下拉框
  },
  {
    text: '接受状态说明',
    value: 'location',
    required: true,
    isSelect: false, // 是否下拉框
  },
  {
    text: '检定结果',
    value: 'location',
    required: true,
    isSelect: false, // 是否下拉框
  },
  {
    text: '检定完成时间',
    value: 'location',
    required: true,
    isSelect: false, // 是否下拉框
  },
  {
    text: '检定说明',
    value: 'location',
    required: true,
    isSelect: false, // 是否下拉框
  },
])
const list = ref([])
// 检查数据列表
function checkCertificateList() {
  for (let index = 0; index < list.value.length; index++) {
    const item = list.value[index]
    for (const prop of columns.value) {
      // 检查必填
      if (prop.required && !item[prop.value]) {
        ElMessage.warning(`请先完善第${index + 1}行中${prop.text}`)
        return false
      }
    }
  }
  return true
}
// 将列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of list.value) {
    item.editable = false
  }
}
// 双击行显示输入框
const dblclickRow = (row: any) => {
  if (dialogStatus.value == 'detail') {
    return
  }
  setAllRowReadable()
  row.editable = true
}
const SelectionList = ref()
// 表格选中
const handleSelectionChange = (e: any[]) => {
  SelectionList.value = e
}
// 添加行
const addRow = () => {
  // certificateRef.value.initDialog({ title: '添加' })
  if (checkCertificateList()) {
    setAllRowReadable()
    list.value.push({
      name: '',
      information: '',
      location: '',
      editable: true,
    })
  }
}
// 删除行
const removeRow = () => {
  list.value = list.value.filter((item) => {
    return !SelectionList.value.includes(item)
  })
}
const initDialog = () => {
  list.value = $props.data
  dialogStatus.value = $props.status
}
initDialog()
defineExpose({
  list,
})
</script>

<template>
  <detail-block-switch title="任务单列表">
    <template v-if="dialogStatus !== 'detail'" #btns>
      <el-button type="primary">
        二维码扫描增加
      </el-button>
      <el-button type="primary">
        RFID扫描增加
      </el-button>
      <el-button type="primary">
        批量增加
      </el-button>
      <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"
      @row-dblclick="dblclickRow"
    >
      <el-table-column v-if="dialogStatus !== '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.id" :width="item.width" :prop="item.value" :label="item.text"
        align="center"
      >
        <template #header>
          <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
        </template>
        <template #default="scope">
          <span v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
          <el-input
            v-if="scope.row.editable && !item.isSelect" v-model="scope.row[item.value]" :autofocus="true"
            :placeholder="`${item.text}`" class="input"
          />
          <el-date-picker v-if="scope.row.editable && item.Select" v-model="scope.row[item.value]" type="date"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD HH:mm:ss" :placeholder="`${item.text}`" />
        </template>
      </el-table-column>
    </el-table>
  </detail-block-switch>
</template>

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

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