<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="正面" name="front" />
      <el-tab-pane label="反面" name="back" />
    </el-tabs>
    <div id="printMe">
      <div class="card-preview" v-show="showCardType === 0">
        <img src="@/pages/order/images/front.png" />
        <div class="front">
          <!-- <img class="front-bg" src="@/assets/images/card/front.png"> -->
          <div class="front-cname">{{ cardInfo.cname }}</div>
          <div class="front-ename">{{ cardInfo.ename }}</div>
          <img class="front-logo" :src="cardInfo.image" />
        </div>
      </div>
      <div class="card-preview" v-show="showCardType === 1">
        <img src="@/pages/order/images/back.png" />
        <div class="back">
          <div class="nfcimg">
            <qrcode-vue :value="cardInfo.nfcurl" :size="size" level="L" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="action">
    <el-button type="primary" v-print="printObj">製卡</el-button>
    <el-button type="success" @click="handleFinish">完成</el-button>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";

import QrcodeVue from "qrcode.vue";

import { getCardInfo, updateOrder } from "@/api/order";

let getUrlString = location.href;
let url = new URL(getUrlString);
let order_sn = url.searchParams.get("sn");

const showCardType = ref(0);
const activeName = ref("front");

const cardInfo = ref({
  cname: "",
  ename: "",
  images: "",
  user_id: "",
});

const size = ref(100);

onMounted(async () => {
  let res = await getCardInfo(order_sn);
  console.log("res", res);
  if (res.code === 200) {
    cardInfo.value = res.data;
  }
});

const handleClick = () => {
  if (activeName.value === "front") {
    showCardType.value = 1;
  } else {
    showCardType.value = 0;
  }
};

const printObj = ref({
  id: "printMe",
  popTitle: "card print",
  beforeOpenCallback(vue) {
    // vue.printLoading = true;
    console.log("打開之前");
  },
  openCallback(vue) {
    // vue.printLoading = false;
    console.log("執行了打印");
  },
  closeCallback(vue) {
    console.log("關閉了打印工具");
  },
});

const handleFinish = async () => {
  //改變訂單狀態後關閉視窗
  let res = await updateOrder({ order_sn: order_sn, order_status: 3 });
  if (res.code === 200) {
    console.log('window close')
    window.location.href = 'about:blank'
    window.close();
  }
};
</script>

<style lang="less">
ul li {
  list-style-type: none;
}

.nav {
  display: flex;
  .nav-item {
    margin-right: 10px;
    // border: 1px solid #666;
  }
}

.card-preview {
  width: 345px;
  height: 220px;
  // border: 1px solid #000;
  margin: 0px;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .front {
    width: 100%;
    height: 100%;
    position: absolute;
    .front-logo {
      position: absolute;
      width: 100px;
      height: 100px;
      top: 55px;
      left: 20px;
    }

    .front-cname {
      position: absolute;
      top: 70px;
      left: 180px;
      font-size: 20px;
      letter-spacing: 5px;
    }

    .front-ename {
      position: absolute;
      top: 110px;
      left: 180px;
      font-size: 16px;
      letter-spacing: 5px;
    }
  }

  .back {
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    .nfcimg {
      width: 100px;
      height: 100px;
    }
  }
}

@page {
  size: 1022px 652px;
  margin: 0px;
}

@media print {
  #printMe {
    -webkit-print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .card-preview {
    width: 1021px;
    height: 651px;
    // border: 1px solid #000;
    margin: 0px;
    position: relative;
    img {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }
    .front {
      width: 100%;
      height: 100%;
      position: absolute;
      .front-logo {
        position: absolute;
        width: 300px;
        height: 300px;
        top: 150px;
        left: 80px;
      }

      .front-cname {
        position: absolute;
        top: 190px;
        left: 550px;
        font-size: 80px;
        letter-spacing: 5px;
      }

      .front-ename {
        position: absolute;
        top: 320px;
        left: 559px;
        font-size: 60px;
        letter-spacing: 5px;
      }
    }

    .back {
      width: 100%;
      height: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      .nfcimg {
        width: 100px;
        height: 100px;
      }
    }
  }
}

.action {
  margin-top: 10px;
}
</style>
