<template lang="html">
  <div class="channelSelectVue pop-up">
    <div class="title">
      字段选择
      <i class="close" @click="close()"></i>
    </div>
    <div class="main">
      <div class="list">
        <p class="item" v-for="n,i in fieldList">
          <span>第{{ i + 1 }}个</span>:
          <select class="" name="" v-model="fieldList[i]">
            <option :value="n" v-for="n,i in allFields">{{ n }}</option>
          </select>
          <i v-if="fieldList.length > 1" @click="fieldList.splice(i, 1)">✖</i>
          <i v-if="i === fieldList.length - 1 && fieldList.length < 4" @click="fieldList.push('')">➕</i>
        </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 } from '@/vuex/request.js'

export default {
  data () {
    return {
      fieldList: ['']
    }
  },
  props: ['field', 'allFields'],
  mounted () {
    // 弹框弹出动画
    window.$(() => {
      bus.$emit('pop-up-show', '.channelSelectVue.pop-up')
    })
    // init
    this.fieldList = []
    this.field.forEach((n, i) => {
      this.fieldList[i] = n
    })
  },
  methods: {
    // 关闭弹窗&动画
    close () {
      window.$(() => {
        bus.$emit('pop-up-close', '.channelSelectVue.pop-up')
        setTimeout(() => {
          this.$emit('close')
        }, 500)
      })
    },
    submit () {
      if (this.fieldList.some((n, i) => {
        return n === ''
      })) {
        bus.$emit('alert', '存在未填写项')
        return false
      } else {
        // not same
        for (let i = 0; i < this.fieldList.length; i++) {
          for (let j = 0; j < this.fieldList.length; j++) {
            if (i !== j && this.fieldList[i] === this.fieldList[j]) {
              bus.$emit('alert', '存在相同项')
              return false
            }
          }
        }
        this.$emit('change-field-list', this.fieldList)
        this.$emit('close')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.channelSelectVue{
  width: 500px;
  .main{
    .list{
      overflow: hidden;
      .item{
        width: 100%;
        margin-bottom: 20px;
        line-height: 30px;
        span{
          display: inline-block;
          width: 60px;
        }
        i{
          display: inline-block;
          width: 25px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          margin-left: 10px;
          cursor: pointer;
          border-radius: 3px;
          transition: all .3s ease;
          &:hover{
            background-color: #2F363E;
          }
        }
        input, select{
          width: 290px;
          height: 31px;
          background-color: #2F363E;
          border: 1px solid #505A64;
          background-image: none;
        }
      }
    }
    .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>
