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: '',
      origDataList: []
    }
  },
  props: Object.assign({}, Select.props, {
    code: {
      type: String,
      required: true
    },
    mode: {
      type: String,
      default: 'default'
    },
    showType: {
      type: String,
      default: 'select'
    },
    isEnable: { // 是否只获取已启用的数据
      type: Boolean,
      default: true
    },
    notIn: {
      type: Array,
      default: function () {
        return []
      }
    },
    size: {
      type: String,
      default: 'default'
    },
    placeholder: {
      type: String,
      default: ''
    }
  }),
  created () {
    this.getDataList()
  },
  watch: {
    notIn (newVal, oldVal) {
      this.getDataList()
    },
    code (newVal, oldVal) {
      this.getDataList()
    }
  },
  methods: {
    /**
     * 获取当前所有的option 数据
     * @returns options data
     */
    getOptionDatas () {
      return _.cloneDeep(this.dataList)
    },
    getDataList () {
      const _this = this
      getLookUpData({
        pageNo: 1,
        pageSize: 1000,
        lookupCode: _this.code,
        isEnable: _this.isEnable ? 1 : undefined
      }).then(res => {
        if (res.status == 200) {
          _this.origDataList = res.data.list
          _this.dataList = res.data.list.filter(item => _this.notIn.indexOf(item.code) < 0)
          _this.$emit('loaded',_this.dataList)
        }
      })
    },
    // 根据code 获取名称
    getNameByCode (code) {
      const a = this.dataList.find(item => {
        return item.code == code
      })
      return a ? a.dispName : '-'
    },
    // 根据名称 获取code
    getCodeByName (dispName) {
      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('input', obj)
        this.$emit('change', obj, _.find(this.dataList, ['code', obj]))
      }
    }
    const radioOn = {
      change: obj => {
        this.$emit('input', obj.target.value)
        this.$emit('change', obj.target.value, _.find(this.dataList, ['code', obj.target.value]))
      }
    }
    if (this.showType === 'radio') {
      return (
        <a-radio-group vModel={props.value} {...{ props, on: radioOn }} >
          {
            this.dataList.map(item => {
              return (<a-radio value={item.code} key={item.code}>{item['dispName']}</a-radio>)
            })
          }
        </a-radio-group>
      )
    }
    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>
    )
  }
}
