<template>
	<view class="order_center_wrap">

		<view class="queryParams_wrap">
			<view class="search">
				<u--input clearable prefixIcon="search" v-model="queryParams.phone" shape="circle" clearable
					@blur="handleKeyword" @clear="handleKeywordClear" placeholder="请输入电话"></u--input>
			</view>
			<view class="query">
				<view style="margin-right: 10rpx;" @click="handleshowFilter">筛选</view>
				<u-icon name="arrow-down-fill" color="#aaa" size="10"></u-icon>
			</view>
		</view>

		<view class="send_status_wrap">
			<scroll-view scroll-x="true">
				<view class="clue_state_list">
					<view @click="handleSendStatusClick(item)" v-for="(item, index) in clueSendStatusCountList"
						:key="index" class="clue_state_item" :class="{ active: queryParams.status === item.status }">
						<text>{{ item.statusName }}</text>
						<text>({{ item.count }})</text>
					</view>
				</view>
			</scroll-view>
		</view>


		<view class="order_item_wrap">
			<order-item v-for="item in listData" :key="item.id" :item="item" :type="type" :dicts="dicts"></order-item>
		</view>

		<!-- 加载更多 -->
		<u-loadmore :status="loadStatus" v-if="listData.length > 0" />
		<!-- 空状态 -->
		<show-emtry v-if="listData.length === 0"></show-emtry>

		<filter-query ref="filter" v-model="queryParams" @getList="resetData" :mapHeight="mapHeight"
			:dicts="dicts"></filter-query>
	</view>
</template>

<script>
import pullUpRefresh from "@/utils/pullUpRefresh";
import filterQuery from "./filterQuery.vue";
import orderItem from "./orderItem.vue";
export default {
	mixins: [pullUpRefresh],
	props: {
		type: {
			type: String,
			default: '2'
		},
		dicts: {
			type: Object,
			required: true
		}
	},
	components: {
		filterQuery,
		orderItem
	},
	data() {
		return {
			// 可以添加特定于接单中心的参数
			queryParams: {
				sendDateStart: '',
				sendDateEnd: '',
				type: '2',
				item: undefined,
				phone: undefined,
				deptId: undefined,
				state: undefined,
				status: undefined,
				allTagList: [],
				identification: undefined,
				createBy: undefined,
				pageNum: 1,
				pageSize: 10,
			},

			clueSendStatusCountList: [],

			mapHeight: "0px"
		}
	},
	methods: {
		getOtherData() {
			this.statisticsSendStatus();
		},
		async statisticsSendStatus() {
			const {
				data
			} = await uni.$u.api.statisticsSendStatus(this.queryParams);
			this.clueSendStatusCountList = data;
		},
		handleSendStatusClick(item) {
			this.queryParams.status = item.status;
			this.resetData();
		},
		handleKeyword() {
			this.resetData();
		},
		handleKeywordClear() {
			// 组件有bug 清空后的值还是存在
			this.queryParams.phone = "";
			this.resetData();
		},
		handleshowFilter() {
			this.$refs.filter.show();
		},
		async getList() {
			const {
				pageNum,
				pageSize,
			} = this.queryParams;
			this.queryParams.type = this.type;
			// 调用接单中心的接口
			const {
				rows,
				total
			} = await uni.$u.api.selectClueOrderFormList({
				pageSize,
				pageNum
			},
				this.queryParams
			);
			return rows;
		},
		handleOnReachBottom() {
			this.handleReachBottom();
		}
	},
	mounted() {
		this.resetData();
		// 根据路由名称设置类型
		this.queryParams.type = this.type;
		uni.getSystemInfo({
			success: (e) => {
				const {
					windowTop,
					windowBottom,
					windowHeight
				} = e;
				this.mapHeight = (windowHeight - 70) + 'px';
			}
		});
	},
}
</script>

<style lang="scss" scoped>
.send_status_wrap {
	width: 690rpx;
	padding: 0 30rpx;
	margin-top: 20rpx;
	display: flex;

	.clue_state_list {
		display: flex;

		.clue_state_item {
			font-size: 30rpx;
			display: inline-flex;
			/* 关键改动：改为行内弹性盒子 */
			align-items: center;
			/* 垂直居中 */
			background: #fff;
			margin-right: 30rpx;
			padding: 8rpx 16rpx;
			/* 增加内边距 */
			white-space: nowrap;
			/* 关键：禁止文本换行 */
			border-radius: 6rpx;

			&.active {
				color: #fff;
				background: #4c8afe;
			}
		}
	}
}

.order_center_wrap {
	box-sizing: border-box;
	min-height: 100vh;

	.queryParams_wrap {
		display: flex;
		background: #fff;
		padding: 14px 0;


		.query,
		.search {
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			font-weight: 700;
			color: #202020;
		}

		.query {
			flex: 1;
		}

		.search {
			flex: 2;
			padding-left: 20px;
		}
	}
}

.order_item_wrap {
	padding: 10px 20px;
}

.empty_wrap {
	margin-top: 100px;
}
</style>