<template>
  <view :style="{marginTop: titleTop + 'px', backgroundColor:'#ffffff', width: '100%', position: 'relative', height: 'calc(100% - ' + titleTop+'px)' }" class="xinchou-container">
    <view class="title">薪酬管理</view>
    <view class="topView">
      <view class="headImg" @click="my()"></view>
    </view>


    <view class="top-tab">
      <view class="tab">
        <view class="item-container" @click="tabChange(1)">
          <view class="item" >
            <view :class="nowTab == 1 ? 'tab-title-focus' : 'tab-title'">
              任务薪酬列表
            </view>
            <view :class="nowTab == 1 ? 'bottom-line-focus' : 'bottom-line'" ></view>
          </view>
        </view>

        <view class="item-container" @click="tabChange(2)">
          <view class="item" >
            <view :class="nowTab == 2 ? 'tab-title-focus' : 'tab-title'">
              资金流水
            </view>
            <view :class="nowTab == 2 ? 'bottom-line-focus' : 'bottom-line'"></view>
          </view>
        </view>
      </view>
      <view class="filter-btn" @click="filterOpen">
        筛选
      </view>
    </view>

    <!-- 普通弹窗 -->
    <uni-popup ref="popup" style="z-index: 10000" type="bottom" >
      <view class="popup-content dialog" :class="{'popup-height': type === 'left' || type === 'right' }">
        <view class="filter-line1">
          <view class="label">任务名称</view>
          <input type="text"  v-model="queryParams.taskName"></input>
        </view>
        <view class="filter-line1">
          <view class="label">日期</view>
          <view class="example-body">
            <uni-datetime-picker type="date" :clear-icon="true" v-model="queryParams.taskDate" @maskClick="maskClick" @change="timeChange($event)"/>
          </view>
        </view>
        <view class="filter-line2">
          <view class="reset-btn" @click="reset()">重置</view>
          <view class="submit-btn" @click="search">确定</view>
        </view>
      </view>
    </uni-popup>

<!--    <uni-popup style="z-index: 10000" ref="popup" type="bottom" border-radius="10px 10px 0 0">-->
<!--      <view class="selectContext">-->
<!--        <view class="select-item" @click="filter(0)">全部任务</view>-->
<!--        <view class="select-item" @click="filter(1)">进行中的任务</view>-->
<!--        <view class="select-item" @click="filter(2)">已结束的任务</view>-->
<!--      </view>-->
<!--    </uni-popup>-->

