<template>
  <div class="card">
    <el-button style="position: fixed;bottom: 10px;right: 10px;z-index: 9999999;" type="primary" size="large" @click="onScanClick">扫描产品码</el-button>
    <el-form inline style="margin-bottom: -20px;">
      <el-form-item label="产品编号">
        <el-input v-model="searchCode" placeholder="请输入产品编号" clearable style="width: 100%" @input="fetchList" />
      </el-form-item>
    </el-form>
    <div class="dataList fixed-list">
      <div class="item" v-for="item in recordList" :key="item.ID" @click="onItemClick(item)" style="position: relative;">
        <van-tag
          :type="item.离开时间 ? 'success' : 'warning'"
          size="small"
          style="position: absolute; right: 10px; top: 10px; z-index: 2;"
        >
          {{ item.到达时间 && item.离开时间 ? '已完成' : '未离站' }}
        </van-tag>
        <div class="tItem">
          <div class="name">产品编号:</div>
          <div class="value">{{ item.工件编号 }}</div>
        </div>
        <div class="tItem">
          <div class="name">到达时间:</div>
          <div class="value">{{ item.到达时间 }}</div>
        </div>
        <div class="tItem">
          <div class="name">离开时间:</div>
          <div class="value">{{ item.离开时间 }}</div>
        </div>
      </div>
    </div>
    <el-dialog v-model="detailDialogShow" title="详细信息" width="90vw" :close-on-click-modal="true" class="mobile-dialog">
      <el-descriptions :column="1" border class="mobile-desc">
        <el-descriptions-item label="工位号">{{ detailData.工位号 }}</el-descriptions-item>
        <el-descriptions-item label="制造编号">{{ detailData.制造编号 }}</el-descriptions-item>
        <el-descriptions-item label="项目名称">{{ detailData.项目名称 }}</el-descriptions-item>
        <el-descriptions-item label="工件编号">{{ detailData.工件编号 }}</el-descriptions-item>
        <el-descriptions-item label="工件图号">{{ detailData.工件图号 }}</el-descriptions-item>
        <el-descriptions-item label="产品名称">{{ detailData.产品名称 }}</el-descriptions-item>
        <el-descriptions-item label="操作者1">{{ detailData.操作者1 }}</el-descriptions-item>
        <el-descriptions-item label="操作者2">{{ detailData.操作者2 }}</el-descriptions-item>
        <el-descriptions-item label="到达时间">{{ detailData.到达时间 }}</el-descriptions-item>
        <el-descriptions-item label="离开时间">{{ detailData.离开时间 }}</el-descriptions-item>
        <el-descriptions-item label="在线时间">{{ detailData.在线时间 }}</el-descriptions-item>
        <el-descriptions-item label="是否合格">{{ detailData.是否合格 == 1 ? '是' : '否' }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
    <el-dialog v-model="scanDialogShow" title="扫描产品码" width="320px" :close-on-click-modal="false">
      <el-input v-model="scanCode" placeholder="请输入产品码" clearable autofocus @keyup.enter.native="onScanConfirm" @input="onSearchCodeInput" />
      <template #footer>
        <el-button @click="scanDialogShow = false">取消</el-button>
        <el-button type="primary" @click="onScanConfirm">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { inject, onMounted, onUnmounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useAppStore } from '@/store/app.js'
import { storeToRefs } from 'pinia'
const store = useAppStore()
const { user } = storeToRefs(store)


const ExecDatabaseByParam = inject('ExecDatabaseByParam')
const recordList = ref([])
const detailDialogShow = ref(false)
const detailData = ref({})
const searchCode = ref('')
const scanDialogShow = ref(false)
const scanCode = ref('')

const fetchList = async () => {
  searchCode.value = onMaterialInput(searchCode.value)

  const res = await ExecDatabaseByParam('11', '测量数据发动机在线状态_PDA_查询', [["工位号", user.value.opName], ["产品编号", searchCode.value]])
  if (res.data) {
    recordList.value = res.data
  } else {
    ElMessage.error('查询失败')
  }
}

onMounted(async () => {
  fetchList()
})

const onItemClick = (item) => {
  detailData.value = item
  detailDialogShow.value = true
}

const onScanClick = () => {
  scanCode.value = ''
  scanDialogShow.value = true
}

const onScanConfirm = async () => {
  if (!scanCode.value) {
    ElMessage.warning('请输入产品码')
    return
  }
  // 进离站前检查
  const checkRes = await ExecDatabaseByParam('11', 'PDA_产品进离站_前检查', [["工位号", user.value.opName], ["工件编号", scanCode.value]])
  if (checkRes.data && checkRes.data.length > 0) {
    const check = checkRes.data[0]
    if (check.result == 1) {
      // 校验通过，二次确认
      ElMessageBox.confirm(check.msg, '确认操作', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })
        .then(async () => {
          // 调用进离站
          const res = await ExecDatabaseByParam('12', 'PDA_产品进离站', [["工位号", user.value.opName], ["工件编号", scanCode.value], ["type", check.type]])
          if (res.data && res.data.length > 0 && res.data[0].result == 1) {
            ElMessage.success(res.data[0].msg || '操作成功')
            scanDialogShow.value = false
            fetchList()
          } else {
            ElMessage.error(res.data && res.data[0] && res.data[0].msg ? res.data[0].msg : '操作失败')
          }
        })
        .catch(() => { })
    } else if (check.result == 2) {
      ElMessage.error(check.msg)
    } else {
      ElMessage.error(check.msg || '校验失败')
    }
  } else {
    ElMessage.error('校验失败')
  }
}

// 离开网页 删除定时器
onUnmounted(() => {
})

const getTypeText = (type) => {
  if (type === 2 || type === '2') return '退空托盘'
  return '修改信息'
}
const getTypeTag = (type) => {
  if (type === 2 || type === '2') return 'warning'
  return 'success'
}

// 处理扫码输入，自动提取&前的物料编号
const onMaterialInput = (barCode) => {
  if (typeof barCode === 'string' && barCode.includes('&')) {
    const [EngineNo] = barCode.split('&')
    return EngineNo
  }
  return barCode
}

const onSearchCodeInput = () => {
  // scanCode.value = onMaterialInput(scanCode.value)
}
</script>

<style lang="scss" scoped>
.dataList {
  .item {
    border: 2px solid #ccc;
    padding: 10px 10px;
    // 圆角 阴影
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    margin: 10px 0;

    .tItem {
      display: flex;
    }
  }
}

.mobile-dialog {
  max-width: 98vw;
}

.mobile-desc {
  word-break: break-all;
  font-size: 15px;

  .el-descriptions__cell {
    padding: 6px 4px;
  }
}

.fixed-list {
  overflow-y: auto;
}
</style>
