<template>
  <div class="payment-success">
    <van-nav-bar title="支付完成" @click-right="autoSubmit(closePage)">
      <template #right>
        <van-icon name="close" size="18" /><span class="nav-bar-text">关闭</span>
      </template>
    </van-nav-bar>

    <div class="main-box">
      <div class="icon-wrapper">
        <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="icon-success">
          <path fill="currentColor" d="M512 64a448 448 0 1 1 0 896 448 448 0 0 1 0-896zm-55.808 536.384-99.52-99.584a38.4 38.4 0 1 0-54.336 54.336l126.72 126.72a38.272 38.272 0 0 0 54.336 0l262.4-262.464a38.4 38.4 0 1 0-54.272-54.336L456.192 600.384z"></path>
        </svg>
        <div class="result_title">
          <p>支付成功</p>
        </div>
      </div>

      <div class="pay-brief-wrapper">
        <div class="brief-line">
          <div class="left-column">
            就诊人：
          </div>
          <div class="right-column">
            {{createOrderRequest.patientName}}
          </div>
        </div>
        <div class="brief-line">
          <div class="left-column">
            门诊ID：
          </div>
          <div class="right-column">
            {{createOrderRequest.patientId}}
          </div>
        </div>
        <div class="brief-line">
          <div class="left-column">
            缴费类别：
          </div>
          <div class="right-column">
            {{createOrderRequest.body}}
          </div>
        </div>
        <div class="brief-line">
          <div class="left-column">
            支付金额：
          </div>
          <div class="right-column money-color">
            ￥{{createOrderRequest.cashpayAmt}}
          </div>
        </div>
        <div class="brief-line">
          <div class="left-column">
            支付时间：
          </div>
          <div class="right-column">
            {{createOrderRequest.payTime}}
          </div>
        </div>
        <div
            v-if="createOrderRequest.body === '挂号费' && createOrderRequest.deptPos"
            class="registration-note"
        >
          您已成功预约
          <van-tag type="primary">
            {{createOrderRequest.date}} {{createOrderRequest.apValue}}
          </van-tag>
          <van-tag type="primary">
            {{createOrderRequest.deptName}}
          </van-tag>
          <van-tag type="primary">
            {{createOrderRequest.doctorName}}医生
          </van-tag>
          门诊，请您按预约时间来院就诊。
          <br/>
          就诊地点：
          <van-tag type="primary">
            {{createOrderRequest.deptPos}}
          </van-tag>
          。
          <br />
          就诊前请先至就诊楼层分诊台分诊。
          感谢您的配合，祝您就诊顺利！
        </div>
      </div>
      <div style="text-align: center;margin: 24px 0 12px 0">
        <van-button
            size="small"
            type="warning"
            plain
            round
            style="width:120px"
            @click="checkMyOrder"
        >
          查看订单
        </van-button>
        <van-button
            size="small"
            type="warning"
            round
            style="width:120px;margin-left: 12px"
            @click="autoSubmit(toHome)"
        >
          回到首页
        </van-button>

      </div>
    </div>

    <div v-if="createOrderRequest.orderType === 2" class="comment-wrapper">
      <div class="comment-bar-title">
        <div class="comment-bar-title_icon">
          <van-icon name="comment" />
        </div>
        <div class="comment-bar-title_text">
          服务评价
        </div>
        <div class="comment-bar-title_subtext">
          请为本次医生服务进行评价
        </div>
      </div>

      <div class="comment-content-box">
        <div>
          <span style="color: #333333; font-size: 14px">评分：</span>
          <van-rate
              v-model="comment.commentLevel"
              :size="20"
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
          />
          <span style="margin-left: 12px; font-size: 12px; color: rgb(255,0,0)">({{rateLevelExplain}})</span>
        </div>
        <van-field
            v-model="comment.commentContent"
            rows="3"
            autosize
            type="textarea"
            placeholder="您对医生的服务还有哪些建议或意见"
            style="border: 1px solid lightgray; border-radius: 5px; margin-top: 12px"
        />
        <div class="comment-submit-box">
          <van-button
              size="small"
              type="danger"
              round
              plain
              :disabled="disableSubmitComment"
              style="width: 120px"
              @click="submitComment(null)"
          >
            提交
          </van-button>
        </div>
      </div>
    </div>

    <van-popup v-model:show="showOrderDetail" position="top" :style="{ height: '100%' }">
      <wx-order-detail @close="showOrderDetail = false" />
    </van-popup>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import store from "@/store";
