<template>
  <div class="dec-nav" :style="navStyle">
    <div
      class="wrap"
      v-for="(list, i) in navList"
      :key="i"
      :style="i > 0 ? wrapMr : ''"
    >
      <div
        class="box"
        v-for="(item, j) in list"
        :key="j"
        :style="{ width: itemWidth }"
      >
        <div class="nav" :class="arg.iconStyle">
          <img
            class="image"
            v-if="arg.iconStyle !== 'no'"
            :src="decImgDomain(item.img, 'img-list.png')"
            :style="{ width: arg.iconSize + 'px', height: arg.iconSize + 'px' }"
          />
          <div class="text dec-truncate" :style="{ color: arg.color }">
            {{ item.title }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 设置导航栏
export default {
  inject: ["decImgDomain", "$isEmptyObj"],
  props: {
    tab: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      arg: {},
      itemWidth: "25%",
      navList: [],
    };
  },
  created() {
    this.arg = this.tab.arg;
    this.arg.rowNum = this.arg.rowNum || 4;
    this.initData();
  },
  watch: {
    "tab.refresh": function () {
      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(`marginTop:${this.arg.space}px`);
      return arr.join(";");
    },
  },
  methods: {
    initData() {
      const rowNum = this.arg.rowNum || 4;
      if (this.$isEmptyObj(this.arg.ids)) {
        for (let i = 0; i < rowNum * 2; i++) {
          this.arg.ids.push({
            img: "", //导航项图片地址
            title: "标题", //导航项文字
            linkArg: {},
          });
        }
      }
      this.itemWidth = parseInt((100 / rowNum) * 100) / 100 + "%";
      if (this.arg.styleArg == "row") {
        this.navList = [this.arg.ids.slice(0, rowNum)];
      } else {
        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;
    },
  },
};
</script>
