<template>
  <div class="category-add">
    <h2 class="dialog_add-title">增量更新</h2>
    <dialog-input
      class="dialog_add-form dialog_add-input_name"
      v-model="name"
      :errorShowing="isErrorShowing"
      placeholder="请输入增量名称"
    />
    <button class="dialog_add-btn_confirm" @click="checkForm">确定</button>
    <button class="dialog_add-btn_cancel" @click="closeDialog">取消</button>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import DialogInput from "@/components/DialogInput.vue";
import { Prop, Component } from "vue-property-decorator";
import { GO_URLS } from "@/config/URLS";
@Component({
  components: {
    DialogInput,
  },
})
export default class CategoryAdd extends Vue {
  @Prop() pre_hash!: string;
  @Prop() evidenceName!: string;
  name: string = "";
  isErrorShowing: Boolean = false;
  isInActive: Boolean = false;
  // 获取基准值
  get getDepositCertificate() {
    return this.$store.state.depositCertificate;
  }
  async checkForm() {
    if (this.isInActive) return;
    this.isInActive = true;
    this.isErrorShowing = true;
    // 追加非空验证
    if (this.name.trim().length === 0) {
      this.$message({
        showClose: true,
        message: "名称不可为空",
        type: "warning",
      });
      this.isInActive = false;
      return null;
    }
    // else if (this.name.trim().length > 10) {
    //   this.$message({
    //     showClose: true,
    //     message: "增量名称长度不可大于10",
    //     type: "warning",
    //   });
    //   return false;
    // }
    const data = await this.$ajax({
      type: "post",
      url: GO_URLS.increment,
      params: {
        base_id: this.getDepositCertificate.base_id, //基础存证id
        base_hash: this.getDepositCertificate.base_hash, //基础存证哈希
        name: this.name,
        pre_hash: this.pre_hash, //上一条存证哈希
        note: JSON.stringify({
          version: 1,
          userName: this.$store.state.userInfos.user || "",
          userIcon: this.$store.state.userInfos.icon || "",
          evidenceName: this.evidenceName,
          stepName: this.name,
          banners: [],
        }),
        detail: JSON.stringify([
          {
            label: "ext",
            key: "",
            type: 3,
            data: [
              {
                data: {
                  type: "text",
                  format: "string",
                  value: this.name,
                },
                type: 0,
                key: "存证名称",
                label: "存证名称",
              },
              {
                data: {
                  type: "text",
                  format: "hash",
                  value: this.getDepositCertificate.base_hash,
                },
                type: 0,
                key: "basehash",
                label: "basehash",
              },
              {
                data: {
                  type: "text",
                  format: "hash",
                  value: this.pre_hash,
                },
                type: 0,
                key: "prehash",
                label: "prehash",
              },
              {
                data: {
                  type: "text",
                  format: "string",
                  value: this.name,
                },
                type: 0,
                key: "存证类型",
                label: "存证类型",
              },
            ],
          },
          {},
        ]),
      },
    });
    if (data) {
      this.$message({
        message: "增量更新成功",
        type: "success",
      });
      //  this.$store.commit("setTheAnchor", index);
      this.$router.push({
        path: "/editTemplate",
        query: {
          personalTemplateId: this.getDepositCertificate.base_id, //父级id
          personalTemplateName: this.evidenceName, // 父级name
          childId: data.data.id, // 当前存证id
        },
      });
    }
    this.isInActive = false;
  }
  //  关闭弹窗
  async closeDialog() {
    this.$emit("close", {});
  }
}
</script>
<style scoped lang="less">
.category-add {
  padding: 34px 50px 0 50px;
  height: 221px; /* 325px - 34px */
  width: 500px; /* 600px - 100px */
}

.dialog_add-title {
  margin: 0;
  color: #000;
  font-size: 22px;
  line-height: 30px;
}

.dialog_add-select_subject {
  margin-top: 29px;
}

.dialog_add-input_name {
  margin: 20px 0 34px 0;
}

.dialog_add-btn_confirm {
  float: right;
  width: 120px;
  height: 40px;
  color: #fff;
  font-size: 14px;
  outline: none;
  background: #0CC399;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.dialog_add-btn_cancel {
  float: right;
  margin-right: 18px; /* 28 - 10 */
  border: none;
  width: 48px; /* 28 + 增大20 */
  height: 40px;
  outline: none;
  background: #fff;
  color: #5c6476;
  font-size: 14px;
  cursor: pointer;
}
</style>

