<template>
  <div class="switch_warpper">
    <div :class="`mode__item ${innerMode === ListMode.Table ? 'active' : ''}`" @click="() => innerMode = ListMode.Table">
      <i class="el-icon-s-operation"></i>
    </div>
    <div :class="`mode__item ${innerMode === ListMode.DashBoard ? 'active' : ''}`" @click="() => innerMode = ListMode.DashBoard">
      <i class="el-icon-menu"></i>
    </div>
  </div>
</template>

<script>
import { ListMode } from "./../../pucColumns"

export default {
  name:'SwitchModeButton',
  props:['mode'],
  computed:{
    innerMode:{
      get(){
        return this.mode
      },
      set(value){
        this.$emit('update:mode',value)
      }
    }
  },
  data(){
    return {
      ListMode
    }
  },
  methods:{
    
  }
}
</script>

<style lang="scss" scoped>
.switch_warpper{
  display: flex;
  font-size: 16px;
  justify-content: space-between;

  .mode__item {
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;

    &.active{
      background: #fff;
      box-shadow: 0 2px 6px 0 rgba(0,0,0,.07);
    }
  }
}
</style>
