<template>
  <div class="page">
    <div class="layler">
      <div
        class="celiangitem"
        v-for="(item,index) in dataatrr"
        :key="item"
        @click="selectItem(index)"
        :class="{active:changeColor(index),unicolor:showactive==0,
        border:index==2,border1:index==4,backgroundimg:index==3,}"
      >{{item}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['showactive'],
  data() {
    return {
      selectindex: 10,
      boxStatus: false,
      dataatrr: [
        '隔离对象',
        '隐藏对象',
        '显示所有',
        '填充',
        '重置',
        '属性'
      ]
    };
  },
  components: {

  },
  mounted() {

  },
  methods: {
    changeColor(index) {
      // 给右键增加置灰效果
      if (index === 2 || index === 3 || index === 4 || index === 5) {
        return false;
      }
      if (index === this.selectindex) {
        return false;
      }
    },
    selectItem(index) {
      const that = this;
      that.selectindex = index;
      switch (index) {
      case 0:
        if (that.showactive !== 0) {
          that.$emit('selectElementBox', 'isolated');
        }
        break;
      case 1:
        if (that.showactive !== 0) {
          that.$emit('selectElementBox', 'setElementHide');
        }
        break;
      case 2:
        that.$emit('selectElementBox', 'setElementVisible');
        break;
      case 3:
        if (that.showactive !== 0) {
          that.$emit('selectElementBox', 'setElementColorAlt');
        }
        break;
      case 4:
        if (that.showactive !== 0) {
          that.$emit('selectElementBox', 'clearElementColor');
        }
        break;
      case 5:
        if (that.showactive !== 0) {
          console.log('============basi');
          that.$emit('selectElementBox', 'basicInfo');
          that.$eventHub.$emit('bus-basicInfoSwitch', 'fromViewModel');
        }
        break;
      default:
        that.$emit('selectElementBox', 'setElementVisible');
        break;
      }
    },
    showElementBox(status) {
      this.boxStatus = status;
      console.log('=======status', status);
    }
  }
};
</script>

<style scoped>
.layler {
  width: 110px;
  height: 240px;
  background-color: #ffffff;
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
  border: solid 1px #e6e8ec;
  padding-top: 5px;
}
.celiangitem {
  width: 100%;
  height: 40px;
  font-size: 14px;
  color: black;
  cursor: pointer;
  text-indent: 12px;
  line-height: 35px;
}
.active {
  color: #c9cfd6;
}
.unicolor {
  color: lightgray;
}
.border {
  border-bottom: 1px solid #e6e8ec;
  color: black;
}

.border1 {
  border-bottom: 1px solid #e6e8ec;
}
.backgroundimg {
  /* background: url('@/assets/icon_right.png') no-repeat right center; */
  background: url('../../assets/icon_right.png') no-repeat 90px center;
}
</style>
