<!--销售我的-首页-->
<template>
  <view class="main_box">
    <!--自定义导航栏-->
    <view class="navbar_section">
      <view class="title">我的</view>
    </view>

    <view style="background:#29D3B4;">
      <!--用户信息-->
      <view class="user_section">
        <view class="box">
          <view class="left" @click="openViewMyInfo()">
            <image class="pic" :src="$util.img(userInfo.headimg)"></image>
            <view class="name">{{userInfo.name}}</view>
          </view>
          <view class="right">
            <view class="btn"></view>
<!--            <view class="btn">切换身份</view>-->
            <view class="btn"></view>
          </view>
        </view>
        <view class="bottom">
          <view class="title">部门</view>
          <view class="title">销售部</view>
          <view class="division"></view>
          <view class="title">等级</view>
          <view class="title">S5</view>
        </view>
      </view>

      <!--统计信息-->
      <view class="count_section">
        <view class="main">
          <view class="course_box">
            <view class="top">
              <view class="item">
                <view class="num">{{userInfo.yjds}}</view>
                <view class="intro">业绩单数/人</view>
              </view>
              <view class="item">
                <view class="num">{{userInfo.yqds}}</view>
                <view class="intro">已签单数/人</view>
              </view>
              <view class="item">
                <view class="num">1234</view>
                <view class="intro">新课签到数/人</view>
              </view>
            </view>
            <view class="bottom">
              较上月
              <text class="reduce">-5</text>
            </view>
          </view>
        </view>
        <view class="bg_box bg_top"></view>
        <view class="bg_box bg_bottom"></view>
      </view>
    </view>



    <view class="main_section">
      <view class="section_box">
        <view class="item">
         <view @click="openViewSignedClientList()">已签客户</view>
         <view>{{signedClientListCount}}</view>
        </view>

        <view class="item" @click="openViewFirmInfo()">
          <view>企业信息</view>
          <view></view>
        </view>

        <view class="item" @click="openViewMyAttendance()">
          <view>我的考勤</view>
          <view></view>
        </view>

        <view class="item" @click="openViewMyMessage()">
          <view>我的消息</view>
          <view></view>
        </view>
      </view>

      <view class="section_box">
        <view class="item" @click="openViewFeedback()">
          <view>意见反馈</view>
          <view></view>
        </view>

        <view class="item" @click="openViewSetUp()">
          <view>设置</view>
          <view></view>
        </view>
      </view>
    </view>

<!--    底部导航-->
    <AQTabber/>
  </view>
</template>

<script>
import marketApi from '@/api/market.js';
import {
  Api_url
} from "@/common/config.js";
import AQTabber from "@/components/AQ/AQTabber.vue"


