<template>
	<view :class="isLogin ? '' : 'm-login-false'">
		<rh-loading paddingBottom="g_pb_120" v-if="loading && speed == -1" />
		<view class="m-panel" :class="!loading && speed == 0 ? 'g_bg_f_5' : ''">
			<view class="link" :class="!loading && speed == 0 ? '' : ''">
				<!-- <rh-loading bg="#ededed" v-if="loading && speed == -1" /> -->
				<view v-if="!loading && speed == 0 && isLogin" style="background-color: #ededed">
					<view>
						<view class="g_h_100"></view>
						<rh-empty :text="isLogin ? '暂无数据' : '请登录'" />
					</view>
				</view>
				<view v-if="!isLogin" style="background-color: #ededed" class="m-log g_flex_column_start">
					<rh-login-false-list loginUrl="/root/login/index"/>
				</view>
				<!-- :style="{ height: `calc(100vh - ${108 + tabbarHeight}px)` }" :scroll-y="true" @scrolltolower="reachBottom" -->
				<view v-if="speed > 0" :lower-threshold="100">
					<view class="" style="min-height: calc(100% - 90px)">
						<view class="item g_pt_18 g_pl_10 g_pr_10 g_pb_18 g_bg_f g_border_e_b" hover-class="thover" v-for="(item, index) in query.list" :key="index" @click="goDetail(item, index)">
							<view class="g_flex_row_start">
								<view class="g_flex_none g_mr_12 g_w_44 g_h_44 g_radius_50 g_flex_c" 
										  hover-class="thover" 
											:hover-stop-propagation="true" 
											@click.stop="goTel(item.tel)"
								>
									<div class="g_flex_c"
											 :class="item.tel ? 'g_bg_main' : 'g_bg_f_6'"
											 style="width: 28px;height: 28px;border-radius: 50%;"
									>
										<i class="iconfont icon-phone" style="font-size: 16px;"
										  :style="{
												'color':item.tel ? '#fff' : '#ccc'
											}"
										></i>
									</div>
								</view>
								<view class="g_flex_1 g_flex_row_start">
									<view class="g_flex_1 g_flex_column_between">
										<view class="g_fs_16 g_c_3 g_fw_bold g_ell_1"> {{ item.userName }}{{ item.setTitle }} </view>
										<view class="g_fs_14 g_c_6 g_ell_1">{{ item.storeJobName + "@" + (item.upFullName || item.upAgencyName) }}</view>
									</view>
									<view class="g_flex_none g_ml_20 g_flex_column_between">
										<view class="g_fs_14 g_c_9 g_flex_row_end">{{ item.time }}</view>
										<view class="g_fs_14 g_c_3 g_flex_row_end">{{ item.status_text }}</view>
									</view>
								</view>
							</view>
							<view class="g_flex_row_end flex_center g_mt_8" v-if="from == 'chat'" @click.stop>
								<rh-button primaryColor='#00b666' btnText="发送" fontSize="14" type="primary" size="mini" @clickBtn="sendApply(item)" />
							</view>
						</view>
						<g-panel-hr :str="query.isFinish >= 0 && query.isFinish < query.size ? speed + '个工单' : '加载中'" />
					</view>
					<!-- <view class="g_bg_f_5">
						<g-panel-hr :str="query.isFinish >= 0 && query.isFinish < query.size ? speed + '个工单' : '加载中'" />
					</view> -->
					<!-- #ifdef H5 -->
					<view class="g-h-100"></view>
					<!-- #endif -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	// 组件名称
	name: "",
	// 局部注册的组件
	components: {},
	// 组件参数 接收来自父组件的数据
	props: {
		from: {
			type: String,
			default: () => {
				return "default";
			},
		},
		list: {
			type: Array,
			default: () => {
				return [];
			},
		},
		speed: {
			type: Number,
			default: () => {
				return -1;
			},
		},
		query: {
			type: Object,
			default: () => {
				return {
					page: 1,
					size: 10,
					list: [],
					isFinish: -1,
				};
			},
		},
		tabActive: {
			type: Number,
			default: () => {
				return 0;
			},
		},
		loading: {
			type: Boolean,
			default: () => {
				return true;
			},
		},
		isLogin: {
			type: Boolean,
		},
		navInfo: {
			type: Object,
			default: () => {
				return {};
			},
		},
	},
	// 组件状态值
	data() {
		return {
			cdnBaseImg: this.G.store().cdnBaseImg,
			tabbarHeight: 0,
		};
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {},
	created() {
		this.tabbarHeight = uni.getStorageSync("TABBAR_HEIGHT");
		// console.log("this.tabbarHeight", this.tabbarHeight);
	},
	mounted() {},
	// 组件方法
	methods: {
		reachBottom() {
			let that = this;
			// console.log(123123);
			// console.log("that.query", that.query);
			this.G.isLogin();
			if (this.G.isLogin()) {
				if (that.query.isFinish == -1 || that.query.isFinish == that.query.size) {
					that.query.page++;
					that.$emit("update:query", that.query);
					that.$emit("uploadList");
				}
			}
		},
		goDetail($item, $index) {
			let that = this;
			uni.navigateTo({
				url: `/root/detail/apply?id=${$item.id}&type=${that.tabActive + 1}&relationId=${$item.relationId}`,
				// url: "/root/detail/apply?id=" + $item.id + "&type=" + (that.tabActive + 1),
			});
		},
		goLogin() {
			uni.reLaunch({
				url: "/root/person/loginIndex",
			});
		},
		goTel($item) {
			// console.log($item);
			if ($item) {
				uni.makePhoneCall({
					phoneNumber: $item,
				});
			}
		},
		sendApply(_item) {
			uni.$emit("sendApply", { ..._item, active: this.tabActive + 1 });
		},
	},
};
</script>

<style scoped lang="less">
.link {
	.item {
		.doc {
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
	}
}
</style>
