<template>
  <div class="app-container">
    <div class="header_main">
      签到记录
      <div class="return_btn" @click="onClickLeft"></div>
    </div>
    <div style="height: 58px;"></div>

    <div class="top_box">
      <img src="../../../../static/images/lawEnforcement/icon/task_icon_04.png" class="icon_02">
      <div class="name_box">
        <p>{{user.nickName}}</p>
        <p>{{roleGroup}}</p>
      </div>
      <img src="../../../../static/images/lawEnforcement/icon/task_icon_03.png" v-if="relationType == '2'" class="icon_01">
      <img src="../../../../static/images/lawEnforcement/icon/task_icon_031.png" v-if="relationType == '3'" class="icon_01">
      <img src="../../../../static/images/lawEnforcement/icon/task_icon_032.png" v-if="relationType == '4'" class="icon_01">
    </div>

    <div class="center_box">
      <div class="center_box_list" v-for="(item,index) in clockinList">
        <div class="center_box_list_left">
          <p>{{item.clockinDate}} {{item.clockinTime}}</p>
          <p>{{item.clockinAddr}}</p>
        </div>
        <router-link class="goSee" :to="{name:'lawEnforcementTaskSignInSee', query: {caseId:item.caseId , id:item.id}}">查看</router-link>
      </div>
    </div>

  </div>
</template>

<script>
  import { clockinList , getUserProfile } from "@/api/lawEnforcement/index";
  export default {
    name: "programmeDetail",
    data() {
      return {
        form:{},
        clockinList:[],
        user:{},
        roleGroup:'',
        relationType:''
      };
    },
    created() {
      getUserProfile().then(res => {
        this.user = res.data;
        this.roleGroup = res.roleGroup;
      })
      this.relationType = this.$route.query.relationType;
      this.getDetail()
    },
    methods: {
      getDetail(){
        let queryParams = {
          caseId:this.$route.query.id,
          relationType:this.$route.query.relationType,
          clockinUser:this.$route.query.clockin_user
        }
        clockinList(queryParams).then((response) => {
          this.clockinList = response.rows;
        });
      },
    },
  }
</script>

<style scoped lang="scss">
  .app-container {
    padding: 2% 2% 10%;
    background: #ffffff;
    height: 100vh;
  }
  .header_main{
    height: 116px;
    background: url('../../../../static/images/lawEnforcement/new/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;
    z-index: 999;
    .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;
    }
  }

  .top_box{
    display: flex;
    align-items: center;
    padding: 20px 3%;
    .icon_01{
      margin-left: auto;
    }
    .icon_02{
      margin-right: 3%;
    }
    .name_box{
      p{
        &:first-child{
          font-size: 0.45rem;
          color: #333333;
        }
        &:last-child{
          font-size: 0.35rem;
          color: #B4B0B0;
        }
      }
    }
  }

  .center_box{
    background: #F5F9FF;
    font-size: 0.35rem;
    .center_box_list{
      display: flex;
      align-items: center;
      padding: 5% 0;
      width: 94%;
      margin: 0 auto;
      border-bottom: 1px solid #C9C9C9;
      &:last-child{
        border: none;
      }
      .center_box_list_left{
        p{
          &:first-child{
            font-size: .4rem;
          }
          &:last-child{
            color: #333333;
            background: url('../../../../static/images/lawEnforcement/icon/task_icon_02.png') no-repeat center left;
            margin-top: 10PX;
            padding-left: 20PX;
          }
        }
      }
      .goSee{
        margin-left: auto;
        background: url('../../../../static/images/lawEnforcement/icon/task_icon_05.png') no-repeat top center;
        padding-top: 18PX;
        color: #1D6FE9;
      }
    }
  }
</style>
