<template>
  <view class="page">
    <view>
      <view class="welcome">您好！<br />欢迎使用中跆协会员管理系统</view>
      <view class="flexbox">
        <view>添加会员</view>
        <view>会员缴费</view>
        <view>缴费审核</view>
      </view>

    </view>
    <uni-section padding>
      <uni-grid :column="4" :show-border="false" :square="false" @change="change">
        <uni-grid-item v-for="(item ,index) in list" :index="index" :key="index">
          <view class="grid-item-box">
            <image class="image" :src="item.url" mode="aspectFill" />
            <text class="text">{{item.text}}</text>
            <view v-if="item.badge" class="grid-dot">
              <uni-badge :text="item.badge" :type="item.type" />
            </view>
          </view>
        </uni-grid-item>
      </uni-grid>
    </uni-section>
    <uni-section title="待办提醒" padding>
      <template v-slot:right>
        <text @click="goMsgList" class="more">更多></text>
      </template>
      <view class="msglist">
        <view class="msgitem" v-for="n in 4">
          <text class="dot" :class="n.isRead?'done':''"></text>
          <view class="tt esp">你有一条会员缴费等待审批，点击前去处理!</view>
          <view class="date">2023-09-23</view>
        </view>
      </view>
    </uni-section>
  </view>
</template>

<script setup>
import * as api from '@/common/api.js';
import * as loginServer from '@/common/login.js';
import {
  getWxUser,
  getWxUserPhone
} from '@/common/login.js';
import {
  onLoad,
  onShow,
  onReady,
  onShareAppMessage,
  onShareTimeline,
  onPullDownRefresh
} from '@dcloudio/uni-app';
import {
  ref,
  getCurrentInstance
} from 'vue';


const {
  proxy
} = getCurrentInstance()
const app = getApp();


let proId;
let goPath;
const svId = ref(null);
const list = ref([{
                    url: '/static/c1.png',
                    text: '会员调动',
                    badge: '0',
                    type: "primary"
                  },
                  {
                    url: '/static/c2.png',
                    text: '调动审核',
                    badge: '1',
                    type: "success"
                  },
                  {
                    url: '/static/c3.png',
                    text: '级位考试申请',
                    badge: '99',
                    type: "warning"
                  },
                  {
                    url: '/static/c4.png',
                    text: '级位考试审核',
                    badge: '2',
                    type: "error"
                  },
                  {
                    url: '/static/c5.png',
                    text: '段位考试申请'
                  },
                  {
                    url: '/static/c6.png',
                    text: '段位考试审核'
                  },
                  {
                    url: '/static/c7.png',
                    text: '级位证书发送'
                  },
                  {
                    url: '/static/c8.png',
                    text: '段位证书发送'
                  }
]);

onShow(() => {
  if (app.globalData.isLogin) {
    init();
  } else {
			
    app.firstLoadCallback = () => {
      init();
    };
  }
})
onLoad(option => {
  if (option.scene) {
    proId = decodeURIComponent(option.scene);
  } else {
    proId = option.proId;
  }

});

function gologin(){
  let path = '/pages/index/login';
  uni.navigateTo({
    url: path
  });
}

function goCenter() {
  let path = '/pages/usercenter/usercenter';
  if (checkUserPhone(path)) {
    uni.navigateTo({
      url: path
    });
  }
}

function init() {
  uni.showToast({
    title:uni.getStorageSync('userType')
  })
}

function goMsgList(){
		
}

function goItem(item) {
  if (item.path) {
    let path = item.path
    // if (checkUserPhone(path)) {
    uni.navigateTo({
      url: item.path
    });
    // }
  } else {
    uni.showToast({
      title: `暂未开放`,
      icon: 'none'
    });
  }

}
</script>
<style scope lang="scss">
	.welcome{padding: 55rpx;
line-height: 55rpx;
font-size: 36rpx;}
	.flexbox {
		display: flex;
		justify-content: space-around;
	}

	.image {
		width: 25px;
		height: 25px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-item-box-row {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}

	.grid-dot {
		position: absolute;
		top: 5px;
		right: 15px;
	}
	:deep(.uni-section){
		background-color: transparent;
	}
	:deep(.uni-section .uni-section-header__content){font-size: 36rpx;color: #29343C;}
	.more{color: #929AA0;font-size: 24rpx;}
	.msglist{
		.msgitem{background: #FFFFFF;border-radius: 10rpx;margin-bottom: 25rpx;padding: 30rpx 20rpx 30rpx 50rpx;
		position: relative;
			.dot{width: 12rpx;display: block;position: absolute;left: 20rpx;top: 40rpx;
height: 12rpx;
background: #C40F18;
border-radius: 50%;}
			.dot.done{
background: #C7C7CD;}
			.tt{
font-size: 28rpx;
color: #29343C;}
			.date{
color: #929AA0;
font-size: 24rpx;}
		}
	}
</style>