<template>
  <Mask :is-show="isShow" :height="321" :width="818" @close="close" title="采集相同追溯码">
    <div class="content">
      <div class="top">
        <div class="tip">
          入库单位包装无追溯码时，可重复采集上层包装的追溯码
        </div>
        <div class="code">
            <span class="before-code">
              {{ data.code.slice(0, 7) }}
            </span>
          <span class="after-code">
              {{ data.code.slice(7) }}
            </span>
        </div>
      </div>
      <div class="body">
        <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', 'save'])

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
}
const save = () => {
  emit('save', data.value)
  isShow.value = false
}
</script>
<style scoped lang="scss">
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .top {
    width: 100%;
    height: 126px;
    background: #F9FAFC;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 500;
    font-size: 20px;
    color: #666666;
    font-style: normal;
    padding: 24px;

    .code {
      width: 100%;
      display: flex;
      justify-content: center;
      font-weight: 800;
      font-size: 30px;
      color: #999999;
      font-style: normal;

      .after-code {
        color: #333;
        margin-left: 10px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }

  .body {
    flex: 1;
    min-height: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    .text {
      margin: 0 16px;
    }
  }
}

.footer {
  height: 100%;
  padding: 24px;
  display: flex;
  justify-content: flex-end;
  align-items: center;

  .default-btn, .btn {
    width: 60px;
    height: 32px;
    line-height: 32px;
    margin-left: 10px;
    font-size: 14px;
  }
}
</style>