<!--    <uni-collapse-item>-->
<!--      <view class="content">-->
<!--        <text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>-->
<!--      </view>-->
<!--    </uni-collapse-item>-->

    <scroll-view v-if="nowTab==1" class="xinchou-list"
                 :scroll-top="scrollTop"
                 scroll-y="true"
                 :refresher-enabled="isOpenRefresh"
                 :refresher-triggered="triggered"
                 @refresherrefresh="refresh"
                 @scrolltoupper="upper"
                 @scroll="scroll"
                 @scrolltolower="loadMore"
                 @refresherpulling="onPulling">
      <view class="card" @click="goDetails(task)" v-for="(task, index) in taskList"  :key="index">
        <view class="line1">
          <view class="task-name">
            {{task.taskName}}
          </view>
        </view>
        <view class="line2">
          <view class="date-icon"></view>
          <view class="date">用工日期:{{task.taskDate}}</view>


          <view class="day-price">
            <view class="day-price-icon"></view>
            日结单价
          </view>
          <view class="price">
            ¥{{task.dayPrice}}
          </view>
        </view>

        <view class="card-container">
          <view class="line3">

            <view class="num-container">
              <view class="num-label">
                签到人数
              </view>
              <view class="num">
                {{task.signNum}}
              </view>

            </view>

            <view class="num-container">
              <view class="num-label">
                应发总额
              </view>
              <view class="num">
                {{task.yfPrice}}
              </view>

            </view>
            <view class="num-container">
              <view class="num-label">
                实发总额
              </view>
              <view class="num">
                {{task.sfPrice}}
              </view>

            </view>

            <view class="num-container">
              <view class="num-label">
                待发总额
              </view>
              <view class="num">
                {{task.dfPrice}}
              </view>

            </view>

          </view>


          <view class="line4">
            <view class="line4-1">
              <view class="line4-1-1">
                <view class="icon"></view>
                <view class="text">发薪笔数 {{task.yfNum}}</view>
                <view class="text">实发笔数 {{task.sfNum}}</view>
                <view class="text">待发笔数 {{task.dfNum}}</view>
              </view>
              <view class="line4-1-2">
                <view class="icon"></view>
                <view class="date-label">发布时间: {{task.createTime}}</view>
              </view>
            </view>
            <view class="button"></view>
          </view>


        </view>

      </view>

      <view v-if="showLoading" class="load-more">加载中...</view>
      <view v-if="showNoMore" class="no-more">没有更多数据了</view>
    </scroll-view>



    <scroll-view v-if="nowTab == 2" class="fund-record"
                 :scroll-top="scrollTop"
                 scroll-y="true"
                 :refresher-enabled="isOpenRefresh"
                 :refresher-triggered="triggered"
                 @refresherrefresh="refresh"
                 @scrolltoupper="upper"
                 @scroll="scroll"
                 @scrolltolower="loadMore"
                 @refresherpulling="onPulling">

        <view class="fund-item" v-for="(task, index) in taskList">
          <view class="fund-item-title">
            <view class="task-name"> {{task.taskName}} </view>
            <view class="date"> {{task.taskDate}}</view>
            <view class="dj">日结单价(元):<view>{{task.dayPrice}}</view></view>
          </view>
          <view class="fund-item-tbl">

            <uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据" @selection-change="selectionChange">
              <uni-tr>
                <uni-th width="80" align="center">用工姓名</uni-th>
                <uni-th width="107" align="center">手机号码</uni-th>
                <uni-th width="80" align="center">发薪状态</uni-th>
                <uni-th width="80" align="center">实发金额</uni-th>
                <uni-th width="80" align="center">应发金额</uni-th>
                <uni-th width="162" align="center">身份证号</uni-th>
                <uni-th width="200" align="center">备注</uni-th>
              </uni-tr>
              <uni-tr v-for="(sign, i) in task.listSign" :key="i"  v-if="sign.status == 1">
                <uni-td width="80" align="center">{{ sign.employeeName }}</uni-td>
                <uni-td width="90" align="center">{{ sign.phone }}</uni-td>
                <uni-td width="80" align="center"><view class="status"><view :class="'status' + getPayStatus(sign).status"></view></view></uni-td>
                <uni-td width="80" align="center">{{ sign.stEmployeeFundRecord == null ? 0 : sign.stEmployeeFundRecord.realPrice }}</uni-td>
                <uni-td width="80" align="center">{{ task.dayPrice }}</uni-td>
                <uni-td width="162" align="center">{{ sign.idCard }}</uni-td>
                <uni-td width="200" align="center">{{ sign.remark == null ? "无" : sign.remark}}</uni-td>
                <!--              <uni-td>-->
                <!--                <view class="name">{{ item.name }}</view>-->
                <!--              </uni-td>-->
                <!--              <uni-td align="center">{{ item.address }}</uni-td>-->
                <!--              <uni-td>-->
                <!--                <view class="uni-group">-->
                <!--                  <button class="uni-button" size="mini" type="primary">修改</button>-->
                <!--                  <button class="uni-button" size="mini" type="warn">删除</button>-->
                <!--                </view>-->
                <!--              </uni-td>-->
              </uni-tr>
            </uni-table>
          </view>
        </view>


      <view v-if="showLoading" class="load-more">加载中...</view>
      <view v-if="showNoMore" class="no-more">没有更多数据了</view>
    </scroll-view>



  </view>
</template>

