<!--我的考勤-详情-->
<template>
  <view class="main_box">
    <fui-segmented-control
        :values="optionTable"
        :current="(Number(filteredData.status))"
        type="text"
        activeColor="#29d3b4"
        color="#fff"
        @click="segmented">
    </fui-segmented-control>

    <view class="main_section">
<!--      教练端-->
      <view v-if="userType == 1">

        <!--全部-->
        <scroll-view
            class="section_1"
            v-if="filteredData.status == '0'"
            scroll-y="true"
            :lower-threshold="lowerThreshold"
            @scrolltolower="loadMoreData"
            style="height: 80vh;"
        >
          <view class="ul">
            <view class="li"
                  v-for="(v,k) in tableList"
                  :key="k"
            >
              <view class="left">
                <image :src="$util.img(v.courses.thumbnail)" model="aspectFill"></image>
              </view>
              <view class="right">
                <view class="content">{{v.courses.name}}</view>
                <view class="content">
                  {{v.status == 1 ? '考勤正常':'请假'}}

                </view>
                <view class="content">{{v.add_time}} - {{v.end_time}}</view>
              </view>
            </view>
          </view>
        </scroll-view>

        <!--考勤-->
        <scroll-view
            class="section_1"
            v-if="filteredData.status == '1'"
            scroll-y="true"
            :lower-threshold="lowerThreshold"
            @scrolltolower="loadMoreData"
            style="height: 80vh;"
        >
          <view class="ul">
            <view class="li"
                  v-for="(v,k) in tableList"
                  :key="k"
            >
              <view class="left">
                <image :src="$util.img(v.courses.thumbnail)" model="aspectFill"></image>
              </view>
              <view class="right">
                <view class="content">{{v.courses.name}}</view>
                <view class="content">
                  {{v.status == 1 ? '考勤正常':'请假'}}

                </view>
                <view class="content">{{v.add_time}} - {{v.end_time}}</view>
              </view>
            </view>
          </view>
        </scroll-view>

        <!--请假-->
        <scroll-view
            class="section_1"
            v-if="filteredData.status == '2'"
            scroll-y="true"
            :lower-threshold="lowerThreshold"
            @scrolltolower="loadMoreData"
            style="height: 80vh;"
        >
          <view class="ul">
            <view class="li"
                  v-for="(v,k) in tableList"
                  :key="k"
            >
              <view class="left">
                <image :src="$util.img(v.courses.thumbnail)" model="aspectFill"></image>
              </view>
              <view class="right">
                <view class="content">{{v.courses.name}}</view>
                <view class="content">
                  {{v.status == 1 ? '考勤正常':'请假'}}

                </view>
                <view class="content">{{v.add_time}} - {{v.end_time}}</view>
              </view>
            </view>
          </view>
        </scroll-view>

      </view>
<!--      销售端-->
      <view v-else>
        <!--全部-->
        <scroll-view
            class="section_1"
            v-if="filteredData.status == '0'"
            scroll-y="true"
            :lower-threshold="lowerThreshold"
            @scrolltolower="loadMoreData"
            style="height: 80vh;"
        >
          <view class="ul">
            <view class="li"
              v-for="(v,k) in tableList"
              :key="k"
            >
              <view class="left">
<!--                <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>-->
              </view>
              <view class="right">
                <view class="content">普通考勤</view>
                <view class="content">
                  {{v.status == 1 ? '考勤正常':'请假'}}
                </view>
                <view class="content">{{v.add_time}} - {{v.end_time}}</view>
              </view>
            </view>
          </view>

        </scroll-view>

        <!--考勤-->
        <scroll-view
            class="section_1"
            v-if="filteredData.status == '1'"
            scroll-y="true"
            :lower-threshold="lowerThreshold"
            @scrolltolower="loadMoreData"
            style="height: 80vh;"
        >
          <view class="ul">
            <view class="li"
                  v-for="(v,k) in tableList"
                  :key="k"
            >
              <view class="left">
                <!--                <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>-->
              </view>
              <view class="right">
                <view class="content">普通考勤</view>
                <view class="content">
                  {{v.status == 1 ? '考勤正常':'请假'}}
                </view>
                <view class="content">{{v.add_time}} - {{v.end_time}}</view>
              </view>
            </view>
          </view>

        </scroll-view>

        <!--请假-->
        <scroll-view
            class="section_1"
            v-if="filteredData.status == '2'"
            scroll-y="true"
            :lower-threshold="lowerThreshold"
            @scrolltolower="loadMoreData"
            style="height: 80vh;"
        >
          <view class="ul">
            <view class="li"
                  v-for="(v,k) in tableList"
                  :key="k"
            >
              <view class="left">
                <!--                <image src="http://www.firstui.cn:4000/vipdoc/img/img_logo.png" model="aspectFill"></image>-->
              </view>
              <view class="right">
                <view class="content">普通考勤</view>
                <view class="content">
                  {{v.status == 1 ? '考勤正常':'请假'}}
                </view>
                <view class="content">{{v.add_time}} - {{v.end_time}}</view>
              </view>
            </view>
          </view>
        </scroll-view>

      </view>

      <!--请假按钮-->
      <view class="section_btn">
        <view class="btn" @click="openShow()">请假</view>
      </view>

    </view>

