<template>
	<view class="order_wrap">
		<u-navbar title="接单中心" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
		<yui-tabs :tabs="tabs" v-model="activeIndex" :lineWidth="'120rpx'" :isLazyRender="true" color="#108cff"
			titleActiveColor="#108cff" :swipeable="true" :swiper="false" :ellipsis="false" :scroll-threshold="3"
			:sticky="true" :sticky-threshold="0" :offset-top="offsetTop" :z-index="99">
			<template #orderCenter>
				<orderCenter ref="orderCenter" type="1" :dicts="dicts"></orderCenter>
			</template>
			<template #myOrder>
				<orderCenter ref="myOrder" type="2" :dicts="dicts"></orderCenter>
			</template>
			<template #myCommission>
				<myCommission ref="myCommission" type="2" :showStats="true"></myCommission>
			</template>
		</yui-tabs>
	</view>
</template>

<script>
import orderCenter from "./components/orderCenter/orderCenter.vue";
import myCommission from "./components/commission/myCommission.vue";

export default {
	components: {
		orderCenter,
		myCommission
	},
	onPullDownRefresh() {
		uni.stopPullDownRefresh();
		this.$refs[this.activeTel].resetData();
	},
	onReachBottom() {
		this.$refs[this.activeTel].handleOnReachBottom();
	},
	computed: {
		activeTel() {
			return this.tabs.find(v => v.activeIndex === this.activeIndex).slot;
		},
	},
	data() {
		return {
			activeIndex: 0,
			offsetTop: 0,
			tabs: [{
				label: '接单中心',
				slot: 'orderCenter',
				activeIndex: 0,
			}, {
				label: '我的接发单',
				slot: 'myOrder',
				activeIndex: 1,
			},
			{
				label: '我的分成',
				slot: 'myCommission',
				activeIndex: 2,
			}
			],
			dicts: {
				crmFormStatusDict: [],
				crmFormCategoryDict: [],
				crmFormStateDict: [],
				crmFormTacticDict: [],
			}
		}
	},
	mounted() {
		// 页面初始化后的逻辑
		uni.getSystemInfo({
			success: (e) => {
				let offsetTop = 0
				// #ifdef H5
				offsetTop = 43
				// #endif
				this.offsetTop = offsetTop;
			}
		});
		this.$getDicts('crm_form_status').then(res => {
			this.dicts.crmFormStatusDict = res;
		});
		this.$getDicts('crm_form_category').then(res => {
			this.dicts.crmFormCategoryDict = res;
		});
		this.$getDicts('crm_form_state').then(res => {
			this.dicts.crmFormStateDict = res;
		});
		this.$getDicts('crm_form_tactic').then(res => {
			this.dicts.crmFormTacticDict = res;
		});
	},
	methods: {
		// tab切换事件处理
		handleTabChange(index) {
			this.activeIndex = index;
		}
	},
	// 页面滚动触发事件
	onPageScroll(e) {
		//页面滚动事件
		uni.$emit('onPageScroll', e)
	},
}
</script>

<style lang="scss" scoped>
::v-deep .yui-tabs__content {
	background-color: transparent;

	.yui-tabs__track {
		background-color: transparent;
	}
}
</style>