<template>
  <view class="container">
    <image class="bkg" mode="aspectFill" src="~@/package_sub/static/form-success.png"></image>

    <view class="wrap">
      <view class="icon">
        <u-icon name="checkbox-mark" color="#d87d34" :size="120"></u-icon>
      </view>
      <view class="text">
        <view>
          {{ title }} <text style="color: #d87d34;">已完成</text>
        </view>
        <view>
          我们会安排专业的人员和您沟通
        </view>
      </view>
      <u-button ripple
                shape="circle"
                :custom-style="{
                  height: '76rpx',
                  'line-height': '76rpx',
                  background: 'linear-gradient(263deg, rgba(31,142,247,0.99) 0%, rgba(17,100,247,0.9981153777569027) 78%, rgba(17,100,247,0.9999999999999999) 78%)',
                  'font-size': '33rpx',
                  'letter-spacing': '3rpx',
                  color: '#fff',
                  'margin-top': '10vh'
                }"
                @click="$u.route({
                  url: redirect,
                  type: type
                })">返回列表</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "填报",
      redirect: 'pages/index/index',
      type: 'switchTab'
    };
  },
  onLoad(options) {
    if (options.title) {
      this.title = options.title
    } else {
      this.title = "填报"
    }
    if (options.redirect) {
      this.redirect = options.redirect
    } else {
      this.redirect = 'pages/index/index'
    }
    if (options.type) {
      this.type = options.type
    } else {
      this.type = 'switchTab'
    }
  }
}
</script>

<style lang="scss">
.container {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;

  .icon {
    width: 178rpx;
    height: 178rpx;
    border-radius: 89rpx;
    filter: drop-shadow(1.597rpx 1.204rpx 20rpx rgba(29,73,128,0.56));
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;;
    z-index: 4;

    .text {
      font-size: 36rpx;
      line-height: 66rpx;
      text-transform: uppercase;
      color: #333333;
      text-align: center;
      margin-top: 10.5vh;

      & > view:nth-child(2) {
        font-size: 28rpx;
      }
    }
  }
}
.bkg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
</style>
