<template>
  <div class="goods-list">
    <div v-if="hasChildren">
      <template v-for="(item, index) in list">
        <div class="goods-list-head" :key="'head' + index" v-if="item.children.length > 0">
          <slot :data="item">
            <h5>{{ item.title || "-" }}</h5>
            <small>
              {{ item.sub || "-" }}
              <svg-icon icon-class="triangle-right" />
            </small>
          </slot>
        </div>
        <div class="goods-list-children" v-if="item.children.length > 0" :key="'children' + index">
          <cr-row
            type="flex"
            class="goods-list-item"
            :class="{ 'not-allow': !it.allow }"
            v-for="(it, idx) in item.children"
            :key="idx"
            @click.native="clickItem(it)"
          >
            <cr-col span="7" class="goods-list-item-img">
              <cr-tag type="warning" shape="round" class="goods-list-item-glory" v-if="it.glory">
                {{ it.glory }}
              </cr-tag>
              <img :src="it.img" />
            </cr-col>
            <cr-col span="17" class="goods-list-item-info">
              <h5>{{ it.title || "-" }}</h5>
              <small>{{ it.sub || "-" }}</small>
              <div class="goods-list-item-price">
                <span class="goods-list-item-price-amount">¥{{ it.price || "--" }}</span>
                <span class="goods-list-item-price-unit" v-if="it.unit">{{ it.unit }}</span>
              </div>
            </cr-col>
          </cr-row>
          <cr-divider :hairline="false" :style="{ color: '#e3e5e8' }" />
        </div>
      </template>
    </div>
    <div v-else>
      <cr-row
        type="flex"
        class="goods-list-item"
        :class="{ 'not-allow': !it.allow }"
        v-for="(it, idx) in list"
        :key="idx"
        @click.native="clickItem(it)"
      >
        <cr-col span="7" class="goods-list-item-img">
          <cr-tag type="warning" shape="round" class="goods-list-item-glory" v-if="it.glory">
            {{ it.glory }}
          </cr-tag>
          <img :src="it.img" />
        </cr-col>
        <cr-col span="17" class="goods-list-item-info">
          <h5>{{ it.title || "-" }}</h5>
          <small>{{ it.sub || "-" }}</small>
          <div class="goods-list-item-price">
            <span class="goods-list-item-price-amount">¥{{ it.price || "--" }}</span>
            <span class="goods-list-item-price-unit" v-if="it.unit">{{ it.unit }}/月起</span>
          </div>
        </cr-col>
      </cr-row>
    </div>
  </div>
</template>
<script>
/**
 * @description: 商品列表，可以实现一级、二级嵌套显示
 * @param {type}
 * @return:
 */
export default {
  name: "GoodsList",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {
    // TODO
    hasChildren: function() {
      return this.list[0] && this.list[0].children && this.list[0].children.length > 0;
    }
  },
  methods: {
    clickItem(item) {
      if (!item.allow) {
        return;
      }
      if (item.url) {
        window.location.href = item.url;
      } else {
        const { id, itype } = item;
        this.$router.push({
          path: "/goods/detail",
          query: { id, type: itype }
        });
      }
    }
  }
};
</script>
<style lang="less" src="./index.less" scoped></style>
