<script setup>
import { user } from '~/store/index';
import downLoadFile1 from '@/utils/download'
import { ElRadioGroup, ElRadio, ElCheckboxGroup, ElCheckbox } from 'element-plus'
const props = defineProps({
    id: String,
    homework: String,
    file: String,
    dxa: String,
    user_id: String,
    zjr: String,
    ks_id: String,
})
const chatBox = ref()
const ws = new WebSocket("wss://socket.txhlwxx.com")
const emits = defineEmits(['filePre', 'edit'])
// let userList = ref(undefined)
const msgList = ref([])

let visiable = $ref(false);
let wordVisiable = $ref(false);
let title = $ref('')
let filecontent = $ref('');
let fileName = $ref('');
let downItem = $ref('');

let login_data = $ref({});
let login_id = $ref([]);
let testInfo = $ref([]);
let answer = $ref();
ws.addEventListener('message', (e) => {
    if (e.data) {
        try {
            const data = JSON.parse(e.data)
            // console.log(data,'data');
            if (data.type !== 'ping') {
                // console.log('ws message :>> ', data);
            }

            if (data.type === 'login') {
                const [id, name, banned] = data.client_name.split('|');
                // console.log(noSayId);
                login_data = {
                    id, name, banned
                }
            }
            if (data.type === 'say') {
                const [id, name] = data.from_client_name.split('|')
                console.log(data.content, 'cc');
                let fileType
                if (data.content.includes('|')) {
                    fileType = data.content?.split(";")[2]?.split('|')[1];
                    fileName = data.content.split(";")[0];
                    filecontent = data.content?.split(";")[2].split('|')[0];
                }
                // user.value.user_id !== props?.zjr
                if (fileType && user.value.user_id !== props?.zjr) {
                    downItem = data.content
                    switch (fileType) {
                        case 'home':
                            title = '作业';
                            wordVisiable = true;
                            request({
                                url: '/txwx/question/index',
                                data: {
                                    tq_id: props?.ks_id,
                                    tqr_data_type: '4',
                                    tqr_data_id: props?.id,
                                    tqr_pos: '1'
                                }
                            }).then(res => {
                                if (res.code == '1') {
                                    testInfo = res.data.page_data;
                                }
                            })
                            // let url = getFullUrl(filecontent)
                            break
                        case 'file':
                            title = '文件';
                            visiable = true;
                            break
                        case 'dxa':
                            title = '课时导学案';
                            visiable = true;
                            break
                    }
                }
            }

        } catch (error) {
            console.error(error);
        }
    }

})

ws.addEventListener('error', (err) => {
    console.error('ws error :>> ', err);
})

ws.addEventListener('open', (e) => {
    ws.send(JSON.stringify({
        "type": "login",
        // "client_id": user.user_id,
        "client_name": user.value.user_id + '|' + user.value.user_realname,
        "room_id": 'zbkc' + props.id
    }))
})

const msg = ref('')

const chatItemBox = ref()

function handleSendClick(item, name) {
    ws.send(JSON.stringify({
        type: "say",
        to_client_id: 'all',
        to_client_name: '所有人',
        content: item + '|' + name,
    }))
    msg.value = ''

}

let noSayId = [];


function filePre(item) {
    console.log(item, '预览查看');
    emits('filePre', item)
}

function download(item) {
    downLoadFile1(getFullUrl(item.split(';')[2].split('|')[0]), `${item.split(';')[0]}`)
}
</script>

