<!-- 输入框+选择 点击选择弹出多选树 -->
<template>
  <div>
    <div class="multiInput">
      <div class="showPart"
           tabindex="0"
           @click="checked = true"
           v-on:blur="checked = false"
           :class="{blueBorder:checked}">
        <p class="clues"
           v-show="!selDataArray.length">{{placeholder}}</p>
        <ul v-show="selDataArray.length"
            class="checkedList">
          <li class="checkedItem"
              v-for="(item,index) in selDataArray"
              :key="item.id+''+index">
            <span>{{item.name}}</span>
            <i class="el-icon-close"
               @click="deleteHandle(index)"></i>
          </li>
        </ul>
      </div>
      <el-button type="button"
                 class="choose"
                 @click="handleSelect">选择</el-button>
    </div>
    <el-dialog :title="title"
               lock-scroll
               :visible="dialogVisible"
               :modal="modal"
               :width="'28%'"
               :before-close="handleCancel"
               :append-to-body="isNest"
               :close-on-click-modal="false">
      <div :style="{height:formHeight+'px',overflowY:'auto',overflowX:'hidden'}">
        <c-tree ref="dialog_tree"
                :url="url"
                :params="params"
                :isDialogTree="true"
                :showCheckbox="showCheckbox"
                :defaultExpandAll="defaultExpandAll"
                :defaultExpandKeys="[0]"
                :defaultNodeKey="defaultNodeKey"
                :defaultCheckedKeys="checkedKeys"
                :defaultOnlyLeaf="defaultOnlyLeaf"
                :defaultExpandOnClickNode="defaultExpandOnClickNode"
                :nodeType="nodeType"
                @chechBoxClick="handleCheckBox"
                @nodeClick="handleNodeClick"></c-tree>
      </div>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="handleOk">确定</el-button>
        <el-button @click="handleClear">清空</el-button>
        <!--   <el-button @click="handleCancel">取消</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>

