<template>
	<view class="p-root-bind-apply g_w_all g_h_all g_bg_f_5 g_kuaishou">
		<g-loading :loading='loading' v-if="loading && speed == -1"/>
		<view class="g_pt_130" v-if="!loading && speed == 0">
			<g-empty />
		</view>
		<view class="" v-if="speed > 0">
			<view v-for="(item,index) in list" :key="index">
				<u-sticky @fixed="handleFixed(item,index)"
								  @unfixed="handleUnFixed(item,index)"
									:index='index'
									offset-top='96'
				>
					<view class="">
						<view class="g_c_9 g_fs_14 g_pt_12 g_pb_12 g_pl_16 g_pr_16 true g_bg_f_5"
									v-if="item.isShowTime"
						>{{item.time}}</view>
						<view class="g_c_3 g_fs_14 g_pt_12 g_pb_12 g_pl_16 g_pr_16 g_bg_f_5 false"
									v-if="!item.isShowTime"
						>
							{{stickyText}}
						</view>
					</view>
				</u-sticky>
				<view class="g_flex_row_start g_pt_12 g_pl_16 g_pr_16 g_bg_f" 
						  v-for="(itm,inx) in item.children" :key="inx"
							@click="goPage(itm,item)"
							hover-class="thover"
				>
					<view class="g_flex_none g_mr_11 m-avatar" style="position: relative;">
						<g-panel-image :url="itm.logo" size='96' radius="6" v-if="itm.logo" />
						<g-panel-image size='96' radius="6" v-if="!itm.logo" />
						
						<view class="g_flex_c"
									v-if="itm.supplierAccount == 1"
									style="position:absolute; overflow:hidden;width: 20px;height: 10px;right: -2px;top: 0;"
						>
							<image :src="cdnBaseImg + 'fadanhao.svg'"
										 mode="widthFix" 
										 style="width: 16px;height: 13px;"
							></image>
						</view>
					</view>
					<view class="g_flex_1 g_border_e_b">
						<view class="g_flex_row_between g_pb_12">
							<view class="g_flex_1 g_flex_column_between g_h_48">
								<view class="g_fs_18 g_c_3">{{itm.agencyName}}</view>
								<view class="g_fs_14 g_c_9">{{itm.remark ? itm.remark : '-'}}</view>
							</view>
							<view class="g_flex_none g_flex_column_center">
								<!-- 三天前：未通过的为已过期，已通过的不动 -->
								<view v-if="type == 1">
									<view v-if="itm.recordStatus == 1" class="g_fs_14 g_c_9">
										{{item.time == '三天前' ? '已过期' : '等待通过'}}
									</view>
									<view v-if="itm.recordStatus == 2">
										<view class="g_radius_14 g_h_28 g_border_e g_fs_14 g_c_6 g_pr_8 g_pl_8 g_flex_row_center flex_center">
											<i class="iconfont icon-duihao g_fsi_12 g_mr_6 "></i>
											已通过
										</view>
									</view>
								</view>
								<view v-if="type == 2">
									<view v-if="itm.recordStatus == 1 && item.time == '近三天'"
												class="g_fs_14 g_c_6 g_bg_f_5 g_pt_8 g_pb_8 g_pl_11 g_pr_11 g_radius_8"
									>查看</view>
									<view v-if="itm.recordStatus == 1 && item.time == '三天前'" class="g_fs_14 g_c_9">已过期</view>
									<view v-if="itm.recordStatus == 2" class="g_fs_14 g_c_9">已通过</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view>
				<g-panel-hr str="没有更多了" />
			</view>
			<view class="g_h_50 g_w_all"></view>
		</view>
	</view>
</template>

<script>
	export default{
		onReady() {
			this.G.setNavStyle();
		},
		onShareAppMessage(){
			return this.G.shareFun();
		},
		data(){
			return{
				cdnBaseImg:this.G.store().cdnBaseImg,
				loading:true,
				speed:-1,
				title:'',
				list:[],
				stickyText:"近三天",
				type:1,
				keys:''
			}
		},
		props:{
			keyword:{
				default:()=>{
					return ''
				}
			}
		},
		created() {
			this.type = 2;
			this.keys = this.keyword;
			this.getList();
		},
		watch:{
			'keyword'(val){
				this.keys = val;
				this.loading = true;
				this.speed = -1;
				this.getList();
			},
		},
		methods:{
			getList(){
				let that = this;
				that.G.Get(that.api.bind_recordList + '/' + that.type,{
					pageNum: 1,
					pageSize: 50,
					type:that.type,
					keys:that.keys
				},(res)=>{
					if(res.length == 0){
						that.loading = false;
					}else{
						that.loading = true;
					}
					console.log("申请列表：",res)
					that.speed = res.length;
					if(that.speed == 0){
						that.list = [];
					}else{
						const now = new Date().getTime();
						const threeDaysAgo = now - 3 * 24 * 60 * 60 * 1000;
						const resultArray = res.reduce((acc, item) => {
						  const timeCategory = item.createTime >= threeDaysAgo ? '近三天' : '三天前';
						  const existingCategory = acc.find(category => category.time === timeCategory);
						  if (existingCategory) {
						    existingCategory.children.push(item);
						  } else {
						    acc.push({
						      time: item.createTime >= threeDaysAgo ? '近三天' : '三天前',
						      children: [item]
						    });
						  }
						  return acc;
						}, []);
						console.log('申请列表：',resultArray)
						resultArray.forEach((item,index) => {
							item.isShowTime = true;
						})
						that.list = resultArray;
						that.$forceUpdate();
					}
				},()=>{
					that.loading = false;
				})
			},
			goPage($itm,$item){
				let that = this;
				console.log('当前行点击事件：',$itm)
				if($itm.recordStatus == 1){
					// 等待通过
					uni.navigateTo({
						url:'/root/bind/view?id=' + $itm.id + '&type=2&status=' + $itm.recordStatus + '&time=' + $item.time
					})
				}else{
					let params = {
						id:$itm.agencyId,
						type:that.type,
						isShowMore:false,
						isShowJob:false
					}
					
					if(that.type == 1){// 
						if($itm.recordStatus == 2){// 已关注
							params.isShowMore = true;
							params.isShowJob = true;
						}
					}else{// 粉丝
						if($itm.recordStatus == 2){// 已通过
							// if(){// 是我的发单号
							// 	params.isShowMore = true;
							// 	params.isShowJob = true;
							// }else{// 不是我的发单号
								params.isShowMore = true;
								params.isShowJob = false;
							// }
						}
					}
					
					uni.navigateTo({
						url:'/root/detail/userShare?' + that.G.objToStr(params)
					})
				}
			},
			handleFixed($item,$index){
				this.stickyText = $item.time;
				this.$forceUpdate();
				$item.isShowTime = false;
			},
			handleUnFixed($item,$index){
				this.stickyText = $item.time;
				this.$forceUpdate();
				$item.isShowTime = true;
			}
		}
	}
</script>

<style lang="scss">
	.p-root-bind-apply{
		overflow-y: auto;
		.m-avatar{
			.u-avatar__img,image{
				border-radius: 6px !important;
			}
		}
	}
</style>