
<template>
  <div class="incremental-box">
    <!-- 表头部分 -->
    <ul class="list-title">
      <li class="list-number">序号</li>
      <li class="list-name">存证名称</li>
      <li class="list-time">操作日期</li>
      <li class="list-chain">上链</li>
      <li class="list-qrcode">二维码</li>
      <li class="list-search">区块链查询</li>
      <li class="list-set">操作</li>
    </ul>
    <!-- 表体 -->
    <ul class="list-content" v-for="(item, index) in getInfoList" :key="index">
      <li>
        <div class="content-placeholder">
          <div
            :class="{
              'table-td-index--an': true,
              'table-td-index--rotating': expandTheListIndex === index,
            }"
            v-if="item.increment_num > 0"
            @click="expandTheList(item, index)"
          >
            <i class="iconfont iconxiangxia"></i>
          </div>
        </div>
        <span class="content-number">{{ serialNumber(index) }}</span>
      </li>
      <li class="content-name" @click="showProduct(item)">{{ item.name }}</li>
      <li class="content-time">{{ item.update_time | formatTime }}</li>
      <li class="content-chain">
        <div class="content-the-above-link" v-if="item.status === 2">
          已上链
        </div>
        <div
          class="content-on-the-chain"
          v-if="item.status === 0"
          @click="$emit('upload', item)"
        >
          点击上链
        </div>
        <div v-if="item.status === 1" class="content-status-ing">上链中</div>
        <div
          v-if="item.status === 3"
          class="content-status--fail"
          @click="$emit('upload', item)"
        >
          上链失败
        </div>
      </li>
      <li class="content-qrcode">
        <div class="content-code-box">
          <div class="icon-box">
            <i
              @click.stop="openQRcode(item, index)"
              class="iconfont iconerweima1"
              :class="[
                item.status === 2
                  ? 'iconerweima--check'
                  : 'iconerweima--no-check',
              ]"
            ></i>
            <div class="show-box" v-if="checkQR === index" @mousedown.stop>
              <div class="imgbox" v-if="item.hash">
                <img :src="QRcode" />
              </div>
              <div class="imgbox" v-else>
                <img
                  src="https://f10.baidu.com/it/u=557133877,2120362237&fm=72"
                />
              </div>
              <p @click="QRdownload(item)">下载二维码</p>
              <p class="copy-address" @click="CopyAddress(item)">复制地址</p>
            </div>
          </div>
        </div>
      </li>
      <li class="content-search">
        <div class="block">
          <div class="icon-box">
            <i
              @click.stop="openBlock(item, index)"
              class="iconfont iconfangdajing1"
              :class="[
                item.status === 2
                  ? 'iconerweima--check'
                  : 'iconerweima--no-check',
              ]"
            ></i>
            <!-- 浮动弹框 -->
            <ul
              class="set-menu block-ul"
              v-if="checkBlock === index"
              @mousedown.stop
            >
              <li @click="handleChain(item)">查看区块链</li>
              <li @click="CopyAddress(item)">复制存证地址</li>
            </ul>
          </div>
        </div>
      </li>
      <li class="content-set">
        <div class="set-btn_wrapper">
          <i
            @click.stop="openSet(item, index)"
            class="iconfont icongengduocaozuo"
          ></i>
          <ul class="set-menu" v-if="checkSet === index" @mousedown.stop>
            <!-- <li
              v-if="item.status === 2"
              @click="
                $emit('increment', item);
                checkSet = -1;
              "
            >
              增量
            </li> -->
            <li
              @click="
                $emit('delete-goods', item);
                checkSet = -1;
              "
            >
              删除
            </li>
          </ul>
        </div>
      </li>
      <!-- 增量数据列表 -->
      <div style="width: 100%" v-show="expandTheListIndex === index">
        <ul
          class="incremental-list"
          v-for="(item2, index2) in item.incrementList"
          :key="index2"
        >
          <li class="incremental-icon">
            <i
              class="iconfont"
              :class="[
                item2.status === 2 ? 'iconxingzhuang2' : 'iconweixuanze',
              ]"
            ></i>
          </li>
          <li class="incremental-name" @click="enterDetails(item2, item)">
            {{ item2.name }}
          </li>
          <li class="incremental-time">{{ item2.update_time | formatTime }}</li>
          <li class="incremental-state">
            <span v-if="item2.status === 2" class="state-ban">已上链</span>
            <span
              v-if="item2.status === 0"
              class="state-start"
              @click="$emit('incremental-chain', item2, item)"
              >点击上链</span
            >
            <span v-if="item2.status === 1" class="state-ing">上链中</span>
            <span v-if="item2.status === 3" class="state-fail">上链失败</span>
          </li>
          <li class="center-placeholder--one"></li>
          <li class="center-placeholder--two"></li>
          <li class="incremental-operation">
            <div class="btn-box">
              <span
                @click="$emit('delete-incremental', item2)"
                :class="{
                  'span-ban': item2.status === 1 || item2.status === 2,
                }"
                >删除</span
              >
              <span class="span-ban">复制</span>
            </div>
          </li>
        </ul>
      </div>
    </ul>
  </div>
