<template>
  <van-popup v-model="show" :style="{'height': '100%', 'width': '100%'}" :overlay="false" get-container="body" >
    <div class="add-word1">
      <van-nav-bar 
        title="选择字段类型"
        left-arrow
        @click-left="onClickLeft"></van-nav-bar>
      <div 
        v-for="(item, index) in data"
        :key="index"
        class="item van-hairline--bottom van-hairline--top" 
        @click="activeName = item.type">
        <div class="item-inner">
          <div class="title"> {{item.title}}</div>
          <div class="desc">{{item.desc}}</div>
          <common-svg name="zidingyimoban-duigou" class="active" v-show="activeName === item.type"></common-svg>
        </div>
        <div 
          v-if="activeName === DataType.Select && item.type === DataType.Select"
          style="background:rgba(246,249,255,1);margin:0 -17px;">
          <van-swipe-cell 
            v-for="(option,index) in options"
            :key="index" 
            ref="swipeCell"
            :stop-propagation="true">
            <div style="display:flex;flex-direction:row;align-items:center;">
              <common-svg 
                name="zidingyimoban-shanchu"
                @click.native.stop="openSwipeCellRight(index)"
                style="margin:17px;"></common-svg>
              <van-field v-model="options[index]" label="" placeholder="输入选项名称"></van-field>
            </div>
            <template #right>
              <van-button square type="danger" text="删除" @click="delOption(index)" />
            </template>
          </van-swipe-cell>
          <div @click="addOption" style="color:#3F79FE;padding:17px;"><common-svg name="tianjia" style="margin-right:10px;"></common-svg>添加选项</div>
        </div>
      </div>
      <div class="btn-group">
        <div class="slc-btn-common right"   @click="confirmWordType">确定</div>
      </div>
   </div>
   </van-popup>
</template>
<script lang="ts">
import { Component, PropSync, Vue, Emit } from 'vue-property-decorator';
import { TEMPLATETYPE, DataType } from '@/const/enum';
@Component({
  components: {
  },
})
export default class AddOption extends Vue {
  @PropSync('showOptions', {
    type: Boolean,
    required: true,
  })
  private show!: boolean;
  private activeName: number = 0;
  private readonly DataType: any = DataType;
  private data = [
    {
      title: '单行文本',
      desc: '只能输入一行，适合文字少的内容',
      type: DataType.Input,
    },
    {
      title: '上传图片',
      desc: '可以上传多个图片，但只能选择一项',
      type: DataType.Image,
    },
    {
      title: '多行文本',
      desc: '可以输入多行，适合文字多的内容',
      type: DataType.TextArea,
    },
    {
      title: 'PDF文件',
      desc: '选择PDF文件',
      type: DataType.File,
    },
    {
      title: '多选框',
      desc: '可以定义多个选择项，但只能选择一项',
      type: DataType.Select,
    },
    {
      title: '日期',
      desc: '选择单个日期时间',
      type: DataType.Date,
    },
    {
      title: '上传视频',
      desc: '上传视频',
      type: DataType.Video,
    },
    {
      title: '上传音频',
      desc: '上传音频',
      type: DataType.Audio,
    },
  ];
  private options: string[] = [];
  private addOption() {
    this.options.push('');
  }
  @Emit('back')
  private onClickLeft() {
    return;
  }
  @Emit('confirmWordType')
  private confirmWordType() {
    return {type: this.activeName, options: this.options};
  }
  private openSwipeCellRight(index: number) {
    const swipeCell = (this.$refs[`swipeCell`] as any)[index];
    swipeCell.open('right');
  }
  private delOption(index: number) {
    this.options.splice(index, 1);
  }
}
</script>
<style scoped lang="scss">
   .add-word1{
     text-align: left;
     background: #ffffff;
     .item{
       padding: 0 17px;
       .item-inner{
          display: grid;
          grid-template-columns: auto 27px;
          grid-template-rows: repeat(2,30px);
          grid-auto-flow: column dense;
          place-items: center start;
          .active{
            grid-column: 2/ span 1;
            grid-row: 1/ span 2;
            place-self: center;
          }
          .title{
            color: #353535;
            font-size: 15px;
          }
          .desc{
            color: #737582;
            font-size: 10px;
          }
       }
     }
   }
</style>