<template>
  <div>
    <commonTable
      :columns="columns"
      :tableData="tableData"
      :ActionsList="ActionsList"
      @handleTableChange="handleTableChange"
      @Actions="Actions"
      @selectionChoosed="selectionChoosed"
    >
      <template v-slot:actionBox="data">
        <a href="javascript:;" @click="del(data)">del</a>
        <span style="margin: 5px">|</span>
        <a href="javascript:;">detail</a>
      </template>
    </commonTable>
  </div>
</template>

<script>
export default {
	data() {
		return {
			tableChoosed: [],
			// 分页
			pagination: {
				current: 1,
				total: 0,
				pageSize: 10,
			},
			//   列
			columns: [
				{
					title: "Name",
					dataIndex: "name",
					width: "200",
				},
				{
					title: "Gender",
					dataIndex: "gender",
					width: "200",
					customRender: function (gender) {
						if (gender === 1) {
							return "是";
						} else {
							return "否";
						}
					},
				},
				{
					title: "Gender1",
					dataIndex: "gender1",
					width: "200",
				},
				{
					title: "Gender2",
					dataIndex: "gender2",
					width: "200",
				},
				{
					title: "Gender3",
					dataIndex: "gender3",
					width: "200",
				},
				{
					title: "Gender4",
					dataIndex: "gender4",
					width: "200",
				},
				{
					title: "Gender5",
					dataIndex: "gender5",
					width: "200",
				},
				{
					title: "Gender6",
					dataIndex: "gender6",
					width: "200",
				},
				{
					title: "status",
					dataIndex: "status",

					width: "200",
				},
				{
					title: "操作",
					dataIndex: "action",
					key: "action",
					width: "180",
					fixed: "right",
					scopedSlots: { customRender: "action" },
				},
			],
			//   数据
			tableData: [
				{ name: 1, gender: 1 },
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
				{},
			],
			ActionsList: [
				{
					label: "批量删除",
					value: 1,
				},
				{
					label: "批量导出",
					value: 2,
				},
			],
		};
	},
	methods: {
		handleTableChange(pagination) {
			console.log(pagination);
			const pager = { ...this.pagination };
			pager.current = pagination.current;
			pager.pageSize = pagination.pageSize;
			this.pagination = pager;
		},
		del(data) {
			console.log(data);
		},
		Actions(data) {
			console.log(data);
		},
		selectionChoosed(data) {
			console.log(data);
			this.tableChoosed = data
		},
	},
};
</script>

<style>
</style>