<template>
  <div>
    <div class="newsSider bitTitle lastList" v-if="!isNest && hasOneShowingChild(item.children, item)"
      style="width:100px;" @click="goRoute(item)">
      <div class="concise">
        <i class="  concise-icon-item  iconfont" :class="item.meta.icon"></i>
        <i :class="item.collect == true ? 'el-icon-star-on' : 'el-icon-star-off'" class="star  concise-icon"
          @click.stop="handleClickWithDelay(item)"></i>
      </div>
      <p class="jump" :class="{ active: activeType(item.path, lastPath) }">
        {{ item.meta.title }}
      </p>
    </div>

    <div class="newsSider" v-if="!isNest && !hasOneShowingChild(item.children, item)">
      <p class="newsSider-title bitTitle secondTitle" style="">
        {{ item.meta.title }}
      </p>
      <div style="display: flex;flex-direction: column;">
        <div v-for="(route, index) in getPriceList(item.children)" class="lastList" :key="index"
          @click="goRoute(item, route)" style="width:100px">
          <div class="concise">
            <i class="  concise-icon-item iconfont" :class="route.meta.icon">
            </i>
            <i :class="route.collect == true ? 'el-icon-star-on' : 'el-icon-star-off'" class="star  concise-icon"
              @click.stop="handleClickWithDelay(route)"></i>
          </div>
          <p class="jump" :class="{ active: activeType(route.path, lastPath) }">
            {{ route.meta.title }}
          </p>
        </div>
      </div>
    </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: [],
    };
  },
  methods: {
    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));
      // console.log(price.reverse());
      return price
    },
    openChildren(item, index) {
      this.activeIndex = index;
      this.$emit("openChildren", item);
    },
    async collectClick(val) {
      // console.log(val.meta.icon);
      let params = {
        mcId: val.id,
        type: "",
      };
      if (val.collect == false) {
        params.type = "add";
      } else {
        params.type = "del";
      }
      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");
      }
    },
    handleClickWithDelay(val) {
      // 延时器时间，单位为毫秒
      const delay = 1000; // 可根据需求调整延时时间
      if (this.delayTimer) {
        clearTimeout(this.delayTimer); // 清除之前的延时器
      }
      this.delayTimer = setTimeout(() => {
        this.collectClick(val); // 延时后执行点击事件
        console.log(11);

      }, delay);
    },
    goRoute(val, lastPath) {
      let path, name;
      if (val.route) {
        path = val.route;
        name = val.meta.title;
      } else {
        if (!lastPath) {
          path = this.fatherPath + "/" + val.path;
          name = val.meta.title;
        } else {
          path = this.fatherPath + "/" + val.path + "/" + lastPath.path;
          name = lastPath.meta.title;
        }
      }
      let routeData = this.$router.resolve({
        path: path,
        name: name,
      });

      this.$emit("clearActive");
      window.open(routeData.href, "_self");

      // if (path == '/contractManagement/salesContract/addEditChange') {
      // 	this.judgeOn(routeData)
      // } else {
      // 	window.open(routeData.href, "_self");
      // }
      // 跳转成功后 关闭菜单
      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;
  // color: #ff870e;

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

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

.lastList {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lastList:hover {

  // background-color: #ebf4ff;
  // color:white
  .star {
    // color:red !important
    display: block;
  }
}

.iconfont {
  // color: #1890ff;
}

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

.concise-icon {
  font-size: 16px;
  color: #d04545;
}

.jump {
  font-size: 13px;
  // padding-left: 20px;
  margin: 4px 0 5px 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;
// }
.concise {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 13px;
  border: 1px solid transparent;
  border-radius: 5px;
  position: relative;
}

.concise:hover {
  box-shadow: 0px 2px 9px 0px rgba(42, 42, 42, 0.05);
  // border: 1px solid #1478f6;
}

.concise:hover .concise-icon {
  display: block;
}

.concise:hover .concise-icon-item {
  // color: #147af8;
}

.el-icon-star-on {
  color: #ff870e;
  // height: 25px;
  // width: 25px;
  font-size: 18px !important;
  position: absolute;
  right: -2px !important;
  top: -3px !important;
}

.concise-icon {
  position: absolute;
  right: 0;
  top: 0;
  margin: 2px;
  font-size: 14px;
  display: none;
}

.concise-icon-item {
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 30px;
  text-align: center;
  background: $activeColor;
  border-radius: 8px;
  color: #ffffff;
}
</style>