<template>
  <div class="influence-wrap">
    <div class="sider">
       <div
        class="sider-btn"
        :class="{ siderBtnActive: item.isActive }"
        @click="handleClickLeftSiderBtn(item,index)"
        v-for="(item, index) in siderBtnList"
        :key="index"
      >
        <div class="btn-text">{{ item.name }}</div>
        <div class="btn-icon">
          <el-icon v-if="item.isActive" color="#fff"
            ><CaretRight
          /></el-icon>
        </div>
      </div>
    </div>
    <div class="main">
      <router-view />
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import router from "@/router";

const siderBtnList = ref([
  {
    name: "对华产业影响",
    isActive: true,
    path: "/billLayout/influence/industry",
  },
  // {
  //   name: "对华科研影响",
  //   isActive: false,
  //   path: "/billLayout/influence/scientificResearch",
  // },
]);

const handleClickLeftSiderBtn = (item,index) => {
  siderBtnList.value.forEach(item => {
    item.isActive = false
  })
  siderBtnList.value[index].isActive = true
  router.push(item.path);
};

</script>

<style lang="scss" scoped>
.influence-wrap {
   display: flex;
  height: 879px;
  // background: (243, 243, 244, 1);
  .sider {
    width: 160px;
    .sider-btn {
      margin-top: 20px;
      margin-left: 10px;
      width: 140px;
      height: 32px;
      display: flex;
      line-height: 32px;
      border-radius: 16px;
      cursor: pointer;
      .btn-text {
        width: 110px;
        height: 32px;
        line-height: 32px;
        text-align: left;
        box-sizing: border-box;
        padding-left: 24px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        color: rgba(95, 101, 108, 1);
      }
      .btn-icon {
        width: 22px;
        padding-top: 2px;
      }
    }
    .siderBtnActive {
      background: var(--color-main-active);
      .btn-text {
        color: #fff !important;
      }
    }
  }
}
</style>
