<template>
  <div class="mynav">
    <swiper
      :autoplay="false"
      :style="{'height': height + 'rpx' }"
    >
      <swiper-item v-for="(item, index) in cols" :key="index">
        <view :style="[formatStyle]">
          <u-grid :col="navs.columns" align="left" :border="false">
            <u-grid-item
              v-for="(c, i) in item"
              :key="i"
              class="grid-text"
              @click="clickHandler(c.url)"
            >
              <image
                :src="getIconLink(c.icon)"
                mode="widthFix"
                style="width: 88rpx; height: 88rpx;"
              />
              <text :style="{'color':navs.color}">{{ c.name }}</text>
            </u-grid-item>
          </u-grid>
        </view>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
export default {
  props: ["navs"],
  data() {
    return {
      cols: [],
      formatStyle: "",
      height: 186,
    };
  },
  created() {
    let tempArray = [];
    this.height = this.navs.rows * this.height;
    this.navs.navs.forEach((x, i) => {
      tempArray.push(x);
      if (
        ((i + 1) % (this.navs.columns * this.navs.rows) == 0 ||
          i == this.navs.navs.length - 1) &&
        (i != 0 || this.navs.navs.length == 1)
      ) {
        this.cols.push(tempArray);
        tempArray = [];
      }
    });
    if (this.navs.showImg) {
      this.formatStyle = {
        backgroundColor: this.navs.backgroundColor,
        backgroundImage: `url('${this.backgroundPicUrl}');`,
        backgroundPosition: this.navs.position,
        backgroundSize: `${this.navs.backgroundWidth}% ${this.navs.backgroundHeight}%;`,
      };
    } else {
      if (this.navs.backgroundColor.indexOf("#") == -1) {
        this.navs.backgroundColor = "#" + this.navs.backgroundColor;
      }
      this.formatStyle = { backgroundColor: this.navs.backgroundColor };
    }
  },
  methods: {
    clickHandler(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style>
.mynva .grid-text {
  font-size: 28rpx;
  margin-top: 4rpx;
  color: "#330330";
}
.grid-text view{
  background: transparent!important;
}
</style>
