<template lang="html">
  <div class="fieldAddVue pop-up" @click="toggle.fieldList = false">
    <div class="title">
      新建字段表
      <i class="close" @click="close()"></i>
    </div>
    <div class="main">
      <div class="list">
        <p class="item">
          <span>字段数量</span>:
          <input type="text" name="" v-model="data.fieldSize" spellcheck="false">
        </p>
        <p class="item">
          <span>字段值</span>:
          <input type="text" name="" v-model="fieldInput" spellcheck="false" @click.stop="toggle.fieldList = true" @keydown.enter="AddFieldList()">
          <ul class="fieldList" v-show="toggle.fieldList">
            <li v-if="data.field.length" v-for="n,i in data.field"><span>{{ n }}</span><i @click.stop="delField(i)">✖</i></li>
            <li v-if="!data.field.length" class="empty">Empty...</li>
          </ul>
        </p>
        <p class="item">
          <span>表名</span>:
          <input type="text" name="" v-model="data.collection" spellcheck="false">
        </p>
        <p class="item">
          <span>数据库名</span>:
          <input type="text" name="" v-model="data.dbName" spellcheck="false">
        </p>
        <p class="item">
          <span>渠道信息</span>:
          <!-- <input type="text" name="" v-model="data.pt" spellcheck="false"> -->
          <select class="" name="" v-model="data.pt">
            <option :value="n" v-for="n,i in channelMsgData">{{ n }}</option>
          </select>
        </p>
        <!-- <p class="item">
          <span>数据库表id</span>:
          <input type="text" name="" v-model="data.dbId" spellcheck="false">
        </p> -->
      </div>
    </div>
    <div class="btns">
      <button type="button" class="btn3" @click="submit()">确认</button>
      <button type="button" class="btn3" @click="close()">放弃</button>
    </div>
  </div>
</template>

<script>
import { bus, requestInsertFields } from '@/vuex/request.js'

export default {
  data () {
    return {
      fieldInput: '',
      data: {
        fieldSize: '',
        field: [],
        collection: '',
        dbName: '',
        pt: ''
        // dbId: ''
      },
      toggle: {
        fieldList: false
      }
    }
  },
  props: ['channelMsgData'],
  mounted () {
    // 弹框弹出动画
    window.$(() => {
      bus.$emit('pop-up-show', '.fieldAddVue.pop-up')
    })
  },
  methods: {
    delField (index) {
      this.data.field.splice(index, 1)
      setTimeout(() => {
        this.toggle.fieldList = true
      }, 100)
    },
    AddFieldList () {
      if (this.fieldInput === '') {
        bus.$emit('alert', '字段值中有空字段！')
        return false
      }
      if (/,/g.test(this.fieldInput)) {
        bus.$emit('alert', '字段值中不能有逗号(,)')
        return false
      }
      for (let i = 0; i < this.data.field.length; i++) {
        if (this.data.field[i] === this.fieldInput) {
          bus.$emit('alert', '字段值有重复项！')
          return false
        }
      }
      this.data.field.push(this.fieldInput)
      this.fieldInput = ''
    },
    // 关闭弹窗&动画
    close () {
      window.$(() => {
        bus.$emit('pop-up-close', '.fieldAddVue.pop-up')
        setTimeout(() => {
          this.$emit('close')
        }, 500)
      })
    },
    submit () {
      let params = {}
      for (let n in this.data) {
        params[n] = this.data[n]
      }
      let flag = true
      for (let n in params) {
        if (params[n] === '') {
          flag = false
          break
        }
      }
      if (!flag) {
        bus.$emit('alert', '存在未填写项！')
        return false
      }
      if (this.data.fieldSize.toString().search(/[^\d]/g) !== -1) {
        bus.$emit('alert', '字段数量必须为数字')
        return false
      }
      // for (let i = 0; i < params.field.length - 1; i++) {
      //   for (let j = i + 1; j < params.field.length; j++) {
      //     if (params.field[i] === '' || params.field[j] === '') {
      //       bus.$emit('alert', '字段值中有空字段！')
      //       return false
      //     }
      //     if (/,/g.test(params.field[i]) || /,/g.test(params.field[j])) {
      //       bus.$emit('alert', '字段值中不能有逗号(,)')
      //       return false
      //     }
      //     if (params.field[i] === params.field[j]) {
      //       bus.$emit('alert', '字段值有重复项！')
      //       return false
      //     }
      //   }
      // }
      params.field = params.field.join(',')
      let data = params
      requestInsertFields(params, data, (response) => {
        if (response.data) {
          if (response.data.state) {
            bus.$emit('alert', response.data.message)
            this.$emit('update')
            this.$emit('close')
          } else {
            bus.$emit('alert', response.data.message)
          }
        } else {
          bus.$emit('alert', response + '.')
        }
      })
    }
  },
  watch: {
    'toggle.fieldList' (val, oldVal) {
      if (val) {
        this.fieldInput = ''
      } else {
        this.fieldInput = this.data.field.join(',')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fieldAddVue{
  .main{
    .list{
      // overflow: hidden;
      &:after{
        display: block;
        content: "";
        clear: both;
      }
      .item{
        width: 50%;
        float: left;
        margin-bottom: 20px;
        position: relative;
        span{
          display: inline-block;
          width: 100px;
        }
        input, select{
          width: 200px;
          height: 31px;
          background-color: #2F363E;
          border: 1px solid #505A64;
          background-image: none;
        }
        .fieldList{
          width: 200px;
          position: absolute;
          left: 107.5px;
          top: 30px;
          background-color: #2F363E;
          border: 1px solid #505A64;
          z-index: 1;
          li{
            padding: 3px 6px;
            i{
              display: inline-block;
              cursor: pointer;
              float: right;
            }
            &:nth-of-type(n+2){
              border-top: 1px solid #505A64;
            }
            &.empty{
              text-align: center;
            }
          }
        }
      }
    }
    .handle{
      line-height: 100px;
      padding-left: 50px;
      label.checkbox input[type=checkbox]+span{
        background-color: #262B31;
        box-shadow: 0 0 0 1px #262B31;
        margin-right: 10px;
      }
    }
  }
}
</style>