import {computed, reactive, ref} from "vue";
import {commitNewComment} from "@/api/comment";
import {showDialog} from "vant";
import WxOrderDetail from '@/components/wx-order-detail/index.vue'

const router = useRouter()
const createOrderRequest = store.getters.getCreateOrderRequest
if (createOrderRequest.orderType !== 6 && !createOrderRequest.patientId) {
  router.push('/404')
}

function toHome() {
  window.open('https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxbde6b16acad84204&redirect_uri=https://staticweb.hnthyy.cn/wxserver/redirect/page&response_type=code&scope=snsapi_base&state=1#wechat_redirect')
}

function closePage() {
  WeixinJSBridge.call('closeWindow')
}

function autoSubmit(callback) {
  if (createOrderRequest.orderType === 2 && !disableSubmitComment.value) {
    submitComment(callback)
  } else {
    callback()
  }
}

const comment = reactive({
  commentLevel: 5,
  commentContent: '',
  doctorName: '',
  hisOrdNum: '',
  patientName: '',
  patientId: ''
})

const rateLevelExplain = computed(() => {
  switch (comment.commentLevel) {
    case 5:
      return '非常满意'
    case 4:
      return '满意'
    case 3:
      return '一般'
    case 2:
      return '不满意'
    case 1:
      return '非常不满意'
  }
})

const showOrderDetail = ref(false)
function checkMyOrder() {
  showOrderDetail.value = true
}

const disableSubmitComment = ref(false)
function submitComment(callback) {
  comment.doctorCode = createOrderRequest.doctorCode
  comment.doctorName = createOrderRequest.doctorName
  comment.hisOrdNum = createOrderRequest.hisOrdNum
  comment.patientId = createOrderRequest.patientId
  comment.patientName = createOrderRequest.patientName
  commitNewComment(comment).then(res => {
    disableSubmitComment.value = true
    if (null === callback) {
      showDialog({
        type: 'success',
        message: '提交成功，感谢您的评价！',
      })
    } else {
      callback()
    }
  })
}
</script>

<style lang="scss">
.payment-success {
  height: 100vh;
  .main-box {
    background-color: white;
    padding: 12px 0;
  }
  .nav-bar-text {
    color: #1989fa;
    margin-left: 4px;
  }
  .icon-wrapper {
    width: 100%;
    text-align: center;
  }
  .icon-success {
    color: #67c23a;
    width: 64px;
    height: 64px;
  }
  .result_title {
    margin-top: 8px;
    > p {
      margin: 0;
      font-size: 14px;
      font-weight: bold;
      color: #303133;
      line-height: 1.3;
    }
  }
  .pay-brief-wrapper {
    margin-top: 20px;
    text-align: center;
    font-size: 14px;
  }
  .brief-line {
    display: flex;
    margin-bottom: 4px;
    > div {
      flex: 1;
    }
  }
  .registration-note {
    padding: 8px ;
    margin: 18px;
    text-align: left;
    border: 1px solid lightgray;
    box-shadow: #00a828 0 0 3px 0;
    .van-tag {
      margin-right: 2px;
    }
  }
  .left-column {
    text-align: left;
    padding-left: 20px;
  }
  .right-column {
    text-align: right;
    padding-right: 20px;
  }
  .money-color {
    color: orangered;
  }
  .comment-wrapper {
    background-image: linear-gradient(#fca46d, #fcd5b3);
    margin: 24px 12px;
    border-radius: 10px;
    padding-bottom: 12px;
  }
  .comment-bar-title {
    display: flex;
    align-items: center;
    padding: 4px 0 2px 16px;
  }
  .comment-bar-title_icon {
    color: #dc2424;
    font-size: 18px;
    margin-top: 3px;
  }
  .comment-bar-title_text {
    color: #dc2424;
    margin-left: 6px;
    font-size: 14px;
    line-height: 30px;
  }
  .comment-bar-title_subtext {
    margin-left: 8px;
    font-size: 12px;
    color: white;
    line-height: 30px;
  }
  .comment-content-box {
    background-color: white;
    margin: 0 12px;
    padding: 12px;
  }
  .comment-submit-box {
    width: 100%;
    margin-top: 12px;
    text-align: center;
  }
}
</style>