<template>
  <div class="theContainer bg-white text-left">
    <div class="top-blur"></div>
    <div class="top">
      <div class="title">影视区块链版权电子数据确权书</div>
      <div class="img-theContainer" style="position: relative">
        <img class="img" src="/img/cover.png" alt="图片" />
        <img
          src="./mark.png"
          style="position: absolute; right: -40px; bottom: -10px; width: 70px"
          alt=""
        />
      </div>
      <div class="box">
        <div>
          <div>
            <div class="box-font-title">NFT哈希</div>
            <div class="box-font-content">{{ nftHash }}</div>
          </div>
          <div>
            <div class="box-font-title">剧本哈希</div>
            <div class="box-font-content">{{ hash }}</div>
          </div>
        </div>
        <div style="flex-grow: 1"></div>
        <div class="qr-theContainer">
          <div class="qr-box">
            <img
              src="${qrCode}"
              style="width: 100%; height: 100%"
              alt="二维码"
            />
          </div>
          <div class="qr-font">存证二维码</div>
        </div>
      </div>
      <div class="shadow_"></div>
    </div>
    <div class="bottom overflow-hidden px-4">
      <table class="table_ overflow-hidden table-auto w-full">
        <thead>
          <tr>
            <th class="w-1/4"></th>
            <th class="w-3/4"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>剧本名称</td>
            <td class="row-value">{{ name }}</td>
          </tr>
          <tr>
            <td>发行人地址</td>
            <td class="row-value">{{ wallet }}</td>
          </tr>
          <tr>
            <td>发行人</td>
            <td class="row-value">{{ publisher }}</td>
          </tr>
          <tr>
            <td>存证时间</td>
            <td class="row-value">{{ publishTimer }}</td>
          </tr>
          <tr>
            <td>剧本审核</td>
            <td class="row-value">
              <div class="approve-outer">
                <div class="approve-inner">{{ approveStatus1 }}</div>
              </div>
            </td>
          </tr>
          <tr>
            <td>版权证明</td>
            <td class="row-value">
              <div class="approve-outer">
                <div class="approve-inner">{{ approveStatus2 }}</div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  props: {
    nftHash: {
      type: String,
      default: "0x111",
    },
    hash: {
      type: String,
      default: "0x111",
    },
    name: {
      type: String,
      default: "0x111",
    },
    wallet: {
      type: String,
      default: "0x111",
    },
    publisher: {
      type: String,
      default: "0x111",
    },
    publishTimer: {
      type: String,
      default: "0x111",
    },
    approveStatus1: {
      type: String,
      default: "0x111",
    },
    approveStatus2: {
      type: String,
      default: "0x111",
    },
  },
});
</script>

<style>
.theContainer {
  position: relative;
  height: calc(240px + 269px);
  padding: 0 10px;
  background: rgb(168, 167, 167);
  overflow: hidden;
}

.theContainer .top-blur {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 246px;
  background-image: url(/img/cover.png);
  background-size: cover;
  filter: blur(20px);
  -webkit-filter: blur(20px);
}

.theContainer .top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 246px;
  z-index: 2;
}

.theContainer .top .title {
  margin-top: 34px;
  margin-bottom: 17px;
  text-align: center;
  font-size: 16px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #edf1f7;
  line-height: 22px;
}

.theContainer .top .img-theContainer {
  z-index: 2;
  position: relative;
  margin: 0 auto;
  margin-bottom: 16px;
  width: 86px;
  height: 119px;
  background-color: #a7b5b9;
  border-radius: 2px;
  opacity: 0.6;
}

.img-theContainer .img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 79px;
  height: 111px;
}

.theContainer .box {
  position: relative;
  z-index: 20;
  background: #ffffff;
  border-radius: 5px;
  margin: 0 10px;
  display: flex;
  white-space: normal;
  padding: 10px 15px;
}

.theContainer .shadow_ {
  position: relative;
  z-index: 0;
  width: 100%;
  background-image: url(./shadow.png);
  background-position: center;
  height: 43px;
  background-repeat: no-repeat;
  margin-top: -21px;
}

.box-font-title {
  font-size: 8px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1d2649;
  margin-bottom: 3px;
}

.box-font-content {
  font-size: 8px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1d2649;
  margin-bottom: 4px;
  word-break: break-all;
}

.box-font-content:last-of-type {
  margin-bottom: 0;
}

.qr-theContainer {
  position: relative;
  margin-left: 20px;
  text-align: center;
  align-self: center;
}

.qr-font {
  font-size: 8px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1d2649;
  word-break: keep-all;
}

.qr-box {
  width: 40px;
  height: 40px;
  background-color: gray;
  margin: 0 auto;
  margin-bottom: 4px;
}

.theContainer .bottom {
  position: absolute;
  top: 246px;
  bottom: 0;
  left: 0;
  right: 0;
  background-image: url(./bg.png);
  z-index: 1;
}

.bottom .table_ {
  margin-top: 77px;
  padding-left: 38px;
  padding-right: 38px;
  table-layout: fixed;

  font-size: 10px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #1d2649;
  line-height: 20px;
}

.table_ .row-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.approve-outer {
  border: 1px solid #ef797e;
  border-radius: 3px;
  height: 25px;
  width: fit-content;
}

.approve-inner {
  border: 1px solid #ee0000;
  border-radius: 3px;
  margin: 1px;
  color: #ef797e;
  text-align: center;
  padding: 0 3px;
}

.table_ tr,
td {
  width: auto;
}
</style>