<template>
  <a-row class="sider-pro"  >
    <a-col class="sider-pro-title" ><div class="title" >{{props.title}}</div></a-col>
    <a-col
      class="sider-pro-item"
      v-for="item in props.siders"
      :key="item.title"
      @click="changeSider(item)"
    >
      <div :class="['title', state.active == item.title ? 'active' : '']" >{{item.title}}</div>
    </a-col>
  </a-row>
</template>

<script lang="ts" setup name="SiderPro" >
import { reactive } from 'vue'

export interface SiderItemProps {
  title: string,
  children: Partial<SiderItemProps>[],
  link: string
}

export interface SiderProProps {
  title: string,
  siders: Partial<SiderItemProps>[]
}

const initProps: Partial<SiderProProps> = {
  title: '云服务器列表',
  siders: [
    { title: '总览' },
    { title: '事件' }
  ]
}

const props = initProps

const state = reactive({
  active: '总览'
})

const changeSider = (records: SiderItemProps) => state.active = records.title

</script>

<style lang="less" scoped >
.sider-pro {
  width: 188px;
  height: 100%;
  background-color: #fff;
  border-left: 1px solid #c3c5ca;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  overflow-y: scroll;
  // scrollbar-width: none;
  scrollbar-width: 0;
  /* Firefox */
  -ms-overflow-style: none;
  .sider-pro-title {
    width: 100%;
    height: 51px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    .title {
      width: calc(100% - 40px);
      height: 100%;
      border-bottom: 1px solid #c3c5ca;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
    }
  }
  .sider-pro-item {
    width: 100%;
    height: 38px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    cursor: pointer;
    .title {
      padding-left: 8px;
      box-sizing: border-box;
      border-left: 1px solid transparent;
    }
    .active {
      border-left: 1px solid #5e7ce0;
      color: #526eec;
      box-sizing: border-box;
    }
  }
}
</style>
