<template>
  <div class="fix-height-subpage column no-wrap q-pa-md">
    <q-tabs
      v-model="tab"
      dense
      class="text-grey"
      active-color="primary"
      indicator-color="primary"
      align="left"
    >
      <template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
        <q-tab :name="0" :label="$t('v102.vehicle.tabtitle0')"></q-tab>
      </template>
      <q-tab :name="1" :label="$t('v102.vehicle.tabtitle1')"></q-tab>
      <q-tab :name="2" :label="$t('v102.vehicle.tabtitle2')"></q-tab>
      <q-tab :name="3" :label="$t('v102.vehicle.tabtitle3')"></q-tab>
    </q-tabs>
    <template v-if="b2bUserInfo && b2bUserInfo.groupId == 2">
      <teamOrder v-if="tab == 0" :OrderId="OrderId"></teamOrder>
    </template>
    <CharteredBusOrder :type="tab" :OrderId="OrderId" v-if="tab != 0"></CharteredBusOrder>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  ref,
  reactive,
  toRefs,
  provide,
  onMounted,
  inject,
  watch,
} from "vue";
import useMetaModule from "../../module/meta/metaModule";
import { useI18n } from "vue-i18n";
import teamOrder from "./teamOrder.vue";
import CharteredBusOrder from "../CharteredBus/CharteredBusOrder.vue";
import { DirtionmaryHelper } from "../../config/dictionary";
import { currentRouter } from "src/router";
import { getStoreGetter } from "../../store/utils";
export default defineComponent({
  components: { teamOrder, CharteredBusOrder },
  setup() {
    const { t } = useI18n();
    let { setTitle } = useMetaModule();
    const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any;
    pageTitle.value = t("v102.vehicle.pageTitle");
    const b2bUserInfo = getStoreGetter<UserGetter>("user", "getUser");
    setTitle(pageTitle.value);
    const data = reactive({
      tab: 1,
      OrderId: null as any,
    });
    if (b2bUserInfo && b2bUserInfo.groupId == 2) {
      data.tab = 0;
    } else {
      data.tab = 1;
    }

    watch(
      () => data.tab,
      (o, n) => {}
    );
    if (currentRouter.currentRoute) {
      if (currentRouter.currentRoute.value.params.OrderId) {
        data.OrderId = currentRouter.currentRoute.value.params.OrderId;
      }
      if (currentRouter.currentRoute.value.params.pages < 4) {
        if (
          b2bUserInfo &&
          b2bUserInfo.groupId == 100 &&
          currentRouter.currentRoute.value.params.pages == 0
        ) {
          data.tab = 1;
        } else {
          data.tab = Number(currentRouter.currentRoute.value.params.pages);
        }
      } else {
        data.tab = 0;
      }
    }
    const menu = inject(DirtionmaryHelper.MENU_KEYS) as any;
    menu.value = 6;
    const methods = {};
    onMounted(() => {});
    return { ...toRefs(data), b2bUserInfo, ...methods };
  },
});
</script>
<style scoped>
.date-box :deep(.q-field__control) {
  height: 20px;
}

.add {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.shou {
  cursor: pointer;
}

.driver {
  font-size: 14px;
  font-weight: 400;
  border-bottom: 1px solid;
  margin-left: 50px;
}

.title {
  display: flex;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 10px;
}

.flex {
  display: flex;
  align-items: center;
}

th {
  padding: 10px 10px;
  font-size: 14px;
}

.table-title {
  font-size: 14px;
}

.sticky-rightrowspan-column-table2 th:last-child,
.sticky-rightrowspan-column-table2 tbody tr td {
  position: sticky !important;
  right: 0 !important;
  z-index: 1 !important;
  box-shadow: rgba(0, 0, 0, 0.05) -2px 0px 0px !important;
}
</style>
