<template>
    <div class="Feedback">
        <!-- <span @click="goFeedback()">
            反馈
        </span>
        <br /> -->
        <el-tooltip class="item" effect="dark" content="反馈建议" placement="top">
            <img
                class="fankui_icon"
                src="@/assets/icon/fankui2.jpg"
                alt=""
                v-draggable="{
                    updatePosition: handlePositionUpdate2,
                    onClick: gofankui
                }"
                :style="{ left: position2.x + 'px', top: position2.y + 'px' }"
            >
        </el-tooltip>
        

        <div class="draggable-window" 
            v-draggable="{
                updatePosition: handlePositionUpdate,
                onClick: openxiaoKe
            }"
            :style="{ left: position.x + 'px', top: position.y + 'px' }">
            <div class="window-header">
                <span>
                    <el-icon style="font-size: 20px;">
                        <ChatRound />
                    </el-icon>
                    <br />
                    AI助手
                </span>
            </div>
        </div>
       
    </div>
    <el-dialog v-model="dialogVisible" :before-close="handleClose" width=500>
        <template #header>
            <div class="dialog-header img_text_middle">
                <el-icon>
                    <ChatRound />
                </el-icon>
                <span class="warning_text" style="margin-left: 8px;">其他问题</span>
            </div>
        </template>
        <el-input v-model="textarea1" style="" type="textarea" placeholder="请描述你使用过程遇到的问题，我们会持续修改优化"
            :autosize="{ minRows: 4, maxRows: 4 }">

        </el-input>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="updateReduction()">
                    确认
                </el-button>
                <el-button @click="dialogVisible = false">取消</el-button>
            </div>
        </template>
    </el-dialog>
    <el-drawer v-model="dialogVisible2" style="min-width: 480px;" width="100%" direction="rtl" :size="Full_Screen ? '  100%' : '30%'">
        <template #header>
            <div style="display: flex; align-items: center;">
                <img style="cursor: pointer;width: 24px;margin-left: 15px;" :src="!Full_Screen ? FullScreen : noFullScreen"
                    @click="Full_Screen = !Full_Screen" alt="">

            </div>
        </template>
        <div style="height: calc(100% - 32px);">
            <iframe width="100%" height="100%"
                allow="camera *; microphone *;display-capture;midi;encrypted-media;"
                src="https://aichat.cocorobo.cn/#/?id=335951a7-65ec-40e9-ae91-2971464ade4e&type=agent" frameborder="0"
                scrolling="no"></iframe>
        </div>
    </el-drawer>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import { ChatRound, Close } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import FullScreen from '@/assets/icon/fullScreen.png'
import noFullScreen from '@/assets/icon/nofullScreen.png'
const dialogVisible = ref(false)
const textarea1 = ref("")
const dialogVisible2 = ref(false)
const Full_Screen = ref(false)
const vDraggable = {
    mounted(el, binding) {
        let isDragging = false;
        let offsetX = 0;
        let offsetY = 0;
        let startTime = 0;

        const onMouseDown = (event) => {
            event.preventDefault();
            event.stopPropagation();
            
            console.log('按下');
            isDragging = true;
            startTime = Date.now();
            
            // 获取元素当前位置
            const rect = el.getBoundingClientRect();
            offsetX = event.clientX - rect.left;
            offsetY = event.clientY - rect.top;

            // 确保元素有定位
            if (getComputedStyle(el).position === 'static') {
                el.style.position = 'fixed';
            }

            document.addEventListener("mousemove", onMouseMove);
            document.addEventListener("mouseup", onMouseUp);
            document.body.style.cursor = 'pointer';
            document.body.style.userSelect = 'none';
        };

        const onMouseMove = (event) => {
            if (!isDragging) return;
            
            console.log('移动');
            
            // 计算新位置
            const x = event.clientX - offsetX;
            const y = event.clientY - offsetY;
            
            // 设置位置
            el.style.left = `${x}px`;
            el.style.top = `${y}px`;
            
            // 回调
            if (binding.value?.updatePosition) {
                binding.value.updatePosition({ x, y });
            }
        };

        const onMouseUp = (event) => {
            console.log('松开');
            
            const endTime = Date.now();
            
            // 判断点击（短按）还是拖动
            if (isDragging && endTime - startTime < 200) {
                if (binding.value?.onClick) {
                    binding.value.onClick(event);
                }
            }
            
            // 清理
            isDragging = false;
            document.removeEventListener("mousemove", onMouseMove);
            document.removeEventListener("mouseup", onMouseUp);
            document.body.style.cursor = '';
            document.body.style.userSelect = '';
        };

        // 寻找拖动句柄
        const headerEl = el.querySelector(".draggable-window") || el;
        headerEl.style.cursor = 'pointer';
        headerEl.addEventListener("mousedown", onMouseDown);

        // 保存引用
        el._draggable = { onMouseDown, headerEl };
    },
    
    unmounted(el) {
        if (el._draggable) {
            const { onMouseDown, headerEl } = el._draggable;
            headerEl.removeEventListener("mousedown", onMouseDown);
            delete el._draggable;
        }
    }
};

const position = ref({ 
    x: window.innerWidth - 115, // 屏幕宽度减去元素宽度
	y: window.innerHeight - 190, // 屏幕高度减去元素高度 
});
const position2 = ref({ 
    x: window.innerWidth - 90, // 屏幕宽度减去元素宽度
	y: window.innerHeight - 280, // 屏幕高度减去元素高度 
});
const handlePositionUpdate = (newPos) => {
  // 直接修改 reactive 对象的属性
  position.value.x = newPos.x;
  position.value.y = newPos.y;
//   console.log('位置更新:', position);
};
const handlePositionUpdate2 = (newPos) => {
  position2.value.x = newPos.x;
  position2.value.y = newPos.y;
};
const openxiaoKe = () => {
//   console.log('点击事件触发');
  dialogVisible2.value = true
};

const gofankui = () => {
    window.open("https://cocoroboltd.feishu.cn/share/base/form/shrcn6mVspp24lw91QY08DF0dIh")
}

const goFeedback = () => {
    // top.location.href = "https://bbs.cocorobo.cn/"
    dialogVisible.value = true
}

const handleClose = (done) => {
    done()
}
const CustomerService = () => {
    top.location.href = "https://bbs.cocorobo.cn/"
}
const updateReduction = () => {
    if (textarea1.value != "") {
        dialogVisible.value = false
        ElMessage({
            message: '反馈问题提交成功',
            type: 'success',
        })
    } else {
        ElMessage({
            message: '请输入您要反馈的意见',
            type: 'warning',
        })
    }

}
</script>
<style lang="scss" scoped>
.Feedback {
    position: fixed;
    bottom: 120px;
    right: 30px;
    z-index: 100;
    position: fixed;
}
.draggable-window {
    flex-direction: column;gap: 5px;
}
.fankui_icon {
    position: fixed;
    width: 58px;
    border-radius: 50%;
    box-shadow: 1px 2px 1px 2px #f1f1f1;
    z-index: 100;
    cursor: pointer;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px;
    box-sizing: border-box;
    margin-bottom: 10px;
}
.window-header {
        position: relative;
        background: #fff;
        padding: 10px 0;
        border-radius: 30px;
        text-align: center;
        box-shadow: 1px 2px 1px 2px #f1f1f1;
        z-index: 100;
        span {
            display: inline-block;
            padding: 10px 8px;
            cursor: pointer;
            font-size: 14px;
        }
}

.window-header:active {
  cursor: grabbing;
}
</style>