<!-- 消息 -->
<template>
  <view class="message">
    <!-- <TabBar></TabBar> -->
		<!-- <u-empty 
			:show="!list.length" 
			mode="coupon"  
			width="300"
			height="260"
			text="暂无消息"
			iconColor="#ff7b7c"
			textColor="#333"
			textSize="18"
			icon="http://cdn.uviewui.com/uview/empty/coupon.png"
			marginTop="20">
		</u-empty> -->
    <view class="main" v-for="(item, index) in list" :key="index">
      <view class="date-time">{{ item.messageTime }}</view>
      <view class="card" @click="clickDetail(item.id)">
        <view class="title">
          <!-- <text v-show="isManager">收到新的访客申请</text>
					<text v-show="!isManager" class="text">您的访客信息{{item.status}}</text> -->
          <view class="ui">
            <view class="text">
              <text class="name">{{ item.name }}</text>
              <text class="number">{{ item.number }}</text>
            </view>

            <view :class=" item.status === '未通过' ? 'button-area' : item.status === '已通过' ? 'button-area pass' : 'button-area submit'">
							申请{{ item.status }}
						</view>
          </view>
          <view class="ui-time">
            <text class="start">{{ item.startTime }}</text>
            <text class="text"> 至 </text>
            <text class="end">{{ item.endTime }}</text>
            <!-- <text class="end">{{item.timeData}}</text> -->
          </view>
        </view>
        <!-- <view class="content">
					<text class="content-title">申请者工号：</text>
					<text class="value">{{item.number}}</text>
				</view>
				<view class="content">
					<text>ㅤ访客姓名：</text>
					<text>{{item.name}}</text>
				</view>
				<view class="content">
					<text>ㅤ访问时间：</text>
					<text>{{item.time}}</text>
				</view> -->
        <!-- <view class="detail-area">
					<view class="detail" @click="clickDetail">详ㅤ情</view>
				</view> -->
      </view>
    </view>

   <!-- 获取手机号popup组件 -->
   <GetPhonePopup :popShow="popShow" @closePop="closePop" @refresh="refresh"/>
	 <LoadingList :loading="loading" :nothingMore="nothingMore" />
	 
	 <!-- 返回顶部 -->
	 <u-back-top 
	 	:scroll-top="scrollTop" 
	 	icon="arrow-up" 
	 	duration="200"
	 ></u-back-top>
  </view>
</template>