<!--    请假提示框-->
    <fui-dialog :show="show" :content="content" maskClosable @click="onClick" @close="closeShow"></fui-dialog>
  </view>
</template>

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


export default {
  components: {
    AQTabber,
  },
  data() {
    return {
      userType: '', //用户类型|1=教练,2=销售
      //tab切换
      optionTable: [
        {
          id: 0,
          name: '全部'
        },
        {
          id: 1,
          name: '考勤'
        },
        {
          id: 2,
          name: '请假'
        }
      ],


      loading:false,//加载状态
      lowerThreshold: 100,//距离底部多远触发
      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载

      //筛选条件
      filteredData:{
        page:1,//当前页码
        limit:10,//每页返回数据条数
        total:10,//数据总条数
        status:'0'//0全部 1考勤 2请假
      },
      tableList:[],//表格数据

      //请假表单
      formData:{
        date:'',//请假日期
      },

      //请假提示框相关
      show:false,//是否展示
      content:'',//请假提示语
    }
  },
  onLoad(options) {},
  onShow(){
    this.init()//初始化
  },
  methods: {
    //初始化
    async init(){
      this.userType = uni.getStorageSync('userType')
      // this.userType = 2
      this.getCurrentDate()//获取并格式化当前日期
      await this.getList();
    },

    // 获取并格式化当前日期
    getCurrentDate() {
      let now = new Date();
      let year = now.getFullYear();
      let month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要加 1
      let day = String(now.getDate()).padStart(2, '0');


      let res = `${year}-${month}-${day}`

      this.content = `${res} 是否确认请假?`

      this.formData.date = res
    },

    //切换tag列表
    async segmented(e) {
      console.log(e)
      //重置为第一页
      await this.resetFilteredData()

      //e.id|0全部 1考勤 2请假
      let status = e.id
      this.filteredData.status = String(status)
      await this.getList()
    },

    //加载更多(下一页)
    loadMoreData() {
      //判断是否加载
      if (!this.isReachedBottom) {
        this.isReachedBottom = true;//设置为不可请求状态
        this.getList();
      }
    },
    //重置为第一页
    async resetFilteredData() {
      this.isReachedBottom = false; // 重置状态，以便下次触发加载更多

      this.filteredData.page = 1//当前页码
      this.filteredData.limit = 10//每页返回数据条数
      this.filteredData.total = 10//数据总条数
    },
    //获取列表
    async getList(){
      this.loading = true

      let data = {...this.filteredData}

      //判断是否还有数据
      if(this.filteredData.page * this.filteredData.limit > this.filteredData.total){
        this.loading = false
        uni.showToast({
          title: '暂无更多',
          icon: 'none'
        })
        return
      }

      if(data.page == 1){
        this.tableList = []
      }

      let res = await commonApi.clockingList(data)
      this.loading = false
      this.isReachedBottom = false;
      if (res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中

      console.log('列表',this.tableList)
      this.filteredData.total = res.data.total
      this.filteredData.page++
    },

    //打开请假提示框
    openShow(){
      this.show = true
    },
    //关闭请假提示框
    closeShow(){
      this.show = false
    },
    //点击确认请假按钮
    onClick(e){
      console.log('xxx',e)
      if(e.index == 0){
        //取消按钮
        this.closeShow()
      }else{
        //确认按钮
        this.submitRest()
      }
    },

    //发起请假请求
    async submitRest() {

      this.closeShow()

      let param = {...this.formData}
      let res = await commonApi.clockingRest(param)
      if (res.code != 1) {
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      uni.showToast({
        title: '操作成功',
        icon: 'success'
      })

      //延迟1s执行
      setTimeout(() => {
        this.segmented({id:0})//初始化
      }, 1500)
    }


  }
}
</script>

<style lang="less" scoped>

.main_box{
  background: #292929 ;
}

//自定义导航栏
.navbar_section{
  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: #315d55;
  }
}

.main_section{
  min-height: 100vh;
  background: #292929 100%;
  padding: 0 24rpx;
  padding-top: 32rpx;
  padding-bottom: 150rpx;
  font-size: 28rpx;
  .section_1{
    color: #fff;
    font-size: 28rpx;
    .ul{
      margin-top: 23rpx;
      display: flex;
      flex-direction: column;
      gap: 24rpx;
      .li{
        display: flex;
        align-items: center;
        gap: 43rpx;
        .left{
          image{
            width: 174rpx;
            height: 174rpx;
            border-radius: 24rpx;
            background-color: #333333;
          }
        }
        .right{
          display: flex;
          flex-direction: column;
          gap: 18rpx;
          .content{
            font-size: 24rpx;
          }
          .content:nth-child(1){
            font-size: 28rpx;
          }
        }
      }
    }
    .title_box{
      margin-top: 46rpx;
      font-size: 28rpx;
    }
    .subhead_box{
      margin-top: 22rpx;
      font-size: 24rpx;
    }
  }

  .section_btn{
    display: flex;
    justify-content: center;
    .btn{
      width: 722rpx;
      height: 64rpx;
      line-height: 64rpx;
      border-radius: 8rpx;
      background-color: rgba(32,202,175,1);
      color: rgba(255,255,255,1);
      font-size: 28rpx;
      text-align: center;
    }
  }

}


</style>