<template>
  <div>
    <div v-if="word.type === 3" class="word-item">
        <div style="display:flex;flex-direction:row;justify-content:space-between;" class="data-item van-hairline--bottom">
          <div style="color:#353535;font-size:18px;" class="title-text">{{word.label}}</div>
          <div style="width: 30px;text-align:center;">
              <common-svg name="cunzhengliebiao-gengduo"  width="20px" height="20px" @click.native="showActionHandler(wordIndex)"></common-svg>
          </div>
        </div>
        <div v-for="(item, index2) in word.data" :key="index2" class="data-item van-hairline--bottom" style="margin-top:10px;">
          <div style="font-size:15px;color:#353535;">{{item.label}}</div>
          <div style="font-size:10px;color:#818181;">字段类型: {{typeObj[item.type]}}</div> 
          <common-svg name="cunzhengliebiao-gengduo" class="icon" width="20px" height="20px" @click.native="showActionHandler(index2, wordIndex)"></common-svg>
        </div>
        <div
          @click="preAddWord(DataType.Input,word)"
          style="color:#B6B5BA;font-size:16px;text-align:center;padding:12px;background:#FFFFFF;">
          <common-svg name="tianjia1" width="16px" height="16px" style="margin-right:5px"></common-svg>添加下一级</div>
    </div>
    <div v-else>
      出错了
    </div>
  </div>
      
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
import { Collapse, CollapseItem, Field, Button, NavBar, SwipeCell, Popup } from 'vant';
import { TEMPLATETYPE, DataType } from '@/const/enum';

@Component({
  components: {
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Field.name]: Field,
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [SwipeCell.name]: SwipeCell,
    [Popup.name]: Popup,
  },
})
export default class WordItem extends Vue {
  @Prop({
    required: true,
    type: Object,
  })
  private word!: any;
  @Prop()
  private wordIndex!: number;
  private typeObj: any = {
    0: '单行文本',
    1: '图片',
    2: 'pdf文件',
    3: '一级标题',
    5: '选择',
    6: '日期',
    7: '编辑器',
    8: '视频',
    9: '音频',
    10: '多行文本输入',
    11: '外部链接',
  };
  private DataType: any = DataType;
    @Emit('show-action-handler')
    private showActionHandler(index: number, parentIndex: number = -1) {
      return {
        index,
        parentIndex,
      };
    }
    @Emit('pre-add-word')
    private preAddWord(level: number, word: any) {
      return {
        wordType: level,
        word,
      };
    }
}
</script>
<style scoped lang="scss">
  .data-item{
    display: grid;
    grid-template-columns: auto 30px;
    grid-template-rows: repeat(2, 20px);
    grid-auto-flow: column;
    align-items: center; 
    padding: 10px 0;
    .icon{
      grid-row:  span 2;
      place-self: center;
    }
    .title-text{
      font-weight: bold;
    }
  }
</style>