<template>
  <!-- 输入框 -->
  <el-table-column
    v-if="column.component === 'input'"
    :key="column.prop"
    v-bind="{
      align: 'center',
      ...column
    }"
  >
    <template slot-scope="scope">
      <el-input
        v-model="scope.row[column.prop]"
        v-bind="column.props"
        @input="inputEvent($event, scope.$index, column.prop)"
      />
    </template>
  </el-table-column>
  <!-- 提示信息 -->
  <el-table-column
    v-else-if="column.component === 'tooltip'"
    :key="column.prop"
    v-bind="{
      align: 'center',
      ...column
    }"
  >
    <template slot-scope="scope">
      <th-tooltip :value="scope.row[column.prop]" :props="column.props">
        <span slot="content" class="th-table--tooltip">
          {{ scope.row[column.prop] }}
        </span>
        <span class="th-text-overflow--multi" :style="{'-webkit-line-clamp' : column.rows || 3}">
          {{ scope.row[column.prop] }}
        </span>
      </th-tooltip>
    </template>
  </el-table-column>
  <!-- 链接 -->
  <el-table-column
    v-else-if="column.component === 'link'"
    :key="column.prop"
    v-bind="{
      align: 'center',
      ...column
    }"
  >
    <template slot-scope="scope">
      <th-link
        v-bind="column.props"
        @click="() => column.click && column.click(scope.row, column)"
      >{{ scope.row[column.prop] }}</th-link>
    </template>
  </el-table-column>
  <!-- 自定义插槽 -->
  <el-table-column
    v-else-if="column.component === 'slot'"
    :key="column.prop"
    v-bind="{
      align: 'center',
      ...column
    }"
  >
    <template slot-scope="scope">
      <slot :name="column.prop" :row="scope.row" />
    </template>
  </el-table-column>
  <!-- 默认只显示文字 -->
  <el-table-column
    v-else
    :key="column.prop"
    v-bind="{
      align: 'center',
      ...column
    }"
  />
</template>
<script>
export default {
  name: 'ThTableColumn',
  props: {
    column: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    inputEvent(evt, index, prop) {
      this.$emit('inputEvent', evt, index, prop)
    }
  }
}
</script>
