<template>
  <div>
    <a-input
      @click="inputClick"
      :value="valueView"
      style="cursor:pointer"
      readOnly/>
    <a-modal
      v-if="visible"
      v-model="visible"
      :title="placeholder"
      :z-index="1031"
      :bodyStyle="{ maxHeight: '68vh', overflowY: 'auto' }"
      @ok="handleOk"
      @close="visible=false"
    >
      <!-- 搜索框 -->
      <a-input-search :value="searchValue" style="margin-bottom: 8px" placeholder="搜索" @change="handleSearch"/>
      <!-- 树形图 -->
      <a-tree
        v-model="checkedKeys"
        :expanded-keys="expandedKeys"
        :selectable="false"
        checkable
        @expand="onExpand"
      >
        <!-- department -->
        <a-tree-node
          v-for="department in treeData"
          v-show="!department.hidden"
          :key="department.key"
          :title="department.title">
          <!-- person -->
          <a-tree-node v-for="person in department.children" v-show="!person.hidden" :key="person.key">
            <!-- 搜索关键词红色 -->
            <template slot="title">
              <span v-if="person.title.indexOf(searchValue) > -1">
                {{ person.title.substr(0, person.title.indexOf(searchValue)) }}
                <span style="color: #f50">{{ searchValue }}</span>
                {{ person.title.substr(person.title.indexOf(searchValue) + searchValue.length) }}
              </span>
              <span v-else>{{ person.title }}</span>
            </template>
          </a-tree-node>
        </a-tree-node>
      </a-tree>
    </a-modal>
  </div>
</template>

<script>
import { post } from '@vue2-client/services/api'

const departments = ['运维部', '项目部', '项目一部', '项目二部', '开发部', '售后部', '办公室', '管理员', '软件工程部', 'IC卡部', '销售部']

export default {
  name: 'PersonSetting',
  data () {
    return {
      searchValue: '',
      treeData: [],
      checkedKeys: [],
      expandedKeys: [],
      sourceTreeData: [],
      visible: false,
      valueView: this.placeholder
    }
  },
  props: {
    buttonText: {
      type: String,
      default: '选择人员'
    },
    placeholder: {
      type: String,
      default: '请选择人员'
    },
    value: {
      type: Array,
      default: () => []
    },
    // // 返回数据类型 String,Array 发现返回类型只能有一个
    // type: {
    //   type: String,
    //   default: 'Array'
    // },
    // 返回数据字段 name , id
    field: {
      type: String,
      default: 'name'
    },
  },
  model: {
    prop: 'value',
    event: 'onOk'
  },
  watch: {},
  components: {},
  created () {
    let api
    if (this.compatible === 'OA') {
      api = '/api/af-system/logic/getEmpTree'
    } else {
      api = '/api/af-oa/logic/getEmpTree'
    }
    post(api, {}).then(res => {
      this.sourceTreeData = res
    })
  },
  methods: {
    inputClick () {
      this.visible = true
      this.searchValue = ''
      this.treeData = this.sourceTreeData
      if (this.value.length > 0) {
        this.checkedKeys = this.getCheckedKeys(this.value)
      }
      this.expandedKeys = []
    },
    // 获取选择得key
    getCheckedKeys (arr) {
      const brr = []
      this.treeData.forEach(item => {
          adaptToChildrenList(item)
      })
      function adaptToChildrenList (o) {
        if (arr.some(item => o.key.indexOf(item) > -1)) {
          brr.push(o.key)
        }
        if (o.children) {
          for (const c of o.children) {
            adaptToChildrenList(c)
          }
        }
      }
      return brr
    },
    handleOk () {
      this.$emit('onOk', this.allPerson())
      this.visible = false
    },
    onExpand (expandedKeys) {
      this.expandedKeys = expandedKeys
    },
    // 搜索处理
    handleSearch (e) {
      const value = e.target.value.trim()
      if (!value) {
        this.treeData = this.sourceTreeData
        this.expandedKeys = []
        this.searchValue = ''
        return
      }
      const expandedKeys = []
      const treeData = JSON.parse(JSON.stringify(this.sourceTreeData))
      // 过滤结果
      for (const department of treeData) {
        if (department.key.includes(value)) {
          continue
        }
        let hasChildren = false
        if (department.children) {
          for (const person of department.children) {
            if (!person.key.includes(value)) {
              person.hidden = true
            } else {
              hasChildren = true
            }
          }
        }
        if (!hasChildren) {
          department.hidden = true
        } else {
          expandedKeys.push(department.key)
        }
      }
      this.treeData = treeData
      this.expandedKeys = expandedKeys
      this.searchValue = value
    },
    allPerson () {
      const index = this.type === 'id' ? 1 : 0
      const _allPerson = this.checkedKeys.filter(value => !departments.includes(value)).map(item => item.split('_')[index])
      this.valueView = this.checkedKeys.filter(value => !departments.includes(value)).map(item => item.split('_')[0]).join(',')
      return _allPerson
    }
  },
}
</script>
<style lang="less" scoped>
.ant-tree-title {
  width: 100%;
}

.title {
  float: left;
}

.ant-card-body {
  .ant-tree {
    line-height: 3;

    li {
      position: relative;
    }
  }
}

.ant-card-body .but_type {
  float: right;
  position: absolute;
  right: 40px;
}
</style>
