<template>
    <div>
        <div class="dialog-h-content scroll-h">
            <div v-if="initLoading" class="m-detail-main">
                <div class="m-info">

                    <div style="display: flex;">
                        <div class="m-info-prop" style="flex: 0 0 50%;">
                            <span class="u-info-title-2">活动类型: </span>
                            <span style="margin-right: 10px;">&nbsp;</span>
                            <span>{{ formData.typeName || "--" }}</span>
                        </div>
                        <div class="m-info-prop" style="flex: 0 0 50%;">
                            <span class="u-info-title-2">活动名称: </span>
                            <span style="margin-right: 10px;">&nbsp;</span>
                            <span>{{ formData.activityName || "--" }}</span>
                        </div>
                    </div>

                    <div style="display: flex;">
                        <div class="m-info-prop" style="flex: 0 0 50%;">
                            <span class="u-info-title-2">活动时间: </span>
                            <span style="margin-right: 10px;">&nbsp;</span>
                            <span>{{ formData.startTime || "--" }}至<span>{{ formData.endTime || "--" }}</span></span>
                        </div>
                        <div class="m-info-prop" style="flex: 0 0 50%;">
                            <span class="u-info-title-2">协办方: </span>
                            <span style="margin-right: 10px;">&nbsp;</span>
                            <span>{{ formData.assistingParty || "--" }}</span>
                        </div>
                    </div>


                    <div class="m-info-prop">
                        <span class="u-info-title-2" style="display: inline-block;white-space: nowrap;">活动内容: </span>
                        <span style="margin-right: 10px;">&nbsp;</span>
                        <!-- <span>{{ formData.content || "--" }}</span> -->
                        <p class="text_p" v-html="formData.content"></p>
                    </div>

                    <div class="m-info-prop">
                        <span class="u-info-title-2">活动地点: </span>
                        <span style="margin-right: 10px;">&nbsp;</span>
                        <span>{{ formData.address || "--" }}</span>
                    </div>
                    <div class="m-info-prop">
                        <span class="u-info-title-2"></span>
                        <div class="div_map">
                            <div id="app_detail_unit"></div>
                        </div>
                    </div>
                    <div class="m-info-prop">
                        <span class="u-info-title-2">线上报名: </span>
                        <span style="margin-right: 10px;">&nbsp;</span>
                        <el-switch :value="formData.online === 1 ? true : false" :disabled="true"></el-switch>
                    </div>

                    <div style="display: flex;">
                        <div class="m-info-prop" style="flex: 0 0 50%;">
                            <span class="u-info-title-2">报名截止时间：</span>
                            <span style="margin-right: 10px;">&nbsp;</span>
                            <span>{{ formData.cutOffTime || "--" }}</span>
                        </div>

                        <div class="m-info-prop" style="flex: 0 0 50%;">
                            <span class="u-info-title-2">活动积分：</span>
                            <span style="margin-right: 10px;">&nbsp;</span>
                            <span>{{ formData.points || "--" }}</span>
                        </div>
                    </div>
                    <!-- 总结 -->
                    <div class="m-info-prop" v-if="formData.status!==0&&formData.status!==1&&formData.status!==3">
                        <span class="u-info-title-2" style="display: inline-block;white-space: nowrap;">活动总结：</span>
                        <span style="margin-right: 10px;">&nbsp;</span>
                        <!-- <span>{{ formData.sumUp || "--" }}</span> -->
                        <p class="text_p" v-html="formData.sumUp"></p>
                    </div>
                        <!-- 活动图片 -->
                    <div v-if="formData.status!==0&&formData.status!==1&&formData.status!==3" class="m-info-prop" style="display: flex; flex-wrap: wrap; align-items: flex-start;">
                        <span class="u-info-title-2" style="display: inline-block;white-space: nowrap;">活动图片：</span>
                        <div v-for="(image, index) in formData.activityImgs" :key="index">
                            <img style="width: 200px; height: 160px; margin-right: 30px;margin-bottom: 10px;"
                                :src="image" alt="Image" />
                        </div>
                    </div>
                       <!-- 报名名单 -->
                    <div v-if="formData.status!==0&&formData.online == 1" style="margin-top: 20px;">
                        <div style="font-size: 15px; color: black; margin-left: -30px;margin-bottom: 10px;">
                            报名名单
                        </div>
                        <el-table class="table" border style="width: 100%" :data="NameList">
                            <el-table-column label="序号" header-align="center" align="center" type="index"
                                width="50"></el-table-column>

                            <el-table-column prop="name" header-align="center" align="center" label="姓名"
                                min-width="80">
                            </el-table-column>
                            <el-table-column prop="mobile" header-align="center" align="center" label="联系电话"
                                min-width="100">
                            </el-table-column>
                            <el-table-column prop="createdTime" header-align="center" align="center" label="报名时间"
                                min-width="80">
                            </el-table-column>
                            <el-table-column prop="remark" header-align="center" align="center"
                                label="备注说明" show-overflow-tooltip min-width="120">

                            </el-table-column>
                            <el-table-column prop="signFlag" header-align="center" align="center" label="签到" width="80">
                            </el-table-column>
                            <el-table-column prop="contactMobile" header-align="center" align="center" label="签到地点"
                                width="120">
                            </el-table-column>
                        </el-table>
                    </div>

                         <!-- 活动实况 -->
                    <div style="margin-top: 20px;" v-if="formData.status!==0&&formData.online==1">
                        <div style="font-size: 15px; color: black; margin-left: -30px; margin-bottom: 10px;">
                            活动实况
                        </div>
                        <el-table class="table" border style="width: 100%" :data="actList">
                            <el-table-column label="序号" header-align="center" align="center" type="index"
                                width="50"></el-table-column>

                            <el-table-column prop="nickname" header-align="center" align="center" label="姓名"
                                min-width="100">
                            </el-table-column>
                            <el-table-column prop="createdTime" header-align="center" align="center" label="联系电话"
                                min-width="80">
                            </el-table-column>
                            <el-table-column prop="desc" header-align="center" align="center" label="实况内容"
                                min-width="280">
                            </el-table-column>
                            <el-table-column prop="images" header-align="center" align="center"
                                label="活动照片" show-overflow-tooltip min-width="120">
                                <template slot-scope="scope">
                                    <div v-for="(item, index) in scope.row.images" :key="index"
                                        style="display: flex;">
                                        <img :src="item.url"
                                            style="max-width: 20px; max-height: 20px; margin-right: 10px;" />
                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>

                </div>
            </div>
        </div>
        <div class="m-detail-btn">
            <el-button size="small" @click="handleCancle">关 闭</el-button>
        </div>
    </div>
