<template>
  <div class="panel">
    <div class="list-wrapper">
      <div class="list">
        <el-collapse>
          <el-collapse-item title="酒款信息组件" name="1">
            <fp-aside-panel-component-item
                v-for="item in jkxxItems"
                @click="addItemToEditor(item)"
                :key="item.key"
                :icon="item.t"
                :title="item.name"
                desc="点击创建"/>
          </el-collapse-item>
          <el-collapse-item title="厂牌信息组件" name="2">
            <fp-aside-panel-component-item
                v-for="item in cpxxItems"
                @click="addItemToEditor(item)"
                :key="item.key"
                :icon="item.t"
                :title="item.name"
                desc="点击创建"/>
          </el-collapse-item>
          <el-collapse-item title="市售规格组件" name="3">
            <fp-aside-panel-component-item
                v-for="item in ssggItems"
                @click="addItemToEditor(item)"
                :key="item.key"
                :icon="item.t"
                :title="item.name"
                desc="点击创建"/>
          </el-collapse-item>
          <el-collapse-item title="其它常用组件" name="4">
            <fp-aside-panel-component-item
                v-for="item in qtcyItems"
                @click="addItemToEditor(item)"
                :key="item.key"
                :icon="item.t"
                :title="item.name"
                desc="点击创建"/>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex"
import FpAsidePanelComponentItem from "./FpAsideComponentItem"
export default {
  name: "FpAsidePanelComponent",
  components: {FpAsidePanelComponentItem},
  data() {
    return {
      // 酒款信息组件
      jkxxItems: [
        {t: 'text', name: '酒款名称', key: 'jkxx_jkmc', v: '酒款名称', w: 300, h: 42, s: 42},
        {t: 'text', name: '酒款英语名称', key: 'jkxx_jkywmc', v: '酒款英语名称', w: 400, h: 42, s: 42},
        {t: 'image', name: '酒款图片', key: 'jkxx_jktp', v: 'https://fastposter.net/dassets/default.png', w: 200},
        {t: 'image', name: '鱼眼标', key: 'jkxx_yyb', v: 'https://fastposter.net/dassets/default.png', w: 200},
        {t: 'text', name: '酒款系列', key: 'jkxx_jkxl', v: '酒款系列', w: 300, h: 42, s: 42},
        {t: 'text', name: '啤酒风格', key: 'jkxx_pjfg', v: '啤酒风格', w: 300, h: 42, s: 42},
        {t: 'text', name: '啤酒风格英语', key: 'jkxx_pjfgyw', v: '啤酒风格英语', w: 400, h: 42, s: 42},
        {t: 'text', name: '酒精度数', key: 'jkxx_jjds', v: '酒精度数', w: 300, h: 42, s: 42},
        {t: 'text', name: '苦度值', key: 'jkxx_kdz', v: '苦度值', w: 300, h: 42, s: 42},
        {t: 'text', name: '原麦汁', key: 'jkxx_ymz', v: '原麦汁', w: 300, h: 42, s: 42},
        {t: 'text', name: '产品介绍', key: 'jkxx_cpjs', v: '产品介绍', w: 300, h: 42, s: 42},
        {t: 'text', name: '星球评分', key: 'jkxx_xqpf', v: '星球评分', w: 300, h: 42, s: 42},
      ],

      // 厂牌信息组件
      cpxxItems: [
        {t: 'text', name: '品牌名称', key: 'cpxx_ppmc', v: '品牌名称', w: 300, h: 42, s: 42},
        {t: 'text', name: '品牌英语名称', key: 'cpxx_ppywmc', v: '品牌英语名称', w: 400, h: 42, s: 42},
        {t: 'text', name: '品牌所在地', key: 'cpxx_ppszd', v: '品牌所在地', w: 400, h: 42, s: 42},
        {t: 'avatar', name: '品牌LOGO', key: 'cpxx_pplogo', v: 'https://fastposter.net/dassets/default.png', w: 80, h: 80},
      ],

      // 市售规格组件
      ssggItems: [
        {t: 'text', name: '酒枪编号', key: 'ssgg_jjbh', v: '酒枪编号', w: 300, h: 42, s: 42},
        {t: 'text', name: '规格1', key: 'cpxx_gg1', v: '规格1', w: 220, h: 42, s: 42},
        {t: 'text', name: '价格1', key: 'cpxx_jg1', v: '规格1的价格', w: 450, h: 42, s: 42},
        {t: 'text', name: '规格2', key: 'cpxx_gg2', v: '规格2', w: 220, h: 42, s: 42},
        {t: 'text', name: '价格2', key: 'cpxx_jg2', v: '规格2的价格', w: 220, h: 42, s: 42},
      ],

      // 其它常用组件
      qtcyItems: [
        {t: 'text', name: '文字', key: 'qtcy_text', v: '请输入文字', w: 220, h: 42, s: 42},
        {t: 'image', name: '图片', key: 'qtcy_image', v: 'https://fastposter.net/dassets/default.png', w: 200},
        {t: 'avatar', name: '头像', key: 'qtcy_avatar', v: 'https://fastposter.net/dassets/default.png', w: 80, h: 80},
        {t: 'qrcode', name: '二维码', key: 'qtcy_qrcode', 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.key})
      this.record(`新增组件: ${item.name}`)
      document.getElementById('key-down').focus()
    },
  }
}
</script>

<style scoped>
.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>