<template>
  <el-form-item :label="relevant.label" :prop="relevant.prop">
    <el-select v-model="input" filterable remote reserve-keyword :placeholder="relevant.placeholder" :remote-method="remoteMethod"
      :loading="loading" @change='change(input)'>
      <el-option v-for="item in optionsList" :key="item.value" :label="item.label" :value="item.value">
        <span>{{item.label}}</span><span style="float:right;" v-if="item.title">{{item.title}}</span>
      </el-option>
    </el-select>
  </el-form-item>
</template>

<script>
import request from '@/utils/request'
import { kexiuUrl } from '@/utils'

export default {
  props: ['relevant'],
  data() {
    return {
      platid: process.env.PLAT_ID,
      input: '',
      optionsList: [],
      loading: false
    }
  },
  methods: {
    change(value) {
      this.$emit('eventName', value)
    },
    remoteMethod(query) {
      var that = this
      if (query !== '') {
        that.loading = true
        if (that.relevant.prop === 'comps') {
          request.get(that.relevant.url, {
            name: query,
            size: 10
          }, function(res) {
            that.loading = false
            if (res.success && res.data) {
              const obj = res.data
              that.optionsList = obj.map(item => {
                return { value: item.id, label: item.name }
              })
            }
          })
        } else if (that.relevant.prop === 'orgs') {
          request.get(kexiuUrl + that.relevant.url, {
            pid: that.platid,
            rows: 200
          }, function(res) {
            that.loading = false
            if (res.success && res.data) {
              const obj = res.data
              that.optionsList = obj.map(item => {
                return { value: item.id, label: item.name }
              }).filter(ont => {
                return ont.label.toLowerCase().indexOf(query.toLowerCase()) > -1
              })
            }
          })
        } else {
          request.get(kexiuUrl + that.relevant.url, {
            pid: that.platid,
            rows: 200
          }, function(res) {
            that.loading = false
            if (res.success && res.data) {
              const obj = res.data
              let j = 0
              const info = obj.map(item => {
                return { value: item.id, label: item.name }
              }).filter(ont => {
                return ont.label.toLowerCase().indexOf(query.toLowerCase()) > -1
              })
              for (let i = 0; i < info.length; i++) {
                j++
                request.get(kexiuUrl + '/ajax/professor/baseInfo/' + info[i].value, {}, function(res) {
                  j--
                  if (res.success && res.data) {
                    const response = res.data
                    let title = response.title || response.office || ''
                    const job = response.orgName || ''
                    if (title) {
                      if (job) {
                        title = title + '，' + job
                      }
                    } else {
                      if (job) {
                        title = job
                      }
                    }
                    info[i].title = title
                    if (j === 0) {
                      that.optionsList = info
                    }
                  }
                })
              }
            }
          })
        }
      } else {
        that.optionsList = []
      }
    }
  }
}
</script>