</template>

<script>
import { downloadQrCode, getQR, openChainBrowser } from "@/utils/app/common";
export default {
  data() {
    return {
      checkQR: -1, // 二维码弹窗
      checkBlock: -1,
      checkSet: -1,
      expandTheListIndex: -1,
      QRcode: "", // 二维码路劲
    };
  },
  watch: {
    getInfoList: function (newv, oldv) {
      this.expandTheListIndex = -1;
    },
  },
  computed: {
    //   获取存证信息列表
    getInfoList: function () {
      return this.$store.state.listOfInformation;
    },
    // 获取当前页码
    getPage: function () {
      return this.$store.state.page;
    },
    // 序号
    serialNumber: function (index) {
      return function (index) {
        return (this.getPage - 1) * 10 + (index + 1);
      };
    },
  },
  created() {},
  methods: {
    // 进入详情页
    enterDetails(item2, item) {
      if (item2.status === 1) return false;
      this.$router.push({
        path: "/editTemplate",
        query: {
          personalTemplateId: item.id, //父级id
          personalTemplateName: item.name, // 父级name
          childId: item2.id, // 当前存证id
        },
      });
    },
    // 展开增量数据列表
    expandTheList(item, index) {
      this.$emit("expandTheList", item, index);
      setTimeout(() => {
        this.expandTheListIndex = index;
      }, 300);
    },
    // 打开区块链浏览器
    handleChain(item) {
      openChainBrowser(item.hash);
    },
    // 复制二维码
    CopyAddress(item) {
      var input = document.createElement("input"); // 直接构建input
      input.value = item.hash; // 设置内容
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      let issafariBrowser =
        /Safari/.test(navigator.userAgent) &&
        !/Chrome/.test(navigator.userAgent);
      if (issafariBrowser) {
        //safari浏览器单独处理
        input.setSelectionRange(0, 9999);
      }
      document.execCommand("Copy"); // 执行复制
      document.body.removeChild(input);
      this.$message({
        message: "复制成功，请右键粘贴使用",
        type: "success",
      });
    },
    // 二维码下载
    QRdownload(item) {
      downloadQrCode(item.hash);
    },
    // 隐藏条件选中
    onHindMenu() {
      this.checkQR = -1;
      this.checkBlock = -1;
      this.checkSet = -1;
      this.QRcode = "";
      document.removeEventListener("mousedown", this.onHindMenu);
    },
    // 进入详情页
    showProduct(item) {
      if (item.status === 1 || item.status === 3) return false;
      this.$router.push({
        path: "/editTemplate",
        query: {
          personalTemplateId: item.id,
        },
      });
    },
    openSet(item, index) {
      if (item.status === 1) return false;
      this.checkSet = index;
      document.addEventListener("mousedown", this.onHindMenu);
    },
    // 区块链查询弹窗
    openBlock(item, index) {
      if (item.status != 2) return;
      this.checkBlock = index;
      document.addEventListener("mousedown", this.onHindMenu);
    },
    //   控制二维码显示
    async openQRcode(item, index) {
      if (item.status != 2) return;
      this.checkQR = index;
      this.QRcode = await getQR(item.hash);
      document.addEventListener("mousedown", this.onHindMenu);
    },
  },
};
</script>