</template>

<script>
import { Loading } from "element-ui"; // 引入Loading服务
import nextTick from "dai-js/tools/nextTick";
import daiMap from "@/utils/dai-map";
import { requestPost,requestGet } from "@/js/dai/request";

var map;
var search;
var markers;
var infoWindowList;
var geocoder; // 新建一个正逆地址解析类

let loading; // 加载动画
export default {
    data() {
        return {
            formData: {},
            initLoading: false,
            NameList:[],
            actList:[],
            activityId:""
        };
    },
    components: {},
    created() { 

    },

    mounted () {
   
    },

    methods: {
        async communityActivityApplicationRecord () {
        const url = "/actual/base/communityActivityApplicationRecord/page"
        let params = {
          pageSize: 20,
          pageNo: 1,
          activityId:this.activityId
        }
        console.log("df ");
        const { data, code, msg } = await requestGet(url, params)
        if (code === 0) {
     
          this.NameList=data.list
          console.log( this.NameList);
        } else {
          this.$message.error(msg)
        }
      },
      async livereclist () {
        const url = "/heart/resi/act/livereclist"
        let params = {
          pageSize: 20,
          pageNo: 1,
          actId:this.formData.id
        }
        const { data, code, msg } = await requestPost(url, params)
        if (code === 0) {
          this.actList=data.actLives
          console.log(data);
        } else {
          this.$message.error(msg)
        }
      },
        handleCancle() {
            this.diaDestroy();
            this.$emit("diaDetailClose");
        },

        diaDestroy() {
            if (map) {
                // map.destroy()
            }
        },

        async initForm(row) {
            this.startLoading();
            this.formData = JSON.parse(JSON.stringify(row));
            console.log(this.formData,"this.formData");
            this.activityId=this.formData.id
            console.log(    this.activityId,"this.activ");
            this.initLoading = true;
            // console.log('this.formData,',this.formData);

            let { latitude, longitude } = this.$store.state.user;
            console.log("lat" + latitude + ",lon" + longitude);
            if (this.formData.latitude && this.formData.longitude) {
                latitude = this.formData.latitude;
                longitude = this.formData.longitude;
            }
            if (!latitude || latitude == "" || latitude == "0") {
                latitude = 39.9088810666821;
                longitude = 116.39743841556731;
            }
            this.endLoading();
            this.communityActivityApplicationRecord()
            this.livereclist()
        },

        // 开启加载动画
        startLoading() {
            loading = Loading.service({
                lock: true, // 是否锁定
                text: "正在加载……", // 加载中需要显示的文字
                background: "rgba(0,0,0,.7)", // 背景颜色
            });
        },
        // 结束加载动画
        endLoading() {
            // clearTimeout(timer);
            if (loading) {
                loading.close();
            }
        },
    },
    computed: {},
    props: {},
};
</script>
<style lang="scss" scoped>
@import "@/assets/scss/modules/management/detail-main.scss";

// span {
//     display: inline-block;
//     white-space: nowrap; /* 避免换行 */
// }

</style>
<style scoped></style>
