import { defineComponent } from 'vue'
import { ElButton, ElFormItem, ElForm, ElRadio } from 'element-plus'
import runtime, * as RuntimeUtils from './runtime'
import styles from './share.module.less'
import request from "/src/helpers/request";
// import groupChat from './'
import Preview from './preview'
export default defineComponent({
    name: 'LiveBroadcastShare',
    data() {
        return {
            form: { shareType: '2' },
            detail: {
                roomTitle: '',
                liveStartTime: '',
                liveRemark: '',
            }
        }
    },
    async mounted() {
        let details:any = JSON.parse(sessionStorage.getItem('details')||'')
        if (!details) {
            const roomUid = sessionStorage.getItem('roomUid')
            const details: any = await request.get('/api-web/imLiveBroadcastRoom/queryRoom', {
                params: {
                    roomUid: roomUid
                }
            })
            sessionStorage.setItem('details', details.data)
            this.detail = {... details.data} 
        }else{
            this.detail = {...details}
        }
    },
    methods: {
        copyText() {

        },
        shareImage() {

        },
        changeRafdio(value:string){
            this.form.shareType = value;
        }
    },
    render() {
        return (
            <div >
                <ElForm model={this.form} ref="form" class={styles.form}>
                    <ElFormItem label="分享方式" >
                        <ElRadio modelValue={this.form.shareType} onChange={()=>{this.changeRafdio("1")}} label="1">链接分享</ElRadio>
                        <ElRadio modelValue={this.form.shareType} onChange={()=>{this.changeRafdio("2")}}label="2" >二维码分享</ElRadio>
                        <ElRadio modelValue={this.form.shareType} onChange={()=>{this.changeRafdio("3")}}label="3">群聊分享</ElRadio>
                    </ElFormItem>
                </ElForm>
                <div>
                    {this.form.shareType === '1' ? <div class="linkWrap">

                        <div class={styles.shareWrap}>
                            <h2>乐团老师邀请您参与直播课！</h2>
                            <h4>{this.detail.roomTitle}</h4>
                            <p>直播时间:{this.detail.liveStartTime}</p>
                            <p>直播内容:{this.detail.liveRemark}</p>
                            <p>直播地址:</p>
                        </div>
                        <div class={styles.shareBtn} onClick={this.copyText}>复制分享内容</div>
                    </div> : null}
                </div >
                {this.form.shareType === '2' ? <div class={styles.codeWrap} >
                    <div class={styles.shareWrap}>
                        <Preview form={this.detail}/>
                    </div>
                    <div class={styles.shareBtn} onClick={this.shareImage}>复制分享内容</div>
                </div> : null
                }
                {this.form.shareType == '3' ?
                    <div class={styles.groupWrap} >
                        {/* <GroupChat /> */}
                    </div> : null
                }
            </div>
        )
    }
})
