<template>
  <div class="brand-list" v-if="showList || !render" :style="{'padding-top': (levelMargin / 16 + 'em'),'padding-bottom': (levelMargin / 16 + 'em'),'padding-left': (verticalMargin / 16 + 'em'),'padding-right': (verticalMargin / 16 + 'em'),'--lineHeight': lineHeight / 16 + 'em','--columnHeight': columnHeight / 16 + 'em','--columnDistance': columnHeight / 16 / 2 + 'em','--pictureBackgroundColor': pictureBackgroundColor}">
    <div v-if="skeletonLoading">
      <SkeletonBlock :loading="skeletonLoading" :type="'flow'" />
    </div>
    <div class="list flex" :style="{'border-radius': moduleRadius / 16 + 'em','background': modelBackgroundColor}">
      <div class="item" v-for="(item, index) in list" :key="index" :style="{'margin-bottom':index == list.length-1?lineHeight / 16 + 'em':''}">
        <div class="ItemModule ItemModule1" :style="{'margin-top':lineHeight / 16 + 'em', 'margin-left':index%2==0?columnHeight / 16 + 'em':columnHeight / 16 / 2 + 'em', 'margin-right':index%2==1?columnHeight / 16 + 'em':columnHeight / 16 / 2 + 'em'}">
          <ItemModule :img="item.brandLogo" :name="item.brandName" :des="item.remark" @click="itemClick(item)">
          </ItemModule>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ItemModule from "./ItemModule.vue";
import SkeletonBlock from "./SkeletonBlock.vue";
const app = getApp();
export default {
  name: "brand-list",
  props: {
    render: {
      type: Boolean,
      default: true,
    },
    datas: {
      type: Object,
      default: () => { return {} },
    },
  },
  data() {
    return {
      skeletonLoading: true,
      loading: false,
      finished: false,
      showList: true,
      list: [],
    }
  },
  components: {
    ItemModule,
    SkeletonBlock
  },
  computed: {
    moduleRadius() {
      return this.datas.componentData.moduleRadius;
    },
    levelMargin() {
      return this.datas.componentData.levelMargin;
    },
    verticalMargin() {
      return this.datas.componentData.verticalMargin;
    },
    lineHeight() {
      return this.datas.componentData.lineHeight;
    },
    columnHeight() {
      return this.datas.componentData.columnHeight;
    },
    modelBackgroundColor() {
      return this.datas.componentData.modelBackgroundColor;
    },
    pictureBackgroundColor() {
      return this.datas.componentData.pictureBackgroundColor;
    }
  },
  created() { },
  mounted() {
    this.skeletonLoading = true;
    if (!this.render) {
      this.skeletonLoading = false;
    }
    this.init();
  },
  methods: {
    init() {
      console.log("--------------91")
      let query = { page: 1, rows: 100000 };
      app.goodsApi.queryProductBrand(query).then(res => {
        if (res.data.code == 200) {
          res.data.data.list.forEach(item => {
            item.brandLogo = app.DFSImg(item.brandLogo, 400, 400, null, 1);
            item.firstLetter = item.brandName.slice(0, 1);
          })
          console.log(res.data, '----------------100')
          this.list = res.data.data.list.sort((a, b) => a.firstLetter.localeCompare(b.firstLetter, 'zh'));
          console.log(this.list, '----------------list')
        }
        this.skeletonLoading = false;
      })
    },
    itemClick(item) {
      if (!this.render) {
        return;
      }
      let productInfoReq = {
        brandIdList: [item.id]
      }
      app.$themeToLink({
        type: 1,
        link: `/goodsSearch/goodsSearch?productInfoReq=${JSON.stringify(productInfoReq)}`,
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.brand-list {
  .list {
    flex-wrap: wrap;

    .item {
      width: 50%;

      .ItemModule1 {
        // margin-top: var(--lineHeight);

        .product-img {
          background: var(--pictureBackgroundColor);
        }
      }
    }

    .item:nth-child(2n - 1) {
      .ItemModule1 {
        // margin-left: var(--columnHeight);
        // margin-right: var(--columnDistance);

      }
    }

    .item:nth-child(2n) {
      .ItemModule1 {
        // margin-left: var(--columnDistance);
        // margin-right: var(--columnHeight);
      }
    }

    .item:last-child {
      // margin-bottom: var(--lineHeight);
    }

  }
}
</style>