<style lang="less" scoped>
.incremental-box {
  padding: 14px 12px 0 12px;
  min-width: 1024px;
}
// 表头
.list-title {
  list-style: none;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  li {
    height: 17px;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    color: rgba(155, 155, 155, 1);
    line-height: 17px;
    padding: 5px 0;
    // border: 1px solid skyblue;
  }
  .list-name {
    width: 176px;
  }
  .list-time {
    width: 156px;
    text-align: center;
  }
  .list-number {
    width: 62px;
    text-align: right;
  }
  .list-chain {
    width: 80px;
    text-align: center;
  }
  .list-qrcode {
    width: 80px;
    text-align: center;
  }
  .list-search {
    width: 66px;
    text-align: center;
  }
  .list-set {
    width: 40px;
    text-align: left;
  }
}
// 内容部分
.list-content {
  list-style: none;
  display: flex;
  justify-content: space-between;
  background: white;
  margin-top: 3px;
  flex-wrap: wrap;
  li {
    line-height: 50px;
    // border: 1px solid skyblue;
  }
  .content-on-the-chain {
    width: 70px;
    height: 25px;
    line-height: 25px;
    background: rgba(236, 243, 252, 1);
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    cursor: pointer;
    color: rgba(63, 121, 254, 1);
    margin: 0 auto;
    margin-top: 14px;
  }
  .content-status-ing {
    width: 70px;
    height: 25px;
    line-height: 25px;
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    cursor: no-drop;
    margin: 0 auto;
    margin-top: 14px;
    color: #ffad0a;
    background: rgba(255, 173, 10, 0.1);
  }
  .content-status--fail {
    width: 70px;
    height: 25px;
    line-height: 25px;
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    cursor: pointer;
    margin: 0 auto;
    margin-top: 14px;
    color: #f12f2f;
    background: rgba(241, 47, 47, 0.1);
  }
  //   已上链
  .content-the-above-link {
    width: 70px;
    height: 25px;
    line-height: 25px;
    background: rgba(242, 242, 242, 1);
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    cursor: no-drop;
    color: #c4c4c4;
    margin: 0 auto;
    margin-top: 14px;
  }
  .content-name {
    width: 176px;
    cursor: pointer;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    color: rgba(53, 53, 53, 1);
    overflow: hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space: nowrap; //溢出不换行
    text-align: left;
  }
  .content-placeholder {
    float: left;
    width: 20px;
    height: 20px;
    padding-left: 16px;
  }
  .content-qrcode {
    width: 80px;
    text-align: center;
  }
  .content-time {
    width: 156px;
    text-align: center;
  }
  .table-td-index--an {
    color: #e8e8e8;
    cursor: pointer;
    transform: rotate(-90deg);
    transition: transform 0.3s ease-in-out;
    i {
      font-size: 12px;
    }
  }
  .table-td-index--rotating {
    transform: rotate(0deg);
  }
  .content-number {
    padding-left: 18px;
  }
  .content-code-box {
    text-align: center;
    .show-box {
      position: absolute;
      width: 135px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.13);
      overflow: hidden;
      font-size: 12px;
      font-family: PingFangSC-Regular;
      color: rgba(155, 155, 155, 1);
      line-height: 17px;
      p {
        padding: 0;
        margin: 0;
        cursor: pointer;
      }
      .copy-address {
        padding-top: 6px;
        padding-bottom: 12px;
      }
      .imgbox {
        margin-left: 15px;
        margin-top: 12px;
        margin-bottom: 6px;
        width: 106px;
        height: 106px;
        padding: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .set-menu {
    z-index: 1;
    position: absolute;
    top: 46px;
    right: 2px;
    margin: 0;
    list-style: none;
    padding: 0;
    width: 148px;
    border-radius: 2px;
    border: 1px solid #e7e7e7;
    background: #fff;
    line-height: 40px;
    font-size: 14px;
    text-align: left;
    & > li {
      cursor: pointer;
      padding-left: 31px;
      &:hover {
        background: rgba(245, 246, 250, 1);
      }
    }
  }
  .content-chain {
    width: 80px;
    text-align: left;
  }
  .content-search {
    width: 66px;
    text-align: center;
    .block {
      position: relative;
    }
  }
  .content-set {
    text-align: center;
    width: 40px;
  }
  .set-btn_wrapper {
    position: relative;
    cursor: pointer;
    padding-right: 10px;
  }
}
.iconerweima--check {
  color: #4a90e2;
  cursor: pointer;
}
.iconerweima--no-check {
  cursor: no-drop;
  color: #b6b5ba;
}
.center-placeholder--two {
  width: 64px;
}
.center-placeholder--one {
  width: 78px;
}
// 增量列表
.incremental-list {
  list-style: none;
  width: 100%;
  margin-top: 5px;
  display: flex;
  background: rgba(250, 250, 251, 1);
  justify-content: space-between;
  &:last-child {
    margin-bottom: 14px;
  }
  li {
    line-height: 30px;
    height: 30px;
    // overflow: hidden;
  }
  .incremental-icon {
    height: 30px;
    background: white;
    // width: 123px;
    padding-left: 50px;
    color: #3f79fe;
    i {
      font-size: 12px;
    }
  }
  .incremental-name {
    width: 176px;
    cursor: pointer;
  }
  .incremental-state {
    width: 80px;
    span {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: rgba(196, 196, 196, 1);
      width: 100%;
      display: inline-block;
      text-align: center;
    }
    .state-start {
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      color: rgba(63, 121, 254, 1);
      cursor: pointer;
    }
    .state-ban {
      cursor: no-drop;
    }
    .state-ing {
      cursor: no-drop;
      color: #ffad0a;
    }
    .state-fail {
      color: #f12f2f;
      cursor: pointer;
    }
  }
  .incremental-operation {
    background: white;
    width: 42px;
    position: relative;
    .btn-box {
      position: absolute;
      top: 0;
      right: 22px;
      width: 123px;
      background: #fafafb;
      // border: 1px solid #000;
      span {
        color: #3f79fe;
        padding-right: 10%;
        float: right;
        cursor: pointer;
      }
      .span-ban {
        color: rgba(250, 250, 251, 1);
      }
    }
  }
  .incremental-time {
    color: #b6b5ba;
    width: 156px;
    text-align: center;
  }
}
</style>