<template>
  <el-table-column
    :label="showLabel ? label: ''"
    :rules="[...requireRule(required, label, validate), ...rules]"
    :prop="prop"
    :min-width="120"
  >
    <template slot-scope="scope">
      <el-autocomplete
        v-model.trim="scope.row[prop]"
        :style="{ width }"
        :placeholder="placeholder || `请输入${label}`"
        :fetch-suggestions="querySearch"
        @select="handleSelect"
        :clearable="clearable"
        :disabled="disabled"
        :maxlength="maxlength"
      ></el-autocomplete>
    </template>
  </el-table-column>
</template>

<script>
import mixin from "../form/items/mixin";
/**
 * 输入框组件
 */
export default {
  mixins: [mixin],
  props: {
    query: {
      type: Function,
      default: () => {},
    },
    pickerLabel: {
      type: Function,
      default: (item) => item,
    },
    maxlength: {
      type: Number,
      default: 120,
    }
  },
  methods: {
    querySearch(queryString, cb) {
      this.query(queryString).then(res => {
        if (res.code === 0 || res.code===200) {
          if (res.data){
            cb(res.data.map(item => ({value: this.pickerLabel(item), ...item})))
          }else {
            cb(res.rows.map(item => ({value: this.pickerLabel(item), ...item})))
          }
        } else {
          cb([])
        }
      })
    },
    handleSelect(option){
      this.$emit('selected', this.formRef.model, option)
    },
    focus() {
      this.$emit("focus");
    },
  },
};
</script>

<style>
.el-autocomplete-suggestion{
  min-width: 200px;
  width: auto !important;
}
</style>
