<!-- 任务单列表 -->
<script lang="ts" setup name="Task">
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
import selectDevice from './selectDeviceMultiple.vue'
import selectDeviceSinge from './selectDeviceSinge.vue'
import showPhoto from '@/views/tested/device/info/components/showPhotoSinge.vue'
import showPhotos from '@/views/tested/device/info/components/showPhoto.vue'
import { uploadApi } from '@/api/system/notice'
import { useCheckList } from '@/utils/useCheckList'
import { getInfoDetail } from '@/api/eqpt/device/info'

const $props = defineProps({
  data: {
    type: Array,
    default: () => ([]),
  },
  form: {
    type: Object,
    default: () => ({}),
  },
})
const measureCompany = ref('')
watch(() => $props.form, (newVal) => {
  if (!newVal) { return }
  if (newVal.measureCompany) {
    measureCompany.value = newVal.measureCompany
  }
}, {
  deep: true,
  immediate: true,
})
const $route = useRoute()
// 表头显示标题
const columnsHandler = ref([
  // {
  //   text: '统一编号',
  //   value: 'sampleNo',
  //   required: true,
  //   isBtn: true,
  //   isUpload: false,
  // },
  {
    text: '设备名称',
    value: 'sampleName',
    required: true,
    type: 'btn',
  },
  {
    text: '规格型号',
    value: 'sampleModel',
    required: false,
    type: 'text',
  },
  {
    text: '出厂编号',
    value: 'sampleManufactureNo',
    required: false,
    type: 'text',
  },
  // {
  //   text: '生产厂家',
  //   value: 'sampleManufacturer',
  //   required: false,
  //   type: 'text',
  // },
  {
    text: '附件',
    value: 'appendixDescn',
    required: false,
    type: 'input',
  },
  // {
  //   text: '外观和功能检查',
  //   value: 'appearanceInspect',
  //   required: false,
  //   isBtn: false,
  //   isUpload: false,
  // },
  {
    text: '特殊要求',
    value: 'specialRequire',
    required: false,
    type: 'input',
  },
  // {
  //   text: '检校项目',
  //   value: 'measureContent',
  //   required: false,
  //   isBtn: false,
  //   isUpload: false,
  // },
])
const columnsDetail = ref([
  // {
  //   text: '统一编号',
  //   value: 'sampleNo',
  //   required: true,
  //   isBtn: true,
  //   isUpload: false,
  // },
  {
    text: '设备名称',
    value: 'sampleName',
    required: true,
    type: 'text',
  },
  {
    text: '规格型号',
    value: 'sampleModel',
    required: false,
    type: 'text',
  },
  {
    text: '出厂编号',
    value: 'sampleManufactureNo',
    required: false,
    type: 'text',
  },
  {
    text: '生产厂家',
    value: 'sampleManufacturer',
    required: false,
    type: 'text',
  },
  {
    text: '附件',
    value: 'appendixDescn',
    required: false,
    type: 'text',
  },
])
const list = ref<any[]>([])
// 检查数据列表
function checkCertificateList() {
  return useCheckList(list.value, columnsHandler.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 = () => {
  if (checkCertificateList()) {
    setAllRowReadable()
    list.value.push({
      sampleManufacturer: '',
      appearanceInspect: '',
      appendixDescn: '无',
      measureContent: '',
      sampleModel: '',
      sampleId: '',
      sampleNo: '',
      sampleName: '',
      sampleManufactureNo: '',
      specialRequire: '无',
      editable: true,
    })
  }
}
// 删除行
const removeRow = () => {
  list.value = list.value.filter((item) => {
    return !SelectionList.value.includes(item)
  })
}
const initDialog = () => {
  list.value = $props.data
}
watch(() => $props.data, (newVal) => {
  if (newVal) {
    list.value = newVal
  }
}, {
  deep: true,
})
initDialog()
defineExpose({
  list, checkCertificateList,
})
// 设备弹窗组件
const deviceRef = ref()
const deviceSingeRef = ref()
// 选中的行
const selectRow = ref()
// 单选设备
const select = (text: string, index: any) => {
  if (text === '设备名称') {
    deviceSingeRef.value.initDialog('plan')
    selectRow.value = index
  }
}
// 多选设备
const batch = () => {
  if (!checkCertificateList()) { return }
  setAllRowReadable()
  deviceRef.value.initDialog(true, 'plan')
}
// 确认选择设备
const confirm = (device: any) => {
  // 判断是单选还是多选
  if (Array.isArray(device)) {
    // 多选
    device.forEach((item) => {
      if (!list.value.filter((c: any) => c.sampleId === item.id).length) {
        list.value.push({
          appearanceInspect: '',
          appendixDescn: '无',
          measureContent: '',
          sampleManufacturer: item.manufacturer,
          sampleModel: item.model,
          sampleNo: item.equipmentNo,
          sampleId: item.id,
          sampleName: item.equipmentName,
          sampleManufactureNo: item.manufactureNo,
          specialRequire: '无',
          editable: true,
        })
      }
    })
  }
  else {
    if (!list.value.filter((c: any) => c.sampleId === device.id).length) {
      // 单选
      const row = {
        sampleManufacturer: device.manufacturer,
        appearanceInspect: '',
        appendixDescn: '无',
        measureContent: '',
        sampleModel: device.model,
        sampleId: device.id,
        sampleNo: device.equipmentNo,
        sampleName: device.equipmentName,
        specialRequire: '无',
        sampleManufactureNo: device.manufactureNo,
        editable: true,
      }
      list.value[selectRow.value] = row
    }
    else {
      ElMessage.warning('设备已存在')
    }
  }
}
const fileRef = ref() // 文件上传input
const currentIndex = ref()
const onFileChange = (event: any) => {
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    const loading = ElLoading.service({
      lock: true,
      background: 'rgba(255, 255, 255, 0.8)',
    })
    fd.append('multipartFile', event.target.files[0])
    uploadApi(fd).then((res) => {
      fileRef.value.value = ''
      if (res.code === 200) {
        list.value[currentIndex.value].appendixDescn = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
        fileRef.value.value = ''
        loading.close()
      }
      else {
        ElMessage.error(res.message)
        fileRef.value.value = ''
        loading.close()
      }
    }).catch(() => {
      fileRef.value.value = ''
      loading.close()
    })
  }
}
const uploadRef = ref()
const upload = (index: number) => {
  currentIndex.value = index
  // window.onclick()
  fileRef.value.click()
  // deviceRef.value?.click()
}
const $router = useRouter()
const deviceDetail = (row: any) => {
  console.log(row, 'row')
  // 获取设备详情
  // getInfoDetail({ equipmentId: row.sampleId }).then((res) => {
  $router.push({
    path: '/info/detail',
    query: {
      row: JSON.stringify({ id: row.sampleId, equipmentId: row.sampleId }),
      id: row.sampleId,
      statusName: '全部',
    },
  })
  // })
}

const TextColor = computed(() => {
  return (name: string) => {
    let color = ''
    switch (name) {
      // case '未接收':
      //   color = '#888'
      //   break
      // case '已接收':
      //   color = '#000'
      //   break
      // case '已取消':
      //   color = '#EAA341'
      //   break
      // case '已退回':
      //   color = '#F68787'
      //   break
      // case '待取回':
      //   color = '#82CD5E'
      //   break
      // case '已取回':
      //   color = '#89D961'
      //   break
      case '检定中':
        color = '#40AAFF'
        break
      case '已检完':
        color = '#F0F9EB'
        break
      case '未检定':
        color = '#000'
        break
      case '已接收':
        color = '#F0F9EB'
        break
      case '未接收':
        color = '#000'
        break
      case '已退回':
        color = '#F68787'
        break
      case '待补送':
        color = '#EAA341'
        break
      default:
        color = '#000'
        break
    }
    return color
  }
})
</script>

<template>
  <detail-block-switch title="任务单列表">
    <!-- 选择设备弹窗 -->
    <select-device ref="deviceRef" :measure-company="measureCompany" @add="confirm" />
    <select-device-singe ref="deviceSingeRef" :measure-company="measureCompany" @add="confirm" />
    <!-- 上传组件 -->
    <input ref="fileRef" style="display: none;" type="file" @change="onFileChange">
    <template v-if="!$route.path.includes('detail')" #btns>
      <el-button type="primary">
        二维码扫描增加
      </el-button>
      <el-button type="primary">
        RFID扫描增加
      </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>
    <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="80" type="index" />
      <el-table-column
        v-for="item in ($route.path.includes('detail') && $route.query.statusName === '全部' ? columnsDetail : columnsHandler)"
        :key="item.value" :width="item.width" :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">
          <!-- <el-button v-if="!scope.row.editable && !item.isUpload && item.text === '设备名称' && $route.path.includes('detail')" link type="primary" @click="deviceDetail(scope.row)">
            {{ scope.row[item.value] }}
          </el-button>
          <span v-if="!scope.row.editable && !item.isUpload && (item.text !== '设备名称' || !$route.path.includes('detail'))">{{ scope.row[item.value] }}</span>
          <show-photos v-if="!scope.row.editable && item.isUpload" :minio-file-name="scope.row[item.value] " />
          <el-input
            v-if="scope.row.editable && !item.isBtn && !item.isUpload" v-model="scope.row[item.value]" :autofocus="true"
            :placeholder="`${item.text}`" class="input"
          /> -->
          <span v-if="!scope.row.editable" :class="{ link: $route.query.statusName === '全部' && item.text === '设备名称' ? true : false }" @click="deviceDetail(scope.row)"> {{
            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>
          <!-- <span v-if="scope.row.editable && item.isUpload && !item.isBtn" style="display: flex;"> -->
          <!-- <el-input ref="uploadRef" :value="scope.row[item.value]" :placeholder="`${item.text}`" /> -->
          <!-- @focus.once="upload(scope.$index)" -->
          <!-- <show-photo :minio-file-name="scope.row[item.value]" />
            <el-button v-if="!$route.path.includes('detail')" type="primary" @click="upload(scope.$index)">
              {{ scope.row[item.value] ? '更换' : '上传' }}
            </el-button> -->
          <!-- </span> -->
        </template>
      </el-table-column>
      <template v-if="$route.path.includes('detail') && $route.query.statusName === '全部'">
        <el-table-column align="center" label="接收状态">
          <template #default="scope">
            <span :style="{ color: TextColor(scope.row.sampleStatusName) }">
              {{ scope.row.sampleStatusName }}
            </span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="接受状态说明">
          <template #default="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="检定结果">
          <template #default="scope">
            <el-tag
              v-if="['合格', '不合格', '限用'].includes(scope.row.measureCompletePercent)" :type="scope.row.measureCompletePercent === '合格' ? 'success' : scope.row.measureCompletePercent === '不合格' ? 'danger' : scope.row.measureCompletePercent === '限用' ? 'warning' : ''
              "
            >
              {{ scope.row.measureCompletePercent }}
            </el-tag>
            <span v-else :style="{ color: TextColor(scope.row.measureCompletePercent) }">
              {{ scope.row.measureCompletePercent }}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="检定完成时间">
          <template #default="scope">
            {{ scope.row.measureCompleteTime }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="检定说明">
          <template #default="scope">
            {{ scope.row.measureRemark }}
          </template>
        </el-table-column>
      </template>
    </el-table>
  </detail-block-switch>
</template>

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

.el-select {
  width: 100%;
}

.link {
  color: #40aaff;

  &:hover {
    cursor: pointer;
    text-decoration: underline;
  }
}
</style>