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

const props = defineProps({
  tabs: {
    type: Array,
    default: () => [],
  },
  activeTabColor: {
    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,
  },
  base: {},
});
props.basebg
  ? (style.base.backgroundImage = `url(${props.basebg})`)
  : (style.base.background =
    document.body.style.getPropertyValue("--auxiliary"));

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

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


//对数据进行处理 初始化默认选中
props.tabs.forEach((item, index) => {
  if (props.mutex) {
    if (item.checked) {
      activeIndexs.tab = [index];
    }
  } else {
    if (item.checked) {
      activeIndexs.tab.push(index);
    }
  }
});


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

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

  // //深拷贝，移除响应式
  // const _itemClone = proxy.$lodash.cloneDeep(item);
  const checked = activeIndexs.tab.indexOf(index) === -1;
  emit("tabClick", item, index, checked);
  setCheck(index, checked)
};

//设置菜单选中状态


const setItemActive = function (index, checked) {

  //判断index是不是数组
  if (Array.isArray(index)) {
    index.forEach(item => {
      setCheck(item, checked)
    });
  } else {
    setCheck(index, 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.indexOf(index) !== -1) ? item.activeIcon : item.icon" />
            <div class="vs-tab-icon" v-else>
              <el-icon class="is-loading">
                <Menu />
              </el-icon>
            </div>
            <span :style="(activeIndexs.tab.indexOf(index) !== -1) ? style.activeTab : ''">{{
                item.label
            }}</span>
          </div>
        </el-tooltip>
      </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-base {
    width: 100%;
    height: 50px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    margin-top: -40px;
    border-radius: 5px;
  }
}
</style>
