import { defineComponent } from 'vue'
import { ElButton, ElFormItem, ElForm, ElRadio } from 'element-plus'
import runtime, * as RuntimeUtils from './runtime'
import styles from './preview.module.less'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'

export default defineComponent({
    name: 'LiveBroadcastSharePreview',
    props: ['form'],
    data() {
        return {
            detail: {
                roomTitle: '',
                liveStartTime: '',
                liveRemark: '',
            },
            url: "http://www.baidu.com",
        }
    },

    methods: {
        copyText() {

        },
        shareImage() {

        }
    },
    render() {
        return (
            <div id="preview">
                {this.form.preTemplate === '1' ?
                    <div class="first">
                        <h2>{this.form.roomTitle}</h2>
                        <p class="teacher">主讲人：{this.form.teacherName}</p>
                        <img src="./images/icon1.png" class="icon" alt="" />
                        <div class="preCore">
                            <img src="./images/start.png" class="start" alt="" />
                            <p class="title">开播时间</p>
                            <p class="time">{this.form.liveStartTime}</p>
                            <p class="title">直播内容</p>
                            <div class="content">
                                <img class="pre" src="./images/icon5.png" alt="" />
                                <img class="end" src="./images/icon4.png" alt="" />
                                {this.form.liveRemark}
                            </div>
                        </div>
                        <div class="bottom">
                            <img class="logo" src="./images/logo.png" alt="" />
                            <div class="code">
                                <div>
                                    <vue-qr text={this.url} style="width: 100%; margin='0'"></vue-qr>
                                </div>
                            </div>
                        </div >
                    </div> : null}
                {this.form.preTemplate === '2' ?
                    <div class="second" >
                        <h2>{this.form.roomTitle}</h2>
                        <p class="teacher">主讲人：{this.form.teacherName}</p>
                        <img src="./images/icon2.png" class="icon" alt="" />
                        <div class="preCore">
                            <img src="./images/start.png" class="start" alt="" />
                            <p class="title">开播时间</p>
                            <p class="time">{this.form.liveStartTime}</p>
                            <p class="title">直播内容</p>
                            <div class="content">
                                <img class="pre" src="./images/icon5.png" alt="" />
                                <img class="end" src="./images/icon4.png" alt="" />
                                {this.form.liveRemark}
                            </div>
                        </div>
                        <div class="bottom">
                            <img class="logo" src="./images/logo.png" alt="" />
                            <div class="code">
                                <div>
                                    <vue-qr text={this.url} style="width: 100%;margin='0'"></vue-qr>
                                </div>
                            </div>
                        </div>
                    </div> : null
                }
                {this.form.preTemplate === '3' ?
                    <div class="third" >
                        <h2>{this.form.roomTitle}</h2>
                        <p class="teacher">主讲人：{this.form.teacherName}</p>
                        <img src="./images/icon3.png" class="icon" alt="" />
                        <div class="preCore">
                            <img src="./images/start.png" class="start" alt="" />
                            <p class="title">开播时间</p>
                            <p class="time">{this.form.liveStartTime}</p>
                            <p class="title">直播内容</p>
                            <div class="content">
                                <img class="pre" src="./images/icon5.png" alt="" />
                                <img class="end" src="./images/icon4.png" alt="" />
                                {this.form.liveRemark}
                            </div>
                        </div>
                        <div class="bottom">
                            <img class="logo" src="./images/logo.png" alt="" />
                            <div class="code">
                                <div>
                                    <vue-qr text={this.url} style="width: 100% margin:0"></vue-qr>
                                </div>
                            </div>
                        </div>
                    </div> : null
                }
            </div >
        )
    },
})
