<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_40 g_h_40 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_f_6'"
											 :style="item.tel ? {'background-color': themeColor} : {}"
											 style="width: 36px;height: 36px;border-radius: 50%;"
									>
										<i class="iconfont icon-phone-fill-copy" style="font-size: 22px;"
										  :style="{
												'color':item.tel ? '#fff' : '#ccc'
											}"
										></i>
									</div>
								</view>
								<view class="g_flex_1">
									<view class="g_flex_1 g_flex_column_between" style="margin-bottom: 6px;">
										<view class="g_fs_16 g_c_3 g_fw_bold g_flex_row_between" style="margin-bottom: 6px;"> 
											<div class="g_flex_1 g_flex_column_center">
												<div class="g_ell_1">
													{{ item.userName }}{{ item.setTitle }}
												</div>
											</div>
											<div class="g_flex_none g_flex_column_center g_fs_14 g_c_3" style="font-weight: 500;">
												{{ item.newtime }}
											</div>
									  </view>
										<view class="g_fs_14 g_c_6 g_flex_1 g_flex_row_start">
											<div class="g_flex_none">
												{{ item.storeJobName}}
											</div>
											<div class="g_flex_1 g_ell_1">
												{{ item.upProviderName ? ("@" + item.upProviderName) : '' }}
											</div>
										</view>
									</view>
									<div class="g_flex_1 g_flex_row_between">
										<div class="g_flex_1 g_flex_column_center">
											<view class="g_fs_14 g_c_3 g_ell_1">#{{ item.downFullName }}</view>
										</div>
										<div class="g_flex_none g_flex_column_center">
											<view class="g_fs_14 g_c_3 g_flex_row_end">{{ item.status_text }}</view>
										</div>
									</div>
								</view>
							</view>
							<view class="g_flex_row_end flex_center g_mt_8" v-if="from == 'chat'" @click.stop>
								<rh-button 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,
			themeColor: getApp().globalData.themeColor,
			tabbarHeight: 0,
		};
	},
	// 计算属性
	computed: {},
	// 侦听器
	watch: {},
	created() {
		let that = this;
		uni.$on('themeChanged', (color) => {
			that.themeColor = color;
		});
		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>
