<template>
  <div class="div-container">
    <van-sticky>
        <van-nav-bar :title="courseData.name" left-text="返回" left-arrow @click-left="$router.go(-1)" />
    </van-sticky>

    <div class="div-body">
        <!-- 图片 -->
        <div class="detail-head">
            <img :src="courseData.cover_image" alt="" height="100%" >
        </div>
        <yd-tab>
            <yd-tab-panel label="简介">
                <div v-if="courseData.introduction" class="detail-content w-e-text" 
                    v-html="courseData.introduction">
                </div>
                <div v-else>暂无内容</div>
            </yd-tab-panel>
            <yd-tab-panel label="目录">
                <yd-list theme="4">
                    <yd-list-item v-for="item, key in courseData.video_list" :key="key" @click.native="lookVideo(item.id)">
                        <img slot="img" :src="item.cover_image || defaultImage" fit="scale-down">
                        <span slot="title">{{item.name}}</span>
                        <yd-list-other slot="other">
                            <div style="width:100%;">
                                <p class="list-item-content" v-html="item.introduction"></p>
                            </div>

                            <yd-flexbox>
                                <yd-flexbox-item align="bottom">
                                    主讲老师：{{item.lector || '无'}}
                                </yd-flexbox-item>
                                <yd-flexbox-item align="bottom">
                                    视频时长<span style="color:#00f;"> {{item.duration|calcDuration}} </span>
                                </yd-flexbox-item>
                            </yd-flexbox>
                        </yd-list-other>
                    </yd-list-item>
                </yd-list>
            </yd-tab-panel>
            <!-- <yd-button v-if="!courseData.apply_status" @click.native="onApply" id="applyBtn" size="large" type="primary" shape="circle">报名</yd-button> -->
            <van-button 
                type="info" native-type="button" @click="beforeApply" block 
                :disabled="!!courseData.apply_status"
                style="position:fixed;bottom:0;">
                {{ courseData.apply_status ? '已报名' : '立即报名' }}
            </van-button>
        </yd-tab>
    </div>

    
    <!-- <van-dialog v-model="showDialog" title="报名用户" show-cancel-button @confirm="onApply">
        <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 E from 'wangeditor'

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

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

export default {
    filters: {
        calcDuration(num) {
            num = parseInt(num);
            if (isNaN(num)) {
                return 0;
            }
            let min = Math.floor(num / 60),
                sec = num % 60,
                str = '';
            
            min && (str += min + '分');
            str += sec + '秒';
            return str;
        }
    },
    data() {
        return {
            showApplyBtn: false,
            id: null, // 课程id
            deviceId: null, // 设备id
            showDialog: false,
            deviceList: [], // 设备列表
            applyDeviceId: null,
            userid: null,
            openid: null,
            studentId: null,
            defaultImage: 'https://rltest.oss-cn-hangzhou.aliyuncs.com/noimg.jpg',
            courseData: {
                cover_image: "", 
                name: "课程详情", 
                video_list: [],
            },
        };
    },
    created() {
        this.userid = localStorage.getItem("userid");
        this.openid = localStorage.getItem("openid");
        
        this.id = this.$route.query.id;
        if (!this.id) {
            this.$notify('缺少参数:id');
            return;
        }
        /* this.deviceId = this.$route.query.deviceId;
        if (!this.deviceId) {
            this.$notify('缺少参数:deviceId');
            return;
        } */

        this.getCourseData();
    },
    /* mounted() {
        this.getDevices();
    }, */
    methods: {
        /**
         * 获取课程详情数据
         */
        getCourseData() {
            // const url = '/getCourseDetail&userid='+this.userid+'&openid='+this.openid+'&deviceId='+this.deviceId+'&id='+ this.id;
            const url = '/getCourseDetail&userid='+this.userid+'&openid='+this.openid+'&id='+ this.id;
            this.$http.get(url)
                .then(res => {
                    this.courseData = res.data.data || [];
                    if (!res.data.success) {
                        this.$notify(res.data.message);
                        return;
                    }
                    this.showApplyBtn = !this.courseData.apply_status;
                })
        },
        /**
         * 报名前
         */
        beforeApply() {
            Dialog.confirm({
                title: '提醒',
                message: '确定要报名学习本课程吗？',
            })
            .then(resp => {
                this.onApply();
            }).catch(()=>{})

        },
        /**
         * 报名
         */
        onApply() {
            /* if (!this.applyDeviceId) {
                this.$notify('请选择报名用户');
                return;
            } */

            let postData = {
                // device_id: this.deviceId,
                course_id: this.courseData.id,
            }
            this.$http.post('/applyCourse&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.getCourseData();
                    }
                })
                .catch(()=>{})
        },
        /**
         * 获取设备
         */
        /* 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');
                });
        }, */
        /**
         * 看视频
         */
        lookVideo(id) {
            if (!id) {
                this.$notify('获取视频id失败');
                return;
            }
            if (!this.courseData.apply_status) {
                this.$notify('请先报名');
                return;
            }
            this.$router.push({
                path: '/courses_video_detail',
                query: {
                    id: id,
                    deviceId: this.deviceId,
                }
            })
        },
        goback() {
            this.$router.back();
        }
    }
};
</script>
<style scoped="less">
.div-container {
    height: 100vh;
    background-color: #fff;
}
.detail-head {
    width: 100%;
    height: 200px;
    background-color: #000;
    text-align: center;
}
.yd-tab-panel>.yd-tab-panel-item {
    height: calc(100vh - 345px);
    word-break: break-all;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
}
.yd-tab-panel-item .detail-content {
    text-align: left;
    /* text-indent: 2em; */
}
#applyBtn {
    position: fixed;
    bottom: 0;
}
.yd-list-other {
    flex-flow: column;
}
.yd-list-other .list-item-content{
    height: 55px;
    text-align: left;
}
.yd-flexbox {
    width: 100%;
    line-height: 2em;
    color: #000;
}
.yd-list-title span{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    text-overflow: ellipsis;
    line-height: .38rem;
    max-height: 1.34rem;
}
div.yd-flexbox-item.yd-flexbox-item-end {
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    display: -webkit-box !important;
}
</style>