import Select from 'ant-design-vue/es/select'
import _ from 'lodash'

import { getLookUpData, listLookUp } from '@/api/data'

/**
 * loopUp 组件
 * params: code loopUp的code 值
 * event: change(选中的值, 选中的对象 )
 * ref: getOptionDatas 获取所有查询的
 */
export default {
  name: 'VSelect',
  data () {
    return {
      dataList: [],
      placeholderText: ''
    }
  },
  props: Object.assign({}, Select.props, {
    code: {
      type: String,
      required: true
    },
    showType: {
      type: String,
      default: 'select'
    }
  }),
  created () {
    const _this = this
    getLookUpData({
      pageNo: 1,
      pageSize: 1000,
      lookupCode: _this.code
    }).then(res => {
      if (res.status == 200) {
        _this.dataList = res.data.list
      }
    })
  },
  methods: {

    /**
     * 获取当前所有的option 数据
     * @returns options data
     */
    getOptionDatas () {
      return _.cloneDeep(this.dataList)
    },
    // 根据code 获取名称
    getNameByCode (code) {
      const a = this.dataList.find(item => {
        return item.code == code
      })
      return a ? a.dispName : '-'
    },
    // 根据名称 获取code
    getCodeByName (dispName) {
      console.log(this.dataList)
      return this.datalist.find(item => item.dispName == dispName)
    }
  },
  render () {
    const props = {}
    Object.keys(Select.props).forEach(k => {
      this[k] && (props[k] = this[k])
      return props[k]
    })
    if (props.placeholder === undefined) {
      props.placeholder = this.placeholderText
    }

    const on = {
      change: obj => {
        this.$emit('change', obj, _.find(this.dataList, ['code', obj]))
        this.$emit('input', obj)
      }
    }
    if (this.showType === 'tabs') {
      return (
        <a-tabs vModel={props.value} {...{ props, on: on }}>
          {
            this.dataList.map(item => {
              return (<a-tab-pane tab={item.dispName} key={item.code}></a-tab-pane>)
            })
          }
        </a-tabs>
      )
    }
    return (
      <Select vModel={props.value} {...{ props, on: on }}>
        {
          this.dataList.map(item => {
            return (<a-select-option value={item.code} key={item.code}>{item['dispName']}</a-select-option>)
          })
        }
      </Select>
    )
  }
}
