<!-- 计量计划-计划列表 -->
<script lang="ts" setup name="PlanTable">
import { ElMessage, ElMessageBox } from 'element-plus'
import selectPlan from './selelectPlan.vue'
import selectDevice from '@/views/tested/MeasurementPlan/plan/components/selectDevice.vue'
import selectDeviceSinge from '@/views/tested/device/group/components/selectDevice.vue'
import { useCheckList } from '@/utils/useCheckList'
import scanEquipmentDialog from '@/components/scanEquipmentDialog/index.vue'
import QRcodeDeviceDialog from '@/components/QRcodeDeviceDialog/index.vue'
import { getPreTaskContent } from '@/api/eqpt/measurementPlan/task'
import { uniqueMultiArray } from '@/utils/Array'

const $props = defineProps({
  data: {
    type: Array,
    default: () => ([]),
  },
  status: {
    type: String,
    required: true,
  },
})
const $route = useRoute()
const dialogStatus = ref('update') // 对话框类型：create,update
// 表头显示标题
const columns = ref([
  // {
  //   text: '统一编号',
  //   value: 'equipmentNo',
  //   required: true,
  //   isDate: false, // 是否下拉框
  //   isBtn: true,
  // },
  {
    text: '设备名称',
    value: 'equipmentName',
    required: true,
    type: 'btn',
  },
  {
    text: '规格型号',
    value: 'model',
    required: false,
    type: 'text',
  },
  {
    text: '辅助字段',
    value: 'helpInstruction',
    required: false,
    type: 'text',
  },
  {
    text: '出厂编号',
    value: 'manufactureNo',
    required: false,
    type: 'text',
  },
  {
    text: '生产厂家',
    value: 'manufacturer',
    required: false,
    type: 'text',
  },
  {
    text: '负责人',
    value: 'directorName',
    required: false,
    type: 'text',
  },
  {
    text: '计量标识',
    value: 'meterIdentifyName',
    required: false,
    type: 'text',
  },
  {
    text: '使用状态',
    value: 'usageStatusName',
    required: false,
    type: 'text',
  },
  {
    text: '证书有效期',
    value: 'certificateValid',
    required: false,
    type: 'text',
  },
  {
    text: '附件',
    value: 'appendixDescn',
    required: false,
    type: 'input',
  },
  {
    text: '特殊要求',
    value: 'specialRequire',
    required: false,
    type: 'input',
  },
  // {
  //   text: $route.query.approvalType === '0' ? '提前送检时间' : '延迟送检时间',
  //   value: 'inspectionTime',
  //   required: true,
  //   isDate: true, // 是否下拉框
  //   isBtn: false,
  // },
  // {
  //   text: '关联计划',
  //   value: 'planName',
  //   required: true,
  //   isDate: false, // 是否下拉框
  //   isBtn: true,
  // },
  // {
  //   text: '备注',
  //   value: 'remarks',
  //   required: false,
  //   isSelect: false, // 是否下拉框
  //   isBtn: false,
  // },
])
const list = ref<any[]>([])
// 检查数据列表
function checkCertificateList() {
  return useCheckList(list.value, columns.value as any, '设备信息')
}
// 将列表置为不可编辑状态
function setAllRowReadable() {
  for (const item of list.value) {
    item.editable = false
  }
}
// 双击行显示输入框
const dblclickRow = (row: any) => {
  if ($route.path.includes('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({
      equipmentNo: '',
      equipmentName: '',
      model: '',
      directorName: '',
      meterIdentify: '',
      certificateValid: '',
      installLocation: '',
      editable: true,
      specialRequire: '无',
      appendixDescn: '无',
    })
  }
}
// 删除行
const removeRow = () => {
  list.value = list.value.filter((item) => {
    return !SelectionList.value.includes(item)
  })
}
// 点击设备名称输入框
const deviceRef = ref()
const deviceSingeRef = ref()
const planRef = ref()
// 选中的行
const selectRow = ref()
const select = (text: string, index: any) => {
  if (text === '设备名称') {
    deviceSingeRef.value.initDialog()
    selectRow.value = index
  }
  if (text === '关联计划') {
    planRef.value.initDialog()
    selectRow.value = index
  }
}
// 选择设备
const confirm = (device: any) => {
  // 判断是单选还是多选
  if (Array.isArray(device)) {
    // 多选
    device.forEach((item) => {
      // equipmentNo
      const ids = [] as any
      if (!list.value.filter((citem: any) => citem.equipmentId === item.id).length) {
        ids.push(item.id)
        list.value.push({
          ...item,
          equipmentId: item.id,
          id: null,
          groupId: null,
          editable: true,
          planId: '',
          planName: '',
          planNo: '',
          specialRequire: '无',
          appendixDescn: '无',
        })
        if (!ids.length) { return }
        // 获取上一份任务单 设备的附件和特殊要求
        getPreTaskContent(ids).then((res) => {
          if (res.data.length) {
            console.log(res.data, '获取上一份任务单 设备的附件和特殊要求')

            res.data.forEach((item: any) => {
              const index = list.value.findIndex((citem: any) => citem.equipmentId === item.sampleId)
              if (index !== -1) {
                list.value[index].appendixDescn = item.appendixDescn
                list.value[index].specialRequire = item.specialRequire
              }
            })
          }
        })
      }
    })
  }
  else {
    console.log(device, 'device')
    // 单选
    // 判断是否重复
    const row = {
      ...device,
      equipmentId: device.id,
      id: null,
      groupId: null,
      editable: true,
      planId: '',
      planName: '',
      planNo: '',
      specialRequire: '无',
      appendixDescn: '无',
    }
    if (!list.value.filter((citem: any) => citem.equipmentId === row.equipmentId).length) {
      list.value[selectRow.value] = row
      // 获取上一份任务单 设备的附件和特殊要求
      getPreTaskContent([device.id]).then((res) => {
        if (res.data.length) {
          list.value[selectRow.value].appendixDescn = res.data[0].appendixDescn
          list.value[selectRow.value].specialRequire = res.data[0].specialRequire
        }
      })
    }
  }
}
// 选择计量计划
const confirmPlan = (plan: any) => {
  list.value[selectRow.value].planNo = plan.planNo
  list.value[selectRow.value].planName = plan.planName
  list.value[selectRow.value].planId = plan.id
}
const initDialog = () => {
  list.value = $props.data
  dialogStatus.value = $props.status
}
// 批量增加
const batch = () => {
  deviceRef.value.initDialog(true)
}
watch(() => $props.data, (newVal) => {
  if (newVal) {
    list.value = newVal
    fetchTogetherData()
  }
}, {
  deep: true,
  // immediate: true,
})
initDialog()
defineExpose({
  list, checkCertificateList,
})

