
<template>
  <div class="new-product-list">
    <!-- 缺省页 -->
    <default-page
      tips="您还未添加捐赠记录"
      v-if="FirstEntry"
      @to-add="toEditTemplate"
    />
    <!-- 主体 -->
    <div v-else class="new-product_list">
      <!-- 头 -->
      <div class="head">
        <!-- 添加存证 -->
        <div class="add-goods" @click="toEditTemplate">
          <i class="iconfont iconjiahao"></i>添加捐赠记录
        </div>
        <!-- 搜索条件 -->
        <div class="search-form">
          <div class="select" @click="showMenu">
            <span class="select-text">{{ label }}</span>
            <i class="iconfont iconxiangxia select-icon"></i>
          </div>
          <ul v-if="isShowMenu" class="select_menu" @mousedown.stop>
            <li @click="Select('全部')">全部</li>
            <li @click="Select('未上链')">未上链</li>
            <li @click="Select('已上链')">已上链</li>
            <li @click="Select('上链中')">上链中</li>
            <li @click="Select('上链失败')">上链失败</li>
          </ul>
        </div>
        <!-- 右侧搜索框 -->
        <div class="search_input">
          <input
            v-model="searchvalue"
            class="input_inner"
            type="text"
            placeholder="请输入名称、哈希、地址进行查询"
            @blur="Search"
            @keydown.enter="$event.target.blur()"
          />
          <i class="iconfont iconsousuo icon_search"></i>
        </div>
      </div>
      <!-- 表格 -->
      <div class="center">
        <IncrementalDataList
          @increment="incrementOperation"
          @delete-goods="deleteGoodsShow"
          @expandTheList="expandTheList"
          @upload="upload"
          @delete-incremental="deleteTheIncremental"
          @incremental-chain="incrementalOnChain"
        />
      </div>
      <!-- 页码组件 -->
      <pagination
        class="pager"
        v-model="page"
        :total="total"
        @change="pagechange"
        :size="10"
      >
        <span class="pager-count">共{{ Math.ceil(total / 10) }}页</span>
      </pagination>
    </div>
    <!-- 未认证提示组件 -->
    <uncertified
      v-if="showUncertified"
      @confirm="showUncertified = false"
      @cancel="UncertifiedConfirm"
    ></uncertified>
    <!-- 增量 -->
    <common-dialog
      v-if="showIncrements"
      @closePopup="showIncrements = false"
      showMask
    >
      <Increments
        :pre_hash="preHash"
        :evidenceName="localName"
        @update="IncrementUpdate"
        @close="showIncrements = false"
      ></Increments>
    </common-dialog>
    <!-- 删除组件 -->
    <common-dialog
      v-if="showDeleteDialog"
      @closePopup="showDeleteDialog = false"
      showMask
    >
      <delete-goods
        @CloseDg="showDeleteDialog = false"
        :id="infoId"
        :status="status"
        @deleteSuccess="deleteSuccess"
      ></delete-goods>
    </common-dialog>
    <!-- 添加存证弹窗 -->
    <common-dialog
      v-if="isShowAdd"
      @closePopup="isShowAdd = false"
      showMask
      class="style-addgoods"
    >
      <add-goods @cancel="isShowAdd = false"></add-goods>
    </common-dialog>
    <!-- 增量弹窗 -->
    <div class="chain-dialog" v-show="isShowToChainDialog">
      <div class="chain-mask" @click="isShowToChainDialog = false"></div>
      <div class="chain-content">
        <i
          class="iconfont iconjiufuqianbaoicon08"
          @click="isShowToChainDialog = false"
        ></i>
        <img src="../../../../assets/images/category/chain_notice.png" />
        <div class="part-bottom">
          <h3>上链提示</h3>
          <p class="line-one">
            信息上链后，即将展示在区块链上以作永恒记录，如有虚假，
          </p>
          <p class="line-two">登记⽅需⾃愿承担由此产⽣的⼀切后果。</p>
          <div class="chain-btn" @click.stop="Confirm(TheIncrementalData)">
            确定上链
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { GO_URLS } from "@/config/URLS";
import CommonDialog from "@/components/CommonDialog.vue";
import Pagination from "@/components/Pagination.vue";
import defaultPage from "@/components/newProductList/defaultPage.vue";
import IncrementalDataList from "../../components/newProductList/IncrementalDataList.vue"; //增量数据列表
import Increments from "@/components/newProductList/increment.vue"; // 增量
import AddGoods from "./addGoods.vue"; // 添加存证
import deleteGoods from "./deleteGoods.vue"; // 删除组件
import Uncertified from "@/components/Uncertified.vue"; // 未认证提示组件

