
<template>
  <div class="box" v-if="showList">
    <header>
      回收站
      <div class="input-box">
        <input
          type="text"
          placeholder="搜索存证名称/存证地址"
          @blur="inputBlur"
          @keydown.enter="$event.target.blur()"
          v-model="params.key_words"
        />
        <i class="iconfont iconfangdajing1"></i>
      </div>
    </header>
    <center>
      <table class="table">
        <thead>
          <tr class="table-head">
            <th class="table-head-index">序号</th>
            <th class="table-head-name">存证名称</th>
            <th>创建日期</th>
            <th>删除日期</th>
            <th>删除原因</th>
            <th>区块链查询</th>
            <th>操作</th>
          </tr>
          <!-- 表格部分 -->
          <tr
            class="product_row"
            v-for="(item, index) in infoList"
            :key="index"
          >
            <td class="table-td-index">{{ serialNumber(index) }}</td>

            <td class="middle goods-name">{{ item.name }}</td>
            <td class="middle">{{ item.create_time | formatTime }}</td>
            <td class="middle">{{ item.update_time | formatTime }}</td>
            <td class="middle middle--deleteRemark">
              {{ item.abandon_remark }}
            </td>
            <td class="middle">
              <div
                class="block"
                :class="{ 'icon-box--check': item.status === 2 }"
              >
                <div @click.stop="openBlock(item, index)" class="icon-box">
                  <i
                    class="iconfont iconfangdajing1"
                    :class="{ 'iconerweima--check': item.status === 2 }"
                  ></i>
                  <!--浮动弹框-->
                  <ul
                    class="set-menu block-ul"
                    :class="{ 'block-ul__check': checkBlock === index }"
                    v-if="showBlock"
                    @mousedown.stop
                  >
                    <li @click="handleChain(item)">查看区块链</li>
                    <li @click="copyHash(item)">复制存证地址</li>
                  </ul>
                </div>
              </div>
            </td>
            <td class="middle fixed">
              <i
                class="iconfont icongengduocaozuo"
                :class="{ 'iconerweima--check': item.status === 2 }"
                @click.stop="openSet(item, index)"
              ></i>
              <ul
                class="set-menu-list"
                v-if="checkSet === index"
                @mousedown.stop
              >
                <li @click="privacySettings(item)">隐私设置</li>
              </ul>
            </td>
          </tr>
          <!-- 表格结束 -->
        </thead>
      </table>
    </center>
    <pagination
      class="pager"
      v-model="params.page"
      :total="total"
      @change="pagechange"
      :size="10"
    >
      <span class="pager-count">共{{ Math.ceil(total / 10) }}页</span>
    </pagination>
    <common-dialog showMask v-if="PromptShow" @closePopup="PromptShow = false">
      <prompt
        tip="确定要隐藏该条记录吗"
        @close="PromptShow = false"
        @confirm="hiddenCertificate"
      />
    </common-dialog>
  </div>
  <div v-else class="default-page">
    <div class="center-box">
      <div class="imgbox">
        <img src="../../assets/images/category/deletes.png" />
      </div>
      <p>暂无已删除存证</p>
    </div>
  </div>
</template>

