<template>
  <div class="box conter1000">
    <div class="_head">
      <div class="_l">
        <el-image
          style="width: 358px; height: 100%; vertical-align: middle"
          :src="state.data.image"
          fit="cover"
        ></el-image>
      </div>
      <div class="_r">
        <p class="_title text_hidden">{{ state.data.title }}</p>
        <p class="_brief text_hidden">
          <!-- 修改样式 -->
          活动简介：{{ state.data.description || "暂无" }}
        </p>
        <p class="_classif">活动分类：{{ state.data.industry }}</p>
        <p class="_time">
          活动时间：{{ parseTime(state.data.begin_at) }} ~
          {{ parseTime(state.data.finish_at) }}
        </p>
        <p class="_place text_hidden">活动地点：{{ state.data.address }}</p>
        <p class="_user">
          <el-button class="x_btns" disabled>已报名</el-button>
          <span class="_num"
            ><span class="x_blue">{{ state.data.join_count }}</span>
            人报名</span
          >
        </p>
      </div>
    </div>
    <div class="_info">
      <div class="_l">
        <p class="_tit">活动详情</p>
        <div class="html" v-html="state.data.content"></div>
      </div>
      <div class="_r">
        <webContact />
      </div>
    </div>
  </div>
</template>

<script setup>
import webFooter from "@/components/webFooter/index.vue";
import webBreadcrumb from "@/components/webBreadcrumb/index.vue";
import webContact from "@/components/webContact/index.vue";
import request from "@/utils/request";
function detail(id) {
  return request({
    url: "/v1/activity/detail",
    method: "post",
    data: { id },
  });
}

const loading = ref(true);

const state = reactive({
  data: {},
});
const route = useRoute();
watch(route, () => {
  getData();
});
onMounted(() => {
  getData();
});

function getData() {
  let id = route.params.id;
  if (!id) return;
  detail(id)
    .then((res) => {
      if (200 == res.code) {
        state.data = res.data;
        loading.value = false;
      }
    })
    .catch(() => {
      loading.value = false;
    });
}
</script>

<style lang="scss" scoped>
.box {
  ._head {
    padding: 20px;
    background-color: #fff;
    display: flex;
    ._r {
      padding-left: 18px;
      p {
        margin: 11px 0;
      }
      ._title {
        font-size: 18px;
        font-weight: 500;
        color: #333333;
        line-height: 30px;
        height: 60px;
      }
      ._brief,
      ._classif,
      ._time,
      ._place {
        font-size: 14px;
        font-weight: 400;
        color: #666666;
      }
      ._brief,
      ._place {
        line-height: 24px;
        height: 48px;
      }
      ._user {
        margin-bottom: 0;
        display: flex;
        align-items: flex-end;
        ._num {
          margin-left: 10px;
          font-size: 16px;
          font-weight: 400;
          color: #666666;
          .x_blue {
            font-size: 30px;
          }
        }
      }
    }
  }
  ._info {
    display: flex;
    margin-top: 16px;
    margin-bottom: 35px;
    ._l {
      width: 662px;
      margin-right: 14px;
      padding: 14px 40px 0 20px;
      background-color: #fff;
      ._tit {
        &::before {
          content: "";
          display: inline-block;
          margin-right: 5px;
          width: 5px;
          height: 5px;
          background-color: #0054ff;
          vertical-align: middle;
        }
      }
      ._txt {
        margin-bottom: 45px;
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 24px;
      }
    }
    ._r {
      flex: 1;
      background-color: #fff;
    }
  }
}
</style>