<script>
import CDialog from './CDialog'
import CTree from './CTree'
import { mapGetters } from 'vuex'
export default {
  components: { CDialog, CTree },
  data () {
    return {
      dialogVisible: false, // 是否显示下拉框
      selData: Object, // 选择的节点
      selDataArray: [], // 多选树选择的节点数组
      inputValue: this.inputModel,
      substationId: this.handleId,
      expandKeys: this.defaultExpandKeys, // 默认展开的节点克隆
      checked: false, // 蓝色边框
      checkedKeys: this.defaultCheckedKeys,
      temArr: [], // 临时存放选中人员的数组
      temKeys: [] // 临时存放key的数组
    }
  },
  props: {
    formKey: { // 用于接收form的key
      type: String,
      default: ''
    },
    formIndex: { // 用于接收form的index
      type: Number,
      default: 0
    },
    placeholder: { // input
      type: String,
      default: '请选择'
    },
    inputModel: { // input
      type: String,
      default: ''
    },
    handleId: {
      type: String,
      default: ''
    },
    type: { // button
      type: String,
      default: 'primary'
    },

    title: { // dialog
      type: String,
      default: '选择'
    },
    isNest: {
      type: Boolean,
      default: true
    },
    modal: {
      type: Boolean,
      default: true
    },
    url: { // tree
      type: String,
      required: true
    },
    params: { // tree
      type: Object,
      default () {
        return {}
      }
    },
    showCheckbox: { // tree
      type: Boolean,
      default: true
    },
    defaultCheckedKeys: { // tree
      // 默认勾选节点
      type: Array,
      default () {
        return []
      }
    },
    defaultExpandKeys: {
      // 默认展开的节点
      type: Array,
      default () {
        return [0]
      }
    },
    // 默认节点定为0 ，即选择树不回显
    defaultNodeKey: { // tree
      // 默认选中节点(节点id)
      type: [Number, String]
    },
    defaultExpandAll: { // tree
      // 默认展开全部节点
      type: Boolean,
      default: true
    },
    defaultOnlyLeaf: {
      // 点击所有节点都能选中，为true时表示：只能选择叶节点
      type: Boolean,
      default: false
    },
    // 能够选择的节点类型，默认为空
    nodeType: {
      type: String,
      default: ''
    },
    defaultExpandOnClickNode: {
      // 默认点击节点时展开节点
      type: Boolean,
      default: false
    },
    // 判断是否自动刷新树
    freshen: {
      type: Boolean,
      default: false
    }
  },

  methods: {
    // 选择按钮点击事件
    handleSelect () {
      this.dialogVisible = true
      // 给临时存放数组赋值
      let arr = this.selDataArray
      this.temArr = this.temArr.concat(arr)
      // 给临时存放key的数组赋值
      let keys = this.checkedKeys
      this.temKeys = this.temKeys.concat(keys)
      // 渲染对话框中默认选择树的节点
      this.$nextTick(() => {
        this.loadData()
        this.$refs['dialog_tree'].setCheckedKeys(this.checkedKeys)
      })
    },
    // icon删除
    deleteHandle (num) {
      this.selDataArray.splice(num, 1)
      this.checkedKeys.splice(num, 1)
      this.$emit('handleDel', this.selDataArray, this.formKey, this.formIndex)
    },
    loadData (callback, currentKey, expandKeys) {
      this.$nextTick(() => {
        this.expandKeys = expandKeys
        this.$refs['dialog_tree'].loadData(callback, currentKey)
      })
    },
    handleClear () { // 清空
      this.substationId = ''
      this.inputValue = ''
      this.selData = ''
      this.selDataArray = []
      this.checkedKeys = []
      this.temArr = []
      this.temKeys = []
      this.$emit('handleClear', '', this.formKey, this.formIndex)
      this.dialogVisible = false
    },
    // 关闭dialog
    handleCancel () {
      this.dialogVisible = false
      this.temArr = []
      this.temKeys = []
    },
    handleOk () {
      this.dialogVisible = false
      this.selDataArray = this.temArr
      this.checkedKeys = this.temKeys
      this.temArr = []
      this.temKeys = []
      this.$emit('handleSure', this.selDataArray, this.formKey, this.formIndex)
    },

    // 清空输入框
    clearInput () {
      this.selData = ''
      this.inputValue = ''
    },
    // 复选框点击事件
    handleCheckBox (data, checkedArr) {
      // to do
      // let filterText = this.$refs['dialog_tree'].filterText
      // if (filterText) {
      //   if (data.children.length !== 0) {
      //     console.log('father', filterText)
      //   } else {
      //     console.log('children', filterText)
      //   }
      // } else {
      //   console.log('blank')
      // }
      let checkedNoRepeat = [] // 无重复的选中数组
      let keysNoRepeat = [] // 无重复的keys数组
      for (let i = 0; i < checkedArr.length; i++) {
        if (checkedArr[i].children.length === 0) {
          let obj = { 'id': checkedArr[i].id, 'name': checkedArr[i].label }
          checkedNoRepeat.push(obj)
          keysNoRepeat.push(checkedArr[i].id)
        }
      }
      this.temArr = checkedNoRepeat
      this.temKeys = keysNoRepeat
      // let checkedObj = { 'id': data.id, 'name': data.label }
      // let id = data.id
      // let index = ''
      // let haven = false
      // let length = this.temArr.length
      // if (this.temArr.length === 0) {
      //   this.temArr.push(checkedObj)
      //   this.temKeys.push(Number(id))
      // } else {
      //   for (let i = 0 i < length i++) {
      //     if (this.temArr[i].id === id) {
      //       haven = true
      //       index = i
      //       break
      //     }
      //   }
      //   if (haven) {
      //     this.temArr.splice(index, 1)
      //     this.temKeys.splice(index, 1)
      //   } else {
      //     this.temArr.push(checkedObj)
      //     this.temKeys.push(Number(id))
      //   }
      // }
    },
    handleNodeClick (data, node) { // 点击树节点内容触发事件
      // console.log(checkedArr)
      // let checkedObj = { 'id': data.id, 'name': data.label }
      // let id = data.id
      // let index = ''
      // let haven = false
      // let length = this.temArr.length
      // if (this.temArr.length === 0) {
      //   this.temArr.push(checkedObj)
      //   this.temKeys.push(Number(id))
      // } else {
      //   for (let i = 0 i < length i++) {
      //     if (this.temArr[i].id === id) {
      //       haven = true
      //       index = i
      //       break
      //     }
      //   }
      //   if (haven) {
      //     this.temArr.splice(index, 1)
      //     this.temKeys.splice(index, 1)
      //   } else {
      //     this.temArr.push(checkedObj)
      //     this.temKeys.push(Number(id))
      //   }
      // }
    }
  },
  mounted () {
  },
  computed: {
    formHeight () {
      return this.clientHeight * 0.56
    },
    ...mapGetters(['clientHeight'])
  },
  watch: {
    inputValue () {
      let idArr = []
      let nameArr = []
      if (this.substationId !== '') {
        idArr = this.substationId.split(',')
      }
      if (this.inputValue !== null) {
        nameArr = this.inputValue.split(',')
      }

      for (let i = 0; i < idArr.length; i++) {
        this.selDataArray.push({ 'id': idArr[i], 'name': nameArr[i] })
      }
      this.checkedKeys = idArr
    }
    // dialogVisible () {
    //   if (!this.dialogVisible) {
    //     this.temArr = []
    //     this.temKeys = []
    //   }
    // }
  }
}
</script>
<style scoped>
.mLeft {
  margin-left: 6px;
}
.blue {
  color: #003585;
}
.multiInput {
  width: 100%;
  box-sizing: border-box;
  display: flex;
}
.multiInput .showPart {
  width: 197px;
  min-height: 34px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  outline: none;
}
.clues {
  line-height: 34px;
  padding-left: 15px;
  color: #bfc2ca;
}
.multiInput .showPart .checkedList {
  display: flex;
  width: 100%;
  padding: 5px 5px 0 5px;
  flex-wrap: wrap;
  box-sizing: border-box;
}
.multiInput .showPart .checkedList .checkedItem {
  list-style: none;
  height: 24px;
  margin: 0 0 5px 5px;
  padding: 0 8px;
  background-color: #f0f1f4;
  color: #8f9197;
  font-size: 14px;
  line-height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
}
.multiInput .showPart .checkedList .checkedItem span {
  font-size: 12px;
}
.el-icon-close {
  border-radius: 50%;
  background-color: #bfc2ca;
  width: 13px;
  height: 13px;
  text-align: center;
  margin-left: 5px;
  cursor: pointer;
}
.el-icon-close:hover {
  background-color: #8f9197;
}
.el-icon-close:before {
  color: #fff;
  font-size: 9px;
  width: 13px;
  height: 13px;
  line-height: 13px;
  display: block;
}
.multiInput .blueBorder {
  border: 1px solid #5095fa;
}
.multiInput .choose {
  border: none;
  flex: 1;
  border: 1px solid #dcdfe6;
  border-left: none;
  background: #f5f7fa;
  color: #0085d0;
  border-radius: 0 4px 4px 0;
  outline: none;
}

.tree {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
</style>
