<template>
  <div class="yyzx_item_box">
    <div class="top_title">
      <div class="strip_box">
        <span class="strip"></span>
        <span>{{ title }}</span>
      </div>
      <div class="zd_icon_box" @click.stop="onClickZd">
        <van-icon name="arrow-down" :class="isZd ? 'is_zd' : 'no_zd'" />
      </div>
    </div>
    <div class="function_item_box" v-show="isZd">
      <div
        class="function_item"
        v-for="item in list"
        :key="item"
        @click="onClickSkip(item.path)"
      >
        <img :src="item.imgUrl" alt="" style="width: 55px; height: 55px" />
        <div class="item_name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
import emitter from "../utils/eventBus.js";
import { onBeforeRouteLeave } from "vue-router";
const props = defineProps({
  title: String, //左侧标题
  list: Array, //展示数据
});
const activeNames = ref(["1"]);
const isZd = ref(true); //是否折叠  true 不折叠
const router = useRouter();
//点击折叠
function onClickZd() {
  isZd.value = !isZd.value;
}
//跳转页面
function onClickSkip(url) {
  switch (url) {
    case "pr":
      emitter.emit("onClickPc", url);
      break;
    case "pc":
      emitter.emit("onClickPc", url);
      break;
    case "/dhcr":
      emitter.emit("onClickPc", url);
      break;
    case "rhjs":
      try {
        bridge.toFusionComputing();
      } catch (error) {}
      break;
    case "rw":
      router.replace("/rw");
      break;
    default:
      router.push(url);
  }
}
</script>

<style lang="scss" scoped>
@import "../assets/styles/mixin.scss";

.yyzx_item_box {
  @include font_color($font-color-theme);

  padding: 3vw;

  .top_title {
    display: flex;
    justify-content: space-between;

    .strip_box {
      display: flex;
      align-items: center;
    }

    .strip {
      display: inline-block;
      width: 4px;
      height: 14px;
      background-color: #1989fa;
      margin-right: 2vw;
      @include font_size($font_medium);
    }

    .zd_icon_box {
      width: 30px;
      height: 20px;
      text-align: right;
      // transition: 1.5s;
    }

    .is_zd {
      transform: rotate(-180deg);
      transition: 1s;
    }

    .no_zd {
      transition: 1s;
    }
  }

  .function_item_box {
    display: flex;
    flex-wrap: wrap;

    .function_item {
      // border: 1px solid red;
      width: 25%;
      text-align: center;
      margin-top: 4vw;

      .item_name {
        margin-top: 1.5vw;
        @include font_size($font_medium_s);
      }
    }
  }
}
</style>
