<template>
  <div class="box">
    <div>
      <div class="contener" v-if="shouldShowFloatingConsult">


        <transition name="slide">
          <div v-show="windowsHidden" style="font-size: 14px">
            <div class="floating-consult">
              <a href="#" class="floating-consult-btn primary" @click.prevent="openAiConsult">
                <div class="floating-consult-icon">
                  <img src="./img/ocai.jpg" alt="在线咨询">
                  <span class="consult-badge"></span>
                </div>
                <!-- <span class="floating-consult-text">在线咨询</span> -->
              </a>
            </div>
          </div>
        </transition>


      </div>

      <!-- 申请试用弹窗 -->
      <el-dialog title="申请试用产品" :visible.sync="dialogVisible" width="35%" :before-close="handleClose"
                 custom-class="apply-use">
        <el-form ref="form" :model="form" label-width="120px" :rules="rules" style="width: 80%">
          <el-form-item label="姓名:" prop="customer">
            <el-input v-model="form.customer" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系方式:" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入联系方式"></el-input>
          </el-form-item>
          <el-form-item label="公司:" prop="unit">
            <el-input v-model="form.unit" placeholder="请输入公司名称"></el-input>
          </el-form-item>
          <el-form-item label="数量:">
            <el-input disabled v-model="form.product_num" placeholder="请输入资源数量"></el-input>
          </el-form-item>
          <el-form-item label="需求型号:" prop="resources">
            <!--            <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" v-model="form.resources" placeholder="请输入资源需求"></el-input>-->
            <el-checkbox-group v-model="form.resources" style="display: flex;flex-wrap: wrap;">
              <el-checkbox label="H800" style="width: 50%;"></el-checkbox>
              <el-checkbox label="H100" style="width: 50%;"></el-checkbox>
              <el-checkbox label="A800" style="width: 50%;"></el-checkbox>
              <el-checkbox label="A100" style="width: 50%;"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose" size="small">取 消</el-button>
          <el-button size="small" type="primary" @click="onSubmit()">确 定</el-button>
        </span>
      </el-dialog>
      <!--     选择视频类型-->
      <!--      v-if="isShowChangeChat"-->
      <div v-if="isShowChangeChat " class="changeChat" style="">
        <span style="margin-bottom: 5px;display: block">请选择聊天方式</span>
        <el-checkbox-group :min="1" style="margin-bottom: 5px" v-model="checkType">
          <el-checkbox label="文字"></el-checkbox>
          <el-checkbox label="视频"></el-checkbox>
          <el-checkbox label="音频"></el-checkbox>
        </el-checkbox-group>
        <div style="display: flex;justify-content: flex-end">
          <el-button size="mini" @click="closeWindow">关闭</el-button>
          <el-button type="primary" size="mini" @click="goVedioPage">立即沟通</el-button>
        </div>

      </div>

    </div>

  </div>
</template>

<script>
import {contantAPI, applyAPI} from "../../api/floatingWindow/index";
import axios from "axios";
import {mapState} from "vuex";
import {getCustomerOfSaleUserId} from "@/api/customer/vedio";
import { getHomePath } from "@/views/setting/tools";
import { reqNewHomeConsult } from "@/api/newHome";