<script>
import TabBar from "@/components/tabBar/tabBar.vue";
import { js_date_time } from "../../common/formatTime.js";
import { getMessageList } from "@/api/message.js";
import { dateToString, getDateTime } from "@/common/utils.js";
import { verifyPhone } from "@/api/index.js";
import { getLogin, getUserProfile } from "@/utils/auth.js";
import GetPhonePopup from "@/components/base/getphonePopup.vue"
import LoadingList from '@/components/base/LoadingList.vue';
export default {
  components: {
    TabBar, GetPhonePopup, LoadingList
  },
  data() {
    return {
      isManager: false,  //是否是物业管理员
			scrollTop: 0,
      list: [], 
      phone: "",
			popShow: false, //控制授权手机号弹出框
			offset: 1,   //页数
			limit: 10,   //一页几条数据
			nothingMore: false, //上拉加载-没有数据了
			loading: false, //是否显示上拉加载-加载中
    };
  },
  onShow() {
    //获取页面栈
    let pages = getCurrentPages();
    const curPage = pages[pages.length - 1];
    this.currentPagePath = curPage.route;
    uni.setStorageSync("currentPagePath", this.currentPagePath);
    this.phone = uni.getStorageSync("registerPhone");
    this.checkphone()
		this.offset = 1;
  },
	//下拉刷新
	onPullDownRefresh() {
		this.offset = 1;
		this.list = [];
	  this.fetchMessageList().then(() => {
			uni.stopPullDownRefresh(); //停止下拉刷新
		});
	},
	//上滑加载
	onReachBottom() {
		this.getLoadingList();
	},
	// 监听滚动条位置
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
  mounted() {
		uni.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage"]
		});
    if (uni.getStorageSync("userInfo")) {
      const userInfo = JSON.parse(uni.getStorageSync("userInfo"));
      if (userInfo.salt === "物业人员") {
        this.isManager = true;
      } else {
        this.isManager = false;
      }
    }
  },
	//分享好友
	onShareAppMessage() {
		return {
			title: '环市东院区安防小程序',
			imageUrl: '../../static/share.jpg',
		};
	},
  methods: {
		//跳转消息详情页
    clickDetail(id) {
      wx.navigateTo({
        url: `/pages/checkMessageDetail/checkMessageDetail?id=${id}`,
      });
    },
    //获取消息列表
    async fetchMessageList() {
			if(!this.loading) {
				this.list = [];
			}
			const param = {
				offset: this.offset,
				limit: this.limit
			}
      const res = await getMessageList(param);
			if(res.records && res.records.length) {
				this.nothingMore = false;
				const responseData = res.records.map((item) => {
				  return {
				    id: item.message_id,
				    name: item.visitor_name,
				    number: item.staff_code,
				    timeData: item.apply_time,
				    startTime: dateToString(
				      new Date(item.apply_time.slice(0, item.apply_time.indexOf("-"))),
				      "yyyy-MM-dd"
				    ),
				    endTime: dateToString(
				      new Date(item.apply_time.slice(item.apply_time.indexOf("-") + 1)),
				      "yyyy-MM-dd"
				    ),
				    status:
				      item.visitor_apply_status === "1"
				        ? "已提交"
				        : item.visitor_apply_status === "2"
				        ? "已通过"
				        : "未通过",
				    messageTime: getDateTime(new Date(Number(item.send_time)).getTime()),
				  };
				});
				this.list = this.list.concat(responseData);
			} else {
				this.nothingMore = true;
			} 
    },
    // 验证手机号
		async checkphone() {
      //有电话就去验证
      if (this.phone) {
        const res = await verifyPhone(this.phone);
        if (res === "用户未注册") {
          wx.reLaunch({
            url: "/pages/register/register",
          });
        } else {
          uni.setStorageSync("registerPhone", this.phone);
          getUserProfile();
					this.refresh();
        }
      } else {
        //没有电话就弹出授权
        this.popShow = true;
				console.log('消息页面', this.popShow)
      }
    },
		closePop() {
			this.popShow = false;
		},
		//上拉加载
		async getLoadingList() {
		  if (this.nothingMore) return;
		  this.offset = this.offset + 1;
		  this.loading = true;
		  await this.fetchMessageList();
		  this.loading = false;
		},
		refresh() {
			this.offset = 1;
			this.fetchMessageList();
		}
  },
};
</script>

<style lang="scss" scoped>
.message {
	min-height: 100%;
  padding: 40rpx;
  padding-bottom: 200rpx;
  .date-time {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40rpx;
    margin-bottom: 20rpx;
    color: #9b9b9b;
  }
  .card {
    padding: 30rpx 32rpx;
    background-color: #fff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    .title {
      display: flex;
      // flex-direction: row;
      flex-direction: column;
      // justify-content: space-between;
      // align-items: center;
      font-size: 32rpx;
      .ui {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        .text {
          display: flex;
          flex-direction: row;
          align-items: center;
          .name {
            color: #333;
            font-weight: 500;
            font-size: 36rpx;
            white-space: nowrap;
          }
          .number {
            color: #b1b1b1;
            margin-left: 20rpx;
          }
        }
      }
      .ui-time {
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #b1b1b1;
        margin-top: 30rpx;
        .text {
          margin: 0 20rpx;
        }
      }
      .text {
        // font-weight: 600;
      }
      .button-area {
        padding: 6rpx 16rpx;
        background-color: #f02a0a;
        border-radius: 16rpx;
        color: #ecf9e8;
        font-size: 28rpx;
        white-space: nowrap;
      }
      .pass {
        background-color: #2ebf00;
      }
      .submit {
        background-color: #1076e3;
      }
    }
    .content {
      margin: 32rpx 0;
      .content-title {
        // margin-right: 32rpx;
      }
    }
    .detail-area {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      .detail {
        width: fit-content;
        padding: 10rpx 16rpx;
        background-color: blue;
        border-radius: 16rpx;
        // letter-spacing: 10rpx;
      }
    }
  }
}
</style>
<style lang="scss">
.message {
  .u-popup__content {
    padding: 20rpx 40rpx;
  }
}
</style>