<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 class="content-wrapper">
        <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>
      <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;
  @PropSync('dataType') activeName!: number;
  @PropSync('radioBoxOptions') options!: string[];
  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,
    },
    {
      title: '编辑器',
      desc: '编辑器',
      type: DataType.Editor,
    },
    {
      title: '外部链接',
      desc: '外部链接',
      type: DataType.Link,
    }
  ];
  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;
     .content-wrapper{
       height: calc(100vh - 46px - 60px);
       overflow: auto;
     }
     .item{
       padding: 15px 17px;
       .item-inner{
          display: grid;
          grid-template-columns: auto 27px;
          grid-template-rows: repeat(2, auto);
          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;
            margin-bottom: 7px;
            font-size: 15px;
          }
          .desc{
            color: #737582;
            font-size: 10px;
          }
       }
     }
   }
</style>