<template>
  <div class="Si-card Spack">
    <service-title title="到店套餐" />
    <ul class="Spack-list">
      <li v-for="(item, index) in packageContents" :key="index" class="Spack-list-li">
        <div class="Spack-list-title cirli">{{ item.title }}</div>
        <div v-for="(cItem, cIndex) in item.packageDetails" :key="cIndex" class="Spack-list-item">
          <span class="Spack-list-item__title">{{ cItem.packageTitle }}</span>
          <span class="Spack-list-item__count">{{ cItem.packageCntStr }}</span>
          <span class="Spack-list-item__price">{{ cItem.packagePrice }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import ServiceTitle from '../../components/serviceTitle.vue';
export default {
  components: {
    ServiceTitle
  },
  props: {
    packageContents: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  }
};
</script>
<style lang="less" scoped>
.Spack {
  &-list {
    &-li {
      margin-top: 18px;
    }
    &-title {
      font-weight: bold;
    }

    &-item {
      .text-size(13);
      padding-left: @padding-xs + 2px;
      margin-top: @padding-sm;
      display: flex;
      &__title {
        flex: 6;
      }
      &__count {
        color: @gray-4;
        flex: 2;
        text-align: right;
      }
      &__price {
        font-weight: bold;
        flex: 3;
        text-align: right;
      }
    }
  }
}
</style>
