<template>
  <div class="designer-box" :class="{'is-edit': isEdit}"  :style="{width: `${width}px`}">
    <el-collapse v-model="activeName" accordion >
        <el-collapse-item v-for="item in qTypes"
        :key="item.groupName"
        :title="$t(item.groupName)"
        :name="item.name">
          <draggable
            :list="item.list"
            :group="{ name: 'creator', pull: 'clone', put: false }"
            :clone="cloneQuestion"
            @end="dragEnd"
            :sort="false"
            :disabled="!isEdit"
           >
            <div class="q-type-item" v-for="subItem in item.list" :key="subItem.type">
                <i :class="`iconfont icon-${subItem.icon}`" />
                <span>{{$t(subItem.name)}}</span>
            </div>
          </draggable>
        </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import { qTypeList } from './question-type.js'
import { getQuestion } from './question-list.js'
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'DesignerBox',
  computed: {
    ...mapGetters(['questionLastIndex','isEdit'])
  },
  props: {
    width: {
      type: Number,
      default: 300
    }
  },
  components: {
    draggable
  },
  data () {
    return {
      activeName: 'col-chosen',
      qTypes: qTypeList
    }
  },
  methods: {
    ...mapMutations(['setQuestionLastIndex']),
    dragEnd: function (event) {
    },
    cloneQuestion(qType) {
      const question = getQuestion(qType.type, this.$i18n)
      let qIndex = this.questionLastIndex + 1
      question.name = `question${qIndex}`
      question.elements && question.elements.map(qItem=>{
        qIndex = qIndex + 1
        qItem.name = `question${qIndex}`
        return qItem
      })
      this.setQuestionLastIndex(qIndex)
      return question
    }
  }
}
</script>
<style lang="scss" scoped>
@import "./style.scss";
</style>
<style scoped>
.tool-box /deep/ .el-collapse-item__header{
  height: 49px;
  font-family: PingFangSC-Semibold;
  font-size: 14px;
  color: #333333;
  padding-left: 27px;
  padding-right: 10px;
  font-weight: 700;
  background: #FFFFFF;
  border-bottom: 1px solid #D0D2D3;
  letter-spacing: 0.5px;
}
</style>
