<template>
  <div class="subject">
    <h1>添加存证</h1>
    <input v-model.trim="name" type="text" placeholder="请输入存证名称" />
    <div class="btn-box">
      <div class="btn btn-cancel" @click="$emit('cancel')">取消</div>
      <div class="btn btn-determine" @click="determine">确定</div>
    </div>
  </div>
</template>

<script>
import { GO_URLS } from "@/config/URLS";
export default {
  //   引入组件
  components: {},
  props: [],
  data() {
    return {
      name: "",
      isactive: false,
    };
  },

  computed: {
    //
  },
  methods: {
    // 确认按钮
    async determine() {
      if (!this.name) {
        this.$message("请输入名称");
        return false;
      }
      if (this.isactive) {
        return;
      }
      this.isactive = true;
      const res = await this.$ajax({
        type: "post",
        url: GO_URLS.add,
        params: {
          name: this.name,
          note: JSON.stringify({
            version: 1,
            userName: this.$store.state.userInfos.user || "",
            userIcon: this.$store.state.userInfos.icon || "",
            evidenceName: this.name,
            stepName: "",
            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: "null",
                  },
                  type: 0,
                  key: "basehash",
                  label: "basehash",
                },
                {
                  data: {
                    type: "text",
                    format: "hash",
                    value: "null",
                  },
                  type: 0,
                  key: "prehash",
                  label: "prehash",
                },
                {
                  data: {
                    type: "text",
                    format: "string",
                    value: null,
                  },
                  type: 0,
                  key: "存证类型",
                  label: "存证类型",
                },
              ],
            },
            {},
          ]),
        },
      });
      if (res) {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.isactive = false;
        this.$router.push({
          path: "/editTemplate",
          query: {
            personalTemplateId: res.data.id,
          },
        });
      } else {
        this.isactive = false;
      }
    },
  },
};
</script>
<style scoped lang="less">
.subject {
  width: 512px;
  height: 279px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 20px 0px rgba(61, 118, 249, 0.18);
  padding: 0 44px;
}
h1 {
  padding-top: 34px;
  padding-bottom: 42px;
  font-size: 22px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(53, 53, 53, 1);
}
input {
  width: 500px;
  height: 44px;
  border: 1px solid rgba(226, 226, 226, 1);
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: black;
  line-height: 25px;
  text-indent: 26px;
  &::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #b6b5ba;
  }
  &:-moz-placeholder {
    color: #b6b5ba;
  }
  &::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #b6b5ba;
  }

  &:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #b6b5ba;
  }
}
input:focus {
  outline: none;
  border: 1px solid rgba(226, 226, 226, 1);
}
.btn-box {
  overflow: hidden;
  padding-top: 40px;
  float: right;
}
.btn {
  float: left;
  width: 120px;
  height: 40px;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  line-height: 40px;
  cursor: pointer;
}
.btn-cancel {
  color: rgba(92, 100, 118, 1);
}
.btn-determine {
  background: rgba(63, 121, 254, 1);
  color: white;
}
</style>