// --------------------------------------------标签绑定--------------------------------------------
const scanEquipmentRef = ref()
// 点击扫描收添加
const scan = () => {
  // 参数：是标签绑定
  scanEquipmentRef.value.initDialog(false, 'detail')
}
// 扫描结束
const scanOver = (value: any) => {
  console.log('***************************')
  console.log(value, 'value, 设备列表rfid')
  scanEquipmentRef.value.closeDialog()
  // 多选
  const ids = [] as any
  value.forEach((item: any) => {
    if (!list.value.filter((c: any) => c.equipmentId === item.id).length) {
      ids.push(item.id)
      list.value.push({
        ...item,
        // appearanceInspect: '',
        // appendixDescn: '无',
        // measureContent: '',
        // sampleManufacturer: item.manufacturer,
        // sampleManufactureNo: item.manufactureNo,
        // sampleModel: item.model,
        // sampleNo: item.equipmentNo,
        // sampleId: item.id,
        // sampleName: item.equipmentName,
        equipmentId: item.id,
        id: null,
        specialRequire: '无',
        appendixDescn: '无',
        editable: true,
      })
    }
  })
  if (!ids.length) { return }
  // 获取上一份任务单 设备的附件和特殊要求
  getPreTaskContent(ids).then((res) => {
    if (res.data.length) {
      console.log(res.data, '获取上一份任务单 设备的附件和特殊要求')

      res.data.forEach((item: any) => {
        const index = list.value.findIndex((citem: any) => citem.equipmentId === item.sampleId)
        if (index !== -1) {
          list.value[index].appendixDescn = item.appendixDescn
          list.value[index].specialRequire = item.specialRequire
        }
      })
    }
  })
}
// --------------------------------------------二维码扫描--------------------------------------------
const qrcodeRef = ref()
// 二维码扫描
const qrcode = () => {
  qrcodeRef.value.initDialog()
}
// 扫描完成
const qrcodeOver = (value: any) => {
  console.log('***************************')
  console.log(value, 'value, 设备列表二维码')
  // 多选
  const ids = [] as any
  value.forEach((item: any) => {
    if (!list.value.filter((c: any) => c.equipmentId === item.id).length) {
      ids.push(item.id)
      list.value.push({
        // appearanceInspect: '',
        // appendixDescn: '无',
        // measureContent: '',
        // sampleManufacturer: item.manufacturer,
        // sampleManufactureNo: item.manufactureNo,
        // sampleModel: item.model,
        // sampleNo: item.equipmentNo,
        // sampleId: item.id,
        // sampleName: item.equipmentName,
        ...item,
        equipmentId: item.id,
        id: null,
        specialRequire: '无',
        appendixDescn: '无',
        editable: true,
      })
    }
  })
  if (!ids.length) { return }
  // 获取上一份任务单 设备的附件和特殊要求
  getPreTaskContent(ids).then((res) => {
    if (res.data.length) {
      console.log(res.data, '获取上一份任务单 设备的附件和特殊要求')

      res.data.forEach((item: any) => {
        const index = list.value.findIndex((citem: any) => citem.equipmentId === item.sampleId)
        if (index !== -1) {
          list.value[index].appendixDescn = item.appendixDescn
          list.value[index].specialRequire = item.specialRequire
        }
      })
    }
  })
}
// --------------------------------------------表格操作--------------------------------------------
// 表格标识
const tableFlag = ref('normal')// normal普通表格  together聚合表格
// 切换表格
const changeTable = () => {
  if (tableFlag.value === 'normal') {
    tableFlag.value = 'together'
  }
  else {
    tableFlag.value = 'normal'
  }
}

