<template>
  <div class="main">
    <!-- 标题 -->
    <div class="cardTitle">申请入驻管理</div>
    <!-- 搜索 -->
    <div class="search-box">
      <a-space size="large">
		<a-form-model layout="inline">
			<a-form-model-item label="申请人/公司名">
        		<a-input v-model="searchForm.companyName" placeholder="请输入申请人/公司名" />
			</a-form-model-item>
			<a-form-model-item label="审核状态">
				<a-select v-model="searchForm.status" style="width: 200px" placeholder="选择状态">
					<a-select-option :value="1">待确认</a-select-option>
					<a-select-option :value="2">审核通过</a-select-option>
					<a-select-option :value="3">审核驳回</a-select-option>
				</a-select>
			</a-form-model-item>
		</a-form-model>
        <a-button type="primary" @click="handlerSearch">查 询</a-button>
        <a-button @click="handlerReset">重 置</a-button>
      </a-space>
    </div>
    <!-- 表格 -->
    <div id="commonTable">
      <a-table
        :scroll="{ x: 1300 }"
        :columns="columns"
        :data-source="tableData"
        :pagination="pagination"
        @change="handleTableChange"
        :row-key="
          (record, index) => {
            return index;
          }
        "
      >
        <!-- 操作 -->
        <span slot="action" slot-scope="text,record">
          <a @click="detail(record)">详情</a>
        </span>
        <span slot="formatter" slot-scope="scope">{{
          scope === 1 ? "待确认" : (scope === 2 ? "通过" : "驳回")
        }}</span>
      </a-table>
    </div>
  </div>
</template>

<script>
import {getAllRequest} from "@/api/manage/index.js"
export default {
	data() {
		return {
			// 搜索项
			searchForm: {
				companyName: "",
				status: 1,
				pageNum: 1,
				size: 10,
			},
			//   列
			columns: [
				{
					title: "公司名",
					dataIndex: "companyName",
					width: "200",
				},
				{
					title: "负责人",
					dataIndex: "directorName",
					width: "200",
				},
				{
					title: "负责人联系方式",
					dataIndex: "directorTel",
					width: "200",
				},
				{
					title: "状态",
					dataIndex: "status",
					scopedSlots: { customRender: "formatter" },
					width: "200",
				},
				{
					title: "操作",
					dataIndex: "action",
					key: "action",
					width: "80",
					fixed: "right",
					scopedSlots: { customRender: "action" },
				},
			],
			//   数据
			tableData: [],
			//   分页
			pagination: {
				current: 1,
				total: 0,
				pageSize: 10,
				showTotal: (total) => `共 ${total} 条`,
				showSizeChanger: true,
				showQuickJumper: true,
			},
			loading: false,
			selectedRowKeys: [],
		};
	},
	mounted() {
		this.getData();
	},
	computed: {
		hasSelected() {
			return this.selectedRowKeys.length > 0;
		},
	},
	methods: {
		getData() {
			getAllRequest(this.searchForm).then(res => {
				let data = res.data;
				this.tableData = data.rows;
				this.pagination.total = data.total;
			})
		},
		detail(data){
			let id = data.id
			this.$router.push(
				{
					name:'settle_detail',
					query: {
						id: id
					}
				}
			)
		},
		//查询
		handlerSearch() {
			this.getData()
		},
		//重置
		handlerReset() {
			this.searchForm.companyName = '';
			this.searchForm.status = 1;
			this.getData()
		},
		//分页
		handleTableChange(pagination) {
			this.searchForm.size = pagination.pageSize;
			this.searchForm.pageNum = pagination.current;
			this.getData();
		},
	},
};
</script>

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