<template>
  <Mask :is-show="isShow" :height="600" :width="800" @close="close" title="采集相同追溯码" :show-footer="true">
    <div class="tips">
      入库单位包装无追溯码时，可重复采集上层包装的追溯码
    </div>
    <div class="content">
    <div class="code">
      <div class="before-code">
        {{ data.code.slice(0, 7) }}
      </div>
      <div class="after-code">
        {{  data.code.slice(7) }}
      </div>
    </div>
    <div class="number">
      <span class="text">
        采集
      </span>
      <el-input-number v-model="data.num" min="1" size="large" ref="inputRef" @keydown.enter="close"></el-input-number>
      <span class="text">
        条
      </span>
    </div>
    </div>
  </Mask>
</template>
<script setup lang="ts">
import Mask from "@/components/common/Mask.vue";
import {nextTick, ref} from "vue";

const data = ref<any>()
const emit = defineEmits(['close'])

const inputRef = ref<any>()

const init = (codeInfo: any) => {
  isShow.value = true
  data.value = codeInfo
  nextTick(()=>{
    inputRef.value?.focus()
    const inputElement = inputRef.value?.$el?.querySelector('input');
    if (inputElement) {
      inputElement.select(); // 选中输入框内容
    }
  })
}
defineExpose({init})
const isShow = ref(false)

const close = () => {
  emit('close')
  isShow.value = false
}
</script>
<style scoped lang="scss">
.tips{

}
.content{
  border: 1px solid #ddd;
  margin: 40px;
  border-radius: 10px;
  .code {
    width: 100%;
    font-weight: 800;
    font-size: 30px;
    color: #333333;
    padding: 40px 0;
    font-style: normal;
    display: flex;
    justify-content: center;
    border-bottom: 1px solid #ddd;
    .before-code {
      color: #999999;
    }

    .after-code {
      margin-left: 10px;
    }
  }
  .number{

    padding: 40px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    .text{
      font-size: 24px;
      line-height: 40px;
      text-align: center;
    }
  }
}

</style>