<script>
/**
 * vs-func-menu 2022-05-26
 *
 * tabs 功能菜单数据 [] 参考 ./assets/json/dataConf.js
 * activeTabColor 一级菜单选中颜色   #ffe500
 * activeChildColor 二级菜单选中颜色   #ffe50099
 * mutex 二级菜单点击是否互斥 false
 * basebg 菜单底部背景图
 * tipable 是否显示tooltip false
 *
 * @tabClick 一级菜单点击回调
 * @childClick 二级菜单点击回调
 * 
 * setItemActive index Array/String   //checked true/false   设置菜单选中状态 
 */
export default {
  name: "vs-func-menu",
};
</script>
<script setup>
import { ref, reactive, onMounted, nextTick, getCurrentInstance } from "vue";

const props = defineProps({
  tabs: {
    type: Array,
    default: () => [],
  },
  activeTabColor: {
    type: String,
    default: "#ffe500",
  },
  activeChildColor: {
    type: String,
    default: "#ffe500",
  },
  basebg: {
    type: String,
    default: "",
  },
  mutex: {
    type: Boolean,
    default: false,
  },
  tipable: {
    type: Boolean,
    default: false,
  }
});

const { proxy } = getCurrentInstance();

const style = reactive({
  container: {},
  activeTab: {
    color: props.activeTabColor,
  },
  activeChild: {
    background: props.activeChildColor,
    background: `linear-gradient(90deg, ${props.activeChildColor
      } 20%, ${document.body.style.getPropertyValue("--auxiliary")} 95%)`,
  },
  child: {},
  base: {},
});
props.basebg
  ? (style.base.backgroundImage = `url(${props.basebg})`)
  : (style.base.background =
    document.body.style.getPropertyValue("--auxiliary"));

const vsFuncmenu = ref(null);
const childRef = ref(null);
onMounted(() => {
  const width = vsFuncmenu.value.offsetWidth;
  style.container.left = `calc(50vw - ${width / 2}px)`;
});

const emit = defineEmits(["tabClick", "childClick"]);
const activeIndexs = reactive({
  tab: -1,
  child: [],
});



const splitNum = ref(4);
const splitChilds = function (data = []) {
  let index = 0;
  let newArray = [];
  while (index < data.length) {
    newArray.push(data.slice(index, (index += splitNum.value)));
  }
  return newArray;
};

const returnIndex = function (index, index3, index2) {
  return index + "-" + (index3 + index2 * splitNum.value);
};

//对数据进行处理 初始化默认选中
props.tabs.forEach((item, index) => {
  const splitArr = splitChilds(item.children);
  splitArr.forEach((element, index2) => {
    element.forEach((val, index3) => {
      if (props.mutex) {
        if (val.checked) {
          activeIndexs.child = [returnIndex(index, index3, index2)];
        }
      } else {
        if (val.checked) {
          activeIndexs.child.push(returnIndex(index, index3, index2));
        }
      }
    });
  });
});

//一级菜单点击
const tabhandle = function (item, index) {

  // //深拷贝，移除响应式
  // const _itemClone = proxy.$lodash.cloneDeep(item);
  emit("tabClick", item, index, !(activeIndexs.tab === index));
  if (activeIndexs.tab === index) {
    activeIndexs.tab = -1;
    return;
  }
  activeIndexs.tab = index;
  nextTick(() => {
    if (item.children && item.children.length) {
      const cwidth = childRef.value[0].offsetWidth;
      style.child.left = `${-(cwidth - 90) / 2}px`;
    }

  });
};

//子菜单点击
const childhanle = function (item, index) {

  // //深拷贝，移除响应式
  // const _itemClone = proxy.$lodash.cloneDeep(item);

  if (activeIndexs.child.indexOf(index) !== -1) {
    emit("childClick", item, index, false);
    activeIndexs.child.splice(activeIndexs.child.indexOf(index), 1);
  } else {
    if (props.mutex) {
      activeIndexs.child = [index];
    } else {
      activeIndexs.child.push(index);
    }
    emit("childClick", item, index, true);
  }
};

//设置菜单选中状态

const setCheck = function (index, checked) {
  if (checked) {
    if (props.mutex) {
      activeIndexs.child = [index];
    } else {
      activeIndexs.child.push(index);
    }
  } else {
    if (activeIndexs.child.indexOf(index) !== -1) {
      activeIndexs.child.splice(activeIndexs.child.indexOf(index), 1);
    }
  }
}

