<template>
  <div class="app-container">
    <div class="searchBox">
      <el-button type="primary" @click="tableJs.addRow($refs.fubiao)">
        新增
      </el-button>
      <el-button type="danger" @click="tableJs.delRow($refs.fubiao)">
        删除
      </el-button>
    </div>

    <el-table
      ref="fubiao"
      :data.sync="tableData"
      border
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        width="55"
      />
      <el-table-column
        v-for="(item, index) in tabelHeader"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
        <template v-if="item.type === 1" slot-scope="scope">
          <el-autocomplete
            v-model="scope.row[scope.column.property]"
            class="inline-input"
            :fetch-suggestions="querySearch"
            placeholder="请输入内容"
          />
        </template>
        <el-table-column v-for="(k, i) in item.child" :key="i" :label="k.label" :prop="k.prop">
          <template slot-scope="scope">
            <el-autocomplete
              v-model="scope.row[scope.column.property]"
              class="inline-input"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
            />
          </template>
        </el-table-column>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: 'Table',
  components: { },
  props: {
    tabelHeader: {
      type: Array,
      required: true
    },
    fromType: {
      type: Number,
      default: 0
    },
    tableData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      options: [
        {
          value: '√',
          id: '1'
        },
        {
          value: 'X',
          id: '2'
        },
        {
          value: '/',
          id: '3'
        }
      ]
    }
  },
  methods: {
    querySearch(queryString, cb) {
      const restaurants = this.options
      const results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    }
  }
}
</script>

<style scoped>
.searchBox{
    display: flex;
    flex-direction: row;
    margin-bottom: 20px;
}
</style>
