<template>
  <div>
    <div
        class="newsSider bitTitle lastList"
        v-if="!isNest && item.level == 3 && !item.hidden && !item.meta.hidden"
        flex="corss:center"
        @click="goRoute(item)"
        :key="key"
        style="display: flex; justify-content: space-between"
    >
      <p
          class="jump"
          :class="{ active: activeType(item.path, lastPath) }"
          @onfocus="getPlace($event)"
      >
        {{ item.meta.title }}
      </p>
      <!-- <i
        class="star"
        :class="item.collect === true ? 'el-icon-star-on' : 'el-icon-star-off'"
        :style="{
          color: item.collect === true ? '#ff870e' : '',
          fontSize: item.collect === true ? '26px' : '',
          padding: '0 20px 0 0',
        }"
        @click.stop="handleClickWithDelay(item)"
      ></i> -->
    </div>
    <div
        class="newsSider"
        v-if="!isNest && item.level == 2 && !item.hidden && !item.meta.hidden"
    >
      <p class="newsSider-title bitTitle secondTitle" style="">
        {{ item.meta.title }}
      </p>
    </div>
  </div>
</template>

<script>
import {SaveDelMenuData} from "@/api/apis/menuManage";

export default {
  name: "childrenSider",
  // computed: {
  // 	...mapState({
  // 		sidebar: state => state.app.sidebar,
  // 	}),
  inject: ["routerRefresh"], //在子组件中注入在父组件中出创建的属性

  props: {
    // childrenList: {
    // 	type: Array,
    // 	required: [],
    // },
    item: {
      type: Object,
      required: true,
    },
    fatherPath: {
      type: String,
      required: "",
    },
    lastPath: {
      type: String,
      required: "",
    },
    isNest: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      activeIndex: null,
      state: "",
      onlyList: [],
      isCollecting: false,
    };
  },
  computed: {
    key() {
      Math.random();
    },
  },
  watch: {},
  methods: {
    text(item) {
      console.log(item);
    },
    getPlace(e) {
      // console.log(e,"e")
    },
    activeType(path, lastPath) {
      let type = false;
      if (path === lastPath) {
        type = true;
      } else {
        type = false;
      }
      return type;
    },
    getPriceList(data) {
      let price = JSON.parse(JSON.stringify(data));
      // return price.reverse();//转换列表顺序
      return price;
    },
    openChildren(item, index) {
      this.activeIndex = index;
      this.$emit("openChildren", item);
    },
    async collectClick(val) {
      let params = {
        mcId: val.id,
        type: val.collect ? "del" : "add", // 根据 val.collect 的值确定操作类型
      };
      try {
        // 设置状态变量为 true，表示异步操作进行中
        this.isCollecting = true;
        let res = await SaveDelMenuData(params);
        if (res.code == 1) {
          val.collect = !val.collect;
          this.$vmNews(res.message, "success");
          this.$emit("refreshSider");
        } else {
          this.$vmNews("收藏失败", "danger");
        }
      } catch (error) {
        console.error(error);
      }
    },
    handleClickWithDelay(val) {
      // 延时器时间，单位为毫秒
      const delay = 1000; // 可根据需求调整延时时间
      if (this.delayTimer) {
        clearTimeout(this.delayTimer); // 清除之前的延时器
      }
      this.delayTimer = setTimeout(() => {
        this.collectClick(val); // 延时后执行点击事件
      }, delay);
    },
    goRoute(val, lastPath) {
      //路由跳转
      console.log(val, '路由')
      //11/08修改
      let routeData = this.$router.resolve({
        path: val.path,
        name: val.name,
        query: {mdmCode: val.meta.mdmCode, viewType: val.meta.viewType}
      });
      this.$emit("clearActive");
      window.open(routeData.href, "_self");
      // if (path == '/contractManagement/salesContract/addEditChange') {
      // 	this.judgeOn(routeData)
      // } else {
      // 	window.open(routeData.href, "_self");
      // }
      // 跳转成功后 关闭菜单
      this.$emit("closeOpenWin");
      this.$store.dispatch("app/toggleSideBar", "false");
      // this.$store.dispatch("app/changeChildrenHide", false);
    },
    judgeOn(routeData) {
      let el = this.$store.state.tagsView.visitedViews.filter((el) => {
        return el.path == "/contractManagement/salesContract/addEditChange";
      });
      if (el.length > 0) {
        this.$confirm(
            "当前页面已打开，继续打开页面原页面数据将被清除，是否继续?",
            "提示",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
        )
            .then(() => {
              window.open(routeData.href, "_self");
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消操作",
              });
            });
      } else {
        window.open(routeData.href, "_self");
      }
    },
    handleSelect() {
    },
    hasOneShowingChild(children = [], parent) {
      let returnType = true;
      if (!children) {
        children = [];
      }
      const showingChildren = children.filter((item) => {
        if (item.hidden) {
          returnType = false;
        } else {
          this.onlyOneChild = item;
          returnType = true;
        }
      });
      if (parent && parent.children && parent.children.length > 0) {
        returnType = false;
      }

      return returnType;
    },
  },
};
</script>

<style scoped lang="scss">
$activeColor: var(--bg-color, "#00aaff");

.bitTitle {
  font-family: SourceHanSansSC-regular;
}

::v-deep .newsSider {
  // height: 50px;
  // line-height: 50px;
  cursor: pointer;
  color: #101010;

  &-title.active {
    color: #000;
  }

  &-title {
    margin: 0;
    padding-left: 20px;
  }
}

.lastList:hover {
  background-color: #ebf4ff;

  // color:white
  .star {
    // color:red !important
    display: block;
  }
}

.secondTitle {
  border-left: 3px solid #1890ff;
  margin: 10px 0;
  padding: 2px 14px;
  font-size: 16px;
  font-weight: bold;
}

.jump {
  font-size: 14px;
  padding-left: 20px;
  margin: 0;
  height: 50px;
  line-height: 50px;
}

.jump.active {
  color: $activeColor;
}

.jump.active:hover {
  // color:white
}

.navbarSearch {
  width: 280px !important;

  ::v-deep .el-input--medium .el-input__inner {
    border: 1px solid #bbbbbb;
    border-radius: 15px;
    background-color: transparent;
  }

  ::v-deep .el-input__suffix {
    color: #1890ff;
    font-size: 24px;
  }
}

.star {
  font-size: 24px;
  line-height: 50px;
  margin-left: 20px;
  display: none;
}
</style>