const togetherColumns = ref([
  {
    text: '',
    value: '',
    align: 'center',
    width: '38',
  },
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
  },
  {
    text: '总计',
    value: 'deviceNum',
    align: 'center',
  },
])
const togetherList = ref<any>([])
const expandList = ref<any>([])
function fetchTogetherData() {
  togetherList.value = []
  const equipmentNames = uniqueMultiArray(list.value, 'equipmentName')
  equipmentNames.forEach((element: any) => {
    togetherList.value.push({
      equipmentName: element.equipmentName,
      deviceNum: list.value.filter((citem: any) => citem.equipmentName === element.equipmentName).length,
    })
  })
}

const getRowKeys = (row: any) => { // 获取当前行id
  return row.equipmentName // 这里看这一行中需要根据哪个属性值是id
}
// 控制展开行
const expands = ref<any[]>([])
const expandChange = (row: any, expandedRows: any) => {
  if (expandedRows.length) {
    expands.value = []
    if (row) {
      expands.value.push(row.equipmentName)
    }
  }
  else {
    expands.value = []
  }
}
watch(() => expands.value, (newVal) => {
  expandList.value = list.value.filter((item: any) => item.equipmentName === newVal[0])
},
{
  deep: true,
})
</script>

<template>
  <detail-block-switch :title="`${$route.query.approvalType === '0' ? '提前' : '延迟'}送检列表`">
    <select-device ref="deviceRef" :check-destination="false" check-destination-value="1" :need-status="true" @add="confirm" />
    <!-- 扫描 -->
    <scan-equipment-dialog ref="scanEquipmentRef" :is-muit="true" title="RFID扫描" @confirm="scanOver" />
    <!-- 二维码扫描 -->
    <q-rcode-device-dialog ref="qrcodeRef" @confirm="qrcodeOver" />
    <select-device-singe ref="deviceSingeRef" :check-destination="false" check-destination-value="1" :need-status="true" status-type="custom" @add="confirm" />
    <select-plan ref="planRef" @add="confirmPlan" />
    <template #btns>
      <template v-if="!$route.path.includes('detail')">
        <el-button type="primary" @click="qrcode">
          二维码扫描增加
        </el-button>
        <el-button type="primary" @click="scan">
          RFID扫描增加
        </el-button>
        <el-button type="primary" @click="addRow">
          增加行
        </el-button>
        <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>
      <template v-if="$route.path.includes('detail')">
        <icon-button icon="icon-change" title="切换列表状态" @click="changeTable" />
      </template>
    </template>
    <el-table
      v-show="tableFlag === 'normal'"
      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="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 v-if="!scope.row.editable">{{ scope.row[item.value] }}</span>
          <el-input
            v-if="scope.row.editable && item.type === 'input'" v-model="scope.row[item.value]" :autofocus="true"
            :placeholder="`${item.text}`" class="input"
            @focus="select(item.text, scope.$index)"
          />
          <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}`"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 聚合表格 -->
    <!-- 头部 -->
    <normal-table
      v-show="tableFlag === 'together'" class="nortable-header" :data=" [] " :total=" 0 " :columns="togetherColumns as any" :options="
        {
          needIndex: false, // 是否需要序号列
          border: true, // 是否需要上方边框
        }
      " :pagination=" false " :is-showmulti-select=" false " :query="{}"
    />
    <!-- 身体 -->
    <el-table
      v-show="tableFlag === 'together'"
      ref="togetherTableRef" :data=" togetherList " border style="width: 100%;"
      :row-key=" getRowKeys " :expand-row-keys=" expands " :show-header=" false " @expand-change=" expandChange "
    >
      <el-table-column type="expand" width="38">
        <template #default>
          <el-table
            ref="expandTableRef"
            :data=" expandList " border style="width: 100%;"
          >
            <el-table-column v-for="item in columns" :key="item.value" :label="item.text" :prop="item.value" align="center" />
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="设备名称" prop="equipmentName" align="center" />
      <el-table-column label="数量" align="center">
        <template #default=" scope ">
          共计{{ scope.row.deviceNum }}台
        </template>
      </el-table-column>
    </el-table>
  </detail-block-switch>
</template>

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

.el-select {
  width: 100%;
}

.nortable-header {
  ::v-deep(.el-table__body-wrapper) {
    display: none;
  }
}

::v-deep(.el-table__expanded-cell) {
  padding: 0;
}
</style>