<template>
   <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" @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 === 5 && item.type === 5" 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>
      <van-button block color="#5D7BF6" type="primary" @click="confirmWordType">确定</van-button>
   </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator';
import { Collapse, CollapseItem, Field, Button, NavBar, SwipeCell } from 'vant';
import { TEMPLATETYPE } from '@/const/enum';
@Component({
  components: {
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Field.name]: Field,
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [SwipeCell.name]: SwipeCell,
  },
})
export default class AddOption extends Vue {
  private activeName: number = 0;
  private data = [
    {
      title: '单行文本',
      desc: '只能输入一行，适合文字少的内容',
      type: 0,
    },
    {
      title: '上传图片',
      desc: '可以上传多个图片，但只能选择一项',
      type: 1,
    },
    // {
    //   title: '多行文本',
    //   desc: '可以输入多行，适合文字多的内容',
    // },
    {
      title: 'PDF文件',
      desc: '选择PDF文件',
      type: 2,
    },
    {
      title: '多选框',
      desc: '可以定义多个选择项，但只能选择一项',
      type: 5,
    },
    {
      title: '日期',
      desc: '选择单个日期时间',
      type: 6,
    },
    {
      title: '上传视频',
      desc: '上传视频',
      type: 8,
    },
    {
      title: '上传音频',
      desc: '上传音频',
      type: 9,
    },
  ];
  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{
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;
     min-height: 100vh;
     z-index: 10000;
     text-align: left;
     background: #ffffff;
     .item{
       padding: 0 17px;
       border-top: 1px solid rgba(239,239,239,1);
       border-bottom: 1px solid rgba(239,239,239,1);
       .item-inner{
          display: grid;
          grid-template-columns: auto 27px;
          grid-template-rows: repeat(2,30px);
          grid-auto-flow: column dense;
          .active{
            grid-column: 2/ span 1;
            grid-row: 1/ span 2;
            place-self: center;
          }
       }
     }
   }
</style>