<template>
  <el-popover
    ref="popover"
    v-model="popShow"
    placement="bottom-start"
    trigger="click"
  >
    <el-table
      v-loading="loading"
      :data="postList"
      border
      stripe
      @row-click="handleRowClick"
    >
      <el-table-column
        v-for="column in tbcolumn"
        :key="column.prop"
        :label="column.label"
        :prop="column.prop"
        :width="column.width ? column.width : 150"
      >
      </el-table-column>
    </el-table>
    <el-input
      slot="reference"
      :disabled="disabled"
      :placeholder="placeholder"
      :value="inputValue"
      clearable
      size="mini"
      @input="inputChange"
    >
    </el-input>
  </el-popover>
</template>

<script>
import request from '@/utils/request'

export default {
  // 放表格组件回调示例
  // getChoose: (value) => {
  //   let column = this.findObject(this.option.column, 'phone');
  //   column.params.inputValue = value
  // }
  name: 'SearchTable',
  props: {
    //接口地址(必填)
    action: {
      tyle: String,
      required: true
    },
    //表格列(必填)
    tbcolumn: {
      type: Array,
      required: true
    },
    //需要搜索的字段
    searchFeild: {
      type: String,
      default: ''
    },
    // 选中后带出哪一列数据--prop (必填)
    returnFeild: {
      type: String,
      required: true
    },
    //接口返回的数据(必填)
    dataFeild: {
      type: String,
      required: true
    },
    // 接口需要多传递的参数
    apiParams: {
      type: Object,
      default: () => {
      }
    },
    // 是否可输入
    disabled: {
      tyle: Boolean,
      default: false
    }
  },
  data() {
    return {
      placeholder: '请选择搜索内容',
      popShow: false,
      info: this.data,
      searchInput: '',
      qurey: {},
      loading: true,
      tableInfo: [],
      postList: [],
      //输入框的值
      inputValue: ''
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      let params = {}
      if (this.inputValue) {
        params[this.returnFeild] = this.inputValue
      }
      request({
        url: this.action,
        method: 'get',
        data: {}
      }).then((res) => {
        this.postList = res
        this.loading = false
        // const data = res.data;
        // this.page.total = data.data.total;
      })
    },
    handleRowClick(row) {
      this.popShow = false
      this.$emit('getChoose', row[this.returnFeild])
      this.$emit('getRow', row)
      this.inputValue = row[this.returnFeild]
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage
      this.getData()
    },
    inputChange(value) {
      this.inputValue = value
      this.getData()
    }
  }
}
</script>
<style lang="scss" scoped></style>
