<template>
  <div
    class="security-check-table-wrapper"
    :style="{ height: tableWrapperHeight }"
  >
    <a-table
      :data-source="tableData"
      :columns="columns"
      :row-key="rowKey"
      :row-selection="
        withSelection
          ? { selectedRowKeys: selectedRowKeys, onChange: onSelectChange }
          : null
      "
      :rowClassName="rowClassName"
      bordered
      :pagination="pagination"
      @change="handleTableChange"
      :loading="loading"
      :scroll="{ y: 650 }"
    >
      <template
        v-if="withOperateColumn"
        slot="operation"
        slot-scope="text, record"
      >
        <div class="column-operate">
          <span
            class="cell-operate-edit"
            @click="editRow(record)"
          >修改</span>
          <span
            class="cell-operate-delete"
            @click="deleteRow(record)"
          >删除</span>
        </div>
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  name: 'SecurityCheckTable',
  props: {
    height: {
      type: [Number, String],
      default: '50vh'
    },
    tableCols: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    rowKey: {
      type: String,
      default: 'key'
    },
    withSelection: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    pagination: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      selectedRowKeys: []
    }
  },
  computed: {
    columns() {
      function setClickHandler(columns) {
        return columns.map(col => {
          if (col.clickHandler) {
            col.customCell = (row, rowIndex) => {
              return {
                class: 'cell-click',
                on: {
                  click: () => {
                    col.clickHandler(row, rowIndex)
                  }
                }
              }
            }
          }
          if (col.children) {
            setClickHandler(col.children)
          }
          return col
        })
      }
      return setClickHandler(this.tableCols)
    },
    tableWrapperHeight() {
      return typeof this.height === 'number' ? this.height + 'px' : this.height
    },
    withOperateColumn() {
      return this.columns.find(col => col.dataIndex === 'operation')
    }
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      // console.log(selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    rowClassName(index) {
      if (index.index % 2 == 0) {
        return 'warning-row'
      } else {
        return 'warning-rows'
      }
    },
    editRow(row) {
      console.log('edit')
    },
    deleteRow(row) {
      console.log('delete')
    },
    clickHandler(index) {
      console.log(index)
    },
    handleTableChange(pagination, filters, sorter) {
      this.$emit('handleTableChange', pagination)
    }
  }
}
</script>

<style lang="scss" scoped>
.security-check-table-wrapper {
  width: 100%;
  ::v-deep .ant-table {
    width: 100%;
    .ant-table-thead {
      th {
        padding: 18px 12px;
      }
      .ant-table-column-title {
        font-size: 14px;
        font-family: Helvetica, 'Microsoft YaHei';
        color: #101116;
        font-weight: bold;
      }
    }
    .ant-table-tbody {
      .warning-row {
        background-color: #f3f5f8;
        padding: 9px 16px;
      }
      .warning-rows {
        background-color: #fff;
        padding: 9px 16px;
      }
      td {
        font-size: 14px;
        font-family: Helvetica, 'Microsoft YaHei';
        color: #101116;
        &.cell-click {
          color: #2d67e3;
          cursor: pointer;
        }
      }
      .column-operate {
        span {
          cursor: pointer;
          &:not(:last-child) {
            margin-right: 25px;
          }
          &.cell-operate-edit {
            color: #2d67e3;
          }
          &.cell-operate-delete {
            color: #ea4545;
          }
        }
      }
    }
  }
}
</style>
