<template>
  <div>
    <a-drawer
      title="活动-详情"
      :width="720"
      :visible="show"
      :body-style="{ paddingBottom: '80px' }"
      @close="detailClose"
    >
      <div class="drawer-content">
        <div class="content-title">
			{{ detailData.title }}
		</div>
		<img v-for="item,index in detailData.imgList" :key='index' :src="$ImgUrl(item.url)" class="content-img">
        <a-descriptions>
          <a-descriptions-item label="创建时间">
            {{ detailData.createDate }}
          </a-descriptions-item>
          <a-descriptions-item label="是否显示在app上">
            {{ detailData.isShow ? "是" : "否" }}
          </a-descriptions-item>
          <a-descriptions-item label="活动对象">
            {{ detailData.activityObject | activityObject }}
          </a-descriptions-item>
          <a-descriptions-item label="活动内容">
            {{ detailData.content }}
          </a-descriptions-item>
          <a-descriptions-item label="活动主办方">
            {{ detailData.organizerName }}
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions title="报名设置">
          <a-descriptions-item label="报名开始时间">
            {{ detailData.registrationStartTime }}
          </a-descriptions-item>
          <a-descriptions-item label="报名结束时间">
            {{ detailData.registrationEndTime }}
          </a-descriptions-item>
          <a-descriptions-item label="报名人数上限">
            {{ detailData.registrationNumMax }}
          </a-descriptions-item>
          <a-descriptions-item label="活动地点">
            {{ detailData.activityAddress }}
          </a-descriptions-item>
        </a-descriptions>
        <a-descriptions title="活动设置">
          <a-descriptions-item label="活动开始时间">
            {{ detailData.activityStartTime }}
          </a-descriptions-item>
          <a-descriptions-item label="活动结束时间">
            {{ detailData.activityEndTime }}
          </a-descriptions-item>
          <a-descriptions-item label="活动联系人">
            {{ detailData.activityContact }}
          </a-descriptions-item>
          <a-descriptions-item label="活动联系方式">
            {{ detailData.activityTel }}
          </a-descriptions-item>
        </a-descriptions>
        报名记录
        <a-divider></a-divider>
      </div>
      <div class="drawer-footer">
        <a-button :style="{ marginRight: '8px' }" @click="detailClose">
          关闭
        </a-button>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { newsInfo } from "@/api/operation/news/index.js";
export default {
	props: {
		show: {
			type: Boolean,
			default: false,
		},
		detailId: Number,
	},
	data() {
		return {
			detailData: {},
		};
	},
	mounted() {},
	methods: {
		detailClose() {
			this.$emit("detailClose");
		},
		handleTableChange(pagination) {
			console.log(pagination);
			const pager = { ...this.pagination };
			pager.current = pagination.current;
			pager.pageSize = pagination.pageSize;
			this.pagination = pager;
			this.getData();
		},
	},
	watch: {
		detailId: {
			handler(id) {
				if (id !== null && id !== undefined) {
					newsInfo({ informationId: id }).then((res) => {
						this.detailData = res.data;
					});
				}
			},
			immediate: true,
		},
	},
};
</script>

<style lang="less" scoped>
.content-title {
  color: #000000d9;
  font-weight: 500;
  font-size: 18px;
  line-height: 25px;
}
.content-img{
	width: 108px;
	height: 86px;
}
</style>
