<style>
  .VoucherInquiryAdd{
    padding: 25px 0;
    box-sizing: border-box;
    height: 100%;
    /* background-color: #ffffff; */
  }
  .VoucherInquiryAdd>.el-col.left{
    box-shadow: 1px 2px 4px -1px #cccccc;
    transition: all linear .5s;
    padding-top: 20px;
    padding-bottom: 20px; 
  }
  .VoucherInquiryAdd>.el-col.left:hover{
    box-shadow: 1px 2px 4px -1px #888888;
  }
  .VoucherInquiryAdd>.el-col{
    height: 100%;
    
  }
  .VoucherInquiryAdd .resource-lititle span{
    display: block;
    border-left: 4px solid #e95252;
    padding-left: 10px;
    margin-bottom: 20px;
  }
  .VoucherInquiryAdd>.el-col .type-item{
    color: #707070;
    font-size: 12px;
    padding: 1px;
    border: solid 1px #d8d8d8;
    border-radius: 2px;
    margin: 0 6px 6px 0;
    cursor: pointer;
    padding: 1px 8px;
    display: flex;
    align-items: center;
  }
  .VoucherInquiryAdd>.el-col .type-item:hover{
    padding: 0px 8px;
    border: solid 2px #2672ff;
    color: #2672ff;
  }
  .VoucherInquiryAdd>.el-col .type-item i.iconfont{
    display: inline-block;
    margin-right: 5px;
  }
</style>
<template>
  <el-row class="VoucherInquiryAdd" :gutter="35">
    <el-col :span="4" class="left">
      <el-row class="resource-lititle">
        <span>题目类型：</span>
      </el-row>
      <el-row :gutter="5">
        <el-col :span="12" v-for="(item, index) in typeList" :key="index">
          <div class="type-item" @click="creatItem(item)">
            <i class="iconfont" :class="[item.icon]"></i>
            <span>{{item.name}}</span>
          </div>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="20">
      <template v-for="(item, index) in list">
        <Type-Model :itemIndex="itemIndex" :type="type" :itemData="item"/>
      </template>
    </el-col>
  </el-row>
</template>
<script>
import typeModel from './model/typeModel'
export default {
  components: {
    'Type-Model': typeModel,
  },
  data() {
    return {
      typeList: [
        {
          type: 2,
          icon: 'icon-radio-checked',
          name: '单选'
        },
        {
          type: 4,
          icon: 'icon-duoxuan',
          name: '多选'
        },
        {
          type: 1,
          icon: 'icon-ge_xingji',
          name: '评分'
        },
        {
          type: 4,
          icon: 'icon-shuru',
          name: '输入'
        }
      ],
      list: [],
      type: -1,
      childItem: {}
    };
  },
  mounted() {
  },
  methods: {
    creatItem: function (item) {
      this.type = item.type
      this.list.pueh({

      })
    }
  }
};
</script>