<template>
  <view class="dec-nav" v-if="navList.length > 0" :style="navStyle">
    <template v-if="arg.styleArg == 'group'">
      <view
        class="wrap"
        v-for="(list, i) in navList"
        :key="i"
        :style="i > 0 ? wrapMr : ''"
      >
        <view
          class="box"
          v-for="(item, j) in list"
          :key="j"
          :style="{ width: itemWidth }"
        >
          <view
            @click="toNavLink(item.linkArg)"
            class="nav"
            :class="arg.iconStyle"
          >
            <image
              v-if="arg.iconStyle !== 'no'"
              class="image"
              mode="aspectFit"
              :src="decImgDomain(item.img, 'img-list.png')"
              :style="{
                width: arg.iconSize + 'px',
                height: arg.iconSize + 'px',
              }"
            />
            <text class="text dec-truncate" :style="{ color: arg.color }">
              {{ item.title }}
            </text>
          </view>
        </view>
      </view>
    </template>
    <template v-else>
      <swiper
        class="swiper"
        :indicator-dots="false"
        :style="{ height: swiperH }"
      >
        <swiper-item v-for="(list, i) in navList" :key="i">
          <view class="wrap" style="flex-wrap: nowrap">
            <view
              class="box"
              v-for="(item, j) in list"
              :key="j"
              :style="{ width: itemWidth }"
            >
              <view
                @click="toNavLink(item.linkArg)"
                class="nav"
                :class="arg.iconStyle"
              >
                <image
                  v-if="arg.iconStyle !== 'no'"
                  class="image"
                  mode="aspectFit"
                  :src="decImgDomain(item.img, 'img-list.png')"
                  :style="{
                    width: arg.iconSize + 'px',
                    height: arg.iconSize + 'px',
                  }"
                />
                <text
                  class="text dec-truncate"
                  style="height: 25px"
                  :style="{ color: arg.color }"
                >
                  {{ item.title }}
                </text>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </template>
  </view>
</template>
<script>
export default {
  inject: ["decImgDomain", "decAxios"],
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      arg: {},
      itemWidth: "25%",
      navList: [],
    };
  },
  created() {
    this.arg = this.tab.arg;
    this.arg.space = parseInt(this.arg.space || 10);
    this.initData();
  },
  computed: {
    navStyle() {
      let arr = [];
      if (this.arg.bgColor) arr.push(`backgroundColor:${this.arg.bgColor}`);
      if (this.arg.space) {
        arr.push(`padding-top:${this.arg.space}px`);
        arr.push(`padding-bottom:${this.arg.space}px`);
      }
      return arr.join(";");
    },
    wrapMr() {
      let arr = [];
      if (this.arg.space) arr.push(`margin-top:${this.arg.space}px`);
      return arr.join(";");
    },
    swiperH() {
      if (this.arg.styleArg == "row") {
        let swiperH = "";
        const iconSize = parseInt(this.arg.iconSize || 0);
        switch (this.arg.iconStyle) {
          case "left":
            swiperH = `${2 * this.arg.space + iconSize}px`;
            break;
          case "top":
            swiperH = `${2 * this.arg.space + iconSize + 25}px`;
            break;
          case "no":
            swiperH = `${2 * this.arg.space + 25}px`;
            break;
          default:
            break;
        }
        return swiperH;
      }
      return "";
    },
  },
  methods: {
    initData() {
      const rowNum = this.arg.rowNum || 4;
      this.itemWidth = parseInt((100 / rowNum) * 100) / 100 + "%";
      this.navList = this.concatList(this.arg.ids || [], rowNum);
    },
    concatList(arr = [], num = 4) {
      let groups = [],
        i = 0,
        j = 0;
      const len = arr.length;
      while (i < len) {
        if (i == num) j++;
        if (!groups[j]) groups[j] = [];
        groups[j].push(arr[i]);
        i++;
      }
      return groups;
    },
    toNavLink(link) {
      if (link && link.path) {
        this.decAxios.decEventHandler(
          {
            moudle: "shopNav",
            type: "detail",
            desc: "跳绑定的链接",
          },
          link,
          null
        );
      }
    },
  },
};
</script>
