<template>
  <div  class="go-title-xuncha">
    <div class="titlebox">
      <img class="img" src="@/assets/images/chart/xunchaguiji/titlelefticon.png" />
      <span>打卡信息</span>
    </div>
    <div class="contentbox">
      <div class="header">
        <div class="label">打卡点名称</div>
        <div>{{ dataset.PointName }}</div>
      </div>
      <div class="clockdetail">
        <div class="detailbox">
          <div>
            <span class="span"></span>
            <span class="label">创建时间</span>
          </div> 
          <div>{{ dataset.CreateTime }}</div>
        </div>
        <div class="detailbox">
          <div>
            <span class="span"></span>
            <span class="label">打卡点位置</span>
          </div> 
          <div>
            <span>{{ dataset.Lng }}</span>
            <span v-if="dataset.Lat&&dataset.Lng">，</span>
            <span>{{ dataset.Lat }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { PropType, toRefs, onMounted, ref } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
import { EventBus } from '@/utils/eventBus'

const props = defineProps({
  chartConfig: {
    type: Object as PropType<CreateComponentType>,
    required: true
  }
})

const { w, h } = toRefs(props.chartConfig.attr)
const {
  textColor,
  textSize,
  textColor1,
  textSize1,
  textColor2,
  textSize2,
} = toRefs(props.chartConfig.option)
const dataset = ref({
  CreateTime: '',
  PointName: '',
  Lat: '',
  Lng: ''
})

onMounted(() => {
  // 获取eventBus传过来的值
  EventBus.on('clockinlistsenddata', (data) => {
    console.log('data123444', data)
    dataset.value = data
  });
})
</script>

<style lang="scss" scoped>
@include go('title-xuncha') {
  position: relative;
  .titlebox{
    width: 100%;
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #0A392A;
    color: v-bind('textColor');
    font-size: v-bind('textSize + "px"');
    .img{
      width: 27px;
      height: 30px;
      margin-right: 10px;
    }
  }
  .contentbox{
    width: 92%;
    margin-left: 4%;
    margin-top: 15px;
    .header{
      width: 100%;
      height: 23px;
      background: url("@/assets/images/chart/xunchaguiji/clockintitlebg01.png");
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: v-bind('textColor1');
      font-size: v-bind('textSize1 + "px"');
      .label{
        padding-left: 10px;
      }
    }
    .clockdetail{
      color: v-bind('textColor2');
      font-size: v-bind('textSize2+"px"');
      margin-top: 15px;
      .detailbox{
        display: flex;
        justify-content: space-between;
        .span{
          width: 3px;
          height: 3px;
          background: #C9FFC7;
          box-shadow: 0px 0px 5px 1px rgba(0,255,80,0.6);
          border: 0px solid rgba(255,255,255,0.34);
          margin-right: 10px;
        }
        .label{
           
        }
      }
      
    }
  }

}
</style>
