<!-- 计量计划-计划列表 -->
<script lang="ts" setup name="PlatListTable">
import { ElMessage, ElMessageBox } from 'element-plus'
import selectDevice from './selectDevice.vue'
import selectDeviceSinge from '@/views/tested/device/group/components/selectDevice.vue'
import { useCheckList } from '@/utils/useCheckList'
import type { IlistObjType } from '@/views/tested/device/info/components/interface'
import { getDefaultLab } from '@/api/eqpt/measurementPlan/paln'
const $props = defineProps({
  data: {
    type: Array,
    default: () => ([]),
  },
})
const $route = useRoute()
// 表头显示标题
const columns = ref([
  {
    text: '设备名称',
    value: 'equipmentName',
    required: true,
    width: '200',
    type: 'btn',
  },
  {
    text: '规格型号',
    value: 'model',
    required: false,
    type: 'text',
  },
  {
    text: '出厂编号',
    value: 'manufactureNo',
    required: false,
    type: 'text',
  },
  {
    text: '生产厂家',
    value: 'manufacturer',
    required: false,
    type: 'text',
  },
  {
    text: '使用部门',
    value: 'deptName',
    required: false,
    type: 'text',
  },
  {
    text: '使用岗位',
    value: 'usePosition',
    required: false,
    type: 'text',
  },
  {
    text: '负责人',
    value: 'directorName',
    required: false,
    type: 'text',
  },
  {
    text: '计量标识',
    value: 'meterIdentifyName',
    required: false,
    type: 'text',
  },
  {
    text: '检定(校准)单位',
    value: 'checkOrganization',
    required: false,
    type: 'text',
  },
  {
    text: '证书有效期',
    value: 'certificateValid',
    width: '160',
    required: false,
    type: 'text',
  },
  {
    text: '检定去向',
    value: 'checkDestinationName',
    required: false,
    type: 'text',
  },
  {
    text: '计划送检时间',
    value: 'planDeliverTime',
    width: '180',
    required: true,
    type: 'date',
  },
  {
    text: '计划送检单位',
    value: 'planMeasureCompany',
    width: '160',
    required: true,
    type: 'input',
  },
])
const list = ref<IlistObjType[]>([])
watch(() => $props.data, (newVal) => {
  if (newVal) {
    list.value = newVal.map((item: any) => ({ ...item, editable: true }))
  }
})
// 检查数据列表
function checkCertificateList() {
  return useCheckList(list.value as any, columns.value as any, '计划列表')
}
// 将列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of list.value as IlistObjType[]) {
    item.editable = false
  }
}
// 双击行显示输入框
// const dblclickRow = (row: IlistObjType) => {
//   if ($route.path.includes('detail')) {
//     return
//   }
//   setAllRowReadable()
//   row.editable = true
// }
const SelectionList = ref()
// 表格选中
const handleSelectionChange = (e: IlistObjType[]) => {
  SelectionList.value = e
}
// 添加行
const addRow = () => {
  if (checkCertificateList()) {
    // setAllRowReadable()
    list.value.push({
      equipmentName: '',
      model: '',
      manufactureNo: '',
      manufacturer: '',
      deptName: '',
      usePosition: '',
      directorName: '',
      meterIdentifyName: '',
      checkOrganization: '',
      certificateValid: '',
      checkDestinationName: '',
      editable: true,
    } as any)
  }
}
// 删除行
const removeRow = () => {
  list.value = list.value.filter((item) => {
    return !SelectionList.value.includes(item)
  })
}
// 点击设备名称输入框
const deviceRef = ref()
const deviceSingeRef = ref()
// 选中的行
const selectRow = ref()
const select = (text: string, index: any) => {
  if (text === '设备名称') {
    deviceSingeRef.value.initDialog()
    selectRow.value = index
  }
}
// 选择设备
const confirm = async (device: any) => {
  if (Array.isArray(device)) {
    // 多选
    device.forEach(async (item) => {
      if (list.value.every(citem => citem.equipmentId !== item.id)) {
        const data = await getDefaultLab({ companyId: item.companyId })
        list.value.push({
          ...item,
          equipmentId: item.id,
          id: null,
          groupId: null,
          editable: true,
          checkDestinationName: item.checkDestination === '1' ? '计量室' : item.checkDestination === '2' ? '外送' : '',
          planMeasureCompany: data.data,
          planId: '',
          planName: '',
          planNo: '',
        })
      }
    })
  }
  else {
    // 单选
    // 判断是否重复
    if (list.value.some(item => item.equipmentId === device.id)) {
      ElMessage.warning('选择设备重复')
      return
    }
    const data = await getDefaultLab({ companyId: device.companyId })
    const row = {
      ...device,
      equipmentId: device.id,
      id: null,
      groupId: null,
      editable: true,
      planId: '',
      planName: '',
      planNo: '',
      checkDestinationName: device.checkDestination === '1' ? '计量室' : device.checkDestination === '2' ? '外送' : '',
      // planMeasureCompany: device.checkDestination === '1' ? '' : device.checkOrganization,
      planMeasureCompany: data.data,
    }
    list.value[selectRow.value] = row
  }
}
const initDialog = () => {
  list.value = $props.data.map((item: any) => ({ ...item, editable: true }))
}
// 批量增加
const batch = () => {
  deviceRef.value.initDialog(true)
}
watch(() => $props.data as IlistObjType[], (newVal: IlistObjType[]) => {
  if (newVal) {
    list.value = newVal
  }
}, {
  deep: true,
  // immediate: true,
})
initDialog()
defineExpose({
  list, checkCertificateList,
})
</script>

<template>
  <detail-block-switch title="计划列表">
    <select-device ref="deviceRef" @add="confirm" />
    <select-device-singe ref="deviceSingeRef" :need-status="false" @add="confirm" />
    <template v-if="!$route.path.includes('detail')" #btns>
      <el-button type="primary" @click="batch">
        批量增加
      </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="!$route.path.includes('detail')" type="selection" width="38" />
      <el-table-column align="center" label="序号" width="60" type="index" />
      <el-table-column
        v-for="item in columns" :key="item.text" :prop="item.value" :label="item.text"
        align="center" :width="item.width"
      >
        <template #header>
          <span v-show="item.required && !$route.path.includes('detail')" 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.type === 'btn'" v-model="scope.row[item.value]" :autofocus="true"
            :placeholder="`${item.text}`" class="input"
            @focus="select(item.text, scope.$index)"
          >
            <template #append>
              <span @click="select(item.text, scope.$index)">选择</span>
            </template>
          </el-input>
          <el-date-picker
            v-if="scope.row.editable && item.type === 'date'" v-model="scope.row[item.value]" type="date"
            format="YYYY-MM-DD" value-format="YYYY-MM-DD" :placeholder="`${item.text}`" style="width: 150px;"
          />
          <el-input
            v-if="scope.row.editable && item.type === 'input'" v-model="scope.row[item.value]"
            :placeholder="`${item.text}`" class="input"
          />
          <span v-if="scope.row.editable && item.type === 'text'">{{ 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>