<template>
	<div class="hui-flex hui-content">
		<div class="hui-content-title">
			<div class="hui-title-item active">公海客户</div>
		</div>
		<div class="hui-flex-box hui-flex hui-table">
			<list-filter type="highseas" @filter="filterInit"></list-filter>
			<div class="hui-flex-box">
				<el-table :data="tableData" row-key="id" border height="100%">
					<el-table-column label="序号" width="50">
						<template slot-scope="scope">
							<div style="text-align: center;">{{scope.$index + 1}}</div>
						</template>
					</el-table-column>
					<el-table-column label="关注房源">
						<template slot-scope="scope">
							<div class="hui-ellipsis" v-for="(item,index) in scope.row.roomMap" :key="index">
								{{item}}
							</div>
						</template>
					</el-table-column>
					<el-table-column label="客户类型">
						<template slot-scope="scope">
							<span>{{$field.findTypeName('customerType',scope.row.type)}}</span>
						</template>
					</el-table-column>
					<el-table-column label="客户名称" prop="name"></el-table-column>
					<el-table-column label="客户行业" prop="customerIndustry"></el-table-column>
					<el-table-column label="联系人" prop="person"></el-table-column>
					<el-table-column label="联系电话" prop="phone"></el-table-column>
					<el-table-column label="职位" prop="job"></el-table-column>
					<el-table-column label="来访渠道" prop="visitingChannels"></el-table-column>
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<div class="hui-table-operation">
								<span class="table-operation" @click="lookProject(scope.row)">详情</span>
							</div>
						</template>
					</el-table-column>
					<template slot="empty">
						<empty description="暂无数据"></empty>
					</template>
				</el-table>
			</div>
			<div class="hui-content-pagination">
				<el-pagination :page-size="pageSize" :pager-count="9" layout="prev, pager, next" :total="totalCount"
					@current-change="currentChange">
				</el-pagination>
			</div>
		</div>
		<el-drawer title="客户详情" :visible.sync="drawer" :size="400" :append-to-body="true">
			<detail v-if="drawer" :detailId="detailId"></detail>
		</el-drawer>
	</div>
</template>

<script>
	import {
		getCustomerListByPage
	} from '@/httpApi/crm'
	import detail from '@/components/work/crm/customer/detail'
	import listFilter from '@/components/common/listFilter'
	export default {
		data() {
			return {
				tableData: [],
				currPage: 1,
				pageSize: 10,
				totalCount: 0,
				drawer: false,
				detailId: '',
				filterOption: {}
			}
		},
		created() {
			this.init();
		},
		methods: {
			init() {
				let postData = {
					currPage: this.currPage,
					pageSize: this.pageSize,
					organizationId: this.$store.getters.organization.id,
					highSeas: 1
				}
				postData = Object.assign(postData, this.filterOption);
				getCustomerListByPage(postData).then(res => {
					if (res.state) {
						this.tableData = res.data.dataList;
						this.totalCount = res.data.totalCount;
					}
				})
			},
			filterInit(option) {
				this.filterOption = option;
				this.currPage = 1;
				this.init();
			},
			currentChange(currPage) {
				this.currPage = currPage;
				this.init();
			},
			lookProject(val) {
				this.detailId = val.id;
				this.drawer = true;
			},
			lookHouse() {

			}
		},
		components: {
			detail,
			listFilter
		},
	}
</script>

<style lang="scss">

</style>