<template>
  <view class="sign-user-info" @click.stop="$emit('click')">
    <wk-avatar
      :name="itemData.realname"
      :avatar="itemData.img"
      class="avatar" />
    <view class="info">
      <text class="name">
        {{ itemData.realname }}
      </text>
      <text class="group-name">
        {{ itemData.attendance_name }}
      </text>
    </view>
    <slot :scope-data="itemData" />
  </view>
</template>

<script>
  /**
   * 单个用户考勤组信息 box
   */
  export default {
    name: 'SignUserInfo',
    props: {
      itemData: {
        type: Object,
        default: () => {
          return {
            realname: ''
          }
        }
      }
    },
  }
</script>

<style scoped lang="scss">
  .sign-user-info {
		width: 100%;
    color: #333;
    font-size: 30rpx;
    padding: 24rpx 32rpx;
    border-bottom: 1rpx solid $border-color;
		background-color: white;
    @include left;
    .avatar {
      width: 80rpx;
			height: 80rpx;
      margin-right: 16rpx;
    }
    .info {
      flex: 1;
      display: flex;
      flex-direction: column;
      .name {}
      .group-name {
        color: #999;
        font-size: 26rpx;
      }
    }
  }
</style>
