<template>
  <div class="add-component">
    <div class="config-header">基础组件</div>
    <div class="parts-list">
      <div
        v-for="(item, index) in basicComponents"
        :key="index"
        class="parts-item"
        @click="selectItem(item)"
      >
        <div class="parts-icon">
          <i :class="item.icon"></i>
        </div>
        <div class="parts-name">{{ item.name }}</div>
      </div>
    </div>
    <div class="config-header">商品组件</div>
    <div class="parts-list">
      <div
        v-for="(item, index) in commodityComponents" :key="index"
        class="parts-item"
        @click="selectItem(item)"
      >
        <div class="parts-icon">
          <i :class="item.icon"></i>
        </div>
        <div class="parts-name">{{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      basicComponents: [
        {
          icon: 'el-icon-document',
          name: '富文本框',
          keyCode: 'Editor',
          content: {
            html: ''
          }
        },
        {
          icon: 'el-icon-picture-outline',
          name: '图片',
          keyCode: 'ImageBox',
          content: {
            fillStyle: 1,
            number: 3,
            list: [
              {
                href: '',
                src: '',
                isCustom: '',
                collapseState: false
              },
              {
                href: '',
                src: '',
                isCustom: '',
                collapseState: false
              },
              {
                href: '',
                src: '',
                isCustom: '',
                collapseState: false
              },
              {
                href: '',
                src: '',
                isCustom: '',
                collapseState: true
              }
            ]
          }
        },
        {
          icon: 'el-icon-files',
          name: '轮播',
          keyCode: 'Carousel',
          content: {
            fillStyle: 1,
            interval: 5000,
            list: [
              {
                href: '',
                src: '',
                isCustom: '',
                collapseState: false
              }
            ]
          }
        },
        {
          icon: 'el-icon-search',
          name: '搜索',
          keyCode: 'Search',
          content: {
            placeholder: '请输入您想要的宝贝'
          }
        },
        {
          icon: 'el-icon-video-play',
          name: '视频',
          keyCode: 'Video',
          content: {
            show: true,
            title: 'Video',
            link: ''
          }
        }
      ],
      commodityComponents: [
        {
          icon: 'el-icon-shopping-bag-1',
          name: '单商品',
          keyCode: 'SingleItem',
          content: {
            sellingPoint: true,
            originalPrice: true,
            sellingPrice: true,
            button: true,
            goodsList: []
          }
        },
        {
          icon: 'el-icon-s-grid',
          name: '商品类别',
          keyCode: 'Commodity',
          content: {
            show: true,
            groupName: '商城好物',
            arrangement: 1,
            quantity: 4,
            sellingPoint: true,
            originalPrice: true,
            sellingPrice: true,
            button: true,
            categoryList: []
          }
        },
        {
          icon: 'el-icon-s-fold',
          name: '类别列表',
          keyCode: 'GroupList',
          content: {
            show: true,
            groupName: '商品分组列表',
            arrangement: 1,
            quantity: 4,
            list: []
          }
        },
        {
          icon: 'el-icon-picture',
          name: '图文导航',
          keyCode: 'GraphicNavigation',
          content: {
            number: 3,
            list: [
              {
                href: '',
                src: '',
                isCustom: '',
                name: '',
                collapseState: false
              },
              {
                href: '',
                src: '',
                isCustom: '',
                name: '',
                collapseState: false
              },
              {
                href: '',
                src: '',
                isCustom: '',
                name: '',
                collapseState: false
              },
              {
                href: '',
                src: '',
                isCustom: '',
                name: '',
                collapseState: true
              }
            ]
          }
        },
        {
          icon: 'el-icon-guide',
          name: '标签导航',
          keyCode: 'CategoryNavigation',
          content: {
            show: true,
            groupName: '商城好物',
            arrangement: 1,
            quantity: 4,
            sellingPoint: true,
            originalPrice: true,
            sellingPrice: true,
            paymentNumber: true,
            list: [
              {
                name: '',
                categoryList: [],
                goodsList: []
              }
            ]
          }
        }
      ]
    }
  },
  methods: {
    ...mapMutations('creationCamp', ['setComponents']),
    selectItem(item) {
      this.setComponents(item)
    }
  }
}
</script>

<style lang="less" scoped>
.add-component {
  .parts-title {
    margin-bottom: 10px;
    font-size: 14px;
  }

  .parts-list {
    display: flex;
    flex-wrap: wrap;

    .parts-item {
      width: calc(100% / 3);
      margin-bottom: 15px;
      text-align: center;
      .parts-icon {
        display: inline-block;
        width: 24px;
        height: 24px;
        i {
          font-size: 24px;
        }
      }

      .parts-name {
        margin-top: 5px;
        text-align: center;
        font-size: 12px;
      }
    }
  }
}
</style>
