<template>
  <div class="decree-overview-wrap">
    <div class="left">
      <div
        class="sider-btn"
        :class="{ siderBtnActive: siderBtnActive === item.name }"
        @click="handleClickLeftSiderBtn(item)"
        v-for="(item, index) in siderList"
        :key="index"
      >
        <div class="btn-text">{{ item.name }}</div>
        <div class="btn-icon">
          <el-icon v-if="siderBtnActive === item.name" color="#fff"
            ><CaretRight
          /></el-icon>
        </div>
      </div>
    </div>
    <div class="main">
       <router-view />
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import router from '@/router'

const siderList = ref([
  {
    name: "政令简介",
    path: "/decreeLayout/overview/introduction",
  },
  {
    name: "政令背景",
    path: "/decreeLayout/overview/background",
  },
]);

const siderBtnActive = ref("政令简介");

const handleClickLeftSiderBtn = (item) => {
  siderBtnActive.value = item.name
  router.push(item.path)
}


</script>

<style lang="scss" scoped>
.decree-overview-wrap {
  width: 1920px;
  height: 100%;
  overflow: hidden;
  background: rgba(247, 248, 249, 1);
  display: flex;
  .left {
    width: 160px;
    padding-top: 16px;
    .sider-btn {
      margin-top: 20px;
      margin-left: 20px;
      width: 120px;
      height: 32px;
      display: flex;
      border-radius: 16px;
      cursor: pointer;
      .btn-text {
        margin-left: 28px;
        width: 68px;
        height: 32px;
        line-height: 32px;
        text-align: left;
        box-sizing: border-box;
        font-size: 16px;
        font-family: Microsoft YaHei;
        color: rgba(95, 101, 108, 1);
      }
      .btn-icon {
        width: 22px;
        padding-top: 9px;
      }
    }
    .siderBtnActive {
      background: var(--color-main-active);
      .btn-text {
        color: #fff !important;
      }
    }
  }
  .main{
    width: 1760px;
    height: 901px;
  }
}
</style>