<template>
  <!-- 相关流程跳转提示弹窗 -->
  <van-popup
    v-model="showRelevantTipPopup"
    :close-on-click-overlay="false"
    class="van-dialog relevant-tip"
  >
    <div class="close-icon-wrap">
      <van-icon
        name="clear"
        class="close-icon"
        size="20"
        @click="handleClose"
      />
    </div>
    <div class="header-title">跳转提示</div>
    <div class="tip-content">
      离开页面后当前页面的内容将不会保存是否需要确认保存
    </div>
    <footer class="tip-footer van-dialog__footer">
      <span class="bottom-btn-text" @click="handleSavaForm">保存并前往</span>
      <span class="bottom-btn-text confirm-btn" @click="handleJump">
        直接前往
      </span>
    </footer>
  </van-popup>
</template>

<script>
  export default {
    props: {
      showPopup: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        showRelevantTipPopup: false,
      }
    },
    watch: {
      showPopup(val) {
        this.showRelevantTipPopup = val
      },
    },
    methods: {
      handleClose() {
        this.showRelevantTipPopup = false
        this.$emit('update:showPopup', false)
      },
      handleSavaForm() {
        this.$emit('sava-form')
      },
      handleJump() {
        this.$emit('click-flow')
      },
    },
  }
</script>

<style lang="scss" scoped>
  .relevant-tip {
    .close-icon-wrap {
      text-align: right;
      padding-top: 12px;
      padding-right: 16px;
      .close-icon {
        color: #bfbfbf;
        cursor: pointer;
      }
    }

    .header-title {
      font-size: 17px;
      color: #1a1a1a;
      font-weight: bold;
      text-align: center;
    }
    .tip-content {
      color: #262626;
      padding: 16px 28px;
    }
    .tip-footer {
      height: 48px;
      display: flex;
      align-items: center;
      border-top: 1px solid #e9e9e9;
      .bottom-btn-text {
        display: flex;
        flex: 1;
        justify-content: center;
        color: #8c8c8c;
        cursor: pointer;
      }
      .confirm-btn {
        color: $--color-primary;
        border-left: 1px solid #e9e9e9;
      }
    }
  }
</style>