<template>
  <view class="container">
    <view class="content">
      <view class="main_box">
        <view class="make_msg_box" :class="{ topBorderRadius: pageType == 'yygh' }">
          <image class="success_icon" :src="iconUrl.icon_circleActive"></image>
          <text class="title">候补已提交！</text>
        </view>
        <view class="con">
          <view class="tips">
            <view class="tips_name">1、您已完成候补登记，进入预约候补队列！当出现预约成功患者退号时，系统将根据您的候补队列次序，自动为您预约挂号，并短信通知您如期就诊；</view>
            <view class="tips_name">2、如您需要取消候补登记，可通过“我的”-“候补记录”进行取消操作。</view>
          </view>
        </view>
      </view> 
      
      <view class="btn_list">
        <view class="btn_item btn_item_width100 backgroundCustom" @click="backHome">返回首页</view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { common } from '@/utils';
import icon from '@/utils/icon';

const iconUrl = ref(icon);
const pageType = ref(''); // Assuming pageType might be passed or used, initializing it. Original code used pageType in template but didn't initialize in data, maybe from options?
// Original JS: onLoad: function(options) {} - empty.
// Template: {{pageType == 'yygh' && 'topBorderRadius'}}
// It seems pageType wasn't used in JS but used in WXML. It might be safe to default to empty or check options if intended.
// Since onLoad was empty in JS, I'll leave it empty here or just init ref.

const backHome = () => {
  common.goToUrl('/pages/st1/business/tabbar/homePage/homePage', { skipWay: "reLaunch" });
};
</script>

<style scoped>
.main_box {
  width: 100%;
  height: 100%;
  padding: 30upx;
  box-sizing: border-box;
  padding-bottom: 210upx;
  overflow: auto;
}

.make_msg_box {
  width: 100%;
  padding: 30upx 0upx 40upx 0upx;
  box-sizing: border-box;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 24upx;
}

.make_msg_box .success_icon {
  width: 120upx;
  height: 120upx;
  margin-bottom: 30upx;
}

.make_msg_box .title {
  text-align: center;
  font-size: 36upx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333;
  text-align: left;
}

.tips {
  padding: 40upx 30upx;
  box-shadow: 0px 0px 40upx 0px rgba(0, 0, 0, 0.06);
  border-radius: 24upx;
  margin-top: 30upx;
  background-color: #fff;
}

.tips_name {
  font-size: 30upx;
  color: rgba(85, 85, 85, 1);
  line-height: 44upx;
  text-align: justify;
}

.btn_list {
  height: 100upx;
  display: flex;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
}

.btn_item {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36upx;
  font-weight: 500;
  color: rgba(166, 166, 166, 1);
  background-color: #fff;
  width: 50%;
}

.btn_item_width100 {
  width: 100%;
}
</style>