<script>
  import { getTaskList } from "@/api/task";
  export default {
    data() {
      return {
        titleTop: 0,
        statusBarHeight: 0,
        fundRecord: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          dateStatus: 0,
          taskName: null,
          taskDate: null,
        },
        taskList: [],
        nowTab: 1,
        realName: "",
        // 是否显示加载更多的loading
        showLoading: false,
        // 是否显示无更多数据提示
        showNoMore: false,
        triggered: false,
        isOpenRefresh: true,
        containerScrollTop: 0,
      }
    },

    onLoad: function() {
      let that = this;
      // 获取胶囊按钮位置信息
      const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      const { top, height } = menuButtonInfo;
      const statusBarHeight = uni.getSystemInfoSync().statusBarHeight;

      // 计算标题需要偏移的位置
      const titleTop = top + (height - statusBarHeight) / 2;
      this.titleTop = titleTop;//设置标题顶部距离
      this.statusBarHeight = statusBarHeight;//设置状态栏高度

      this.getList();
      this.realName = this.$store.state.user.nickName
    },

    methods: {
      onPageScroll(e){
        this.containerScrollTop = e.scrollTop
        if (this.containerScrollTop > 0){
          this.isOpenRefresh = false
        }else{
          this.isOpenRefresh = true
        }
      },
      onReachBottom(e){
        if (this.showLoading || this.showNoMore) {
          return;
        }
        // 显示加载更多的loading
        this.showLoading = true;
        // 请求数据
        this.getList();
      },
      // 刷新函数
      refresh() {
        // 请求数据
        this.triggered = true;
        this.queryParams.pageNum = 1;
        this.getList();
      },
      upper(){
        // console.log("upper")
      },
      scroll(e){
        // console.log("scroll", e.detail)
      },
      onPulling(e) {
        // console.log("onpulling", e.detail);
        if (e.detail.dy < 8) return  // 防止上滑页面也触发下拉
        this.triggered = true;
      },
      // 加载更多函数
      loadMore() {
        // console.log("loadMore")
        // 判断是否正在加载更多或已经没有更多数据
        if (this.showLoading || this.showNoMore) {
          return;
        }
        // 显示加载更多的loading
        this.showLoading = true;
        // 请求数据
        this.getList();
      },


      goDetails(item) {
        uni.navigateTo({
          url: "../fundDetails?id=" + item.id
        })
      },
      getList() {
        if (this.showNoMore && this.queryParams.pageNum > 1){
          return
        }

        var that = this;
        getTaskList(this.queryParams).then(response => {
          if (that.queryParams.pageNum > 1){
            that.taskList = that.taskList.concat(response.rows);
          }else{
            that.taskList = response.rows;
          }
          that.queryParams.pageNum++;
          if (response.rows.length < this.queryParams.pageSize){
            that.showNoMore = true;
          }else{
            that.showNoMore = false;
          }
          that.showLoading = false;
          that.triggered = false;

          that.total = response.total;
        });
      },

      filterOpen(){
        this.$refs.popup.open('bottom')
      },
      search(){
        this.queryParams.pageNum = 1;
        this.getList();
        this.$refs.popup.close();
      },
      reset(){
        this.queryParams.pageNum = 1;
        this.queryParams.taskName = null;
        this.queryParams.taskDate = null;
        this.getList();
        this.$refs.popup.close();
      },
      timeChange(e) {
        this.queryParams.taskDate = e;
      },
      tabChange(tab){
        this.nowTab = tab;
      },
      getPayStatus(sign){
        if (sign.stEmployeeFundRecord == null || sign.stEmployeeFundRecord.payStatus == 0){
          return {"text": "未发放", "status": 0};
        }
        if (sign.stEmployeeFundRecord.payStatus == 1){
          return {"text": "已发放", "status": 1};
        }
        if (sign.stEmployeeFundRecord.payStatus == 2){
          return {"text": "发放失败", "status": 2};
        }
        return {"text": "未发放", "status": 0};
      },
      my(){
        uni.navigateTo({
          url: "../my"
        })
      }

    }
  }
