<template>
  <div class="layer-wrap">
    <ul v-if="customStyle">
      <li
        class="item"
        :class="{active:editingElement===el}"
        v-for="(el,index) in customStyle.elements"
        :key="index"
        @click="selectedElement(el)">
        <span>{{ el.name }}</span>
        <i
          class="el-icon-view"
          :class="{show:el.style.display!=='none'}"
          @click.stop="handleShow(el)">
          {{ el.style.display==="none"?'显示':'隐藏' }}
        </i>
      </li>
      <li align="center">
        [ 点击图标控制显示隐藏 ]
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    editingElement () {
      return this.$store.state.app.editorElement
    }
  },
  props: {
    customStyle: {
      type: Object,
      default: () => null
    }
  },
  methods: {
    selectedElement (element) {
      this.$store.dispatch('setEditorElement', element)
    },
    handleShow (el) {
      let style = {
        display: el.style.display === 'none' ? 'block' : 'none'
      }
      el.style = Object.assign({}, el.style, style)
    }
  }
}
</script>

<style lang="scss" scoped>
.layer-wrap{
  width: 200px; padding: 10px; line-height: 2; overflow: auto;
}
.item{
  padding: 5px 10px; display: flex;justify-content: space-between; align-items: center;
  .el-icon-view{
    color: rgb(165, 165, 165); cursor: pointer;
  }
  .el-icon-view.show{
    color: $lightblue;
  }
}
.active{
  color: $blue; background: $blue1;
}
</style>
