<template>
  <van-notice-bar
      v-if="payMark === '0'"
      left-icon="warning-o"
      text="未就诊且不超过预约时间段的微信自助挂号，可自助办理退费。"
  ></van-notice-bar>
  <van-empty :image="empty" description="没有查询到有效数据" v-if="showEmpty"></van-empty>
  <div v-else :style="boxWrapper">
    <van-cell
        v-for="item in mzyReqsList"
        :title="item.unitCode"
        :label="item.requestDayStr"
        is-link
        center
        :to="makeRedirectPath(item)">
      <template #default>
        <span style="color: orangered">{{ '￥' + item.totalAmount }}</span>
      </template>
    </van-cell>
  </div>
</template>

<script setup>
import empty from '@/assets/empty.png'
import {computed, onMounted, ref} from "vue";
import {listMzyReqrec} from '@/api/appointment.js'
import {useStore} from "vuex";

const props = defineProps({
  patientId: {
    type: String,
    required: true
  },
  payMark: {
    type: String,
    required: true
  }
})

const showEmpty = ref(true)
const store = useStore()
const screenSize = store.state.screenSize
const boxWrapper = {
  height: screenSize.h - 100 + 'px',
  marginTop: '3px',
  overflowY: 'auto'
}

const mzyReqsUnPaid = ref([])
const mzyReqsPaid = ref([])
const mzyReqsRefund = ref([])

const mzyReqsList = computed(() => {
  switch (props.payMark) {
    case '5':
      return mzyReqsUnPaid.value
    case '0':
      return mzyReqsPaid.value
    default:
      return mzyReqsRefund.value
  }
})

const makeRedirectPath = (mzyReq) => {
  let prefix = props.payMark === '5' ? '/payClinicAppointmentOrder/' : '/refundAppointment/'
  return prefix + props.patientId + '/' + mzyReq.times
}

onMounted(() => {
  const param = {patientId: props.patientId, payMark: props.payMark}
  listMzyReqrec(param).then(res => {
    showEmpty.value = res.length === 0
    switch (props.payMark) {
      case '5':
        mzyReqsUnPaid.value = res
        break
      case '0':
        mzyReqsPaid.value = res
        break
      default:
        mzyReqsRefund.value = res
        break
    }
  }).catch(() => {
    showEmpty.value = true
  })
})
</script>