<template>
  <div style="padding: 0 20px 20px">
    <!--日程-->
    <el-timeline>
      <el-timeline-item
          v-for="s in matchData.cptScheduleList"
          :key="s.id" hide-timestamp
          placement="top"
      >
        <p style="font-size: 16px;margin: 0">
          {{ s.timeRange?.split(',')[0].substring(0, 16) }}
          ~
          {{ s.timeRange?.split(',')[1].substring(0, 16) }}
        </p>

        <p style="font-size: 16px;">{{ s.name }}</p>
        <p v-if="s.introduction" v-html="s.introduction"></p>
        <div class="time-address">
          <el-icon>
            <Position />
          </el-icon>
          {{ s.address }}
        </div>
      </el-timeline-item>
    </el-timeline>

    <el-empty  image="@/assets/img/order_no.png" image-size="228" v-if="matchData.cptScheduleList?.length==0" description="" />

  </div>
</template>

<script setup>
const props = defineProps({
  matchData:{
    type:Object,
    required:true
  }
})
</script>

<style scoped lang="scss">
.indexTitle{margin: 20px 0 12px;
  h3{
    font-size: 20px;
    color:var(--el-color-primary);
  }
}
.table{width: 100%;border-left: 1px solid #e1e1e1;border-top:1px solid #e1e1e1;
  th{background: #eee;padding: 6px 10px;
    border-right: 1px solid #e1e1e1;
    border-bottom:1px solid #e1e1e1;
    font-size: 15px;
  }
  td{padding: 6px 10px;border-right: 1px solid #e1e1e1;font-size: 15px;
    border-bottom:1px solid #e1e1e1;vertical-align: middle;text-align: center;
    span{margin-right: 10px}
    span::after{content: ','}
    span:last-child::after{content: ''}
  }
}
</style>