<template>
  <van-tabs color="#FD9A00">
    <van-tab title="行程路线">
      <div v-html="content" class="pt-10"></div>
    </van-tab>
    <van-tab title="费用说明">
      <div v-html="costDescription" class="pt-10"></div>
    </van-tab>
    <van-tab title="预定须知">
      <div v-html="bookingNotice" class="pt-10"></div>
    </van-tab>
  </van-tabs>
</template>

<script setup>
const props = defineProps({
  detailData: {
    type: Object,
    default: () => {},
  },
});

const content = computed(() => {
  return props.detailData?.tourismContent?.content?.replace(
    /<img/g,
    "<img style='width:100%; height:auto;'"
  );
});
const costDescription = computed(() => {
  return props.detailData?.tourismContent?.costDescription?.replace(
    /<img/g,
    "<img style='width:100%; height:auto;'"
  );
});
const bookingNotice = computed(() => {
  return props.detailData?.tourismContent?.bookingNotice?.replace(
    /<img/g,
    "<img style='width:100%; height:auto;'"
  );
});
</script>

<style lang="scss" scoped></style>
