<template>
  <div style="width: 100%;height: 100%;">
    <!-- 课程详情 -->
    <div class="detail">
      <div class="header">
        <el-page-header @back="goBack">
          <template #content>
            <span class="text-large font-600 mr-3"> 活动详情 </span>
          </template>
        </el-page-header>
      </div>


      <transition :enter-active-class="proxy?.animate.searchAnimate.enter"
        :leave-active-class="proxy?.animate.searchAnimate.leave">
        <div class="mb-[10px]">
          <el-card shadow="hover">

            <template #header>
              <p class="card-header">
                <span>{{ dataObj.activityName }}</span>
              </p>
            </template>

            <div class="content">
              <div class="left">
                <p><b>活动时间：</b>{{ dataObj.activityStartTime }} ~ {{ dataObj.activityEndTime }}</p>
                <p><b>活动地点：</b>{{ dataObj.activityAddress }}</p>
                <p><b>活动内容：</b> {{ dataObj.activityContent }}</p>


              </div>

              <div class="right">
                <img :src="dataObj.activityPic" alt="">
              </div>
            </div>

            <template #footer>
              <div class="card-footer">
                <img src="@/assets/images/avatar.png" alt="">
                <span>{{ dataObj.deptName }}</span>
                <el-divider direction="vertical"></el-divider>
                <span>{{ dataObj.userName }}</span>
              </div>

            </template>

          </el-card>

        </div>

      </transition>
    </div>



  </div>
</template>

<script setup lang="ts">
import { getLearningActivity } from '@/api/study/activity/index';

const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const _id = computed(() => proxy.$route.query.id);
const { give_course_type } = toRefs<any>(proxy?.useDict('give_course_type'));

const dataObj = ref({
  activityName: '',
  activityClassify: '',
  activityStartTime: '',
  activityEndTime: '',
  activityAddress: '',
  activityNum: '',
  activityPic: '',
  activityContent: '',
  deptName: '',
  userName: ''
});


/**
 * 支持所有原生video事件
 */
const onPlay = (ev) => {
  console.log("播放");
};
const onPause = (ev) => {
  console.log(ev, "暂停");
};
const onTimeupdate = (ev) => {
  // console.log(ev, "时间更新");
};
const onCanplay = (ev) => {
  console.log(ev, "可以播放");
};

const getData = async () => {
  const res = await getLearningActivity(_id.value.toString()).finally();
  dataObj.value = res.data;


}

const goBack = () => {
  router.push('/study/activity');
}



onActivated(() => {
  getData();

})
onMounted(() => {
  getData();
})


</script>

<style lang="scss" scoped>
.header {
  margin: 1vh 0 0 2vw;
}

.el-card {
  margin-top: 2vh !important;
  width: 90%;
  margin: 0 auto;

  .card-header {
    font-size: 1.2rem;
    padding-left: 1vw;

    span:nth-child(1) {
      font-size: 1.3rem;
      font-weight: bolder;
      margin-right: 2vw;
    }
  }
}

.content {
  padding: 2vw;
  display: flex;
  justify-content: space-between;

  .left {
    width: 70%;
    p{
      margin: 5px;
    }
  }

  .right {
    width: 28%;

    img {
      width: 100%;
      object-fit: contain;
    }
  }
}

.el-button {
  margin-left: 2vw;
}

.video-play {
  width: 100%;
  height: 100%;

  p {
    margin: 0;
    padding: 7px;
    padding-left: 2vw;
  }

  #refPlayerWrap {
    width: 100%;
  }
}

.card-footer {
  display: flex;
  align-items: center;
  font-size: 12px;

  img {
    margin-left: 10px;
    width: 3vw;
    aspect-ratio: 1;
    border: 0.5px solid black;
    border-radius: 50%;
  }

  span {
    font-size: 18px;
  }

  span:nth-child(2) {
    margin-left: 10px;
    padding-left: 5px;
    display: flex;
    align-items: center;
  }

  span:nth-child(4) {}
}
</style>