export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      formData:{},
      userInfo:{},//用户信息
      //上传图片APi路径
      uploadUrl: `${Api_url}/file/image`,

      signedClientListCount:0,//已签客户数量
    }
  },
  onLoad() {
  },
  onShow() {
    this.init();
  },
  methods: {

    //初始化
    async init(){
      await this.getUserInfo()//获取用户详情
      await this.getSignedClientListCount()//获取已签客户数量
    },

    //获取已签客户数量
    async getSignedClientListCount(){
      let data = {
        page:1,
        limit:1,
      }
      let res = await marketApi.signClient(data);
      if (res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      this.signedClientListCount = res.data.total
    },

    //获取用户详情
    async getUserInfo(){
      let data = {}
      let res = await marketApi.member(data);
      if (res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }
      this.userInfo = res.data
    },


    //打开到课率统计
    openViewArrivalStatistics(){
      uni.navigateTo({
        url: '/pages/market/my/arrival_statistics'
      })
    },

    //打开即将到期
    openViewDueSoon(){
      uni.navigateTo({
        url: '/pages/market/my/due_soon'
      })
    },

    //打开授课统计
    openViewSchoolingStatistics(){
      uni.navigateTo({
        url: '/pages/market/my/schooling_statistics'
      })
    },

    //打开意见反馈
    openViewFeedback(){
      uni.navigateTo({
        url: '/pages/common/feedback'
      })
    },

    //打开个人资料
    openViewMyInfo(){
      uni.navigateTo({
        url: '/pages/market/my/info'
      })
    },


    //跳转页面-已签客户
    openViewSignedClientList(){
      uni.navigateTo({
        url: '/pages/market/my/signed_client_list'
      })
    },

    //跳转页面-我的考勤
    openViewMyAttendance(){
      uni.navigateTo({
        url: '/pages/common/my_attendance'
      })
    },


    //打开企业信息
    openViewFirmInfo(){
      uni.navigateTo({
        url: '/pages/market/my/firm_info'
      })
    },


    //打开设置
    openViewSetUp(){
      uni.navigateTo({
        url: '/pages/market/my/set_up'
      })
    },

    //跳转页面-我的消息
    openViewMyMessage(){
      uni.navigateTo({
        url: '/pages/common/my_message'
      })
    },
  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929;
  min-height: 28vh;
}

//自定义导航栏
.navbar_section{
  border: 1px solid #29D3B4;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #29D3B4;
  .title{
    padding: 40rpx 0rpx;

    /* 小程序端样式 */
    // #ifdef MP-WEIXIN
    padding: 80rpx 0rpx;
    // #endif

    font-size: 30rpx;
    color: #fff;
  }
}

//用户信息
.user_section {
  background-color: #29D3B4;
  padding-top: 58rpx;
  padding-bottom: 42rpx;
  color: #fff;
  font-size: 28rpx;
  .box{
    padding-left: 19rpx;
    padding-right: 29rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15rpx;
    .left{
      display: flex;
      align-items: center;
      gap: 20rpx;
      .pic{
        width: 144rpx;
        height: 144rpx;
        border-radius: 50%;
      }
      .name{
        font-size: 28rpx;
      }
    }
    .right{
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .btn{
        min-height: 28rpx;
        font-size: 28rpx;
      }
    }
  }
  .bottom{
    margin-top: 30rpx;
    padding: 0rpx 40rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .title{
      font-size: 28rpx;
    }
    .division{
      width: 2px;
      height: 35rpx;
      background-color: #fff;
    }
  }
}

//统计信息
.count_section{
  position: relative;
  .main{
    position: relative;
    z-index: 2;
    padding: 0rpx 24rpx;
    display: flex;
    justify-content: center;
    .course_box{
      padding: 42rpx 28rpx;
      width: 692rpx;
      border-radius: 20rpx;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      gap: 32rpx;
      .top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .item{
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 12rpx;
          .num{
            color: #29D3B4;
            font-size: 56rpx;
          }
          .intro{
            color: #AAAAAA;
            font-size: 24rpx;
          }
        }
      }
      .bottom{
        font-size: 24rpx;
        color: #333333;
        text{
          margin-left: 10rpx;
          color: #29D3B4;
        }
        .reduce{
          color: #ef95a0;
        }
      }

  }
}
  .bg_box{
    z-index: 1;
    width: 100%;
    height: 150rpx;
  }

  .bg_top{
    position: absolute;
    top: 0;
    background-color: #29D3B4;
  }
  .bg_bottom{
    top: 50%;
    position: absolute;
    background-color: #292929;
  }
}

.main_section{
  background: #292929 100%;
  padding: 0 24rpx;
  padding-top: 40rpx;
  padding-bottom: 150rpx;
  font-size: 24rpx;
  color: #333333;
  display: flex;
  flex-direction: column;
  gap: 22rpx;

  .section_box {
    background: #fff;
    border-radius: 16rpx;
    padding: 6rpx 24rpx;
    display: flex;
    flex-direction: column;
    .item{
      padding: 24rpx 78rpx;
      border-top: 1px solid #F2F2F2;
      font-size: 28rpx;
      display: flex;
      justify-content: space-between;
    }
    .item:nth-child(1){
      border-top: 0;
    }


  }

}


</style>