/*支付结果*/
<template>
  <div>
    <transition name="marsk-fade">
      <div v-show="resultConfig.isShow" class="marsk" />
    </transition>
    <transition name="slide-fade">
      <div v-show="resultConfig.isShow" class="action-result">
        <div class="container">
          <div v-if="resultConfig.result == '3'" class="success">
            <div class="title">
              <i class="el-icon-circle-check" />
              <p>{{ getPayState(resultConfig.result) }}</p>
            </div>
            <router-link to="/userLayout/integral" @click.native.prevent="back"
              >返回</router-link
            >
          </div>
          <div
            v-else-if="
              resultConfig.result == '0' ||
              resultConfig.result == '2' ||
              resultConfig.result == '7' ||
              resultConfig.result == '8'
            "
            class="fail"
          >
            <i class="el-icon-warning-outline" />
            <p>{{ getPayState(resultConfig.result) }},请重新下单！</p>
            <el-button
              type="danger"
              size="mini"
              round
              @click.native.prevent="sure"
              >确定</el-button
            >
          </div>
          <div v-else class="fail">
            <div class="title">
              <i class="el-icon-info" />
              <p>{{ getPayState(resultConfig.result) }}</p>
            </div>
            <el-button
              type="danger"
              size="mini"
              round
              @click.native.prevent="back"
              >返回</el-button
            >
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import { payState } from '@/utils/index'
export default {
  name: 'Result',
  props: {
    resultConfig: {
      isShow: {
        type: Boolean,
        default: () => false,
      },
      result: {
        type: String,
        default: () => '',
      },
    },
  },
  data() {
    return {}
  },
  methods: {
    // 返回首页
    back() {
      this.$emit('putResult', false)
    },
    // 点击确定
    sure() {
      this.$emit('putResult', true)
    },
    // 获取支付状态
    getPayState(state) {
      return payState(state)
    },
  },
}
</script>

<style lang="scss" scoped>
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';

.marsk-fade-enter-active,
.marsk-fade-leave-active {
  transition: all 0.5s;
}
.marsk-fade-enter,
.marsk-fade-leave-to {
  opacity: 0;
}
.marsk {
  @include position(fixed, 0, 0, 0, 0, 1000);
  background: rgba(255, 255, 255, 0.98);
}

.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(7.48rem);
}
.action-result {
  @include position(absolute, 0, 0, 0, 0, 1001);
  @include w_h(100%, 100%);
  min-width: 1000px;
  .container {
    padding: 150px $pad;
    text-align: center;
    .success {
      font-size: 20px;
      color: $color_3;
      .title {
        @include flex(center);
        line-height: 50px;
        i {
          font-size: 30px;
          color: #41b300;
        }
        p {
          padding-left: 10px;
          font-weight: 700;
        }
      }
      a {
        font-size: 14px;
        color: #0470cc;
      }
      a:hover {
        color: #409eff;
      }
    }
    .fail {
      font-size: 16px;
      line-height: 24px;
      color: $color_on;
      i {
        margin: 10px auto;
        font-size: 50px;
      }
      p {
        font-weight: 700;
        color: $color_on;
      }
      .el-button {
        margin-top: 20px;
      }
    }
  }
}
</style>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';

.action-result {
  .el-image {
    @include w_h(100%);
  }
}
</style>
