<template>
  <div class="apass_table">
    <el-table :data="data">
      <el-table-column :width="Math.max(paddingLeft - 10, 0)"></el-table-column>
      <el-table-column
        v-for="(item, index) in header"
        :label="item.label"
        :align="item.align || 'left'"
        :width="item.width"
        :key="'head_' + index"
      >
        <template slot-scope="scope">
          <div v-if="item.type === 'buttons'" class="row_action">
            <template v-for="(v, i) in item.actionList">
              <span
                v-if="v.disabledRule && v.disabledRule(scope.row)"
                class="btn disabled"
                :key="'btn_' + index + '_' + i"
                v-text="v.label"
              >
              </span>
              <a
                v-else
                class="btn"
                :class="v.class || ''"
                :key="'btn_' + index + '_' + i"
                @click="v.callback && v.callback(scope.row)"
                v-text="v.getLabel ? v.getLabel(scope.row) : v.label"
              >
              </a>
              <span
                v-if="i < item.actionList.length - 1"
                class="interval_line"
                :key="'line_' + index + '_' + i"
                >|</span
              >
            </template>
          </div>
          <div v-else-if="item.type === 'button'" class="row_action">
            <a
              class="btn"
              v-text="scope.row[item.prop]"
              @click="item.callback && item.callback(scope.row)"
            ></a>
          </div>
          <span
            v-else
            v-text="
              item.getText ? item.getText(scope.row) : scope.row[item.prop]
            "
          ></span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    header: {
      type: Array,
      default: () => [],
    },
    data: {
      type: Array,
      default: () => [],
    },
    paddingLeft: {
      type: [Number, String],
      default: () => 50,
    },
  },
};
</script>
