<template>
  <div class="option-box" ref="option-box">
    <div :class="{'option-item': editIndex !== index, 'option-item-2': editIndex === index, 'editing': editIndex === index}" v-for="(item, index) in list" :key="item + '-' + index">
      <p @dblclick="onDblClick(index)" v-show="editIndex !== index">{{item}}</p>
      <el-input v-show="editIndex === index" v-model="editValue" ref="opt-input" @blur="onItemOut(index)">
        <el-button type="primary" slot="append" @click="onEdit(index)">
          <i class="fa fa-fw fa-check"></i>
        </el-button>
      </el-input>
      <i class="fa fa-fw fa-remove option-item-remove" @click="onRemoveItem(index)"></i>
    </div>
    <div class="option-add">
      <el-input v-model="val" clearable>
        <el-button @click="onAdd" slot="append"><i class="fa fa-fw fa-plus"></i></el-button>
      </el-input>
      <el-button type="primary" @click="addListDialogShow = true"><i class="fa fa-fw fa-edit"></i>批量编辑</el-button>
    </div>
    <el-dialog title="批量编辑" :visible.sync="addListDialogShow" @open="listStr = list.join('\n')" append-to-body center>
      <el-input type="textarea" :rows="10" clearable v-model="listStr"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="changeList" type="primary">确 定</el-button>
        <el-button @click="addListDialogShow = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  name: 'ZFormParamOption',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  beforeDestroy () {
    if (this.sortable) this.sortable.destroy()
  },
  mounted () {
    if (this.value) {
      this.list = this.value.split('\n')
    } else {
      this.list = []
    }

    const task = function () {
      if (this.$refs['option-box']) {
        this.sortable = new Sortable(this.$refs['option-box'], {
          group: {
            name: 'option-box',
            pull: false,
            put: false
          },
          delay: 50,
          draggable: '.option-item',
          onUpdate: function (evt) {
            this.list.splice(evt.newIndex, 0, this.list.splice(evt.oldIndex, 1)[0])
          }.bind(this)
        })
      } else {
        setTimeout(task, 500)
      }
    }.bind(this)

    task()
  },
  watch: {
    value: {
      handler () {
        if (this.value) {
          this.list = this.value.split('\n')
        } else {
          this.list = []
        }
      }
    },
    list: {
      handler () {
        this.$emit('input', this.list.join('\n'))
      },
      deep: true
    }
  },
  data () {
    return {
      list: [],
      val: '',
      editIndex: -1,
      editValue: '',
      sortable: null,
      addListDialogShow: false,
      listStr: ''
    }
  },
  methods: {
    onAdd () {
      if (this.val && this.list.indexOf(this.val) < 0) {
        this.list.push(this.val)
      }
      this.val = ''
    },
    onEdit (index) {
      this.$set(this.list, index, this.editValue)
      this.editValue = ''
      this.editIndex = -1
    },
    onItemOut () {
      setTimeout(function () {
        this.editValue = ''
        this.editIndex = -1
      }.bind(this), 300)
    },
    onRemoveItem (index) {
      this.list.splice(index, 1)
    },
    onDblClick (index) {
      this.editIndex = index
      this.editValue = this.list[index]

      // 获取焦点,延时是因为立即获取的话,input还没有显示,显示后将失去焦点
      setTimeout(function () {
        this.$refs['opt-input'][index].focus()
      }.bind(this), 500)
    },
    changeList() {
      let list = this.listStr.split('\n')
      this.list = list.filter(item => !!item)
      this.addListDialogShow = false
    }
  }
}
</script>

<style scoped>
  .option-box {
    width: 100%;
    padding: 4px;
    box-sizing: border-box;
  }

  .option-add {
    width: 100%;
  }

  .option-item, .option-item-2 {
    display: block;
    line-height: normal;
    border: 1px solid #d9d9d9;
    position: relative;
    border-radius: 4px;
    padding: 4px;
    margin-top: 2px;
  }

  .option-item-2:hover, .option-item:hover {
    border-color: #3db389;
  }

  .option-item-2 {
    padding: 0;
  }

  .option-box .editing {
    border: none;
    border-radius: 0;
    padding: 0;
  }

  .option-box .editing .option-item-remove {
    display: none;
  }

  .option-item-remove {
    position: absolute;
    display: block;
    right: 6px;
    top: 6px;
    color: #d9d9d9;
  }

  .option-item:hover .option-item-remove {
    color: #3db389;
  }

  .option-item-remove:hover {
    color: red !important;
  }

  .option-item-2:first-child, .option-item:first-child {
    margin-top: 0;
  }
</style>
