<template>
  <div class="nav-box no-events" :key="menuType">
    <div class="nav">
      <template v-for="(item, index) in list" :key="index">
        <div class="nav-item yse-events">
          <template v-if="index != 3">
            <div
                v-for="(ele, idx) in item"
                :key="idx + 1"
                @click="handleActive(ele.act,ele)"
                :class="['name', { active: active === ele.act, harm: ele.class }]"
            >
              {{ ele.name }}
            </div>
          </template>
        </div>
      </template>
      <div class="nav-btn yse-events" @click="toPage('zhgl')">查看巡园照片</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, toRefs } from "vue";
import { useStore } from "vuex";
import { ROLE_ENUM } from "@/api/enum.js";
import { useRouter } from "vue-router";
const store = useStore();
const router = useRouter();
const userinfo = store.getters.userinfo;
let emits = defineEmits(["select","handleAct"]);
let props = defineProps({
  val: {
    type: String,
    value: "znxy",
  },
});
let { val } = toRefs(props);
let menuType = ref(val.value);

function handleSelect(val, title) {
  if (val === menuType.value) {
    return;
  }
  menuType.value = val;
  if (val === "znxy") {
    emits("select", val, title);
  } else {
    router.push("/" + val);
  }
}

onMounted(()=>{
  initList()
})

const toPage = (path) => {
  router.push("/" + path);
}

const curGardenId = ref(userinfo.curGardenId);

const list = ref([
  // [
  //   {
  //     name: "生长",
  //     act: 3,
  //   },
  //   {
  //     name: "病害",
  //     act: 4,
  //     class: true,
  //   },
  //   {
  //     name: "虫害",
  //     act: 5,
  //     class: true,
  //   },
  // ],
  [
    {
      name: "负责人",
      act: 6,
    },
    {
      name: "编号",
      act: 7,
    },
  ],
]);
const active = ref(0);
const handleActive = (i,v) => {
  active.value = i;
  emits('handleAct',v)
};

const initList = async () =>{
  const { code, data } = await VE_API.regionalInformation.aPictureGarden({
    gardenId: curGardenId.value,
  });
  const arr = data.data[0].children.map((item,index) =>{
    return {
      ...item,
      act:index + 1
    }
  })
  arr.unshift({
    name:'果园',
    act:0,
    type:3
  })
  list.value.unshift(arr)
}
</script>

<style lang="scss" scoped>
.nav-box {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 3;
  .nav {
    position: relative;
    margin: 0 auto;
    margin-top: 100 / 16 * 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    .nav-item {
      background: rgba(2, 41, 55, 1);
      border-radius: 4px;
      border: 1px solid rgba(33, 174, 174, 0.51);
      color: #fff;
      padding: 3px 0;
      display: flex;
      justify-content: space-between;
      margin-right: 15px;
      cursor: pointer;
      .name {
        border-radius: 4px;
        padding: 6px 3px;
        margin: 0 5px;
        border: 1px solid transparent;

        &.active {
          background: rgba(2, 144, 136, 0.63);
          border: 1px solid #00fff0;
        }
        &.harm {
          color: #ff2929;
          position: relative;
          &::before {
            content: "";
            position: absolute;
            right: 0;
            top: 4px;
            width: 5px;
            height: 5px;
            background: #ff2929;
            border-radius: 50%;
          }
        }
      }
    }
    .nav-btn {
      padding: 6px 11px;
      font-weight: bold;
      font-size: 15px;
      color: #0ac9c1;
      background: rgba(2,41,55,0.8);
      border-radius: 17px;
      border: 1px solid rgba(33,174,174,0.51);
      cursor: pointer;
    }
  }
}
</style>