</script>

<style lang="scss">
  .table-thead {
    /*background-color: #FFFAF2 !important;*/
    position: sticky;
    left: 0;
    top: 0;
    z-index: 20;
  }
  .uni-table-th{
    background-color: #f3f3f3 ;
  }
  .uni-table-td{
    vertical-align: middle;
  }
  /deep/ .uni-table-tr {
    overflow: visible;
    background-color: #fff;
  }

  //固定表头第一列
  /deep/ .uni-table-tr .uni-table-th:first-child, {
    position: sticky;
    left: 0;
    top: 0;
    /*background-color: #FFFAF2;*/
    z-index: 10;
  }
  //固定表头第2列（需计算第一列宽度，我这里是200rpx）
  /*/deep/ .uni-table-tr .uni-table-th:nth-child(2), {*/
  /*  position: sticky;*/
  /*  left: 200rpx;*/
  /*  top: 0;*/
  /*  background-color: #FFFAF2;*/
  /*  z-index: 10;*/
  /*}*/

  //冻结thead第一列
  /deep/ .uni-table-tr .uni-table-td:first-child {
    position: sticky;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 10;
  }
  //冻结thead第二列（需计算第一列宽度）
  /*/deep/ .uni-table-tr .uni-table-td:nth-child(2) {*/
  /*  position: sticky;*/
  /*  left: 200rpx;*/
  /*  top: 0;*/
  /*  background-color: #fff;*/
  /*  z-index: 10;*/
  /*}*/
  html, body {
    background-color: #ffffff;
    height: 100%;
  }
  page{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
  .load-more, .no-more {
    display: grid;
    place-content: center;
    padding: 10rpx;
    color: #999;
    height: 80rpx;

  }
  .title {
    font-size: 25rpx;
    color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90rpx;
    position: absolute;
    z-index: 1;
    background-color: #ffffff;
  }
  .topView{
    display: flex;
    width: 100%;
    padding: 0 10rpx 0 20rpx;
    position: relative;
    z-index: 2;
    background-color: #ffffff;
    .headImg{
      width: 70rpx;
      height: 70rpx;
      background-image: url("/static/images/wode.png");
      background-size: 100% 100%;
    }
  }

  .xinchou-container{
    background-image:url('data:image/png;base64,[encoded data, 100312 characters]');
    background-size: 100% 100%;
    height: 100%;
    width: 100%;
    margin-top: 20rpx;
    .top-tab{
      width: 100%;
      height: 80rpx;
      margin-top: 20rpx;
      background-color: #ffffff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding-left: 30rpx;
      padding-right: 30rpx;
      border-top: #dcdcdc solid 1rpx;
      /*margin-bottom: 10rpx;*/
      .tab{
        width: 90%;
        display: flex;
        align-items: center;
        height: 80rpx;
        /*justify-content: center;*/

        .item-container{
          width: 200rpx;
          margin-left: 10rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          .item{
            width: 190rpx;
            display: grid;
            place-items: center;

            .tab-title-focus{
              /*width: 100%;*/
              height: 50rpx;
              line-height: 60rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 550;
              font-size: 30rpx;
              /*color: #519fef;*/
            }
            .bottom-line-focus{
              height: 10rpx;
              border-radius: 10rpx;
              width: 90rpx;
              /*background-color: #519fef;*/
              background-image: url("/static/images/fxlist/now-page-line.png");
              background-size: 100% 100%;
            }

            .tab-title{
              /*width: 100%;*/
              height: 50rpx;
              line-height: 60rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 550;
              font-size: 30rpx;
            }
            .bottom-line{
              height: 10rpx;
              border-radius: 10rpx;
              width: 100%;
            }
          }
        }
      }

      .filter-btn{
        width: 10%;
        font-size: 30rpx;
        font-weight: 550;
        color: #999999;
      }
    }

  }
  .xinchou-list{
    width: 100%;
    padding: 0rpx 15rpx 0rpx 15rpx;
    /*background-color: #e3e3e3;*/
    height: calc(100% - 170rpx);
    .card{
      background-image:url('/static/images/fxlist/item-bg.png');
      background-size: 100% 100%;
      width: 100%;
      border-radius: 10rpx;
      /*box-shadow: 2px 2px 5px rgba(0,0,0,0.5);*/
      padding: 40rpx 25rpx 40rpx 25rpx;
      margin: 10rpx 0rpx 10rpx 0rpx;
      .line1{
        width: 100%;
        display: flex;
        align-items: center;
        padding: 0 30rpx 0 30rpx;
        /*justify-content: center;*/
        .task-name{
          font-size: 40rpx;
          width: 80%; /* 设置div的宽度 */
          white-space: nowrap; /* 防止文本换行 */
          overflow: hidden; /* 隐藏超出div的内容 */
          text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
          color: #ffffff;
          font-weight: 550rpx;
        }
      }


      .line2{
        width: 100%;
        /*height: 100rpx;*/
        display: flex;
        align-items: flex-end;
        margin-top: -10rpx;
        padding: 0 30rpx 0 30rpx;
        /*justify-content: center;*/
        .date-icon{
          width: 23rpx;
          height: 23rpx;
          background-image: url("/static/images/fxlist/date-icon.png");
          background-size: 100% 100%;
          margin-bottom: 5rpx;
        }
        .date{
          font-size: 23rpx;
          color: #e2e2e2;
          font-weight: 100rpx;
          margin-left: 8rpx;
          border-radius: 10rpx;
          width: auto;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .day-price{
          display: flex;
          align-items: center;
          height: 23rpx;
          .day-price-icon{
            background-image: url("/static/images/fxlist/dj-icon.png");
            background-size: 100% 100%;
            width: 23rpx;
            height: 23rpx;
            margin-right: 5rpx;
          }
          margin-left: auto;
          font-size: 23rpx;
          color: #e2e2e2;
          font-weight: 100rpx;
          line-height: 23rpx;
        }
        .price{
          margin-left: 10rpx;
          font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
          font-weight: 650;
          font-size: 58rpx;
          color: #ffffff;
          line-height: 50rpx;
        }
      }

      .card-container{
        background-color: #ffffff;
        border-radius: 30rpx;
        margin-top: 15rpx;
        padding: 20rpx;
        .line3{
          height: 130rpx;
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          border-bottom: 1rpx solid #dbdbdb;
          padding-bottom: 15rpx;

          .num-container{
            width: 25%;
            display: grid;
            place-items: center;
            .num-label{
              margin-top: 10rpx;
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 23rpx;
              color: #979696;
            }
            .num{
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: center;
              font-weight: 650;
              font-size: 40rpx;
              overflow: hidden; /* 隐藏超出div的内容 */
              text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
              margin-top: 10rpx;
            }
          }
        }
        .line4{
          display: flex;
          align-items: center;
          margin-top: 15rpx;
          .line4-1{
            .line4-1-1{
              width: 100%;
              display: flex;
              align-items: center;

              /*justify-content: center;*/
              .icon{
                background-image: url("/static/images/fxlist/clock-icon.png");
                background-size: 100% 100%;
                width: 23rpx;
                height: 23rpx;
              }
              .text{
                margin-left: 5rpx;
                margin-right: 30rpx;
                font-size: 23rpx;
                color: #979696;
              }
            }
            .line4-1-2{
              width: 100%;
              display: flex;
              align-items: center;
              /*justify-content: center;*/
              margin-top: 10rpx;
              .icon{
                background-image: url("/static/images/fxlist/clock-icon.png");
                background-size: 100% 100%;
                width: 23rpx;
                height: 23rpx;
              }
              .date-label{
                color: #979696;
                margin-left: 5rpx;
                font-size: 23rpx;
                color: #979696;
              }

            }
          }

          .button{
            /*background-color: #11a9ee;*/
            /*color: #ffffff;*/
            font-weight: 650;
            font-size: 30rpx;
            /*border-radius: 10rpx;*/
            width: 170rpx;
            height: 65rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: auto; /* 推动元素到右边 */
            background-image: url("/static/images/fxlist/js-btn.png");
            background-size: 100% 100%;
          }
        }

      }


    }
  }

  .fund-record{

    height: calc(100% - 170rpx);
    width: 100%;
    .fund-item{
        margin-top: 30rpx;
        background-color: #ffffff;
        padding: 30rpx 30rpx 30rpx 30rpx;
        .fund-item-title{
          display: flex;
          align-items: flex-end;
          color: #454545;
          margin-bottom: 20rpx;
          .task-name{
            font-weight: 550;
            font-size: 30rpx;
            max-width: 300rpx;
            line-height: 30rpx;
            white-space: nowrap;
            overflow: hidden; /* 隐藏超出div的内容 */
            text-overflow: ellipsis; /* 显示省略号来代表被截断的内容 */
          }
          .date{
            margin-left: 10rpx;
            color: #979797;
            font-size: 23rpx;
          }
          .dj{
            margin-left: auto;
            display: flex;
            align-items: center;
            line-height: 25rpx;
            view{
              color: #FF0000;
              line-height: 25rpx;
            }
          }
        }

    }
  }

  .uni-popup__wrapper{
    background-color: #ffffff;
    border-radius: 10rpx;
    width: 100%;
  }
  .dialog {
    width: 100%;
    height: 100%;
    padding: 50rpx;
    display: grid;
    /*place-items: flex-start;*/
    border-radius: 10rpx 10rpx 0 0 ;
    background-color: #ffffff;
    .filter-line1{
      width: 80%;
      margin-bottom: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .label{
        width: 30%;
      }
      input{
        width: 70%;
        border: 1px solid #e5e5e5;
        height: 55rpx !important;
        line-height: 55rpx !important;
        box-sizing: border-box;
        border-radius: 4px;
      }
      .uni-date-x{
        border: 1px solid #e5e5e5;
      }
      .uni-date__x-input{
        height: 55rpx !important;
        line-height: 55rpx !important;
      }
      .uni-date-x--border{
        border: none !important;
      }
      .example-body{
        width: 70%;
        height: 50rpx;
      }
    }
    .filter-line2{
      display: flex;
      justify-content: center;
      border-top: 1rpx solid #cecece;
      padding-top: 20rpx;
      .reset-btn{
        font-size: 30rpx;
        margin-left: 8rpx;
        border-radius: 10rpx;
        width: 180rpx;
        height: 65rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .submit-btn{
        background-color: #11a9ee;
        color: #ffffff;
        font-weight: 650;
        font-size: 30rpx;
        margin-left: 8rpx;
        border-radius: 10rpx;
        width: 250rpx;
        height: 65rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: auto; /* 推动元素到右边 */
      }
    }
  }
  .status{
    width: 100%;
    display: grid;
    place-content: center;
    margin-top: auto;
    margin-bottom: auto;
    .status0{
      background-image: url("/static/images/fundrecord/wf.png");
      background-size: 100% 100%;
      width: 100rpx;
      height: 35rpx;
    }
    .status1{
      background-image: url("/static/images/fundrecord/yf.png");
      background-size: 100% 100%;
      width: 100rpx;
      height: 35rpx;
    }
    .status2{
      background-image: url("/static/images/fundrecord/paystatus-2.png");
      background-size: 100% 100%;
      width: 100rpx;
      height: 35rpx;
    }
    .status3{
      background-image: url("/static/images/fundrecord/paystatus-3.png");
      background-size: 100% 100%;
      width: 100rpx;
      height: 35rpx;
    }
  }
  .vue-ref{
    padding-bottom: 0px !important;
  }

</style>
