<template>
  <div id="pdf_5">
    <div class="module-title" v-if='vshowE'>
      <div style="font-size:36px;margin-top:40px;text-align:center;margin-bottom:20px;">
      团费说明
      </div>
    </div>
    <div class="expense" v-if='vshowE'>
      <div class="left">
        <div style="font-size:28px;margin-bottom:20px;">
          费用包含
        </div>
      </div>
      <div class="right" v-html="feature.feeInclude"></div>
      <div class="left">
        <div style="font-size:28px;margin-bottom:20px;">
          费用不含
        </div>
      </div>
      <div class="right"  v-html="feature.feeNonInclude"></div>
    </div>
    <div class="expense" v-if='dataList.selfpayingList && dataList.selfpayingList.length>0&&vshowE'>
      <div class="left">
        <div style="font-size:28px;margin-bottom:20px;">
          自理费用
        </div>
      </div>
      <div class="right">
        <table class="expense-table" cellspacing=0 cellpadding=0 style="text-align:left">
          <thead>
            <th>城市</th>
            <th>活动</th>
            <th>参考价格</th>
            <th>说明</th>
          </thead>
          <tbody>
            <tr v-for="(item,i) in dataList.selfpayingList" :key="i">
              <td>{{item.cityName}}</td>
              <td>{{item.itemName}}</td>
              <td>约{{item.estimatedCost}}</td>
              <td>{{item.explain}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <template  v-if='vshowF&&(feature.shopRemark||(dataList.shopList && dataList.shopList.length>0&&vshowF))'>
      <div class="module-title">
        <div  style="font-size:36px;margin-top:40px;text-align:center;margin-bottom:20px;">
          购物说明
        </div>
      </div>
      <div class="expense">
        <div class="left"></div>
        <div class="right">
          <div v-html="feature.shopRemark"></div>
        </div>
      </div>
      </template>
      <div class="expense" v-if="dataList.shopList && dataList.shopList.length>0&&vshowF">
        <div class="left" style="font-size:28px;margin-bottom:20px;">购物安排</div>
        <div class="right">
          <table class="expense-table" cellspacing=0 cellpadding=0 style="text-align:left">
            <thead>
              <th>城市</th>
              <th>购物店名称</th>
              <th>预计停留时间</th>
            </thead>
            <tbody>
              <tr v-for="(item,i) in dataList.shopList" :key="i">
                <td>{{item.cityName?item.cityName:''}}</td>
                <td>{{item.shopName}}</td>
                <td>{{item.visitTime}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div style="width: 100%;height:2px;"></div>
  </div>
</template>

<script>
export default {
  components: {

  },
  props: ["vshowE","dataList","feature","vshowF"],
  data() {
    return {

    };
  },

  methods: {},
  computed: {},
  watch: {
    feature: {
      handler(val, oldVal) {

      },
      deep: true,
      immediate: true
    }
  },
  mounted() {}
};
</script>

<style></style>
