<template>
  <div class="card">
    <van-steps :active="callActive" active-color="#23d96e">
      <van-step>选择物料</van-step>
      <van-step>AGV送料中</van-step>
      <van-step>物料验证</van-step>
    </van-steps>
    <el-tabs type="border-card" v-model="callActive" style="margin-top: 5vh;">
      <el-tab-pane :disabled="callActive != 0" :name="0" label="选择物料">
        <van-dropdown-menu>
          <van-field v-model="materials" is-link readonly name="picker" label="叫料图号" placeholder="选择物料图号"
            @click="isShowMaterialsPicker = true" />
          <van-popup :show="isShowMaterialsPicker" destroy-on-close position="bottom">
            <van-picker :columns="materialsList" :model-value="carValue" @confirm="materialsOnConfirm"
              @cancel="isShowMaterialsPicker = false" />
          </van-popup>
          <van-field v-model="carPos" is-link readonly name="picker" label="叫料库位" placeholder="选择库位"
            @click="isShowCarPosPicker = true" />
          <van-popup :show="isShowCarPosPicker" destroy-on-close position="bottom">
            <van-picker :columns="carPosList" :model-value="materialsValue" @confirm="carPosOnConfirm"
              @cancel="isShowCarPosPicker = false" />
          </van-popup>
        </van-dropdown-menu>
        <el-button icon="ShoppingCartFull" type="primary" @click="CallMaterials" style="margin-top: 5vh;">请求叫料</el-button>
      </el-tab-pane>
      <el-tab-pane :disabled="callActive != 1" :name="1" label="AGV送料中">
        <van-cell-group>
          <van-cell title="叫料时间" value="2025-03-25 10:00:00" />
          <van-cell title="叫料图号" :value="materials" />
          <van-cell title="叫料库位" :value="carPos" />
        </van-cell-group>
        <el-button icon="FolderChecked" type="primary" @click="handHandle" style="margin-top: 2vh;">已到达，手动确认</el-button>
      </el-tab-pane>
      <el-tab-pane :disabled="callActive != 2" :name="2" label="物料验证">
        <van-cell-group>
          <van-cell title="计划订单" value="TestOrder1" />
          <van-cell title="工件编号" value="DES1235123" />
          <van-cell title="物料型号" value="DES" />
          <van-cell title="叫料时间" value="2025-03-25 10:00:00" />
          <van-cell title="叫料图号" :value="materials" />
          <van-cell title="叫料库位" :value="carPos" />
          <van-field value="物料码值" label="码值" right-icon="scan" :right-icon-size="19" />
        </van-cell-group>
        <el-button icon="FullScreen" type="primary" @click="verifyCode" style="margin-top: 5vh;">校验物料</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'
import { inject, onMounted, onUnmounted, reactive, ref } from 'vue'
// import { showSuccessToast, showFailToast } from 'vant';

const ExecDatabaseByParam = inject('ExecDatabaseByParam')

const callActive = ref(0)

// 缓存库下拉
const carPos = ref()
const carValue = ref()
const isShowCarPosPicker = ref(false)
const carPosList = reactive([
  { text: '缓存库位1', value: '缓存库位1' },
  { text: '缓存库位2', value: '缓存库位2' },
  { text: '缓存库位3', value: '缓存库位3' },
])

// 选择物料下拉
const materials = ref()
const materialsValue = ref()
const isShowMaterialsPicker = ref(false)
const materialsList = reactive([
  { text: 'MaterialsType1', value: 'MaterialsType1' },
  { text: 'MaterialsType2', value: 'MaterialsType2' },
  { text: 'MaterialsType3', value: 'MaterialsType3' },
])


onMounted(() => {
})

const nextTo = () => {
  if (callActive.value == 2) {
    callActive.value = 0
  } else {
    callActive.value++
  }
}

const carPosOnConfirm = (selectedValues, eslectedOptions) => {
  carPos.value = selectedValues?.text;
  isShowCarPosPicker.value = false;
};

const materialsOnConfirm = (selectedValues, eslectedOptions) => {
  materials.value = selectedValues?.text;
  isShowMaterialsPicker.value = false;
  setTimeout(() => {
    if (carPos.value == undefined) {
      carPos.value = carPosList[2].text
    }
  }, 1000);
};

const CallMaterials = () => {
  ElMessage.success('物料呼叫成功！等待送达')
  nextTo()
}

const handHandle = () => {
  ElMessage.success('手动确认到达，请扫码校验物料')
  nextTo()
}
const verifyCode = () => {
  ElMessage.success('物料验证成功！送料结束')
  carPos.value = ''
  materials.value = ''
  nextTo()
}

</script>

<style lang="scss" scoped></style>
