<template>
  <div class="panel">
    <div class="title">
      <h3>图层</h3>
    </div>
    <div class="list-wrapper">
      <div class="list">
        <div class="fp-component-layer"
             :class="{'active': item.active, 'lock': item.lock}"
             v-for="item in p.items"
             :key="item.uuid"
             @click="setActiveItemId(item.uuid)">
          <span style="margin-left: 10px;">{{ maxNum - item.z }}</span>
          <i class="iconfont" :class="[`icon-${item.t}`]"></i>
          <span v-if="item.vd">{{ item.vd }}</span>
          <span v-if="!item.vd">未设置参数名称</span>
        </div>
      </div>
      <fp-empty :data="p.items"/>
    </div>
  </div>
</template>

<script>
import {mapMutations, mapState} from "vuex";
import FpEmpty from "../../common/FpEmpty";

export default {
  name: "FpAsidePanelLayer",
  components: {FpEmpty},
  data() {
    return {
      drag: false
    }
  },
  computed: {
    ...mapState({
      'p': state => state.poster.p
    }),
    maxNum() {
      return this.p.items.length + 1;
    }
  },
  methods: {
    ...mapMutations({
      'setActiveItemId': 'poster/setActiveItemId',
      'layerSort': 'poster/layerSort',
    })
  }
}
</script>

<style scoped>
.title {
  padding: 17px 24px;
  height: 56px;
  box-sizing: border-box;
}

.title h3 {
  font-size: 16px;
  line-height: 22px;
  color: #000;
  font-weight: 500;
  user-select: none;
  padding: 0;
  margin: 0;
}

.list-wrapper {
  overflow-y: auto;
  height: calc(100vh - 111px);
}

.list {
  display: flex;
  flex-direction: column-reverse;
}

.fp-component-layer {
  border-radius: 4px;
  height: 40px;
  color: #33383e;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin: 0 12px 12px;
  user-select: none;
  background-color: #f6f7f9;
}

.fp-component-layer.active {
  /*background-color: #9da3ac;*/
  /*background-color: #00000014;*/
  background-color: #33383e33;
  /*color: #ffffff;*/
}

.fp-component-layer .iconfont {
  margin: 0 10px;
  /*border: 1px solid #f00;*/
  width: 28px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  border-radius: 4px;
  font-size: 20px;
  box-shadow: 1px 1px 12px rgba(0, 0, 0, .2);
}

.fp-component-layer.lock .iconfont {
  box-shadow: 1px 1px 12px #e46472aa;
  color: #e46472;
}

</style>