<template>
  <div>
    <el-autocomplete
      style="width: 100%"
      popper-class="my-autocomplete"
      :disabled="disabled"  :readonly="readonly"
      v-model="name"
      :fetch-suggestions="querySearchAsync"
      placeholder="请输入内容"
      @blur="handleBlur"
      @select="handleSelect">
      <el-button slot="append" :disabled="disabled"  :readonly="readonly" @click="openRoster" icon="el-icon-search"></el-button>
      <template slot-scope="{ item }">
        <div class="name">{{ item.name }}</div>
        <span class="office-name">{{ commonJS.isEmpty(item.officeName) ? '部门：- - -' : '部门：' + item.officeName}}</span>
      </template>
    </el-autocomplete>
    <RosterSelectDialog ref="rosterSelect" @doSubmit="selectRosterToInput" :limit="limit" :selectData="selectData"></RosterSelectDialog>
  </div>
</template>
<script>
  import RosterSelectDialog from './RosterSelectDialog'
  import RosterService from '@/api/roster/RosterService'
  export default {
    data () {
      return {
        name: '',
        labelValue: this.value,
        selectData: [],
        rosterData: []
      }
    },
    props: {
      limit: Number,
      value: String,
      size: {
        type: String,
        default: () => { return 'small' }
      },
      readonly: {
        type: Boolean,
        default: () => { return false }
      },
      disabled: {
        type: Boolean,
        default: () => { return false }
      }
    },
    components: {
      RosterSelectDialog
    },
    rosterService: null,
    beforeCreate () {
      this.rosterService = new RosterService()
    },
    watch: {
      value: {
        handler (newVal) {
          this.selectData = []
          if (newVal) {
            newVal.split(',').forEach((id) => {
              this.rosterService.queryById(id).then(({data}) => {
                if (data && data.id !== '') {
                  this.selectData.push(data)
                }
              })
            })
          }
        },
        immediate: true,
        deep: false
      },
      selectData: {
        handler (newVal) {
          this.name = newVal.map(roster => { return roster.name }).join(',')
        },
        immediate: false,
        deep: false
      }
    },
    mounted () {
      this.getRosterData()
    },
    methods: {
      selectRosterToInput (rosterList) {
        this.selectData = rosterList
        this.labelValue = rosterList.map(roster => { return roster.id }).join(',')
        this.name = rosterList.map(roster => { return roster.name }).join(',')
        this.$emit('getValue', this.labelValue)
      },
      openRoster () {
        this.$refs.rosterSelect.init()
      },
      handleSelect (item) {
        this.$emit('getValue', item.id)
        this.name = item.name
      },
      handleBlur (item) {
        this.$emit('getValue', item.id)
        this.name = item.name
      },
      getRosterData () {
        this.rosterService.list({
          'current': '1',
          'size': '-1'
        }).then(({data}) => {
          this.rosterData = JSON.parse(JSON.stringify(data.records))
        })
      },
      querySearchAsync (queryString, cb) {
        let rosterDataList = this.rosterData
        let results = queryString ? rosterDataList.filter(this.createFilter(queryString)) : rosterDataList
        cb(results)
      },
      createFilter (queryString) {
        return (item) => {
          return (item.name.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
        }
      }
    }
  }
</script>
<style>
  .el-form-item__content .el-input-group {
    vertical-align: middle;
  }
  .el-tag + .el-tag {
    margin-left: 5px;
    margin-bottom: 5px;
  }
  .my-autocomplete li {
    line-height: normal;
    padding: 7px;
  }
  .my-autocomplete li .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }
  .my-autocomplete li .office-name {
    font-size: 12px;
    color: #b4b4b4;
  }
  .my-autocomplete li .highlighted .office-name {
    color: #ddd;
  }
</style>


