<template>
  <window-size>
    <van-tabs v-model:active="activeTab" @click-tab="handleTabChange">
      <van-tab title="未缴费" name="unpaid">
        <appointment-management-branch pay-mark="5" :patient-id="patientId"/>
      </van-tab>
      <van-tab title="可退费" name="paid">
        <appointment-management-branch pay-mark="0" :patient-id="patientId"/>
      </van-tab>
      <van-tab title="已退费" name="refund">
        <appointment-management-branch pay-mark="1" :patient-id="patientId"/>
      </van-tab>
    </van-tabs>
  </window-size>
</template>

<script setup>
import AppointmentManagementBranch from "@/components/appointment-management-branch/index.vue";
import {useRouter} from "vue-router";
import {useStore} from "vuex";

const store = useStore()
const activeTab = store.state.appointmentManagementActiveTab

const router = useRouter()
const patientId = router.currentRoute.value.params.patientId

const handleTabChange = (val) => {
  store.dispatch({
    type: 'storeAppointmentManagementActiveTab',
    appointmentManagementActiveTab: val.name
  })
}
</script>