<template>
  <div class="main">
    <!-- 标题 -->
    <div class="cardTitle">申请入驻管理</div>
    <!-- 搜索 -->
    <div class="search-box">
      <a-space size="large">
        <a-input placeholder="请输入申请人/公司名" />
        <a-select style="width: 200px" placeholder="选择状态" />
        <a-button type="primary">查 询</a-button>
        <a-button>重 置</a-button>
      </a-space>
    </div>
    <!-- 表格 -->
    <div id="commonTable">
      <div style="margin-bottom: 16px">
        <a-button type="primary" :disabled="!hasSelected" :loading="loading">
          批量操作
        </a-button>
        <span style="margin-left: 8px">
          <template v-if="hasSelected">
            {{ `已选择 ${selectedRowKeys.length} 条` }}
          </template>
        </span>
      </div>
      <a-table
        :scroll="{ x: 1300 }"
        :columns="columns"
        :data-source="tableData"
        :pagination="pagination"
        @change="handleTableChange"
        :row-selection="{
          selectedRowKeys: selectedRowKeys,
          onChange: onSelectChange,
        }"
        :row-key="
          (record, index) => {
            return index;
          }
        "
      >
        <!-- 操作 -->
        <span slot="action" slot-scope="scope">
          <a @click="detail(scope)">详情</a>
        </span>
        <span slot="formatter" slot-scope="scope">{{
          scope === 1 ? "可" : ""
        }}</span>
      </a-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 搜索项
      searchForm: {
        name: "",
        code: "",
      },
      //   列
      columns: [
        {
          title: "Name",
          dataIndex: "name",
          width: "200",
        },
        {
          title: "Gender",
          dataIndex: "gender",
          width: "200",
        },
        {
          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",
          scopedSlots: { customRender: "formatter" },
          width: "200",
        },
        {
          title: "操作",
          dataIndex: "action",
          key: "action",
          width: "80",
          fixed: "right",
          scopedSlots: { customRender: "action" },
        },
      ],
      //   数据
      tableData: [
        {
          name: "11",
          id: 1,
          status: 1,
        },
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
        {},
      ],
      //   分页
      pagination: {
        current: 1,
        total: 0,
        pageSize: 10,
        showTotal: (total) => `共 ${total} 条`,
        showSizeChanger: true,
        showQuickJumper: true,
      },
      loading: false,
      selectedRowKeys: [],
    };
  },
  mounted(){},
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
  },
  methods: {
    detail(data){
        console.log(data);
        this.$router.push({name:'settle_detail'})
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    handleTableChange(pagination) {
      console.log(pagination);
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      this.pagination = pager;
    },
  },
};
</script>

<style lang="less" scoped>
</style>>