export default {
  components: {
    CommonDialog,
    Pagination,
    defaultPage,
    IncrementalDataList,
    AddGoods,
    Increments,
    deleteGoods,
    Uncertified,
  },
  data() {
    return {
      isShowMenu: false, // 用于控制搜索条件的显示
      label: "全部", // 显示对应的搜索条件
      searchvalue: "", // 搜索关键词
      total: 10, // 存证总数
      page: 1, // 当前页码
      chainStatus: null, // 上链状态
      FirstEntry: false, // 控制缺省页显示
      showUncertified: false, // 个人认证
      isShowToChainDialog: false, //上链弹窗
      isInActive: false, //防抖
      isFirst: false,
      isShowAdd: false,
      showIncrements: false, // 增量更新弹窗
      showDeleteDialog: false, // 删除弹窗的显示和隐藏
      infoId: null,
      status: null,
      preHash: "", // 上一条存证hash
      localDetail: "",
      localName: "",
      localState: null,
      IncrementalList: null, // 增量数据列表
      TheIncrementalData: null, //增量数据
    };
  },
  created() {
    this.getList(); // 获取所有商品
  },
  methods: {
    // 展开增量更新列表
    async expandTheList(item, index) {
      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 });
      }
    },
    // 增量存证上链
    incrementalOnChain(item2, item) {
      this.isShowToChainDialog = true;
      this.IncrementalList = item;
      this.TheIncrementalData = item2;
    },
    // 增量更新的回调
    IncrementUpdate() {
      // 获取所有商品
      this.getList();
    },
    // 增量更新
    incrementOperation(item) {
      if (item.status === 2 && item.increment_num === 0) {
        this.preHash = item.hash;
        this.localName = item.name;
        this.$store.commit("setDepositCertificate", { item });
        this.showIncrements = true;
      } else if (
        item.status === 2 &&
        item.increment_num > 0 &&
        !item.incrementList
      ) {
        this.$message("请先展开已增量数据");
        return false;
      } else if (
        item.status === 2 &&
        item.increment_num > 0 &&
        item.incrementList &&
        item.incrementList[0].status === 2
      ) {
        this.localName = item.name;
        // prehash取列表最后一条数据的hash
        this.preHash = item.incrementList[item.incrementList.length - 1].hash;
        this.$store.commit("setDepositCertificate", { item });
        this.showIncrements = true;
      } else {
        this.$message({
          message: "增量数据未上链，无法继续增量",
          type: "warning",
        });
      }
    },
    // 删除增量数据
    deleteTheIncremental(item) {
      if (item.status === 1 || item.status === 2) return false;
      var that = this;
      this.$confirm("此操作将永久删除该存证, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          that.deleteIncremental(item.id);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //上链>查询是否认证
    upload(item) {
      if (this.$store.state.userInfos.auth_suc === 1) {
        this.isShowToChainDialog = true;
        this.infoId = item.id;
        this.localName = item.name;
        this.localState = item.status;
        this.localDetail = item.detail;
      } else {
        this.showUncertified = true;
      }
    },
    // 删除增量存证
    async deleteIncremental(id) {
      const res = await this.$ajax({
        type: "delete",
        url: GO_URLS.deleteIncrement + `/` + id,
      });
      if (res) {
        this.getList();
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      }
    },

    // 跳转个人中心
    UncertifiedConfirm() {
      this.$router.push("/userCenter");
    },
    Confirm(TheIncrementalData) {
      switch (TheIncrementalData) {
        case null:
          this.uploadConfirm();
          break;

        default:
          this.incrementalChain();
          break;
      }
    },
    // 增量存证上链
    async incrementalChain() {
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.sendBlockIncrementChain,
        params: { id: this.TheIncrementalData.id },
      });
      if (res) {
        this.$message({
          type: "success",
          message: "上链信息提交成功!",
        });
        this.isShowToChainDialog = false;
        this.getList();
      }
    },
    // 上链请求
    uploadConfirm() {
      if (this.localState === 3) {
        this.witnessTheChain();
        return false;
      }
      this.witnessTheChain();
    },
    // 普通存证上链
    async witnessTheChain() {
      if (this.isInActive) return;
      this.isInActive = true;
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.sendBlockChian,
        params: { id: this.infoId },
      });
      if (res) {
        this.$message({
          type: "success",
          message: "上链信息提交成功!",
        });
        this.isShowToChainDialog = false;
        this.getList();
      }
      this.isInActive = false;
    },
    // 删除成功
    deleteSuccess() {
      this.showDeleteDialog = false;
      this.getList();
      this.$emit("update");
      this.$message({
        type: "success",
        message: "删除存证成功!",
      });
    },
    // 展开删除存证弹窗
    deleteGoodsShow(item) {
      this.showDeleteDialog = true;
      this.infoId = item.id;
      this.status = item.status;
    },
    //   请求
    async getList() {
      // 构建请求
      let params = {
        status: !this.chainStatus ? [] : [this.chainStatus],
        is_valid: 0, //可用
        page: this.page,
        key_words: this.searchvalue,
        page_size: 10,
      };
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.list,
        params,
      });
      if (res) {
        this.total = res.data.total;
        this.$store.commit("setListOfInformation", res.data.results || []);
        this.$store.commit("setGoodsNum", res.data.total);
        if (!res.data.results && !this.isFirst) {
          if (this.isFirst) return;
          this.FirstEntry = true;
          this.isFirst = true;
        } else {
          this.isFirst = true;
        }
      }
    },
    //   页码变更触发
    pagechange() {
      this.getList();
    },
    // 搜索按钮
    Search() {
      this.getList();
    },
    // 切换搜索条件
    Select(val) {
      this.isShowMenu = false;
      this.label = val;
      switch (val) {
        case "全部":
          this.chainStatus = null;
          break;
        case "未上链":
          this.chainStatus = 0;
          break;
        case "上链中":
          this.chainStatus = 1;
          break;
        case "已上链":
          this.chainStatus = 2;
          break;
        case "上链失败":
          this.chainStatus = 3;
          break;
      }
      this.getList();
    },
    // 显示搜索条件
    showMenu() {
      this.isShowMenu = true;
      document.addEventListener("mousedown", this.onHindMenu);
    },
    // 隐藏条件选中
    onHindMenu() {
      this.isShowMenu = false; //隐藏筛选条件
      document.removeEventListener("mousedown", this.onHindMenu);
    },
    // 添加存证
    toEditTemplate() {
      this.isShowAdd = true;
    },
  },
};
</script>

