<!-- 消息 -->
<template>
  <view class="message">
    <TabBar></TabBar>
    <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"/>
  </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"
export default {
  components: {
    TabBar, GetPhonePopup
  },
  data() {
    return {
      isManager: false,
      list: [],
      phone: "",
			popShow: 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");
    console.log("----------", typeof this.phone);
    this.checkphone();
    this.fetchMessageList();
  },
	//下拉刷新
	onPullDownRefresh() {
	  this.fetchMessageList().then(() => {
			uni.stopPullDownRefresh(); //停止下拉刷新
		});
	},
  mounted() {
    if (uni.getStorageSync("userInfo")) {
      const userInfo = JSON.parse(uni.getStorageSync("userInfo"));
      if (userInfo.salt === "物业人员") {
        this.isManager = true;
      } else {
        this.isManager = false;
      }
    }
  },
  methods: {
    clickDetail(id) {
      wx.navigateTo({
        url: `/pages/checkMessageDetail/checkMessageDetail?id=${id}`,
      });
    },
    //获取消息列表
    async fetchMessageList() {
      const res = await getMessageList();
      this.list = res.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()),
        };
      });
    },
    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();
        }
      } else {
        //没有电话就弹出授权
        this.popShow = true;
				console.log('消息页面', this.popShow)
      }
    },
		closePop() {
			this.popShow = false;
		}
  },
};
</script>

<style lang="scss" scoped>
.message {
  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>