<template>
    <div class="home_wrapper">
        <div class="header_main">
            零工登记
            <div class="return_btn" @click="onClickLeft"></div>
            <div class="add_btn" v-show="showBtn" @click="$router.push({path:'/sunVillage_info/list_tourists_registration_add'})"></div>
        </div>

      <div class="record_main">
        <div class="record_det">
          <div class="year_l" @click="tabShow"><i :class="{'icon':true , 'zk':!showTab ,  'ss':showTab } "></i>{{year == '' ? '全部': year}}<span class="unit">{{year == '' ? '': '年'}}</span>{{month}}<span class="unit">{{month == '' ? '': '月'}}</span></div>
          <div class="total_r">共<span>{{listLength}}</span>次出工</div>
        </div>

        <div class="date_box" v-if="showTab">
          <div class="record_list">
            <div :class="{'flex_block':true , 'current':year == ''}" @click="tabClick('')">全部</div>
            <div v-for="(item,index) in yearList" :key="index" :class="{'flex_block':true , 'current':year == item}" @click="tabClick(item)">{{item}}</div>
          </div>
          <div class="record_list month_list">
            <div v-for="(item,index) in 12" :key="index" :class="{'flex_block':true , 'current':month == item}" @click="tabClickMonth(item)">
              {{item}}</div>
          </div>
        </div>
      </div>

      <div class="center_box">
        <div class="name_box">
          <van-row>
            <van-col :span="24">姓名</van-col>
          </van-row>
          <van-row v-for="(item,index) in 10" :key="index">
            <van-col :span="24">张三</van-col>
          </van-row>
          <div class="name_bg"></div>
          <img src="../../assets/images/sunVillage_info/name_icon.png" class="name_icon"/>
        </div>

        <div class="right_box">
          <div class="right_box_box">
            <van-row>
              <van-col :span="8">出工日期</van-col>
              <van-col :span="8">出工事由</van-col>
              <van-col :span="8">出工数</van-col>
            </van-row>
            <van-row v-for="(item,index) in 10" :key="index">
              <van-col :span="8">2023-03-05</van-col>
              <van-col :span="8">上班打卡</van-col>
              <van-col :span="8">8</van-col>
            </van-row>
          </div>
        </div>

        <div class="clear"></div>
      </div>


    </div>
</template>

<script>
  import { listOddjob } from "@/api/sunVillage_info/fixedAssets";
  import Cookies from "js-cookie";
  import request from '@/utils/request'
  export default {
    name: "certificateList",
    data() {
      return {
        applicationList:[],
        applicationListSecond:[],
        assetStatusOptions:[],
        auditStatus:[],
        loading: false,
        finished: false,
        show: false,
        showTab: false,
        fileList:[],
        listLength:'0',
        searchInput:'',
        queryParams:{
          pageNum:1,
          pageSize:10,
          orderByColumn:'openNy',
          isAsc:'desc',
          year:'',
        },
        uploadFiles1:[],
        projectId:'',
        projectIndex:'',
        year:'',
        month:'',
        showBtn:true,
        yearMonth:[],
        yearList:[],
        deptName:'',
        nowYear:new Date().getFullYear(),
      };
    },
    created() {
      this.queryParams.bookId = Cookies.get('bookId');
      this.queryParams.deptId = Cookies.get('deptId');
      this.deptName = Cookies.get('deptName');
      this.queryParams.yearMonth = this.$route.query.time;
      for (let i = 0 ; i < 5 ; i++){
        this.yearList.push(this.nowYear-i);
      }
      this.getList();
    },
    methods: {
      getList(){
        var _this = this;

      },
      tabClickMonth(month){
        this.month = month ;
        if (month < 10){
          this.queryParams.yearMonth = this.year + '-0' + month
        }else{
          this.queryParams.yearMonth = this.year + '-' + month
        }
        this.finished = false;
        this.queryParams.pageNum = 1;
        this.applicationList = [];
        this.getList();
      },
      tabShow(){
        this.showTab = !this.showTab;
      },
      tabClick(year){
        this.year = year ;
        if (year == ''){
          this.queryParams.yearMonth = ''
          this.month = ''
        }else{
          this.queryParams.yearMonth = year + '- 01'
          this.month = '1'
        }
        this.finished = false;
        this.queryParams.pageNum = 1;
        this.applicationList = [];
        this.getList();
      },

    },
  }
