<template>
  <el-dialog title="查看详情" width="700px" v-model="visible" @closed="closedHandle">
    <div class="content" v-loading="loading">
      <div class="top">
        <div class="row">
          <div class="item">
            姓名：{{ detail.attendanceSummary.name }}
          </div>
          <div class="item">
            休息天数：{{ detail.attendanceSummary.restDays || '-' }}
          </div>
          <div class="item">
            出勤天数：{{ detail.attendanceSummary.attendDays || '-' }}
          </div>
          <div class="item">
            工作时长（分钟）：{{ detail.attendanceSummary.workDuration || '-' }}
          </div>
        </div>
        <div class="row" style="margin-top: 30px;">
          <div class="item">
            迟到次数：{{ detail.attendanceSummary.lateCount || '-' }}
          </div>
          <div class="item">
            迟到时长（分钟）：{{ detail.attendanceSummary.lateDuration || '-' }}
          </div>
          <div class="item">
            旷工天数：{{ detail.attendanceSummary.absenceDays || '-' }}
          </div>
          <div class="item">
            备注：无
          </div>
        </div>
      </div>
      <div class="btm">
        <div class="btm_wrap">
          <div class="item t1">日期</div>
          <div class="item t1" v-for="(item, index) in detail.weekList" :key="index">{{ item.week }}</div>
        </div>
        <div class="btm_wrap">
          <div class="item t2">
            <span style="opacity: 0;">1</span>
          </div>
          <div class="item t2" v-for="(item, index) in detail.statusList">{{ item }}</div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { attendanceDetail } from '@/api/coupon/index'

const visible = ref(false)

const detail = ref({
  weekList: [],
  statusList: [],
  attendanceSummary: {}
})

function closedHandle() {
  detail.value.weekList = []
  detail.value.statusList = []
  detail.value.attendanceSummary = {}
}

const row = ref(null)

function show(obj) {
  visible.value = true
  row.value = { ...obj }
  attendanceDetailAjax()
}

// 获取用户打卡详情
const loading = ref(false)
async function attendanceDetailAjax() {
  try {
    loading.value = true
    const res = await attendanceDetail({
      userId: row.value.userId
    })
    detail.value = res
  } catch (error) {
    console.log(error);
  }
  setTimeout(() => {
    loading.value = false
  }, 500);
}

defineExpose({
  show
})
</script>

<style scoped lang="scss">
.content {
  .top {
    .row {
      display: flex;

      .item {
        flex: 1;
        font-size: 14px;
        color: #333;
      }
    }
  }

  .btm {
    --height: 100px;
    width: 100%;
    height: calc(var(--height) + 20px);
    overflow-x: auto;
    margin-top: 14px;


    .btm_wrap {
      white-space: nowrap;
      height: calc(var(--height) / 2);
    }

    .item {
      display: inline-block;
      width: calc(var(--height));
      height: calc(var(--height) / 2);
      line-height: calc(var(--height) / 2);
      font-size: 14px;
      // display: flex;
      // align-items: center;
      padding-left: 14px;
      border-bottom: 1px solid #ececec;

      &.t1 {
        color: #666;
      }

      &.t2 {
        color: #333;
      }
    }
  }
}
</style>