<template>
  <div class="panel">
    <div class="title">
      <h3>组件</h3>
    </div>
    <div class="list-wrapper">
      <div class="list">
        <fp-aside-panel-component-item
            v-for="item in items"
            @click="addItemToEditor(item)"
            :key="item.t"
            :icon="item.t"
            :title="item.name"
            desc="点击创建"/>
      </div>
    </div>
  </div>
</template>

<script>
import { uniqueId } from '@/store/modules/fastposter/poster'
import { mapMutations } from "vuex"
import FpAsidePanelComponentItem from "./FpAsideComponentItem"
export default {
  name: "FpAsidePanelComponent",
  components: {FpAsidePanelComponentItem},
  data() {
    return {
      items: [
        {t: 'text', name: '文字', v: '请输入文字', w: 220, h: 42, s: 42},
        {t: 'image', name: '图片', v: 'https://fastposter.net/dassets/default.png', w: 200},
        {t: 'avatar', name: '头像', v: 'https://fastposter.net/dassets/default.png', w: 80, h: 80},
        {
          t: 'qrcode',
          name: '二维码',
          v: 'https://fastposter.net/doc/',
          w: 120,
          h: 120,
          p: 0,
          c: '#000000',
          bgc: '#ffffff'
        },
      ]
    }
  },
  methods: {
    ...mapMutations({
      'addItem': 'poster/addItem',
      'record': 'snapshots/record',
    }),
    addItemToEditor(item) {
      this.addItem({...item,vd:item.name+uniqueId(6)})
      this.record(`新增组件: ${item.name}`)
      document.getElementById('key-down').focus()
    },
  }
}
</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);
}
</style>