</script>

<style scoped lang="scss">

.home_wrapper{
    background: #e9e9e9;
    min-height: 100vh;
    width: 100vw;
    .header_main{
        height: 116px;
        background: url('../../assets/images/sunVillage_info/list_head.png') no-repeat;
        background-size: 100% 100%;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        font-size: 36px;
        line-height: 116px;
        text-align: center;
        color: #fff;
        position: relative;
        .return_btn{
            width: 24px;
            height: 43.2px;
            background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
            background-size: 20px 36px;
            position: absolute;
            left: 38px;
            top: 36px;
        }
        .add_btn{
            width: 56.4px;
            height: 40.8px;
            background: url('../../assets/images/sunVillage_info/list_icon_9.png') center center no-repeat;
            background-size: 47px 34px;
            position: absolute;
            right: 38px;
            top: 36px;
        }
    }

    .list_main{
        padding:0 22px;
        .item{
            height: 100px;
            border-radius: 30px;
            background: #fff;
            box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
            padding:15px 32px;
            display: flex;
            margin-bottom: 20px;
            .info{
                flex:1;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .title{
                    display: flex;
                    font-size: 32px;
                    align-items: center;
                    height: 58px;
                    .icon_box{
                        width: 34px;
                        display: block;
                        height: 30px;
                        background: url('../../assets/images/sunVillage_info/list_icon_2.png') no-repeat;
                        background-size: 100% 100%;
                        margin-right: 10px;
                    }
                    .news_title{
                        max-width:416px;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        -o-text-overflow: ellipsis;
                    }
                    .tips_mark{
                        width: 34px;
                        height: 34px;
                        background: #fa0c0c;
                        border-radius: 8px;
                        font-size: 24px;
                        color: #fff;
                        text-align: center;
                        line-height: 34px;
                        margin-left: 10px;
                    }
                }
                .red{
                  color: #fa0c0c;
                }
                .green{
                  color: #4caf50;
                }
                .time{
                    font-size: 32px;
                    display: flex;
                    align-items: center;
                    justify-content: right;
                    height: 30px;
                    margin-top: 6px;
                    .icon_time{
                        width: 25px;
                        height: 25px;
                        background: url('../../assets/images/sunVillage_info/list_icon_4.png') no-repeat;
                        background-size: 100% 100%;
                        margin-right: 10px;
                    }
                }
            }
            .operation{
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                text-align: right;
                .opera_btn{
                    width: 52px;
                    height: 52px;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content:center;

                    &.delete{
                        background:#df0707;
                        margin-left: 28px;
                        .icon{
                            width: 22px;
                            height: 29px;
                            background: url('../../assets/images/sunVillage_info/list_icon_7.png') no-repeat;
                            background-size: 100% 100%;
                            display: block;
                        }
                    }
                    &.edit{
                        background: #79cf13;
                        .icon {
                            width: 26px;
                            height: 25px;
                            background: url('../../assets/images/sunVillage_info/list_icon_6.png') no-repeat;
                            background-size: 100% 100%;
                            display: block;
                        }
                    }
                     &.view{
                        background: #3494ff;
                        .icon {
                            width: 29px;
                            height: 21px;
                            background: url('../../assets/images/sunVillage_info/list_icon_3.png') no-repeat;
                            background-size: 100% 100%;
                            display: block;
                        }
                    }
                }
            }
        }

    }
    .bottom_tips{
        font-size: 24px;
         color: #a7a6a6;
         text-align: center;
         margin-top: 32px;
         background: url('../../assets/images/sunVillage_info/list_icon_8.png') center center no-repeat;
         background-size: 260px 2px;
         .xs{
            padding:0 8px;
            background: #e9e9e9;
         }
    }
    .banner {
      display: flex;
      background:#3494ff;
      color:#fff;
      text-align: center;
      margin:3%;
      border-radius: 10PX;
    }
    .banner_tabs{
      flex:1;
      padding:10PX 0;
      font-size: 16PX;
      div:nth-child(2){
        font-size: 14PX;
        margin-top: 5PX;
      }
    }
}
.record_main{
  padding:30px 22px;
  .record_det{
    height: 38px;
    line-height: 38px;
    display: flex;
    justify-content:space-between;
    .year_l{
      font-size: 30px;
      display: flex;
      align-items: center;
      color: #858585;

      .unit{
        padding-left: 5px;
      }
      .icon{
        width: 23px;
        height: 12px;
        display: block;
        background: url('../../assets/images/sunVillage_info/list_icon_1.png') no-repeat;
        background-size: 100% 100%;
        margin-bottom: 4px;
        margin-right: 8px;
        &.zk {
          transform: rotate(0deg)
        }
        &.ss{
          transform: rotate(180deg)
        }

      }
    }
    .total_r{
      font-size: 26px;
      letter-spacing: 2px;
      span{
        color: #2facfe;
      }
    }
  }
  .record_list{
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    .flex_block{
      font-size: 30px;
      color: #aaaaaa;
      &.current{
        color: #2facfe;
        font-weight: bold;
      }
    }
  }
  .month_list{
    align-items: center;
    justify-content: space-between;
    .flex_block{
      font-size: 30px;
      color: #aaaaaa;
      padding-right: 0px;
      &.current{
        color: #2facfe;
        font-weight: bold;
      }
    }
  }
}
.date_box{
  background: url('../../assets/images/sunVillage_info/date_bg.png') no-repeat;
  background-size: 100% 100%;
  height: 90PX;
  padding: 0 15PX;
  margin-top: 15PX;
  .record_list{
    height: 45PX;
    align-items: center;
  }
  .month_list{
    border-top: 2PX dashed #e2e2e2;
  }
}
.top_head_title{
  font-size: 16PX;
  text-align: center;
  padding: 15PX 0;
}
  .name_box{
    float: left;
    width: 100PX;
    position: relative;
    .name_bg{
      background-color: rgba(47,172,254,0.2);
      width: 100PX;
      height: 100%;
      position: absolute;
      top: 0;
    }
    .name_icon{
      position: absolute;
      top: 40PX;
      left: 50%;
      transform: translateX(-50%);
    }
    .van-row:nth-child(odd){
      .van-col {
        background-color: #ffffff;
      }
    }
    .van-row:nth-child(1){
      border-top-left-radius: 10PX;
      border-bottom-left-radius: 10PX;
      background-color: #ffffff;
      .van-col {
        background-color: #2facfe;
        color: #ffffff;
        border-radius: 10PX;
      }
    }
    .van-col{
      font-size: 16PX;
      padding: 10PX 15PX;
      text-align: center;
    }
  }
  .center_box{
    padding-left: 3%;
  }
  .right_box{
    float: left;
    width: calc(100% - 100PX);
    overflow:hidden;
    overflow-x: scroll;
    white-space:nowrap;
    display: -webkit-box;
    -webkit-overflow-scrolling: touch;
    .right_box_box{
      width: 400PX;
    }
    .van-row:nth-child(odd){
      .van-col{
        background-color: #ffffff;
      }
    }
    .van-row:nth-child(1){
      .van-col{
        color: #2facfe;
      }
    }
    .van-col{
      font-size: 16PX;
      padding: 10PX 15PX;
      text-align: center;
    }
  }
  .clear{
    clear: both;
  }
</style>