<style lang="less" scoped>
.new-product-list {
  .new-product_list {
    padding-top: 27px;
    min-height: 500px;
    background: #f8f8f8;
    //   头
    .head {
      position: relative;
      padding-bottom: 5px;
      // 添加按钮
      .add-goods {
        margin-left: 32px;
        float: left;
        width: 140px;
        height: 36px;
        cursor: pointer;
        background: rgba(30, 15, 255, 1);
        box-shadow: 0px 2px 10px 0px rgba(30, 15, 255, 0.14),
          0px 2px 10px 0px rgba(30, 15, 255, 0.07);
        border-radius: 18px;
        padding: 0;
        line-height: 36px;
        text-align: center;
        color: white;
        font-size: 14px;
        transition: 0.3s;
        &:hover {
          transform: scale(1.1);
          overflow: hidden;
        }
        .iconfont {
          font-size: 14px;
          margin-right: 8px;
          color: white;
          vertical-align: top;
        }
      }
      // 搜索条件
      .search-form {
        position: relative;
        display: inline-block;
        line-height: 36px;
        height: 36px;
        .select {
          display: inline-block;
          cursor: pointer;
          height: 36px;
        }
        .select-text {
          display: inline-block;
          width: 64px;
          font-size: 14px;
          text-align: right;
          color: #bababa;
        }
        .select-icon {
          display: inline-block;
          margin-left: 8px;
          font-size: 8px;
          color: #d6d6d6;
          transform: scale(0.62);
        }
        .input {
          margin-left: 12px;
          vertical-align: top;
        }
        .select_menu {
          line-height: 36px;
          position: absolute;
          top: 39px; /* 36 + 3 */
          right: -20px;
          background: #fff;
          border: 1px solid #e7e7e7;
          border-radius: 2px;
          text-align: center;
          margin: 0;
          padding: 0;
          list-style: none;
          width: 107px; /* 109 - 2 */
          cursor: pointer;
          li {
            color: #797d84;
            &:hover {
              background: rgba(242, 244, 246, 1);
            }
          }
        }
      }
      //   搜索框
      .search_input {
        margin-left: 16px;
        display: inline-block;
        position: relative;
        .input_inner {
          box-sizing: border-box;
          padding: 0 40px 0 27px;
          width: 288px;
          height: 36px;
          background: #fff;
          border-radius: 21px;
          border: none;
          outline: none;
          font-size: 14px;
          &::-webkit-input-placeholder {
            color: #bababa;
          }
        }
        .icon_search {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 20px;
          font-size: 19px;
          color: #e0e0e0;
        }
      }
    }
    //   主体
    .center {
      //  表头
      .table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 5px;
        padding: 0 13px;
        .table-head {
          color: #9b9b9b;
          height: 34px;
          background: white;
          font-weight: normal;
          th {
            font-weight: normal;
            font-size: 12px;
          }
          // 图片
          .table-head-img {
            text-align: left;
            width: 40px;
          }

          // 操作
          .table-head-set {
            padding-right: 19px;
            text-align: right;
          }
          .table-head-index {
            text-align: left;
            padding-left: 38px;
          }
        }
      }
      .link-td {
        cursor: pointer;
      }
      // 表体
      .product_row {
        height: 67px;
        background: #fff;
        color: #606266;
        font-size: 12px;
        position: relative;
        .table-td-index {
          text-align: left;
          padding-left: 18px;
        }
        .placeholder {
          float: left;
          width: 20px;
          height: 20px;
        }
        .table-td-index--an {
          float: left;
          color: #e8e8e8;
          cursor: pointer;
          line-height: 1;
          transform: rotate(-90deg);
          transition: transform 0.3s ease-in-out;
          i {
            font-size: 12px;
          }
        }
        .table-td-index--rotating {
          transform: rotate(0deg);
        }
        .serial-number {
          padding-left: 18px;
          // color: #9B9B9B;
        }
        //   缩略图
        .imgbox {
          .img {
            width: 35px;
            height: 35px;
            background: #e8e8e8;
            border-radius: 10px;
            overflow: hidden;
            font-size: 16px;
            text-align: center;
            line-height: 35px;
            color: white;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .middle {
          text-align: center;
          .status-box {
            display: inline-block;
            height: 25px;
            line-height: 25px;
            width: 75px;
            overflow: hidden;
            cursor: pointer;
            border-radius: 4px;
            background: rgba(155, 155, 155, 0.1);
            color: #9b9b9b;
          }
          .status-box--ing {
            color: #ffad0a;
            background: rgba(255, 173, 10, 0.1);
          }
          .status-box--fail {
            color: #f12f2f;
            background: rgba(241, 47, 47, 0.1);
          }
          .status-box--success {
            color: #4a90e2;
            background: rgba(74, 144, 226, 0.1);
          }
          i {
            font-size: 13px;
            cursor: not-allowed;
            color: #9b9b9b;
          }
          .iconerweima--check {
            color: #4a90e2;
            cursor: pointer;
          }
        }

        .set {
          text-align: right;
          padding: 0;
        }

        .set-btn_set {
          color: rgba(152, 169, 188, 1);
          font-size: 20px;
          cursor: pointer;
        }
        .set-btn_set--notallowed {
          cursor: not-allowed;
        }
        .set-btn_wrapper {
          position: relative;
          vertical-align: top;
          height: 40px;
          line-height: 40px;
          padding: 0 13px 0 0; /* 21 - (20 - 4) / 2 */
        }
        //   区块链
        .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);
        }
        //   二维码
        .QRcode-box {
          position: relative;
          padding: 0;
          margin: 0;
          .icon-box {
            height: 25px;
            width: 25px;
            background: rgba(155, 155, 155, 0.1);
            line-height: 25px;
            margin: 0 auto;
            overflow: visible;
            border-radius: 4px;
            position: relative;
          }
          .show-box {
            display: none;
            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;
            font-weight: 400;
            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%;
              }
            }
          }
          .show-box__check {
            display: block !important;
            position: absolute;
            left: 12.5px;
            top: 30px;
            z-index: 100;
            transform: translate(-50%, 0);
          }
        }
        .set-menu__check {
          display: block !important;
        }
        .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;
          // 修改组件样式
          .move-box {
            // 鼠标移入样式
            &:hover {
              /deep/.el-input__inner {
                background: rgba(245, 246, 250, 1) !important;
              }
            }
            /deep/.el-input__suffix-inner {
              padding-right: 5px;
            }
            // 旋转箭头
            /deep/ .el-icon-arrow-down {
              transform: rotate(-90deg);
              font-size: 18px;
              color: #606266;
            }
            // 去掉原有边框
            /deep/ .el-input__inner {
              border: none !important;
              cursor: pointer;
              padding-left: 31px;
              /*修改提示文字的颜色*/
              &::-webkit-input-placeholder {
                color: #606266;
              }
              &::-moz-placeholder {
                color: black !important;
                // color: red !important;
              }
              &::-moz-placeholder {
                /* Mozilla Firefox 4 to 18 */
                color: black;
              }
              &::-moz-placeholder {
                /* Mozilla Firefox 19+ */
                color: #606266;
              }
              &:-ms-input-placeholder {
                /* Internet Explorer 10+ */
                color: #606266;
              }
            }
          }
          // end
          .iconyidong {
            float: right;
            padding-right: 14px;
          }
          & > 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;
    }
  }
  .chain-dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  .chain-mask {
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.2;
  }
  .chain-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 550px;
    background-color: white;
    .iconjiufuqianbaoicon08 {
      position: absolute;
      top: -30px;
      font-size: 28px;
      cursor: pointer;
      right: -30px;
      color: rgba(0, 0, 0, 0.4);
    }
  }
  .chain-content .part-bottom {
    padding-top: 30px;
    text-align: center;
  }
  .chain-content .part-bottom h3 {
    font-size: 20px;
    color: #353535;
    margin-bottom: 15px;
  }
  .chain-content .part-bottom p {
    font-size: 16px;
    color: #989fa5;
  }
  .chain-content .part-bottom .line-two {
    margin-bottom: 36px;
  }
  .chain-content .part-bottom .chain-btn {
    font-size: 14px;
    color: white;
    background-color: #3f79fe;
    border-radius: 4px;
    width: 120px;
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    display: inline-block;
  }
}
.style-addgoods {
  .dialog_content {
    background: none;
    max-height: none;
  }
}
</style>