<script>
// 请求
import { GO_URLS } from "@/config/URLS";
// 时间转换
import { fmtTimeStamp } from "@/utils/tool/index";
// 打开区块链浏览器
import { openChainBrowser } from "@/utils/app/common";
// 组件
import Pagination from "@/components/Pagination.vue";
import CommonDialog from "@/components/CommonDialog.vue";
import prompt from "@/components/newProductList/prompt.vue";
export default {
  data() {
    return {
      infoList: [],
      params: {
        page: 1,
        key_words: "",
        page_size: 10,
        is_valid: 1,
      },
      showBlock: false,
      checkBlock: 0,
      total: 0,
      isFirst: true,
      showList: false,
      checkSet: -1,
      PromptShow: false,
      PromptID: -1,
    };
  },
  components: { Pagination, prompt, CommonDialog },
  props: ["ToUpdate"],
  computed: {
    // 图标序号部分
    serialNumber(index) {
      return function (index) {
        return (this.params.page - 1) * 10 + (index + 1);
      };
    },
  },
  watch: {
    ToUpdate: function (newO, oldO) {
      this.inValid(this.params);
    },
  },
  mounted() {
    this.inValid(this.params);
  },
  methods: {
    async hiddenCertificate() {
      const res = await this.$ajax({
        type: "POST",
        url: GO_URLS.deleteBlockChainProof,
        params: {
          id: this.PromptID,
        },
      });
      if (res) {
        this.inValid(this.params);
        this.PromptShow = false;
        this.$message({
          type: "success",
          message: "隐藏成功!",
        });
      }
    },
    privacySettings(item) {
      this.PromptShow = true;
      this.PromptID = item.id;
    },
    openSet(item, index) {
      this.checkSet = index;
      document.addEventListener("mousedown", this.onHindMenu);
    },
    inputBlur() {
      if (this.params.key_words.trim() === "") {
        this.params.key_words = "";
      }
      this.inValid(this.params);
    },
    pagechange() {
      this.inValid(this.params);
    },
    // 隐藏条件选中
    onHindMenu() {
      this.showBlock = false; // 区块链
      this.checkSet = -1;
      document.removeEventListener("mousedown", this.onHindMenu);
    },
    // 复制哈希值
    copyHash(item) {
      var input = document.createElement("input"); // 直接构建input
      input.value = item.hash; // 设置内容
      document.body.appendChild(input); // 添加临时实例
      input.select(); // 选择实例内容
      document.execCommand("Copy"); // 执行复制
      document.body.removeChild(input);
      this.$message({
        message: "复制成功，请右键粘贴使用",
        type: "success",
      });
    },
    // 打开区块链浏览器
    handleChain(item) {
      openChainBrowser(item.hash);
    },
    // 显示区块链弹窗
    openBlock(item, index) {
      if (item.status != 2) {
        return;
      }
      this.checkBlock = index;
      document.addEventListener("mousedown", this.onHindMenu);
      this.showBlock = true;
    },
    fmtTimeStamp2: function (stampStr) {
      return fmtTimeStamp("Y-M-D", parseInt(stampStr));
    },
    //   获取已删除数据
    async inValid(params) {
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.list,
        params: params,
      });
      if (res) {
        if (this.isFirst) {
          if (res.data.results) {
            this.showList = true;
            this.isFirst = false;
          }
        }
        this.$store.commit("setDeletedNum", res.data.total);
        this.infoList = res.data.results;
        this.total = res.data.total;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.fixed {
  position: relative;
}
.set-menu-list {
  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);
    }
  }
}
.box {
  background: #f8f8f8;
  header {
    height: 74px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(53, 53, 53, 1);
    padding-left: 26px;
    .input-box {
      display: inline-block;
      width: 240px;
      margin-top: 20px;
      margin-left: 14px;
      padding-left: 20px;
      height: 36px;
      background: rgba(255, 255, 255, 1);
      border-radius: 20px;
      line-height: 36px;
      input {
        width: 192px;
        height: 36px;
        border: none;
        outline: none;
        font-size: 14px;
        line-height: 1;
        &::-webkit-input-placeholder {
          color: #9b9b9b;
        }
        &::-moz-placeholder {
          color: #9b9b9b;
          // color: red !important;
        }
        &::-moz-placeholder {
          /* Mozilla Firefox 4 to 18 */
          color: #9b9b9b;
        }
        &::-moz-placeholder {
          /* Mozilla Firefox 19+ */
          color: #9b9b9b;
        }
        &:-ms-input-placeholder {
          /* Internet Explorer 10+ */
          color: #9b9b9b;
        }
      }
      i {
        color: #e0e0e0;
        font-size: 18px;
        float: right;
        padding-right: 20px;
      }
    }
  }
  center {
    //  表头
    margin-top: -6px;
    .table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0 6px;
      padding: 0 13px;
      .table-head {
        color: #9b9b9b;
        height: 34px;
        background: white;
        font-weight: normal;
        th {
          font-weight: normal;
          font-size: 12px;
        }
        // 名称
        .table-head-name {
          padding-left: 37px;
          text-align: left;
        }
        // 序号
        .table-head-index {
          text-align: left;
          width: 66px;
          text-align: center;
        }
      }
      //   表体
      .product_row {
        height: 68px;
        background: #fff;
        color: #606266;
        font-size: 12px;
        .table-td-index {
          text-align: center;
        }

        //   商品名称
        .goods-name {
          text-align: left !important;
          padding-left: 37px;
          max-width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .middle {
          text-align: center;
          i {
            font-size: 13px;
            cursor: not-allowed;
            color: #9b9b9b;
          }
          .iconerweima--check {
            color: #4a90e2;
            cursor: pointer;
          }
        }
        .middle--deleteRemark {
          width: 40%;
        }
        //   区块链
        .block {
          position: relative;
          height: 25px;
          width: 25px;
          line-height: 25px;
          margin: 0 auto;
          // overflow: hidden;
          border-radius: 4px;
          background: rgba(155, 155, 155, 0.1);
          .icon-box {
            height: 25px;
            width: 25px;
            line-height: 25px;
            margin: 0 auto;
            overflow: hidden;
            border-radius: 4px;
          }
        }
        .icon-box--check {
          background: rgba(74, 144, 226, 0.1) !important;
        }
        .block-ul {
          display: none;
          right: 54px !important;
        }
        .block-ul__check {
          display: block !important;
          top: 30px !important;
          left: 50% !important;
          transform: translate(-50%, 0);
        }
        .set-menu {
          display: none;
          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);
            }
          }
        }
      }
    }
  }
  .pager {
    margin-top: 13px; /* 23 - 10 */
    text-align: right;
    padding-right: 13px;
    padding-bottom: 80px;
  }
  .pager-count {
    margin-left: 12px;
    font-size: 12px;
  }
}
.default-page {
  .center-box {
    margin: 0 auto;
    margin-top: 22%;
    width: 159px;
    height: 190px;
    .imgbox {
      width: 100px;
      height: 100px;
      overflow: hidden;
      margin: 0 auto;
      overflow: hidden;
      img {
        width: 100%;
      }
    }
    p {
      text-align: center;
      padding-top: 14px;
    }
  }
}
.icongengduocaozuo {
  font-size: 16px !important;
}
</style>