<template>
  <div v-if="selfType !== 'view'">
    <el-select
        v-if="element.render === 'select'"
        v-model="modelData[element.mapper]" v-bind="element.props" :style="selfStyle" :loading="requesting" style="width: 100%"
        :multiple="element.props.multipleLimit > -1" filterable remote default-first-option
        :remote-method="search" @change="() => { dispatchEvent('change')}"
    >
      <el-option
          v-for="option in dataSource"
          :key="option.value"
          :label="option.label"
          :value="option.value">
      </el-option>
    </el-select>

    <el-radio-group v-else-if="element.render === 'radio'" v-model="modelData[element.mapper]" v-bind="element.props" :style="selfStyle" @change="() => { dispatchEvent('change')}">
      <el-radio v-for="option in dataSource" :key="option.value" :label="option.value">{{option.label}}</el-radio>
    </el-radio-group>

    <el-checkbox-group v-else-if="element.render === 'checkbox'"  v-model="modelData[element.mapper]" v-bind="element.props" :style="selfStyle" @change="() => { dispatchEvent('change')}">
      <el-checkbox v-for="option in dataSource" :label="option.value" :key="option.value">{{option.label}}</el-checkbox>
    </el-checkbox-group>

  </div>
  <div v-else :style="selfStyle">
    {{ viewValue }}
  </div>
</template>

<script>
import LabBase from "../../mixins/LabBase";
import LabRequest from "../../mixins/LabRequest";
import Util from "../../utils/Util";

export default {
  name: "LabSelect",
  mixins: [ LabBase, LabRequest],
  computed:{
    viewValue(){
      if (this.selfType !== 'view'){
        return ''
      }
      if (Util.isEmpty(this.element.mapper) || Util.isEmpty(this.element.mapper) || Util.isEmpty(this.dataSource)) {
        return ''
      }
      const values = this.toList(this.modelData[this.element.mapper])
      let valueLab = ''
      const selects = this.dataSource.filter(item => values.includes(item.value))
      if (!Util.isEmpty(selects)){
        selects.forEach(item => {
          valueLab += item.label + ';'
        })
      }
      if (valueLab) {
        return valueLab.substring(0, valueLab.length - 1)
      }
      return valueLab
    }
  },
  created() {
    this.$LabRender.autoFill(this.element, this)
    const { props, mapper, render } = this.element
    const value = this.modelData[this.element.mapper]
    if (props.multipleLimit > -1 || render === 'checkbox') {
      this.$set(this.modelData, mapper, Util.toArray(value))
    }
    const sourceRequest = this.findRequest('source')
    if (sourceRequest && !Util.isEmpty(value)) {
      const { valueProp } = sourceRequest
      this.addFilter({field: valueProp, op: 'in', value: this.toList(value) })
    }
    this.loadSource()
  },
  methods: {
    search(value) {
      if (Util.isEmpty(value)) {
        return;
      }
      this.loadSource(value)
    },
    loadSource(value) {
      this.dataSource.splice(0, this.dataSource.length)
      const { options } = this.element
      // 默认静态选项
      const list = Util.toArray(options)
      list.forEach(item => {
        if (value) {
          if (item.label.includes(value)) {
            this.dataSource.push(item)
          }
        } else {
          this.dataSource.push(item)
        }
      })
      if (this.labDesign.switch && this.dataSource.length === 0) {
        this.dataSource.push({value:'1',label:'选项1'})
        this.dataSource.push({value:'2',label:'选项2'})
        return;
      }
      const sourceRequest = this.findRequest('source')
      if (!sourceRequest) {
        return
      }
      const { labelProp, valueProp, codeProp, searchProp } = sourceRequest
      if (!Util.isEmpty(value)) {
        this.addFilter({field: searchProp || labelProp, op: 'like', value })
      }
      this.dispatchRequest('source',this.modelData)
          .then(list => {
            if (list && !Util.isEmpty(list) && Util.isArray(list)) {
              list.forEach(item => {
                item.value = Util.callPropValue(item, valueProp)
                item.label = Util.callPropValue(item, labelProp)
                item.code = Util.callPropValue(item, codeProp)
                if (!Util.isEmpty(value)) {
                  // 搜索模式过滤
                  if (item.label.includes(value) || (item[searchProp] && item[searchProp].includes(value))) {
                    this.dataSource.push(item)
                  }
                } else {
                  this.dataSource.push(item)
                }
              })
            } else {
              console.info('节点数据源请求:', this.element, list)
            }
            this.sourceFilters.splice(0, this.sourceFilters.length)
            setTimeout(() => {
              this.requesting = false
            }, 100)
          })
    },
    toList(value) {
      if (Util.isEmpty(value)) {
        return []
      }
      if (Util.isArray(value)) {
        return value
      }
      return [value]
    }
  }
}
</script>

<style scoped>

</style>