export default {
  // 组件的逻辑代码
  data() {
    return {
      socket: null,
      checkType: ['文字'],
      isShowChangeChat: false,//控制选择沟通方式弹窗
      loading: true,
      currentDate: '2021-06-01',
      isShowPicLoading: true,//图片loading展示
      isSend: true,
      windowsHidden: true,
      // 获取用户代理字P串
      userAgent: window.navigator.userAgent,
      // 判断是否为移动设备
      isMobile: false,
      url: window.location.href,
      orgType: "",
      isShow: false,
      userid: sessionStorage.getItem('userId'),
      src: null,
      phone: null,
      title: '',
      dialogVisible: false,
      form: {
        customer: '',
        phone: '',
        unit: '',
        product_num: '1（台）',
        resources: ['H800']
      },
      rules: {
        customer: [
          {required: true, message: "请输入姓名", trigger: "change"},
        ],
        phone: [{pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/, message: "请输入有效的手机号"},
          {required: true, trigger: "blur", message: "请输入手机号"}],
        unit: [
          {required: true, message: "请输入单位", trigger: 'change'},
        ],
        product: [
          {required: true, message: "请输入资源名称", trigger: 'change'},
        ],
        resources: [
          {required: true, message: "请输入资源需求", trigger: 'blur'},
        ],
      },
    }
  },
  created() {
    this.isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(this.userAgent);

  },
  watch: {
    '$route': { // $route可以用引号，也可以不用引号
      handler(to, from) {
        this.orgType = sessionStorage.getItem('org_type') ? sessionStorage.getItem('org_type') : "";
        this.userid = sessionStorage.getItem('userId') ? sessionStorage.getItem('userId') : "";
      },
      deep: true, // 深度监听
      immediate: true, // 第一次初始化渲染就可以监听到
    }
  },
  mounted() {
    // debugger
    // console.log("路由展示~~~",location.href)
    // console.log("路由展示~~~",this.$route)

  },
  computed: {
    shouldShowFloatingConsult() {
      const isHomePage = [
        '/homePage/index',
        '/homePage/indexLast',
        '/ncmatchHome/index'
      ].includes(this.$route.path)
      return isHomePage || this.orgType == 2 || this.orgType == 3 || !this.userid
    }
  },
  methods: {
    // 让模板中可以直接调用 getHomePath()
    getHomePath,
    openTip() {
      this.$notify({
        title: '提示',
        message: '当前还未登录，请先登录~',
        type: 'warning'
      });
    },

    goVedioPage() {
      if (!sessionStorage.getItem('userId')) {
        console.log("未登录，请重新登录")
        this.openTip()
      } else {
        let ploady = {
          audioIsOn: 0,
          vedioIsOn: 0,
          chatIsOn: 0,
          userId: this.userid,
          toUserId: 0,
          customerName: sessionStorage.getItem('username'),
        }
        for (let i = 0; i < this.checkType.length; i++) {
          if (this.checkType[i] === '文字') {
            ploady.chatIsOn = 1
          } else if (this.checkType[i] === '视频') {
            ploady.vedioIsOn = 1
          } else if (this.checkType[i] === '音频') {
            ploady.audioIsOn = 1
          }
        }


        getCustomerOfSaleUserId({userid: this.userid}).then(res => {
          let routeData = {
            chatIsOn: ploady.chatIsOn,
            vedioIsOn: ploady.vedioIsOn,
            audioIsOn: ploady.audioIsOn,
            value: 'customer'
          }
          if (res.status) {
            this.$router.push({
              path: '/customer/chat',
              query: {
                chatIsOn: ploady.chatIsOn,
                vedioIsOn: ploady.vedioIsOn,
                audioIsOn: ploady.audioIsOn,
                room: res.data,
                name: sessionStorage.getItem('username')
              }
            })
            this.isShowChangeChat = false
            // let webSocketUrl = 'wss://www.opencomputing.cn/dev/wss/pub/rtcc.ws'
            let webSocketUrl = 'wss://www.opencomputing.cn/pub/rtcc.ws'
            this.socket = new WebSocket(webSocketUrl)
            let ploadyed = {
              type: 'send',
              from: sessionStorage.getItem('userId'),
              uuid: res.data,
              content: JSON.stringify(routeData)
            }
            // let ploadyed = {
            //   type: 'send',
            //   from: "user1",
            //   uuid: "asdsad",
            //   content: {}
            // }
            this.socket.onopen = (event) => {
              console.log("客户创建成功了@@@@@")
              console.log("发送的信息是", ploadyed)
              this.socket.send(JSON.stringify(ploadyed));
            };

            this.socket.onmessage = (event) => {
              console.log('接收到消息@@@@：', event.data);
            };

            this.socket.onclose = (event) => {
              console.log('WebSocket连接已关闭');
            };
          } else {
            console.log("zouleels")
          }
        })


      }

    },
    open2() {
      this.isShowChangeChat = true
    },
    openAiConsult() {
      this.resetYunbaoChatInstance()
      this.installYunbaoChat()
      window.YunbaoChat.init({
        avatarUrl: require('./img/ocai.jpg'),
        name: '云宝小助手'
      })
      window.YunbaoChat.open()
    },
    resetYunbaoChatInstance() {
      const oldModal = document.getElementById('yunbaoModal')
      const oldStyle = document.getElementById('yunbao-chat-css')
      if (oldModal) oldModal.remove()
      if (oldStyle) oldStyle.remove()
      window.YunbaoChat = null
    },
    installYunbaoChat() {
      if (window.YunbaoChat && document.getElementById('yunbaoModal')) return
      if (window.YunbaoChat && !document.getElementById('yunbaoModal')) {
        window.YunbaoChat = null
      }

      const vm = this
      window.YunbaoChat = {
        _inited: false,
        _chatInited: false,
        _selectedProduct: '',
        _config: {},
        init(config = {}) {
          if (this._inited) return
          this._inited = true
          this._config = Object.assign({
            avatarUrl: '',
            name: '云宝小助手',
            submitUrl: '',
            products: [
              { key: 'E投标', intro: 'E投标智能体是覆盖「招标解析→标书编制→合规审查→查重→知识沉淀」全链路的一站式投标AI解决方案，帮企业将编标周期从数天压缩至小时级，低级废标率降低100%。' },
              { key: 'E招标', intro: 'E招标智能体，AI辅助编制招标文件，自动合规性审查，让招标流程更高效、更透明、更合规。' },
              { key: 'E评标', intro: 'E评标智能体，AI辅助评标分析，自动提取关键指标、横向对比评分、识别异常报价，帮助评标专家高效、公正地完成评审工作。' },
              { key: '采伐智审', intro: '面向林业管理的行业智能体，可在线完成采伐申请材料的智能核验，自动比对采伐范围、树种、蓄积量等核心指标与合规要求，快速识别违规申请，助力林业资源可持续利用。' },
              { key: '燃机智慧监盘', intro: '能源领域工业智能体，实时采集燃机运行的温度、压力、振动等多维度数据，通过AI算法识别异常运行征兆，提前预判潜在故障，保障燃机稳定运行，降低运维成本。' },
              { key: '电价预测', intro: '面向能源行业的预测智能体，结合历史电价数据、供需变化、政策调整、天气影响等多维度变量，通过机器学习模型实现不同周期的电价精准预测，帮助电力企业优化收益管理。' },
              { key: 'AI漫剧制作', intro: '互联网内容创作智能体，覆盖从剧本生成、分镜拆解、素材生成到视频合成的全流程制作。支持工业化批量生产，帮助中小团队低成本快速产出AI漫画作品，大幅降低创作门槛。' },
              { key: '合同智能审查', intro: 'AI驱动的办公智能体，可快速识别合同中的风险条款、表述歧义、合规漏洞，自动标注问题位置并给出修改建议。支持多类型合同模板适配，大幅缩短人工审查时长。' },
              { key: '投策智能体', intro: '面向企业投资决策的辅助智能体，整合多维度市场数据、行业趋势与政策信息，通过算法模拟不同决策场景的收益与风险，自动生成可视化分析报告，提升投资方案科学性。' }
            ],
            pages: {
              '合同智能审查': '/homePage/agentStore/contractCase',
              '投策智能体': '/homePage/agentStore/decisionCase'
            }
          }, config)
          this.injectCSS()
          this.injectHTML()
          this.bindBaseEvents()
        },
        open() {
          const modal = document.getElementById('yunbaoModal')
          if (!modal) return
          modal.querySelectorAll('.yb-chat-avatar img,.yb-chat-msg-avatar img').forEach((img) => {
            img.src = this._config.avatarUrl
          })
          modal.classList.add('active')
          if (!this._chatInited) {
            this._chatInited = true
            this.initChat()
          }
        },
        close() {
          const modal = document.getElementById('yunbaoModal')
          if (modal) modal.classList.remove('active')
        },
        injectCSS() {
          if (document.getElementById('yunbao-chat-css')) return
          const style = document.createElement('style')
          style.id = 'yunbao-chat-css'
          style.textContent = vm.getYunbaoChatCSS()
          document.head.appendChild(style)
        },
        injectHTML() {
          if (document.getElementById('yunbaoModal')) return
          const div = document.createElement('div')
          div.innerHTML = vm.getYunbaoChatHTML(this._config)
          document.body.appendChild(div.firstElementChild)
        },
        bindBaseEvents() {
          const modal = document.getElementById('yunbaoModal')
          const closeBtn = document.getElementById('yunbaoCloseBtn')
          if (modal) {
            modal.addEventListener('click', (event) => {
              if (event.target === modal) this.close()
            })
          }
          if (closeBtn) closeBtn.addEventListener('click', () => this.close())
        },
        initChat() {
          const body = document.getElementById('yunbaoChatBody')
          if (!body) return
          body.innerHTML = ''
          setTimeout(() => {
            this.addBotMsg('嗨～我是云宝 👋<br>请问您想随便看看，还是直接聊聊需求？', [
              { text: '随便看看', action: 'browse' },
              { text: '直接聊聊需求', action: 'direct' }
            ])
          }, 200)
        },
        addBotMsg(html, options = [], displayType = '') {
          const body = document.getElementById('yunbaoChatBody')
          if (!body) return

          const msg = document.createElement('div')
          msg.className = 'yb-chat-msg'
          const type = displayType || (options[0] && options[0].type) || ''
          let optionHtml = ''
          if (options.length) {
            if (type === 'cards') {
              optionHtml = `<div class="yb-chat-product-cards">${options.map(item => `
                <div class="yb-chat-product-card" data-action="${item.action || ''}" data-param="${item.param || ''}" data-url="${item.url || ''}" data-text="${item.text || ''}">
                  <div class="yb-chat-product-card-title">${item.text}</div>
                  <div class="yb-chat-product-card-desc">${item.desc || ''}</div>
                  <span class="yb-chat-product-card-link">查看更多 →</span>
                </div>
              `).join('')}</div>`
            } else if (type === 'tags') {
              optionHtml = `<div class="yb-chat-tag-options">${options.map(item => `<button class="yb-chat-tag-btn" data-action="${item.action || ''}" data-param="${item.param || ''}" data-text="${item.text || ''}">${item.text}</button>`).join('')}</div>`
            } else {
              optionHtml = `<div class="yb-chat-options">${options.map(item => `<button class="${item.primary ? 'yb-chat-option-btn primary' : 'yb-chat-option-btn'}" data-action="${item.action || ''}" data-param="${item.param || ''}" data-text="${item.text || ''}">${item.text}</button>`).join('')}</div>`
            }
          }
          msg.innerHTML = `
            <div class="yb-chat-msg-avatar"><img src="${this._config.avatarUrl}" alt="云宝"></div>
            <div>
              <div class="yb-chat-msg-bubble">${html}</div>
              ${optionHtml}
            </div>
          `
          body.appendChild(msg)
          body.scrollTop = body.scrollHeight
          msg.querySelectorAll('[data-action]').forEach(btn => {
            btn.addEventListener('click', () => this.handleAction(btn.getAttribute('data-action'), btn.getAttribute('data-param'), btn.getAttribute('data-text') || btn.innerText.trim(), btn.getAttribute('data-url')))
          })
        },
        addUserMsg(text) {
          const body = document.getElementById('yunbaoChatBody')
          if (!body) return

          const msg = document.createElement('div')
          msg.className = 'yb-chat-msg yb-chat-msg-user'
          msg.innerHTML = `<div class="yb-chat-msg-avatar yb-chat-user-avatar"><span>👤</span></div><div class="yb-chat-msg-bubble">${text}</div>`
          body.appendChild(msg)
          body.scrollTop = body.scrollHeight
        },
        handleAction(action, param, text, url) {
          this.addUserMsg(text || param)
          if (action === 'retrySubmit') {
            setTimeout(() => this.submitForm(), 200)
            return
          }
          if (action === 'browse') {
            setTimeout(() => {
              this.addBotMsg('好的～为您推荐我们的热门产品 👇', [
                { text: 'E投标', desc: '更智能的标书写作引擎', action: 'goExternal', url: 'https://bid-ocai-v2.jinan.opencomputing.cn/', type: 'cards' },
                { text: '合同智能审查', desc: 'AI驱动合同风险审查，效率提升60%+', action: 'goContract', type: 'cards' },
                { text: '投策智能体', desc: '分钟级投研分析，精准辅助投资决策', action: 'goInvest', type: 'cards' }
              ])
              setTimeout(() => {
                this.addBotMsg('或者您还有其他想了解的产品吗？', this.getProductTags(), 'tags')
              }, 1200)
            }, 200)
            return
          }
          if (action === 'direct') {
            setTimeout(() => {
              this.addBotMsg('您想了解哪方面的产品或服务呢？', this.getProductTags(), 'tags')
            }, 200)
            return
          }
          if (action === 'goContract') {
            vm.$router.push(this._config.pages['合同智能审查'] || '/homePage/agentStore/contractCase').catch(() => {})
            this.close()
            setTimeout(() => {
              this.addBotMsg('已为您打开合同智能审查页面 📄<br>还有其他想了解的吗？', this.getProductTags(), 'tags')
            }, 200)
            return
          }
          if (action === 'goExternal') {
            window.open(url, '_blank')
            setTimeout(() => {
              this.addBotMsg('已为您打开相关页面。还有其他想了解的吗？', this.getProductTags(), 'tags')
            }, 200)
            return
          }
          if (action === 'goInvest') {
            vm.$router.push(this._config.pages['投策智能体'] || '/homePage/agentStore/decisionCase').catch(() => {})
            this.close()
            setTimeout(() => {
              this.addBotMsg('已为您打开投策智能体页面 📊<br>还有其他想了解的吗？', this.getProductTags(), 'tags')
            }, 200)
            return
          }
          if (action === 'productIntro') {
            this._selectedProduct = param
            const intro = this.getProductIntro(param)
            setTimeout(() => {
              this.addBotMsg(intro)
              setTimeout(() => this.addContactForm(), 800)
            }, 200)
            return
          }
        },
        getProductTags() {
          return this._config.products.map(item => ({
            text: item.key,
            action: 'productIntro',
            param: item.key
          }))
        },
        getProductIntro(key) {
          const product = this._config.products.find(item => item.key === key)
          return product ? product.intro : '这是一款优秀的AI产品，欢迎进一步了解！'
        },
        addContactForm() {
          const body = document.getElementById('yunbaoChatBody')
          if (!body) return

          const form = document.createElement('div')
          form.className = 'yb-chat-msg'
          form.innerHTML = `
            <div class="yb-chat-msg-avatar"><img src="${this._config.avatarUrl}" alt="云宝"></div>
            <div>
              <div class="yb-chat-msg-bubble">
                请留下您的联系方式，我们的顾问将尽快与您联系 😊
                <div class="yb-chat-form">
                  <input type="text" class="yb-chat-form-input" id="yunbaoChatName" placeholder="您的姓名">
                  <input type="tel" class="yb-chat-form-input" id="yunbaoChatPhone" placeholder="联系电话">
                  <input type="text" class="yb-chat-form-input" id="yunbaoChatCompany" placeholder="公司名称">
                  <button class="yb-chat-form-submit" id="yunbaoChatSubmit">提交咨询</button>
                  <div class="yb-chat-form-tip">信息仅用于顾问联系</div>
                </div>
              </div>
            </div>
          `
          body.appendChild(form)
          body.scrollTop = body.scrollHeight
          document.getElementById('yunbaoChatSubmit').addEventListener('click', () => this.submitForm())
        },
        async submitForm() {
          const name = document.getElementById('yunbaoChatName').value.trim()
          const phone = document.getElementById('yunbaoChatPhone').value.trim()
          const company = document.getElementById('yunbaoChatCompany').value.trim()
          const submitBtn = document.getElementById('yunbaoChatSubmit')
          if (!name || !phone) {
            this.addBotMsg('请先填写姓名和联系电话哦～')
            return
          }
          if (!/^1[3-9]\d{9}$/.test(phone)) {
            this.addBotMsg('请输入正确的 11 位手机号哦～')
            return
          }
          if (submitBtn && submitBtn.disabled) return

          if (submitBtn) {
            submitBtn.disabled = true
            submitBtn.innerText = '提交中...'
          }

          this.addUserMsg('已提交联系方式')
          const data = {
            custom_type: '1',
            name,
            phone,
            company,
            email: '',
            content: this._selectedProduct ? `我想咨询关于【${this._selectedProduct}】的产品信息` : '云宝对话咨询',
            source: '官网',
            url_link: window.location.href
          }

          try {
            const response = await reqNewHomeConsult(data)
            if (response && response.status) {
              this.addBotMsg('收到！我们的顾问将尽快与您联系 🎉<br>感谢您的信任！')
              return
            }
            this.addBotMsg((response && response.msg) || '提交失败了，您可以稍后重试。', [
              { text: '重新提交', action: 'retrySubmit', primary: true }
            ])
          } catch (error) {
            this.addBotMsg('网络开小差了，提交失败，您可以重试一次。', [
              { text: '重新提交', action: 'retrySubmit', primary: true }
            ])
          } finally {
            if (submitBtn) {
              submitBtn.disabled = false
              submitBtn.innerText = '提交咨询'
            }
          }
        }
      }
    },
    getYunbaoChatHTML(config) {
      return `
        <div id="yunbaoModal" class="yb-assistant-modal-overlay">
          <div class="yb-assistant-modal">
            <div class="yb-assistant-modal-header">
              <div class="yb-chat-avatar"><img src="${config.avatarUrl}" alt="云宝"></div>
              <div class="yb-chat-header-info">
                <div class="yb-chat-header-name">${config.name}</div>
                <div class="yb-chat-header-status">在线</div>
              </div>
              <button class="yb-assistant-close-btn" id="yunbaoCloseBtn">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
              </button>
            </div>
            <div class="yb-chat-body" id="yunbaoChatBody"></div>
          </div>
        </div>
      `
    },
    getYunbaoChatCSS() {
      return `
        .yb-assistant-modal-overlay{position:fixed;bottom:100px;right:24px;z-index:9999;display:none}
        .yb-assistant-modal-overlay.active{display:block}
        .yb-assistant-modal{background:rgba(255,255,255,0.85);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;width:400px;height:560px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 8px 32px rgba(59,130,246,0.08),0 0 0 1px rgba(255,255,255,0.6) inset;border:1px solid rgba(255,255,255,0.5);animation:ybChatSlideIn 0.35s cubic-bezier(0.34,1.56,0.64,1)}
        @keyframes ybChatSlideIn{from{opacity:0;transform:translateY(20px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
        @keyframes ybToastIn{from{opacity:0;transform:translateX(-50%) translateY(-10px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
        @keyframes ybToastOut{from{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(-10px)}}
        .yb-assistant-modal-header{background:linear-gradient(135deg,rgba(240,247,255,0.9) 0%,rgba(255,255,255,0.7) 100%);backdrop-filter:blur(10px);padding:16px 20px;display:flex;align-items:center;gap:12px;flex-shrink:0;border-bottom:1px solid rgba(59,130,246,0.08)}
        .yb-chat-avatar{width:48px;height:48px;border-radius:50%;overflow:visible;flex-shrink:0;display:flex;align-items:center;justify-content:center}
        .yb-chat-avatar img{width:48px;height:48px;object-fit:contain;display:block}
        .yb-chat-header-info{flex:1}
        .yb-chat-header-name{font-size:15px;font-weight:600;color:#1e293b}
        .yb-chat-header-status{font-size:12px;color:#64748b;display:flex;align-items:center;gap:4px}
        .yb-chat-header-status:before{content:"";width:6px;height:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 6px rgba(34,197,94,0.4)}
        .yb-assistant-close-btn{width:32px;height:32px;background:rgba(0,0,0,0.04);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.2s;border:none}
        .yb-assistant-close-btn:hover{background:rgba(0,0,0,0.08)}
        .yb-assistant-close-btn svg{width:18px;height:18px;stroke:#64748b}
        .yb-chat-body{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:16px;background:linear-gradient(180deg,rgba(240,247,255,0.3) 0%,rgba(255,255,255,0.1) 100%)}
        .yb-chat-body::-webkit-scrollbar{width:4px}
        .yb-chat-body::-webkit-scrollbar-thumb{background:rgba(59,130,246,0.15);border-radius:4px}
        .yb-chat-msg{display:flex;gap:10px;animation:ybChatMsgIn 0.3s ease}
        @keyframes ybChatMsgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
        .yb-chat-msg-avatar{width:40px;height:40px;border-radius:50%;overflow:visible;flex-shrink:0;margin-top:2px;display:flex;align-items:center;justify-content:center}
        .yb-chat-msg-avatar img{width:40px;height:40px;object-fit:contain;display:block}
        .yb-chat-user-avatar{background:#e2e8f0;font-size:16px;overflow:hidden}
        .yb-chat-user-avatar span{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
        .yb-chat-msg-bubble{background:#fff;border-radius:16px 16px 16px 4px;padding:12px 16px;font-size:14px;line-height:1.6;color:#334155;max-width:300px;box-shadow:0 1px 3px rgba(0,0,0,0.06)}
        .yb-chat-msg-user{flex-direction:row-reverse}
        .yb-chat-msg-user .yb-chat-msg-bubble{background:#1e293b;color:#fff;border-radius:16px 16px 4px 16px}
        .yb-chat-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
        .yb-chat-option-btn{padding:8px 16px;border-radius:20px;border:1px solid rgba(59,130,246,0.2);background:rgba(255,255,255,0.8);backdrop-filter:blur(4px);font-size:13px;color:#3b82f6;cursor:pointer;transition:all 0.2s;white-space:nowrap}
        .yb-chat-option-btn:hover{border-color:#3b82f6;background:rgba(59,130,246,0.06);box-shadow:0 2px 8px rgba(59,130,246,0.1)}
        .yb-chat-option-btn.primary{background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(59,130,246,0.25)}
        .yb-chat-product-cards{display:flex;flex-direction:column;gap:10px;margin-top:10px}
        .yb-chat-product-card{background:rgba(255,255,255,0.7);border:1px solid rgba(59,130,246,0.1);border-radius:12px;padding:10px 14px!important;height:92px!important;min-height:92px!important;max-height:92px!important;cursor:pointer;transition:all 0.2s;backdrop-filter:blur(4px);box-sizing:border-box;overflow:hidden;display:flex!important;flex-direction:column;justify-content:flex-start}
        .yb-chat-product-card:hover{border-color:rgba(59,130,246,0.25);background:rgba(255,255,255,0.9);box-shadow:0 4px 16px rgba(59,130,246,0.08);transform:translateY(-1px)}
        .yb-chat-product-card-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px;line-height:1.3}
        .yb-chat-product-card-desc{font-size:12px;color:#64748b;line-height:1.35;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
        .yb-chat-product-card-link{font-size:12px;color:#3b82f6;font-weight:500;display:inline-flex;align-items:center;gap:4px;line-height:1.2}
        .yb-chat-tag-options{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
        .yb-chat-tag-btn{padding:6px 12px;border-radius:16px;border:1px solid rgba(59,130,246,0.15);background:rgba(255,255,255,0.7);font-size:12px;color:#3b82f6;cursor:pointer;transition:all 0.2s;backdrop-filter:blur(4px)}
        .yb-chat-tag-btn:hover{border-color:#3b82f6;background:rgba(59,130,246,0.06);box-shadow:0 2px 8px rgba(59,130,246,0.1)}
        .yb-chat-form{margin-top:10px;display:flex;flex-direction:column;gap:10px}
        .yb-chat-form-input{width:100%;padding:10px 14px;border:1px solid rgba(59,130,246,0.15);border-radius:10px;font-size:13px;color:#1e293b;background:rgba(255,255,255,0.8);outline:none;transition:all 0.2s;box-sizing:border-box}
        .yb-chat-form-input:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.08);background:#fff}
        .yb-chat-form-input::placeholder{color:#94a3b8}
        .yb-chat-form-submit{width:100%;padding:10px;background:#1a1a2e;color:#fff;border:none;border-radius:9999px;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s;box-shadow:0 2px 8px rgba(26,26,46,0.2)}
        .yb-chat-form-submit:hover{background:#0f0f1a;box-shadow:0 4px 12px rgba(26,26,46,0.3);transform:translateY(-1px)}
        .yb-chat-form-submit:disabled{background:#cbd5e1;box-shadow:none;cursor:not-allowed}
        .yb-chat-form-tip{font-size:11px;color:#94a3b8;text-align:center}
        @media(max-width:480px){.yb-assistant-modal{width:calc(100vw - 32px);height:calc(100vh - 140px);right:0}.yb-assistant-modal-overlay{right:16px;bottom:90px}}
      `
    },
    //关闭弹窗
    closeWindow() {
      this.isShowChangeChat = false
    },
    onImageLoad() {
      this.isShowPicLoading = false
      console.log()
    },
    handleMouseEnter() {//鼠标移入事件
      this.isShow = true
      if (this.isSend) {
        this.contant()
      }
      // this.contant()
    },
    handleMouseLeave() {//鼠标移出事件
      this.isSend = true
      this.src = ''
      this.phone = ''
      this.title = ''
      this.isShow = false
      this.isShowPicLoading = true
    },
    contant() {//联系我们
      let params = {
        // userid: sessionStorage.getItem("userId")
      }
      if (this.url.indexOf('www') != -1) {
        params.domain = 'www'
      }
      contantAPI(params).then(res => {
        this.isSend = false

        this.isShowPicLoading = false
        if (res.status) {

          this.src = res.picture_url
          this.phone = res.contactor_phone
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      })
    },
    onSubmit() {//点击确认申请试用
      this.$refs.form.validate((valid) => {
        if (valid) {
          let pamars = {
            customer: this.form.customer,
            phone: this.form.phone,
            unit: this.form.unit,
            resources: this.form.resources,
            userid: sessionStorage.getItem("userId")
          }
          applyAPI(pamars).then(res => {
            if (res.status) {
              this.dialogVisible = false
              this.$message({
                message: "成功申请试用",
                type: "success",
              });
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          })
        }
      })
    },
    tryUse() {//申请试用

      if (sessionStorage.getItem("userId")) {
        this.dialogVisible = true
      } else {
        // window.open('https://www.opencomputing.cn/#/floatingBox')
        this.$router.push('/floatingBox')
      }

    },
    handleClose() {
      this.$refs.form.resetFields();
      this.dialogVisible = false
    },
    //是否展示悬浮窗
    isShowFloating() {


      return false
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  
  .contener {
    .dialog {
      width: 400px;
      height: 150px;
      background-color: #fff;
      z-index: 100 !important;
      position: fixed;
      right: 80px;
      bottom: 150px;
      display: flex;
      flex-direction: row;
      border-radius: 5px 5px 5px 5px;

      .phone {
        display: flex;
        flex-direction: column;

        .sonOne {
          font-size: 24px;
          color: #1e92f8;
          margin-bottom: 14px;
          margin-top: 26px;
          margin-left: 20px;
          font-weight: 600;
        }

        .sonTwo {
          font-size: 18px;
          margin-bottom: 14px;
          margin-left: 20px;
        }

        .sonThree {
          font-size: 18px;
          margin-left: 20px;
        }
      }

      .img {

        .nameCard {
          font-size: 20px;
          line-height: 150px;
        }

        img {
          width: 90px;
          height: 90px;
        }
      }
    }

    .floating-box {
      /* 悬浮框的样式，例如背景色、边框、位置等 */
      width: 80px;
      height: 80px;
      position: fixed;
      bottom: 170px;
      right: 0px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;
      z-index: 99 !important;
      margin-bottom: 20px;
      border-radius: 10px 0px 0px 10px;
      background-color: #1890ff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      i {
        color: white;
        font-size: 28px;
      }

      span {
        font-size: 14px;
        color: white;
      }

      /* 其他样式 */
    }

    .floating-box1 {
      /* 悬浮框的样式，例如背景色、边框、位置等 */
      cursor: pointer;
      width: 80px;
      height: 80px;
      position: fixed;
      bottom: 80px;
      right: 0px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;
      z-index: 99 !important;
      margin-bottom: 20px;
      border-radius: 10px 0px 0px 10px;
      background-color: #1890ff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      i {
        color: white;
        font-size: 28px;
      }

      span {
        font-size: 14px;
        color: white;
      }

      /* 其他样式 */
    }
  }

  .contenerMobile {
    .dialog {
      width: 200px;
      height: 100px;
      background-color: #fff;
      z-index: 100 !important;
      position: fixed;
      right: 80px;
      bottom: 150px;
      display: flex;
      flex-direction: row;
      border-radius: 5px 5px 5px 5px;

      .phone {
        display: flex;
        flex-direction: column;

        .sonOne {
          font-size: 14px;
          color: #1e92f8;
          margin-bottom: 14px;
          margin-top: 16px;
          margin-left: 10px;
          font-weight: 600;
        }

        .sonTwo {
          font-size: 12px;
          margin-bottom: 14px;
          margin-left: 10px;
        }

        .sonThree {
          font-size: 12px;
          margin-left: 10px;
        }
      }

      .img {
        padding-left: 20px;
        padding-top: 20px;

        .nameCard {
          font-size: 20px;
          line-height: 150px;
        }

        img {
          width: 50px;
          height: 50px;
        }
      }
    }

    .floating-box {
      /* 悬浮框的样式，例如背景色、边框、位置等 */
      width: 60px;
      height: 60px;
      position: fixed;
      bottom: 170px;
      right: 0px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 5px;
      z-index: 99 !important;
      margin-bottom: 20px;
      border-radius: 10px 0px 0px 10px;
      background-color: #1890ff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      i {
        color: white;
        font-size: 20px;
      }

      span {
        font-size: 8px;
        color: white;
      }

      /* 其他样式 */
    }

    .floating-box1 {
      /* 悬浮框的样式，例如背景色、边框、位置等 */
      cursor: pointer;
      width: 60px;
      height: 60px;
      position: fixed;
      bottom: 80px;
      right: 0px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 5px;
      z-index: 99 !important;
      margin-bottom: 20px;
      border-radius: 10px 0px 0px 10px;
      background-color: #1890ff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      i {
        color: white;
        font-size: 20px;
      }

      span {
        font-size: 8px;
        color: white;
      }

      /* 其他样式 */
    }

    .floating-box2 {
      /* 悬浮框的样式，例如背景色、边框、位置等 */
      cursor: pointer;
      width: 80px;
      height: 80px;
      position: fixed;
      bottom: 80px;
      right: 0px;
      background-color: #fff;
      border: 1px solid #ccc;
      padding: 10px;
      z-index: 99 !important;
      margin-bottom: 20px;
      border-radius: 10px 0px 0px 10px;
      background-color: #1890ff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      i {
        color: white;
        font-size: 28px;
      }

      span {
        font-size: 14px;
        color: white;
      }
    }
  }
}

