<template>
  <div class="tabs">
    <cr-tabs sticky ref="GoodsTabs" @change="tabsChange" animated :color="underlineColor" :title-active-color="activeColor" :title-inactive-color="inactiveColor">
      <cr-tab v-for="(tab, index) in tabs" :key="index" :name="index" :title="tab.tabTitle">
        <component :is="tab.name" v-bind="tab.props" :style="transformStyle(tab.commonStyle)"></component>
      </cr-tab>
    </cr-tabs>
  </div>
</template>
<script>
  import CsGoods from '../Goods/index.vue';
  import CsCoupon from '../Coupon/index.vue';
  export default {
    name: 'goods-tabs',
    components: {
      CsGoods,
      CsCoupon
    },
    props: {
      list: {
        type: Array,
        default: () => []
      },
      childItem: {
        type: Object,
        default: () => ({ child: [] })
      },
      activeColor: {
        type: String,
        default: '#323233'
      },
      inactiveColor: {
        type: String,
        default: '#646566'
      },
      underlineColor: {
        type: String,
        default: '#1989fa'
      }
    },
    data() {
      return {

      }
    },
    computed: {
      tabs() {
        const list = this.list.map(tab => {
          const rs = {  ...tab };
          this.childItem?.child.forEach(ele => {
            if (tab.componentId === ele.id) Object.assign(rs, tab, ele);
          })
          return rs;
        });
        return list;
      }
    },
    mounted() {
      setTimeout(() => {
        this.$refs.GoodsTabs.resize();
      })
    },
    methods: {
      tabsChange(name) {
        // console.log('change', name);
      },
      transformStyle(styleObj = {}) {
        // console.log('transformStyle', styleObj);
        const style = {};
        for (const key of Object.keys(styleObj)) {
          style[key] = styleObj[key];
          if (key === 'backgroundImage' && style.backgroundImage) {
            style.background = `url(${style.backgroundImage}) no-repeat 0 0 / cover`;
          }
        }
        return style;
      }
    }
  }
</script>
<style lang="less" scoped>
  /deep/ .cr-tabs__nav {
    background-color: transparent;
  }
  /deep/ .cr-swipe-item {
    &:nth-child(odd) {
      background-color: #66c6f2;
    }
    &:nth-child(2n) {
      background-color: #39a9ed;
    }
    height: 500px;
  }
</style>