<template>
  <transition>
    <div class="dialog">
      <div class="dialog-content">
          <van-image src="@/assets/chainlock.png" width="120px" height="120px"></van-image>
          <div class="title">同意登记方声明</div>
          <div class="desc">本登记人承诺上链信息的真实性，并自主完成上链操作，以作永恒记录，如有虚假，本登记人自愿承担因此产生的一切后果。</div>
          <van-button 
            block
            color="#3F79FE" 
            style="margin-top:25px;" 
            type="primary" @click="handleAction('confirm');
            ">确定上链</van-button>
          <div class="tip">上链一次扣除 0.002 左右的燃料</div>
          <span class="close" @click="handleAction('cancel')">×</span>
      </div>
    </div>
  </transition>
  
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
import { Icon, Image, Button } from 'vant';
@Component({
  components: {
    [Icon.name]: Icon,
    [Image.name]: Image,
    [Button.name]: Button,
  },
})
export default class ConfirmChain extends Vue {
  @Prop( {
  })private callback!: any;
  @Prop( {
  })private close!: any;
  private handleAction(action: string) {
    this.$emit(action);
    this.onClose(action);
  }
  private onClose(action: string) {
    this.close();
    if (this.callback) {
        this.callback(action);
    }
  }
}
</script>
<style scoped lang="scss">
  .dialog{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.6);
    &-content{
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 70%;
      padding: 19px 31px;
      border-radius: 6px;
      background: #FFFFFF;
      color:#FF5353;
      font-size: 14px;
      .close{
        position: absolute;
        right: 20px;
        top: 10px;
        display: inline-block;
        width: 14px;
        height: 14px;
        font-size: 30px;
        color: #999999;
      }
      .title{
        margin-top: 10px;
      }
      .desc{
        margin-top: 7px;
      }
      .tip{
        margin-top: 10px;
        font-size: 12px;
        color: #3175FF;
      }
    }
  }
</style>