<template>
    <div class="w-300px h-400px flex flex-col shadow home">
        <!--  v-if="user.user_id === props?.zjr" -->
        <div v-if="user.user_id === props?.zjr" class="h-100 overflow-hidden overflow-y-auto flex-auto home_scroll" ref="chatBox">
            <div class="right-nav ml-20px">
                <span>相关章节</span>
                <i></i>
            </div>
            <ul ref="chatItemBox">
                <li v-if="props?.dxa" class="chat_li flex justify-between items-center px-15px">
                    <el-tooltip class="box-item" effect="dark" :content="props?.dxa.split(';')[0]" placement="top-start">
                        <p class="w-129px truncate text-14px py-4px">
                            {{ props?.dxa.split(';')[0] }}
                        </p>
                    </el-tooltip>
                    <button class="button" @click="filePre(props?.dxa.split(';')[2])">查看</button>
                    <button class="button" @click="handleSendClick(props?.dxa, 'dxa')">下发</button>
                </li>
                <li v-if="props?.homework" class="chat_li flex justify-between items-center px-15px">
                    <el-tooltip class="box-item" effect="dark" :content="props?.homework.split(';')[0]"
                        placement="top-start">
                        <p class="w-129px truncate text-14px py-4px">
                            {{ props?.homework.split(';')[0] }}
                        </p>
                    </el-tooltip>
                    <button class="button" @click="filePre(props?.homework.split(';')[2])">查看</button>
                    <button class="button" @click="handleSendClick(props?.homework, 'home')">下发</button>
                </li>
                <li v-if="props?.file" class="chat_li flex justify-between items-center px-15px">
                    <el-tooltip class="box-item" effect="dark" :content="props?.file.split(';')[0]" placement="top-start">
                        <p class="w-129px truncate text-14px py-4px">
                            {{ props?.file.split(';')[0] }}
                        </p>
                    </el-tooltip>
                    <button class="button" @click="filePre(props?.file.split(';')[2])">查看</button>
                    <button class="button" @click="handleSendClick(props?.file, 'file')">下发</button>
                </li>
                <!-- <li v-show="item.content" v-for="item in msgList"
                    class="mb-5px px-10px py-5px chat_li rounded-10px relative" :key="item.id">
                    <div class="flex flex-col flex-auto">
                        <div class="flex justify-between items-center">
                            <span class="text-14px mb-5px font-bold">{{ item.name }}</span>
                            <div v-if="user.user_role_id === '75'" class="">
                                <img v-if="!item.bannedN" @click="banText(item)" :src="text" alt="">
                                <img v-else :src="notext" @click="JCText(item)" alt="">
                            </div>
                        </div>
                        <div class="mb-3 rounded-md min-h-20px box-content">
                            <p class="word_wrap text-16px" v-html="item.content"></p>
                        </div>
                    </div>
                </li> -->
            </ul>
        </div>
        <!-- <div v-else class="w-0 h-0"></div> -->
        <el-dialog v-model="visiable" :title="title">
            <div class="chat_li flex justify-between items-center pl-15px pr-65px">
                <el-tooltip class="box-item" effect="dark" :content="fileName" placement="top-start">
                    <p class="min-w-100px truncate text-14px py-4px">
                        {{ fileName }}
                    </p>
                </el-tooltip>
                <div>
                    <button class="button" @click="filePre(filecontent)">查看</button>
                    <button class="button" @click="download(downItem)">下载</button>
                </div>

            </div>
        </el-dialog>
        <el-dialog v-model="wordVisiable" :title="title">
            <div v-if="testInfo.length > 0">
                <div v-for="item in testInfo" :key="item.tq_id">
                    <div class="flex">
                        <div class="leading-loose" v-html="item.tq_content"></div>
                        <div class="min-w-60px">
                            <span class="py-3px px-10px rounded-10px bg-hex-1259A1 text-white text-12px">{{
                                item.tq_type_name }}</span>
                        </div>
                    </div>
                    <ElRadioGroup v-if="item.tq_type == '1'" class="my-10px" size="30" v-model="item.answer">
                        <el-radio size="30" class="mr-15px" v-for="e in item.tq_option_choosen" :label="e"><span
                                class="px-10px">{{ e }}</span></el-radio>
                    </ElRadioGroup>
                    <ElCheckboxGroup v-else-if="item.tq_type == '2'" v-model="item.answer">
                        <el-checkbox v-for="e in item.tq_option_choosen"><span class="px-10px">{{ e }}</span></el-checkbox>
                    </ElCheckboxGroup>
                    <ElRadioGroup v-else class="my-10px" size="30" v-model="item.answer">
                        <el-radio size="30" class="mr-15px" v-for="e in item.tq_option_choosen" :label="e"><span
                                class="px-10px">{{ e }}</span></el-radio>
                    </ElRadioGroup>
                </div>
            </div>

        </el-dialog>

    </div>
</template>

<style lang="scss" scoped>
$color: #1259A1;


.chat_li {
    // background-color: rgba($color: #000000, $alpha: .4);
    height: 40px;
}

.button {
    border: 1px solid $color;
    border-radius: 15px;
    width: 60px;
    height: 30px;
    margin-right: 5px;
    // padding: 3px 18px;
    color: $color;
    font-size: 12px;
}

// :deep(.box-content){
.word_wrap {
    word-wrap: break-word;
    word-break: break-all;
}

// }
::v-deep .input {
    width: 380px;
    height: 40px;
    border-radius: 10px;
    background-color: rgba($color: #fff, $alpha: 0.3) !important;

    .el-input__wrapper {
        width: 380px;
        height: 40px;
        border-radius: 10px;
        background-color: rgba($color: #fff, $alpha: 0.7) !important;
    }
}

::v-deep .el-button {
    width: 111px !important;
    height: 32px;
    opacity: 0.7;
    background: linear-gradient(90deg, #2586e9 1%, #57c6d8 100%);
    border-radius: 38px;
    padding: 5px 40px;

    span {
        font-size: 14px;
    }
}

.home_scroll::-webkit-scrollbar {
    width: 2px;
}

.home_scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: $color;
    box-shadow: inset 0 0 5px rgba(0, 122, 204);
}

.home_scroll::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #ededed;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}

.home_scroll {
    scrollbar-width: 2px;
    scrollbar-color: $color #fff;
}

.right-nav {
    position: relative;
    width: 72px;

    span {
        position: relative;
        display: block;
        z-index: 30;
        font-size: 16px;
        color: #222;
        text-align: center;
        line-height: 30px;
    }

    i {
        position: absolute;
        left: 0;
        bottom: 3px;
        width: 100%;
        height: 6px;
        border-radius: 3px;
        background: rgba(108, 93, 211, 0.2);
    }
}

::v-deep .western {
    line-height: 30px !important;
}
</style>