<template>
  <a-select
    class="J-select"
    :mode="mode"
    :show-search="showSearch"
    :value="value"
    :placeholder="placeholder"
    :style="selectStyle"
    :default-active-first-option="defaultActiveFirstOption"
    :show-arrow="showArrow"
    :filter-option="filterOption"
    :not-found-content="notFoundContent"
    @search="handleSearch"
    @change="handleChange"
  >
    <slot></slot>
    <a-select-option v-for="d in options" :value="d.value" :key="d.value">
      {{ d.text }}
    </a-select-option>
  </a-select>
</template>

<script>
  import { getAction } from '../../api/manage'

  export default {
    name: 'JSelect',
    props: {
      mode: {
        type: String,
        default: 'default'
      },
      url: {
        type: String,
        default: ''
      },
      paramsData: {
        type: Object,
        default: () => {
          return {}
        }
      },
      textName: {
        type: String
      },
      valueName: {
        type: String
      },
      value: {
        type: String,
        default: undefined //此处如果不是undefined  那么placeholder不会显示  会有一个默认为空的占位符 无法删除
      },
      showSearch: {
        type: Boolean,
        default: false
      },
      defaultActiveFirstOption: {
        type: Boolean,
        default: false
      },
      showArrow: {
        type: Boolean,
        default: false
      },
      filterOption: {
        type: Boolean,
        default: false
      },
      notFoundContent: {
        type: String,
        default: '未找到'
      },
      placeholder: {
        type: String,
        default: '请输入',
        required: false
      },
      searchName:{
        type: String,
        default: 'type'
      },
      selectStyle: {
        type: Object,
        default: () => {
          return {
            width: ''
          }
        }
      },
      triggerChange: {
        type: Boolean,
        required: false,
        default: false
      }
    },
    data() {
      return {
        options: [],
        paramsSearch: {}
      }
    },
    mounted() {
      this.fetch()
    },
    methods: {
      fetch() {
        getAction(this.url, { ...this.paramsSearch, ...this.paramsData }).then(res => {
          if (res.success) {
            console.log(res.result)
            let data = [...res.result]
            let newData = []
            data.map(i => {
              newData.push({ text: i[this.textName], value: i[this.valueName] })
            })
            this.options = [...newData]
          }
        })
      },
      handleSearch(value) {
        console.log(value)
        this.paramsSearch = {
          [this.searchName]: value
        }
        this.fetch()
      },
      handleChange(value) {
        console.log(value)
        if (this.triggerChange) {
          this.$emit('change', value)
        } else {
          this.$emit('input', value)
        }
      }
    }
  }
</script>

<style scoped>
  .J-select {
    width: 100%;
  }
</style>