<template>
  <div class="apass_table">
    <el-table :data="data">
      <el-table-column
        v-if="paddingLeft > 10"
        :width="paddingLeft - 10"
      ></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.getLabel ? v.getLabel(scope.row) : 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>
          <div v-else-if="item.type === 'image'" class="img_content">
            <img
              :src="item.getImage && item.getImage(scope.row)"
              :width="item.size"
            />
          </div>
          <div
            v-else-if="
              item.type === 'tooltip' &&
                item.getLength &&
                item.getLength(scope.row) > 1
            "
          >
            <el-tooltip
              placement="right-start"
              popper-class="apass_table_tooltip"
            >
              <div
                slot="content"
                v-html="item.getContent && item.getContent(scope.row)"
              ></div>
              <span
                v-text="(item.getText && item.getText(scope.row)) + '..'"
                style="text-decoration: underline;color: #515fe7;"
              ></span>
            </el-tooltip>
          </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>

<style scoped>
.img_content {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

<style>
.apass_table_tooltip {
  font-size: 12px;
  line-height: 20px;
}
</style>
