<template>
  <div class="mynav" :style="{ background: `${bg}`, height: `${height}rpx` }">
    <swiper
      :autoplay="false"
      style="min-height: 140rpx"
      :style="{ height: `${height}rpx` }"
    >
      <swiper-item v-for="(item, index) in cols" :key="index">
        <view :style="[formatStyle]">
          <!-- #ifdef MP-WEIXIN -->
          <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: 90rpx; height: 90rpx"
              />
              <text
                :style="{ color: navs.color }"
                style="font-size: 26rpx; margin-top: 10rpx"
                >{{ c.name }}</text
              >
            </u-grid-item>
          </u-grid>
          <!-- #endif -->
          <!-- #ifdef MP-ALIPAY -->
          <view class="gridnav-box">
            <view
              v-for="(c, i) in item"
              :key="i"
              class="grid-text"
              @click="clickHandler(c.url)"
            >
              <image
                :src="getIconLink(c.icon)"
                mode="widthFix"
                style="width: 90rpx; height: 90rpx"
              />
              <view
                :style="{ color: navs.color }"
                style="font-size: 26rpx; margin-top: 10rpx; text-align: center"
                >{{ c.name }}</view
              >
            </view>
          </view>
          <!-- #endif -->
        </view>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
export default {
  props: ["navs"],
  data() {
    return {
      cols: [],
      formatStyle: "",
      height: 204,
      bg: "",
    };
  },
  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 };
    }
    this.bg = this.formatStyle.backgroundColor;
  },
  methods: {
    clickHandler(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style scoped>
.mynva .grid-text {
  font-size: 28rpx;
  margin-top: 4rpx;
  color: "#330330";
}
.grid-text view {
  background: transparent !important;
}
/*  #ifdef MP-ALIPAY */
.mynav {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gridnav-box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 0 30rpx;
}
/* #endif */
</style>
