
<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-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, index)">{{ 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>
        <div v-if="item.status === 4" class="content-the-above-link">隐藏中</div>
        <div v-if="item.status === 5" class="content-the-above-link">已隐藏</div>
        <div
          v-if="item.status === 6"
          class="content-status--fail"
          @click="$emit('privacy-settings', item)"
        >隐藏失败</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 || item.status === 6"
              @click="
                $emit('privacy-settings', item);
                checkSet = -1;
              "
            >隐私设置</li>
            <li v-if="item.status === 2" @click="increment(item, index)">增量更新</li>
            <li
              @click="
                $emit('create-copy', item);
                checkSet = -1;
              "
            >创建副本</li>
            <li
              @click="
                $emit('delete-goods', item);
                checkSet = -1;
              "
            >删除</li>
          </ul>
        </div>
      </li>
      <!-- 增量数据列表 -->
      <div
        style="width: 100%; overflow-y: auto; max-height: 250px"
        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, index)">{{ 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>
            <span v-if="item2.status === 5" class="state-ing">已隐藏</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";
import { GO_URLS } from "@/config/URLS";
export default {
  data() {
    return {
      checkBlock: -1,
      checkSet: -1,
      expandTheListIndex: -1,
    };
  },
  watch: {
    getInfoList: function(newv, oldv) {
      this.expandTheListIndex = -1;
      if (this.$store.state.theAnchor != -1) {
        this.expandTheList(
          newv[this.$store.state.theAnchor],
          this.$store.state.theAnchor
        );
      }
    }
  },
  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);
      };
    }
  },
  methods: {
    increment(item, index) {
      this.$store.commit("setTheAnchor", index);
      this.$emit("increment", item);
      this.checkSet = -1;
    },
    // 进入详情页
    enterDetails(item2, item, index) {
      if (item2.status === 1) return false;
      this.$store.commit("setTheAnchor", index);
      this.$router.push({
        path: "/editTemplate",
        query: {
          personalTemplateId: item.id, //父级id
          personalTemplateName: item.name, // 父级name
          childId: item2.id // 当前存证id
        }
      });
    },
    // 展开增量数据列表
    async expandTheList(item, index) {
      if (this.expandTheListIndex === index) {
        this.expandTheListIndex = -1;
        return false;
      }
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.incrementList,
        params: {
          base_hash: item.hash,
          page: 1,
          page_size: 10
        }
      });
      if (res) {
        let list = res.data.results;
        this.$store.commit("setIncrementList", { list, index });
        this.expandTheListIndex = index;
      }
    },
    // 打开区块链浏览器
    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"
      });
    },
    // 隐藏条件选中
    onHindMenu() {
      this.checkBlock = -1;
      this.checkSet = -1;
      document.removeEventListener("mousedown", this.onHindMenu);
    },
    // 进入详情页
    showProduct(item, index) {
      if (item.status === 1 || item.status === 3) return false;
      if (item.increment_num > 0) {
        this.$store.commit("setTheAnchor", index);
      } else {
        this.$store.commit("setTheAnchor", -1);
      }
      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);
    },
  }
};
</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;
    color: rgba(155, 155, 155, 1);
    line-height: 17px;
    padding: 5px 0;
  }
  .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-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;
  }
  .content-on-the-chain {
    width: 70px;
    height: 25px;
    line-height: 25px;
    background: #e3fff8;
    border-radius: 4px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    color: #0cc399;
    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;
    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;
    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;
    cursor: no-drop;
    color: #c4c4c4;
    margin: 0 auto;
    margin-top: 14px;
  }
  .content-name {
    width: 176px;
    cursor: pointer;
    font-size: 14px;
    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-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;
  }
  .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: #0cc399;
  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;
      color: rgba(196, 196, 196, 1);
      width: 100%;
      display: inline-block;
      text-align: center;
    }
    .state-start {
      font-size: 12px;
      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>