<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 placeholder="请输入申请人/公司名" v-model="searchForm.name" />
			</a-form-model-item>
			<a-form-model-item label="到期状态">
				<a-select style="width: 200px" placeholder="选择状态" v-model="searchForm.status">
					<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-option :value="4">临近到期</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 ? "可" : ""
        }}</span> -->
      </a-table>
    </div>
  </div>
</template>

<script>
import {getCustomerList} from "@/api/manage/index.js"
export default {
	data() {
		return {
			// 搜索项
			searchForm: {
				name: "",
				status: 1,
				pageNum: 1,
				size: 10,
			},
			//   列
			columns: [
				{
					title: "公司名",
					dataIndex: "companyName",
					key: "companyName",
					width: "200",
				},
				{
					title: "联系人",
					dataIndex: "contactsName",
					key: "contactsName",
					width: "200",
				},
				{
					title: "联系人手机",
					dataIndex: "contactsTel",
					key: "contactsTel",
					width: "200",
				},
				// {
				// 	title: "status",
				// 	dataIndex: "status",
				// 	scopedSlots: { customRender: "formatter" },
				// 	width: "200",
				// },
				{
					title: "操作",
					dataIndex: "action",
					key: "action",
					width: "120",
					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() {
			getCustomerList(this.searchForm).then(res => {
				let data = res.data;
				this.tableData = data.rows;
				this.pagination.total = data.total;
			})
		},
		detail(index){
			this.$router.push({
				name:'customer_detail',
				query: {
					id: index.id
				}
			})
		},
		//查询
		handlerSearch() {
			this.getData()
		},
		//重置
		handlerReset() {
			this.searchForm.name = '';
			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>>