.hiddenBtn:hover {
  background-color: #1890ff !important;

  i {
    color: white !important;
  }
}

.slide-enter-active {
  animation: slide-in 0.8s;
}

.slide-leave-active {
  animation: slide-out 0.8s;
}

@keyframes slide-in {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slide-out {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

.new-floating {
  img {
    position: absolute;
    top: -28px;
    width: 40px;
    height: 40px;
    z-index: 99;
  }

  position: relative;
  background: #fff;
  border-radius: 4px;
  width: 40px;
  height: 100px;
  z-index: 2;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 250px;
  right: 10px;
  //overflow: hidden;
  padding: 10px 0;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0px 0px 20px 0px rgba(185, 208, 210, 0.15);
  border-radius: 50px 50px 50px 50px;
  background: linear-gradient(180deg, #275AFF 0%, #2EBDFA 100%);
  border-radius: 50px 50px 50px 50px;
}

.cloud-contact-us-i {
  background-image: url(https://bce.bdstatic.com/portal-cloud-server/images/pendant-right.png);
  background-position: -125px 0;
  background-size: 300px 20px;
  height: 20px;
  width: 20px;
}

.cloud-contact-us {
  align-items: center;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  color: white;
  margin: 0;
  padding: 0;
  position: relative;
  width: .38rem;
  flex-direction: column;


  &:hover {
    .cloud-contact-us-i {
      background-position: -100px 0
    }


    //.active {
    //  border: 5px solid red;
    //  background-color: white !important;
    //  color: blue !important;
    //}
  }
}

//.cloud-contact-us-i {
//  background-position: -100px 0
//}

.cloud-contact-us.active {
  background-color: #fff;
  box-shadow: none
}

.cloud-contact-us:after {
  background: rgba(34, 34, 34, .08);
  bottom: 0;
  content: "";
  display: block;
  height: 1px;
  left: 10px;
  position: absolute;
  width: 22px;
}

.cart-entry-wrapper:after {
  background: rgba(34, 34, 34, .08);
  bottom: 34px;
  content: "";
  display: block;
  height: 1px;
  left: 10px;
  position: absolute;
  width: 22px;
}

.cart-entry {
  background: #fff;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  cursor: pointer;
  height: 40px;
  padding: 10px;
  position: relative;
  width: 40px;

  &:hover {
    .cart-icon {
      background-position: 0 0;
    }
  }

}

.cart-icon {
  background-image: url(https://bce.bdstatic.com/portal-cloud-server/images/pendant-right.png);
  background-position: -25px 0;
  background-size: 300px 20px;
  height: 20px;
  width: 20px;
  position: relative;
  display: block;
}

.cart-entry-wrapper {
  border-radius: 4px;
  bottom: 190px !important;
  right: 12px;
}

//侧边栏
.cloud-contact-us-spread-container {
  position: fixed;
  z-index: 999999 !important;
  animation: spreadContrast .3s ease-out;
  top: 250px;
  right: 40px

}

.cloud-contact-us-spread {
  width: 280px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px 0 rgba(34, 34, 34, .08);
  height: 90px;
  margin-right: 20px;
  position: relative;
}

.cloud-contact-us-tel {
  animation: spreadLineOpacity .3s ease-out forwards, spreadLine1 .3s ease-out .02s forwards;
  opacity: 1;
  top: 24px;
}

* {
  list-style: none;
}

.cloud-contact-us-tit {
  color: #222;
  font-family: PingFangSC-Medium;
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
}

.cloud-contact-us-con {
  color: #2468f2;
}

.cloud-contact-us-icon {
  background: url(https://bce.bdstatic.com/p3m/common-service/uploads/custom_6390d23.png) no-repeat;
  background-size: 295px 20px;
  float: left;
  height: 20px;
  margin-top: 2px;
  width: 20px;
  background-position: -100px 0;
}

.el-icon-video-camera {
  padding: 5px 0;

  &:hover {
    color: blue;
    cursor: pointer;
  }
}

.changeChat {
  width: 250px;
  height: 100px;
  position: fixed;
  bottom: 0;
  right: 10px;
  animation: slideInRight 0.5s forwards;
  background-color: white;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
  padding: 10px;
  z-index: 11;
}

@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.changeChat-fade-leave-active {
  transition: opacity 0.5s;
}

.changeChat-fade-leave-to {
  opacity: 0;
}

.floating-consult {
  position: fixed;
  right: 18px;
  bottom: 128px;
  z-index: 100;
}

.floating-consult-btn {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  text-decoration: none;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  transition: all 0.25s ease;
}

.floating-consult-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.floating-consult-btn.primary {
  width: 80px;
  height: 80px;
  padding: 12px 8px;
  border-radius: 50%;
  gap: 8px;
}

.floating-consult-icon {
  position: relative;
  width: 100%;
  height: 100%;
}

.floating-consult-icon img {
  width: 100%;
  // height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.consult-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: #ef4444;
}

.floating-consult-text {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 12px;
  color: #1f2937;
  letter-spacing: 2px;
}


</style>
<style>
.apply-use {
  margin-top: 8vh !important;
  width: 500px !important;
}

@media screen and (max-width: 760px) {
  .apply-use {
    width: 90% !important;
  }

}

</style>
