<template>
  <div>
    <ElDialog
      v-model="visible"
      title="质检包装"
      fullscreen
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      style="top: 60px"
      center
      modal-class="pod-make-order-dialog"
    >
      <div class="detail-div">
        <div class="left">
          <div class="left-images">
            <div
              class="imagBox"
              v-for="(item, index) in detail?.imgList"
              :key="index"
            >
              <div
                v-show="item?.title && item?.url"
                style="font-size: 30px; font-weight: 700; text-align: center"
              >
                {{ item?.title }}
              </div>
              <img :src="item.url" alt="" />
            </div>
          </div>
          <div class="tips">
            <div>第一次扫码:就绪</div>
            <div>第二次扫码:完成</div>
            <div>
              单子为就绪状态，如果下一个单子状态为完成，则从就绪变为错误
            </div>
          </div>
        </div>
        <div class="right">
          <div class="input">
            <el-input
              ref="trackingNumberRef"
              v-model="TrackingNumber"
              :placeholder="placeholderText"
              style="margin-right: 10px"
              clearable
              @keydown.enter="trackCodeInput()"
            ></el-input>
            <el-button type="primary" @click="trackCodeInput()">
              查询
            </el-button>
          </div>
          <div class="printerContent">
            <div class="qr">
              二维码：<span style="color: #ff0000">{{ 111 }}</span>
            </div>
            <el-form style="display: flex; gap: 10px">
              <el-form-item label="打印机:" style="flex: 1">
                <ElSelect
                  v-model="sheetPrinter"
                  placeholder="请选择打印机"
                  @change="handlePrinterChange"
                >
                  <ElOption
                    v-for="item in printDeviceList"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </ElSelect>
              </el-form-item>
              <el-form-item label="标签尺寸:" style="flex: 1">
                <ElSelect
                  v-model="sheetPrinter"
                  placeholder="请选择标签尺寸"
                  @change="handlePrinterChange"
                >
                  <ElOption
                    v-for="item in printDeviceList"
                    :key="item"
                    :label="item"
                    :value="item"
                  />
                </ElSelect>
              </el-form-item>
            </el-form>
            <div class="canvas-container">
              <canvas id="canvas" ref="canvas"></canvas>
            </div>
          </div>
          <div class="printQueue">
            <div style="font-size: 18px; font-weight: 700; margin-bottom: 10px">
              打印队列
            </div>
            <ul>
              <li
                v-for="value in 10"
                :key="value"
                :style="{
                  color:
                    value == 1 ? `#006000` : value == 2 ? `#ff0000` : '#000',
                }"
              >
                value
              </li>
            </ul>
          </div>
        </div>
      </div></ElDialog
    >
  </div>
</template>

<script setup lang="ts">
import QRCode from 'qrcode'
const visible = ref(false)
const TrackingNumber = ref('')
const placeholderText = ref('扫描枪输入生产单号')
const sheetPrinter = ref('')
const printDeviceList = ref([])
const trackingNumberRef = ref()

const detail = ref({
  imgList: [
    {
      title: 'A',
      id: '',
      url: 'https://pic3.zhimg.com/v2-e52354ffdbd94a8e0a7649eacd34a788_r.jpg?source=1940ef5c',
    },
    {
      title: 'b',
      id: '',
      url: 'https://bpic.588ku.com/element_origin_min_pic/23/07/11/d32dabe266d10da8b21bd640a2e9b611.jpg!r650',
    },
  ],
})

function trackCodeInput() {
  QRCode.toCanvas(document.getElementById('canvas'), '11', function (error) {
    if (error) console.error(error)
    console.log('QR code generated!')
  })
}
function handlePrinterChange() {}
function open() {
  visible.value = true
}
defineExpose({ open })
</script>

<style scoped lang="scss">
.detail-div {
  display: flex;
  height: 100%;
  gap: 20px;
  justify-content: space-between;
  .left {
    flex: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    .left-images {
      flex: 1;
      display: flex;
      height: 100%;
      gap: 10px;

      .imagBox {
        width: 50%;
      }
    }
    .tips {
      font-size: 25px;
      color: #afafaf;
    }
  }
  .right {
    flex: 3;
    gap: 20px;
    flex-direction: column;
    display: flex;
    .input {
      display: flex;
    }
    .printerContent {
      flex: 6;
      border: 1px solid #dcdfe6;
      padding: 10px;
      padding-bottom: 0;
      .qr {
        margin-bottom: 10px;
      }
    }
    .printQueue {
      flex: 5;
      border: 1px solid #dcdfe6;
      padding: 10px;
    }
  }
}
:deep() {
  .el-dialog {
    .el-dialog__header {
      .el-dialog__title {
        font-size: 30px !important;
        font-weight: 700 !important;
      }
    }
  }
}
.el-form-item {
  margin-bottom: 0;
}
.canvas-container {
  position: relative;
  width: 100%;
  height: calc(100% - 61px); /* 1:1 宽高比 */
}

#canvas {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto !important;
  height: 100% !important;
}
</style>