const setItemActive = function (index, checked) {

  //判断index是不是数组
  if (Array.isArray(index)) {
    index.forEach(item => {
      setCheck(item, checked)
    });
  } else {
    setCheck(item, checked)
  }

};


defineExpose({
  setItemActive,
});

</script>

<template>
  <div :style="style.container" class="vs-funcmenu" ref="vsFuncmenu">
    <div class="vs-tabs">
      <div class="vs-tab--item" v-for="(item, index) in props.tabs" :key="index">
        <el-tooltip :disabled="!tipable" class="box-item" effect="dark" :content="item.label" placement="top-start">
          <div class="vs-tab--container" @click="tabhandle(item, index)">
            <img v-if="item.icon" :src="activeIndexs.tab === index ? item.activeIcon : item.icon" />
            <div class="vs-tab-icon" v-else>
              <el-icon class="is-loading">
                <Menu />
              </el-icon>
            </div>
            <span :style="activeIndexs.tab === index ? style.activeTab : ''">{{
                item.label
            }}</span>
          </div>
        </el-tooltip>
        <div v-if="activeIndexs.tab === index && (item.children && item.children.length)" class="vs-tab--child"
          ref="childRef" :style="style.child">
          <div class="vs-tab-child--split" v-for="(childs, index2) in splitChilds(item.children)" :key="index2">
            <div :style="
              activeIndexs.child.indexOf(
                returnIndex(index, index3, index2)
              ) !== -1
                ? style.activeChild
                : ''
            " class="vs-tab--child--item" v-for="(child, index3) in childs" :key="index3"
              @click="childhanle(child, returnIndex(index, index3, index2))">
              <img v-if="child.icon" :src="child.icon" />
              <span>{{ child.label }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="vs-base" :style="style.base"></div>
  </div>
</template>

<style  lang="scss" scope>
$main: var(--main);
$auxiliary: var(--auxiliary);
$light: var(--light);
$activeTabColor: var(--auxiliary);

.vs-funcmenu {
  position: absolute;
  top: 87vh;
  color: #fff;
  z-index: 9999;

  .vs-tabs {
    display: flex;
    justify-content: space-around;
    padding: 0px 10px;
    box-sizing: border-box;

    .vs-tab--item {
      text-align: center;
      width: 90px;
      margin: 0px 5px;
      position: relative;

      .vs-tab--container {
        cursor: pointer;

        img {
          width: 60px;
          height: 60px;
        }

        .vs-tab-icon {
          width: 60px;
          height: 60px;
          background: $main;
          border-radius: 50%;
          margin: auto;

          i {
            font-size: 30px;
            margin-top: 13px;
          }
        }

        span {
          display: inline-block;
          width: 100%;

          white-space: nowrap;
          /*文本强制一行显示*/
          overflow: hidden;
          /*文本溢出隐藏*/
          text-overflow: ellipsis;
          /*溢出的文本显示省略号*/
        }
      }

      .vs-tab--child {
        position: absolute;
        bottom: 95px;
        display: flex;
        justify-content: space-around;
        padding: 8px 3px;
        box-sizing: border-box;
        background: $light;
        box-shadow: 3px 3px 10px 3px rgba(0, 0, 0, 0.3);
        border: 1px $auxiliary solid;
        border-radius: 5px;

        .vs-tab-child--split {
          width: 140px;
          padding: 0px 5px;

          .vs-tab--child--item {
            cursor: pointer;
            width: 100%;
            background: $main;
            border-radius: 3px;
            padding: 7px;
            box-sizing: border-box;
            margin-bottom: 5px;
            text-align: left;
            overflow: hidden;

            img {
              width: 18px;
              height: 18px;
              padding: 0px 5px;
              float: left;
            }

            span {
              max-width: 80px;
              float: left;
            }
          }

          .vs-tab--child--item:last-child {
            margin-bottom: 0px;
          }
        }
      }

      .vs-tab--child::after {
        content: "";
        position: absolute;
        top: 100%;
        width: 0px;
        height: 0px;
        border: 8px solid $auxiliary;
        border-top-color: $auxiliary;
        border-bottom-color: transparent;
        border-left-color: transparent;
        border-right-color: transparent;
      }
    }
  }

  .vs-base {
    width: 100%;
    height: 50px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: -40px;
    border-radius: 5px;
  }
}
</style>
