<template>
<div style="text-align:initial">
    <van-nav-bar title="活动详情" left-text="返回" left-arrow @click-left="$router.back()" />
    
    <div >

        <div style="text-align: center;font-size: 24px">{{ activityDetail.name }}</div>
        <br>
        <div style="text-align: right;font-size: 10px">
            <span>（发布人：{{ activityDetail.creator }}）</span>
            <span>发布时间：{{ activityDetail.updated_at_datetime }} </span>
        </div>

        <!-- <hr> -->
        <yd-cell-group title="活动安排">
            <yd-cell-item href="#" type="link">
                <yd-icon slot="icon" name="time" size=".42rem"></yd-icon>
                <span slot="left">开始时间</span>
                <span slot="right">{{activityDetail.start_time}}</span>
            </yd-cell-item>
            <yd-cell-item href="#" type="link">
                <yd-icon slot="icon" name="time" size=".42rem"></yd-icon>
                <span slot="left">结束时间</span>
                <span slot="right">{{activityDetail.end_time}}</span>
            </yd-cell-item>
            <yd-cell-item href="#" type="link">
                <yd-icon slot="icon" name="footmark" size=".42rem"></yd-icon>
                <span slot="left">计划人数</span>
                <span slot="right">{{activityDetail.act_plan_num}}</span>
            </yd-cell-item>
            <yd-cell-item href="#" type="link">
                <yd-icon slot="icon" name="footmark" size=".42rem"></yd-icon>
                <span slot="left">已报人数</span>
                <span slot="right">{{activityDetail.apply_count}}</span>
            </yd-cell-item>
        </yd-cell-group>
        <!-- <div class="editor-content" v-html="activityDetail.content"></div> -->
        <yd-cell-group title="活动详细介绍">
            <!-- <iframe class="w-e-text" ref="newsContent" width="100%" style="min-height:500px" id="newsContent" frameborder="0" :srcdoc="activityDetail.content"></iframe> -->
            <div class="w-e-text">
                <div v-html="activityDetail.content"></div>
            </div>
        </yd-cell-group>

    </div>

    <div class="bottom-operate-button">
        <!-- <van-button type="info" native-type="button" @click="showDialog = true" block>立即报名</van-button> -->
        <van-button type="info" native-type="button" @click="beforeApply" block :disabled="!!activityDetail.apply_status">{{ activityDetail.apply_status ? '已报名' : '立即报名' }}</van-button>
    </div>

<!--  暂时以user_id关联，不管多少设备
    <van-dialog v-model="showDialog" title="报名用户" show-cancel-button @confirm="apply2act">
        <van-radio-group v-model="applyDeviceId">
            <van-cell-group>

                <van-cell v-for="item in deviceList" :key="item.id" :title="item.device_name + '（'+ item.imei +'）'" clickable @click="applyDeviceId = item.id">
                    <template #right-icon>
                        <van-radio :name="item.id" />
                    </template>
                </van-cell>

            </van-cell-group>
        </van-radio-group>
    </van-dialog>
 -->
</div>
</template>

<script type="text/babel">

import Vue from 'vue';
import { Dialog, NavBar,Sticky,CellGroup,Cell } from 'vant';

Vue.use(NavBar);
Vue.use(Sticky);
Vue.use(CellGroup);
Vue.use(Cell);
Vue.use(Dialog);

import E from 'wangeditor';
export default {
    data() {
        return {
            id: null,
            showDialog: false,
            deviceList: [], // 设备列表
            activityDetail: {},
            userid: null,
            openid: null,
            applyDeviceId: '',
        }
    },
    created() {
        this.userid = localStorage.getItem("userid")
        this.openid = localStorage.getItem("openid")
        this.id = this.$route.query.id; 
        if (!this.id) {
            this.$notify('获取参数失败,请返回重新打开');
            return;
        }

        this.getDetail();
    },
    mounted() {
        // this.getDevices();
    },
    methods: {
        /**
         * 获取设备
         */
        getDevices() {
            this.$http.get("/getMyDevices&userid=" + this.userid + '&openid=' + this.openid)
                .then(res => {
                    this.deviceList = res.data.data || [];
                })
                .catch(res => {
                    console.error('get devices error');
                });
        },
        /**
         * 报名前
         */
        beforeApply() {
            Dialog.confirm({
                title: '提醒',
                message: '确定要参加本活动吗？',
            })
            .then(resp => {
                this.apply2act();
            }).catch(()=>{})

        },
        /**
         * 报名
         */
        apply2act(){
            /* if (!this.applyDeviceId) {
                this.$notify('请选择报名用户');
                return;
            } */
            let postData = {
                // device_id: this.applyDeviceId,
                id: this.id,
            }
            this.$http.post('/applyActivity&userid='+this.userid+'&openid='+this.openid, JSON.stringify(postData))
                .then(res => {
                    this.$notify({
                        type: res.data.success ? 'success' : 'danger', 
                        message: res.data.message
                    })
                    if (res.data.success) {
                        this.getDetail();
                    }
                })
                .catch(()=>{})
        },
        /**
         * 获取详情
         */
        getDetail() {
            this.$http.get('/getActivityDetail&userid='+this.userid + '&openid='+this.openid +'&id='+ this.id)
                .then(res => {
                    if (!res.data.success) {
                        this.$notify(res.data.message);
                        return;
                    }
                    this.activityDetail = res.data.data || {};
                })
                .catch(() => {
                    this.$notify('出错了');
                })
        },
    }
}
</script>
<style scoped>

.editor-content{
    width: 100%;
    height: 100%;
}
.bottom-operate-button{
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 999;

}


</style>