import { defineComponent, ref } from 'vue'
import { ElButton, ElFormItem, ElForm, ElRadio, ElMessage, ElCheckboxGroup, ElCheckbox, ElInput,ElEmpty } from 'element-plus'
import { state } from '/src/state'
import request from "/src/helpers/request";
import { removeMedia } from './helpers'
import styles from './groupChat.module.less'


export default defineComponent({
    name: 'LiveBroadcastGroupChat',
    data() {
        return {
            searchForm: {
                search: "",
            },
            checkList: [],
            tableList: [],
        }
    },
    async mounted() {
        this.getList()
    },

    beforeUnmount() {

    },
    methods: {
        onReSet() {
            this.searchForm.search = "";
            this.checkList = [];
            this.search();
        },
        search() {
            this.getList();
        },
        async getList() {
            try {
                const res: any = await request('/api-web/imGroup/queryGroupList', {
                    params: {
                        ...this.searchForm
                    }
                })
                this.tableList = res.data;
            } catch (e) {
                console.log(e)
            }

        },
        resectCheck(id: any) {
            // @ts-ignore
            const tempId: never = id
            if (this.checkList.indexOf(tempId) == -1) {
                this.checkList.push(tempId);
            } else {
                this.checkList.splice(this.checkList.indexOf(tempId), 1);
            }
        },
    },
    render() {
        return (
            <div >
                <ElForm model={this.searchForm} ref="form" inline={true} class={styles.form}>
                    <ElFormItem>
                        <ElInput clearable placeholder="群聊名称/乐团编号" modelValue={this.searchForm.search} onInput={val => this.searchForm.search = val}></ElInput>
                    </ElFormItem>
                    <ElFormItem>
                        <ElButton type="primary" onClick={this.search}>搜索</ElButton>
                        <ElButton type="danger" onClick={this.onReSet}>重置</ElButton>
                    </ElFormItem>
                </ElForm>
                { this.tableList.length >0?        <div class={styles.tableWrap}>
                    <ElCheckboxGroup modelValue={this.checkList}>
                        {this.tableList.map((item: any) => {
                            return <div class={styles.cell} onClick={() => this.resectCheck(item.id)}>
                                <ElCheckbox class={styles.chioseBox} label={item.id} onChange={() => this.resectCheck(item.id)}><br
                                /></ElCheckbox>
                                <div class={styles.dotle}>{item.type == "MUSIC" ? "乐团" : "VIP"}</div>
                                <div class={styles.teamInfo}>
                                    <p class={styles.title}>{ item.name }</p>
                                    <p class={styles.subInfo}>{ item.memo }（共{item.memberNum }人）</p>
                                </div>
                            </div>
                        })}

                    </ElCheckboxGroup>
                </div>:<ElEmpty description={'暂无群聊'}/>}
         
                
            </div>
        )
    }
})
