<template>
	<!-- 联系记录 -->
	<view class="page">
		<navbar title="联系记录" 
		bgColor="#3796F8" 
		leftClick 
		color="#fff"
		@leftClick="$utils.navigateBack"/>
		
		<view class="">
			<uv-tabs :list="tabs"
			lineColor="#3796F8"
			lineHeight="8rpx"
			lineWidth="50rpx"
			:scrollable="false"
			@click="clickTabs"></uv-tabs>
		</view>
		
		<!-- 工人看到的 -->
		<workList :api="api" ref="list" v-if="!role && type == 0"/>
		<bossList :api="api" ref="list" v-if="!role && type == 1"/>
		
		<!-- 老板看到的 -->
		<userList :api="api" ref="list" v-if="role"/>
	</view>
</template>

<script>
	import workList from '@/components/list/workList/index.vue'
	import bossList from '@/components/list/bossList/index.vue'
	import userList from '@/components/list/userList/index.vue'
	import { mapState } from 'vuex'
	export default {
		components : {
			bossList,
			workList,
			userList,
		},
		data() {
			return {
				tabs: [
					{
						name: '我看过谁'
					},
					{
						name: '谁看过我'
					},
				],
				type : 0,
				api : ''
			}
		},
		computed : {
			...mapState([
				'role', 
			]),
		},
		onLoad() {
			this.setApi()
		},
		onShow() {
			this.$nextTick(() => {
				this.$refs.list.getData()
			})
		},
		onReachBottom() {
			this.$refs.list.loadMoreData()
		},
		methods: {
			clickTabs({index}) {
				this.type = index
				this.setApi()
				this.$nextTick(() => {
					this.$refs.list.getData()
				})
			},
			setApi(){
				if(this.role){
					this.api = ['bossQueryWatchWho', 'bossQueryWatchMe'][this.type]
				}else{
					this.api = ['employeeQueryWatchWho', 'employeeQueryWatchMe'][this.type]
				}
			},
		}
	}
</script>

<style scoped lang="scss">

</style>
