<template>
  <view class="con-body">
    <view class="con-bg">
      <!-- 头部 -->
      <customHeader ref="customHeaderRef" :title="'考勤查看'" :leftFlag="true" :rightFlag="false"></customHeader>

      <!-- 高度来避免头部遮挡 -->
      <view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view>

      <!-- 正文内容 -->
      <view>
        <!-- 搜索 -->
        <!--                <view class="search">-->
        <!--                    <picker mode="date" :value="defaultDate" :start="startDate" :end="endDate" @change="bindDateChange"-->
        <!--                        class="picker-bg">-->
        <!--                        <view class="picker">-->
        <!--                            <uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phoneshizhong"-->
        <!--                                size="18"></uni-icons>-->
        <!--                            <view>{{ defaultDate }}</view>-->
        <!--                            <uni-icons type="down" size="18"></uni-icons>-->
        <!--                        </view>-->
        <!--                    </picker>-->
        <!--                    <button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>-->
        <!--                </view>-->

        <!-- 分页部分  -->
        <view class="white-bg margin-bottom20" v-for="(item, index) in list">
          <view class="report-list">
            <view class="title"
                  :style="{color: MapType[item.mapType].color}"
            >类型：{{ MapType[item.mapType].label }}
            </view><!--item.mapType == 1 ? '#F5813A' : '#1989FA'}-->
            <view class="r-list">
              <view class="r-left">开始签到时间</view>
              <view class="r-right">{{ item.goVisistStartTime }}</view>
            </view>
            <view class="border-bottom"></view>
            <view class="r-list">
              <view class="r-left">开始签到地点</view>
              <view class="r-right">{{ item.addressForStart }}</view>
            </view>
            <view class="border-bottom"></view>
            <view class="r-list">
              <view class="r-left">结束签到时间</view>
              <view class="r-right">{{ item.goVisistEndTime }}</view>
            </view>
            <view class="border-bottom"></view>
            <view class="r-list">
              <view class="r-left">结束签到地点</view>
              <view class="r-right">{{ item.addressForEnd }}</view>
            </view>
            <view class="r-list" v-if="item.remark != null">
              <view class="r-left">备注内容</view>
              <view class="r-right">{{ item.remark }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import customHeader from '@/components/customHeader.vue'
import {getNavBarPaddingTop} from '@/utils/system.js'
import {onMounted, ref} from 'vue';
import {getDate} from '@/utils/datetime.js'
import {CheckInInformationViewing} from '../../../../api/crm/activity/map';
import {onLoad} from '@dcloudio/uni-app';
import {MapType} from "./dataMap";

const navBarPaddingTop = ref(0);
onMounted(() => {
  navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})

// 开始时间
let startDate = getDate('start');
// 结束时间，间隔10年
let endDate = getDate('end');
let defaultDate = getDate({format: true})
let bindDateChange = (e) => {
  defaultDate = e.detail.value
}

//获取list集合信息
let list = ref([])

function getList() {
  CheckInInformationViewing().then(res => {
    list.value = res.rows
  })
}

onLoad(() => {
  getList()
})

</script>

<style scoped>
.r-left {
  min-width: 6em;
}

.con-bg {
  overflow-y: auto;
}

.search {
  display: flex;
  margin-bottom: 30rpx;
  padding: 0 30rpx;
}

.search .btn-search {
  border: none;
  background: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  /* 调整为更合适的字号 */
  font-weight: normal;
  /* 如果不需要加粗，可以去掉 bolder */
  margin-left: 0rpx;
  padding: 0 20rpx;
  /* 调整 padding，去掉 padding-top */
  height: 56rpx;
  /* 固定高度，确保与 picker 对齐 */
  cursor: pointer;
}

.search .btn-search::after {
  display: none;
}

.search .picker-bg {
  display: flex;
  background-color: #6FA2F8;
  border-radius: 25px;
  color: #fff;
  font-size: 28rpx;
  padding: 0rpx 20rpx;
  /* #ifndef APP-PLUS */
  padding: 10rpx 20rpx 0 20rpx;
  /* #endif */
  margin-right: 20rpx;
}

.search .picker-bg .picker {
  display: flex;
  align-items: center;
  /* #ifndef APP-PLUS */
  padding-top: 2rpx;
  /* #endif */
}

.search .picker-bg .picker .uni-icons {
  color: #fff !important;
}

.search .picker-bg .picker .uni-icons:first-child {
  margin-right: 10rpx;
}

.search .picker-bg .picker .uniui-down {
  margin-left: 10rpx;
}
</style>
