<template>
  <common-dialog
    showMask
    @closePopup="$emit('close')"
    :visible="visible"
    type="element"
    :elementDialogProps="{
      title: '提示',
    }"
    :btnConfig="{
      type: 'noBorder',
      btns: btns,
      btnFunctions: [
        {
          name: '取消',
          async click() {
            return true;
          },
        },
        {
          name: '去认证',
          click: async () => {
            $emit('confirm');
            confirm;
            return true;
          },
        },
      ],
    }"
  >
    <div class="delete_dialog">
      <img
        class="img inline-block"
        src="/images/Uncertified/weirenzheng-2.png"
        alt="删除"
      />
      <p class="tip">您还未认证不能进行上链</p>
      <!-- <div class="btnbox">
        <button class="g-btn_primary btn_confirm" @click="$emit('cancel')">
          取消
        </button>
        <button
          class="g-btn_primary btn_cancel"
          @click="
            $emit('confirm');
            confirm;
          "
        >
          去认证
        </button>
      </div> -->
    </div>
  </common-dialog>
</template>

<script lang="ts">
import { btns } from "@/config/btns";
import { syCommonDialog as CommonDialog } from "cqk-sy-ui";
import { defineComponent } from "vue";

export default defineComponent({
  components: {
    CommonDialog,
  },
  emits: ["cancel", "confirm", "close"],
  props: {
    navigate: {
      type: Function,
    },
    visible: Boolean,
  },
  data() {
    const newBtns = JSON.parse(JSON.stringify(btns));
    newBtns[1].name = "去认证";
    return {
      btns: newBtns,
    };
  },
  methods: {
    confirm() {
      this.navigate && this.navigate("certify");
    },
  },
});
</script>

<style scoped>
.delete_dialog {
  text-align: center;
}

.g-btn_primary {
  border: none;
  background: var(--sy-blue);
  font-size: 14px;
  color: #fff;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
}
.title {
  margin: 0;
  padding-left: 44px;
  line-height: 106px;
  font-weight: 500;
  color: #000;
  font-size: 22px;
  text-align: left;
}

.img {
  margin-top: 7px;
}

.tip {
  margin: 17px 0 0 0; /* todo ui图切块有空白无法还原 */
  color: #ffce57;
  font-size: 18px;
  line-height: 25px;
}
.btnbox {
  float: right;
  margin-right: 49px;
}
.btn_confirm {
  float: left;
  margin-top: 56px;
  width: 120px;
  height: 40px;
  color: #5c6476;
  background: white;
}
.btn_cancel {
  float: left;
  margin-top: 56px;
  width: 120px;
  padding: 0;
  height: 40px;
  border-radius: 4px;
  text-align: center;
  line-height: 40px;
}
</style>
