<template>
  <div class="card">
    <van-cell-group>
      <van-cell title="工位号" :label="user.opName" :value="user.opNameTxt" center />
      <van-cell>
        <template #title>
          <span class="custom-title">装配状态</span>
        </template>
        <template #value>
          <!-- 如果有进站时间 那就是进行中 反之则是待进站 -->
          <van-tag v-if="engineValue.startPlanTime" type="primary">进行中</van-tag>
          <van-tag v-else type="warning">待进站</van-tag>
        </template>
      </van-cell>
      <van-cell title="制造编号" :value="engineValue.workCode" is-link center />
      <van-cell title="项目名称" :value="engineValue.projectName" center />
      <van-cell title="工件编号" :value="engineValue.EngineID" />
      <van-cell title="产品型号" :value="engineValue.EngineType" center />
      <van-cell title="进站时间" :value="engineValue.startPlanTime" />
    </van-cell-group>

    <!-- 物料验证列表 -->
    <div v-if="materialList.length > 0" class="material-list">
      <van-cell-group title="物料验证列表">
        <van-cell v-for="item in materialList" :key="item.ID" :title="item.物料名称"
          :label="`物料图号：${item.物料图号}\n物料编号：${item.物料编号}`" @click="showDetail(item)">
          <template #value>
            <span v-if="item.校验时间" style="color: #67C23A;">已校验</span>
            <span v-else style="color: #F56C6C;">未校验</span>
          </template>
        </van-cell>
      </van-cell-group>
    </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="ID">{{ detailData.ID }}</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="匹配规则后">{{ 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="备注3">{{ detailData.备注3 }}</el-descriptions-item>
      <el-descriptions-item label="备注4">{{ detailData.备注4 }}</el-descriptions-item>
      <el-descriptions-item label="是否验证">
        <van-tag v-if="detailData.是否验证 === 1" type="success">需验证</van-tag>
        <van-tag v-else type="warning">不验证</van-tag>
      </el-descriptions-item>
      <el-descriptions-item label="物料编号">{{ detailData.物料编号 }}</el-descriptions-item>
      <el-descriptions-item label="校验时间">{{ detailData.校验时间 }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script setup>
import { inject, onMounted, onUnmounted, reactive, ref } from 'vue'
import { useAppStore } from '@/store/app.js'
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'

const router = useRouter()
const store = useAppStore()
const { user, routerData } = storeToRefs(store)
const ExecDatabaseByParam = inject('ExecDatabaseByParam')

// 物料验证列表
const materialList = ref([])

// 物料明细弹窗相关变量
const detailDialogShow = ref(false)
const detailData = reactive({})

const carSectionList = reactive([])
const engineValue = reactive({
  EngineID: '', // 产品编号
  EngineType: '', // 产品型号
  workCode: '', // 制造编号
  projectName: '', // 项目名称
  startPlanTime: '', // 开始时间
})


var timer1 = null;

onMounted(() => {
  getData()
  // 每十秒更新一次
  timer1 = setInterval(() => {
    getData()
  }, 1000 * 10)
})

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

const getData = async () => {
  let response = await ExecDatabaseByParam('11', 'PTCHV_工位Moby_工位查询', [['工位号', store.user.opName]])
  if (response.data.length > 0) {
    const obj = response.data[0]
    engineValue.workCode = obj.制造编号
    engineValue.projectName = obj.项目名称
    engineValue.EngineID = obj.工件编号
    engineValue.EngineType = obj.工件图号
    engineValue.startPlanTime = obj.到达时间
    // 查物料列表
    await getMaterialList(store.user.opName, obj.工件编号)
  } else {
    engineValue.workCode = ''
    engineValue.projectName = ''
    engineValue.EngineID = ''
    engineValue.EngineType = ''
    engineValue.startPlanTime = ''
    materialList.value = []
  }
}

// 查询物料列表
const getMaterialList = async (opName, engineId) => {
  if (!engineId) {
    materialList.value = []
    return
  }
  const res = await ExecDatabaseByParam('11', '电子看板_装配零件_工位查询', [
    ['工位号', opName],
    ['工件编号', engineId]
  ])
  if (res.data && res.data.length > 0) {
    materialList.value = res.data
  } else {
    materialList.value = []
  }
}

// 物料明细弹窗
const showDetail = async (item) => {
  Object.assign(detailData, item)
  detailDialogShow.value = true
}

// 对应el-descriptions中使用的方法
const getTypeText = (type) => {
  // 这里可以根据type值转换为对应的文本
  return type || ''
}
</script>

<style lang="scss" scoped>
.carMainData {
  width: 80vw;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #a8a8a8;
  margin: 10vh auto 30px auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  border-radius: 10px;


  padding: 30px 0;

  .item {
    width: 50%;
    margin: 5px 0;
    display: flex;
    line-height: 32px;

    .title {
      width: 30%;
      text-align: right;
    }
  }
}

.twoLayerMaterial {
  width: 100vw;
  display: flex;
  justify-content: center;
  font-size: 26px;
  line-height: 80px;
  margin: 10vh auto 30px auto;


  .posList {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid #a8a8a8;
    padding: 0 30px;
    background-color: #f6eadb;

    :deep(.el-checkbox.el-checkbox--large) {
      zoom: 200%;
    }
  }
}

.button {
  margin-top: 10vh;
  display: flex;
  justify-content: space-evenly;

  .el-button {
    width: 20vw;
    height: 8vh;
    font-size: 25px;
  }
}

.topOp {
  position: absolute;
  top: 7vh;
  left: 5vw;
  font-size: 2vw;

  .text {
    background-color: #008000;
    margin-left: 20px;
    padding: 0 1vw;
    color: #fff;
  }
}

.material-list {
  margin-top: 18px;
}
</style>