<template>
  <!-- 报名失败弹窗 -->
  <view :class="['cu-modal', failModel ? 'show': '']"  @touchmove.stop.prevent="clear">
    <view class="open-bg">
      <view class="open-wrap">
        <image class="close" src="/static/img/common/model_close.png" mode="" @tap.stop="handleClose" />
        <view class="img-box">
          <image src="/static/img/common/model_bg.png" mode="" />
        </view>
        <view class="footer flex align-center">
          <view class="btn" @tap.stop="handleClose">
            <image src="/static/img/common/cancel.png" mode="" />
          </view>
          <view class="btn" @tap.stop="navTo(route)">
            <image src="/static/img/common/comfirm.png" mode="" />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    failModel: {
      type: Boolean,
      default: false
    },
    route: {
      type: String,
      default: '/pages/apply/list'
    },
  },
  data() {
    return {
    }
  },

  onLoad() {},

  onShow() {},

  methods: {
    navTo(route) {
      this.$mRouter.push({route});
    },
    handleClose() {
      this.$emit('emitClose')
    },
    clear() {

    }
  }

}
</script>

<style lang="scss">
.open-bg {
  position: fixed;
  left: 50%;
  bottom: 30%;
  transform: translateX(-50%);
  .open-wrap {
    position: relative;
    width: 588upx;
    // height: 732upx;
    margin: 0 auto;
    border-radius: 24upx;
    .close {
      position: absolute;
      width: 64upx;
      height: 64upx;
      right: -12upx;
      top: 52upx;
      z-index: 11;
    }
    .img-box {
      font-size: 0;
      image {
        width: 588upx;
        height: 723upx;
        object-fit: cover;
        &.success {
          width: 588upx;
          height: 712upx;
          object-fit: cover;
        }
      }
    }
    .footer {
      position: absolute;
      bottom: 80upx;
      left: 50%;
      transform: translateX(-50%);
      .btn {
        font-size: 0;
        image {
          width: 206upx;
          height: 106upx;
        }
      }
    }
  }
}
</style>
