<template>
  <div class="common-layout">
    <!-- v-if="customerInfo.username" -->
    <el-container>
      <el-header class="el-header-center">
        <p class="onlineCustomer">You are talking to online customer service</p>
      </el-header>
      <el-container>
        <el-container>
          <el-main
            id="srollId"
            ref="srollId"
            :style="{
              padding: '0px 24px',
              height: '60vh',
              width: '100%',
            }"
          >
            <div class="title-message">You have no history messages</div>
            <div class="we-connecting">
              We are connecting you to online customer service
            </div>
            <!-- 推荐商品 -->
            <div
              class="message-container message-container-right"
              v-if="productInfo.isShow"
            >
              <div class="classSendLink">
                <div class="classSendDiv">
                  <div class="classSend-img">
                    <img :src="productInfo.productImg" />
                  </div>
                  <div class="classSend-price">
                    <div class="class-send-title">
                      {{ productInfo.productName }}
                    </div>
                    <div class="class-send-box">
                      <div class="class-send-price">
                        {{ productInfo.price }}
                      </div>
                      <!-- <div class="send">{{ productInfo.link }}</div> -->
                    </div>
                  </div>
                </div>
                <div class="sendlinkbox">
                  <div class="box-send" @click="toSendLink(productInfo)">
                    send link
                  </div>
                  <div class="box-close" @click="toCloseLink(productInfo)">
                    Close
                  </div>
                </div>
              </div>
            </div>
            <!--  -->
            <div class="message-container message-container-left">
              <div class="avatar">
                <img src="../assets/bot.png" class="avatar-image" />
              </div>
              <div class="bubble official-box">
                <div class="bubble-title">You may want to know:</div>
                <ul>
                  <li
                    class="bubble-h1"
                    @click="setChatMessage(item.text)"
                    v-for="(item, index) in wantMessage"
                    :key="index"
                  >
                    {{ item.text }}
                  </li>
                </ul>
              </div>
            </div>
            <div v-for="(message, index) in messages" :key="index">
              <div class="message-time" v-if="message.time == 1">
                {{ message.time }}
              </div>

              <!-- 图片 -->
              <div
                v-else-if="message?.msgType == 1"
                class="message-container image-content"
                :class="getMessageClass(message?.isSent)"
              >
                <div class="message-container">
                  <div class="bubble">
                    <div class="img-wraper">
                      <el-image
                        :src="message?.content"
                        :preview-src-list="[message?.content]"
                      />
                    </div>
                  </div>
                </div>
              </div>
              <!-- 视频 -->
              <div
                v-else-if="message?.msgType == 2"
                class="message-container video-content"
                :class="getMessageClass(message?.isSent)"
              >
                <div class="message-container">
                  <div class="bubble">
                    <div class="img-wraper">
                      <video :src="message?.content" controls />
                    </div>
                  </div>
                </div>
              </div>
              <!-- rfq -->
              <div
                class="message-container message-container-right"
                v-else-if="message.msgType == 3"
                @click.prevent="handleMessageClick($event)"
              >
                <div class="classSendLink">
                  <div class="classSendDiv">
                    <div class="classSend-img">
                      <img :src="message.content.productImg" />
                    </div>
                    <div class="classSend-price">
                      <div class="class-send-title">
                        {{ message.content.productName }}
                      </div>
                      <div class="class-send-box">
                        <div class="class-send-price">
                          {{ message.content.price }}
                        </div>
                        <!-- <div class="send">{{ message.content.link }}</div> -->
                      </div>
                    </div>
                  </div>
                  <!-- <div class="sendlinkbox" @click="toSendLink">
                     send link
                     <img src="../assets/right.png" />
                   </div> -->
                </div>
              </div>
              <!-- 询价单 -->
              <div
                class="message-container message-container-right"
                v-else-if="message.msgType == 4"
              >
                <div class="inquiry-list">
                  <div class="inquiry-top">
                    <div class="product-left">
                      <div class="product-category">
                        {{ message.content.purchaseQuantity }}
                      </div>
                      <div class="product-name">
                        {{ message.content.ProductName }}
                      </div>
                    </div>
                    <div>
                      <div class="product-count">
                        {{ message.content.price }}
                      </div>
                      <div class="from-unit">
                        {{ message.content.EmailAddress }}
                      </div>
                    </div>
                  </div>
                  <div class="product-info">
                    {{ message.content.otherRequirements }}
                  </div>
                  <div class="design-requirements">
                    <div>{{ message.content.flieName }}</div>
                    <div class="img" @click="downLoad(message)">
                      <img :src="require('../assets/icon_download.png')" />
                    </div>
                  </div>
                </div>
              </div>
              <!-- 普通聊天 -->
              <div
                v-else
                class="message-container"
                :class="getMessageClass(message?.isSent)"
              >
                <div class="message-container">
                  <div class="bubble">
                    <div
                      class="message"
                      v-html="message?.content"
                      @click.prevent="handleMessageClick($event)"
                    ></div>
                  </div>
                </div>
              </div>
            </div>
          </el-main>
          <el-footer class="el-footer" :style="{ border: '1px solid #E9ECF1' }">
            <AutomaticPrompt
              @keydown.enter="handleButtonClick"
              @updateState="getState"
              ref="automaticPromptRef"
            ></AutomaticPrompt>
            <div class="btn-send">
              <div>[ Send shortcut key: Enter ]</div>
              <div>
                <el-button class="send" plain @click.stop="handleButtonClick">
                  Send
                </el-button>
              </div>
            </div>
          </el-footer>
        </el-container>
        <!-- <el-aside
          width="300px"
          class="shirnk-aside"
          v-shrink="{ isShrink, width: '0px' }"
          :style="{
            height: 'calc( 100vh - 50px )',
          }"
        >
          <div class="shrink-text pointer" @click="changeiShrink">
            <el-icon size="15">
              <DArrowLeft v-if="isShrink" />
              <DArrowRight v-if="!isShrink" />
            </el-icon>
          </div>
          <div class="shrink-box">
            <div v-if="pageType == 1" style="width: 300px;">
              <div class="recentlyViewd" v-if="pageType == 2">
                Browsing History
              </div>
              <div class="recentlyViewd" v-if="pageType == 1">
                Recommended Products
              </div>
              <div
                v-for="(item, index) in productList"
                :key="index"
                class="browse-glance"
              >
                <img :src="item.productImg" class="browse-img" />
                <div class="browse-glowup">
                  <div class="title ellipsis">{{ item.productName }}</div>
                  <div class="units">
                    <div class="price ellipsis">{{ item.price }}</div>
                    <div class="send" @click="toSendLink(item)">
                      Send
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div v-else style="width: 300px;">
              <div class="recentlyViewd">Request for Quotation</div>
              <div class="recently-input-box">
                <el-form
                  label-position="top"
                  style="max-width: 600px;"
                  label-width="auto"
                  class="demo-dynamic"
                  ref="ruleFormRef"
                  :rules="rules"
                  :model="ruleForm"
                >
                  <el-form-item prop="ProductName" label="Product Name">
                    <el-input
                      v-model="ruleForm.ProductName"
                      style="height: 36px;"
                      placeholder="Please enter"
                      prop="Email"
                    />
                  </el-form-item>
                  <el-form-item prop="Email" label="Product Category">
                    <el-select
                      placeholder="Please select"
                      prop="Email"
                      style="height: 36px;"
                      v-model="ruleForm.Email"
                    >
                      <el-option label="Restaurant" value="1" />
                      <el-option label="Order No." value="2" />
                      <el-option label="Tel" value="3" />
                    </el-select>
                  </el-form-item>
                  <el-form-item prop="unit" label="Purchase Quantity">
                    <el-input
                      style="max-width: 300px; height: 36px;"
                      placeholder="Please enter"
                      v-model="ruleForm.purchaseQuantity"
                      class="input-with-select"
                      prop="Email"
                    >
                      <template #append>
                        <el-select
                          :clearable="false"
                          placeholder="Select"
                          style="width: 136px;"
                          v-model="ruleForm.unit"
                        >
                          <el-option
                            v-for="item in unitList"
                            :label="item.value"
                            :value="item.value"
                          />
                        </el-select>
                      </template>
                    </el-input>
                  </el-form-item>
                  <el-form-item
                    label="Other requirements explanation"
                    prop="otherRequirements"
                  >
                    <el-input
                      v-model="ruleForm.otherRequirements"
                      :autosize="{ minRows: 3, maxRows: 10 }"
                      type="textarea"
                      placeholder="Please enter"
                    />
                  </el-form-item>
                  <el-form-item prop="flieUrl">
                    <input
                      type="file"
                      ref="requireFile"
                      style="display: none;"
                      @change="fileImgChange"
                    />
                    <el-input
                      v-model="ruleForm.flieUrl"
                      style="display: none;"
                    />
                    <div
                      class="requirements-box pointer"
                      v-if="!ruleForm.flieUrl"
                      @click="requireFileOk"
                    >
                      <el-button icon="UploadFilled" class="uploadInfo" />
                      <div class="upload">
                        <div class="click-to-upload">
                          Click to upload
                        </div>
                        <div class="or-drag-and-drap">or drag and drap</div>
                      </div>
                    </div>
                    <div class="requirements-box1" v-if="ruleForm.flieUrl">
                      <div class="box">
                        <div class="upload-name">
                          <span
                            class="flieName ellipsis"
                            style="-webkit-line-clamp: 1; display: block;"
                          >
                            {{ ruleForm.flieName.split('.')[0] }}
                          </span>
                          <span>.{{ ruleForm.flieName.split('.')[1] }}</span>
                        </div>
                        <div class="upload-info">
                          <el-icon color="green">
                            <CircleCheck />
                          </el-icon>
                          <span>{{ ruleForm.flieSize }}KB</span>
                        </div>
                      </div>
                      <el-icon :size="20" @click="deleteFlieName(ruleForm)">
                        <Delete />
                      </el-icon>
                    </div>
                  </el-form-item>
                  <el-form-item prop="EmailAddress" label="Email Address">
                    <el-input
                      style="height: 36px;"
                      placeholder="Please enter"
                      v-model="ruleForm.EmailAddress"
                    />
                  </el-form-item>
                  <div
                    class="footerSubmit pointer"
                    @click="submitForm(ruleFormRef)"
                  >
                    Submit
                  </div>
                </el-form>
              </div>
            </div>
          </div>
        </el-aside> -->
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import '../assets/font/iconfont.css'
import { ElMessage } from 'element-plus'
import moment from 'moment'
import type { FormInstance } from 'element-plus'
import { ref, onMounted, watch, nextTick, reactive } from 'vue'
import { useUserStore } from '../store/modules/user'
import AutomaticPrompt from '../components/AutomaticPrompt.vue'
import ImageViewer from '@luohc92/vue3-image-viewer'
import { sendWebSocket, initWebSocket, connectMsg } from '../utils/websocket'
import '@luohc92/vue3-image-viewer/dist/style.css'
import { checkMesssages, getKfCode } from '../axios/model/user'
import { require, unitList } from '@/utils/index'
import { useRoute } from 'vue-router'
import { upLoadFilesHander } from '../minxins/UploadMixin'
const route = useRoute()
const routeParams = route.query
const img =
  'https://us-east-pat.s3.amazonaws.com/test/b2b/cos/images/19d114ec-d244-4e12-a409-6a39c8c1c44c.webp'
const pageType = routeParams.type || 1
const requireFile = ref<any>(null)
const ruleForm = ref({
  ProductName: '',
  Email: '',
  purchaseQuantity: '',
  unit: 'Bags',
  price: 5000,
  flieName: '',
  flieSize: 0,
  flieUrl: '',
  otherRequirements: '',
  EmailAddress: '',
})
const wantMessage = [
  {
    text: 'How to quickly contact sellers?',
  },
  {
    text: 'How to quickly inquire about products?',
  },
]
//进入页面直接发送请求从后端获取热点数据
onMounted(async () => {
  getKfCodeInfo()
})

//获取客服信息
//用户端根据商品priceId或者supplierId获取将要客服ID,优先找在线客服,注意是商品对应供应商的账号(客服iD)
function getKfCodeInfo() {
  let pramas = {
    priceId: routeParams.priceId,
    supplierId: routeParams.supplierId,
  }
  getKfCode(pramas).then(({ code, data, description }) => {
    if (code == 200) {
      const chatInfo = {
        clientId: routeParams.supplierId || new Date().getTime(),
        serviceId: data,
      }
      store.setChatInfo(chatInfo)
      connectMsg(getCheckMesssages)
      getCheckMesssages()
    }
  })
}

let isShrink = ref('')
const changeiShrink = () => {
  isShrink.value = !isShrink.value
}
//收缩
const vShrink: Directive<HTMLElement, boolean | Props> = {
  mounted(
    el: any,
    binding: {
      value: any
    },
  ) {
    let { option } = formatCOlorOption(binding.value)
    option.isUpdate && renderStyle(el, option)
  },
  updated(
    el: HTMLElement,
    binding: {
      value: any
    },
    vnode: any,
  ) {
    //修改之后
    let { option } = formatCOlorOption(binding.value)
    if (option.isShrink) {
      renderStyle(el, option)
    } else {
      let obj = {
        ...option,
        width: '300px',
      }
      renderStyle(el, obj)
    }
  },
}
function getSessionId(from, to) {
  return from < to ? `${from}-${to}` : `${to}-${from}`
}
function getCheckMesssages() {
  let query = {
    sessionId: getSessionId(store.chatInfo.clientId, store.chatInfo.serviceId),
  }
  checkMesssages(query).then(({ code, data, description }) => {
    data = data || []
    data.forEach((item: any) => {
      if ([3, 4].includes(item.msgType)) {
        item.content = JSON.parse(item.content)
      }
      item.isSent = item.fromCode == store.chatInfo.clientId
      item.userImg = '/assets/img/user.png'
      item.time = moment(item.createTime).format('HH:MM')
    })
    messages.value = data
  })
}
//设置style的属性值
function renderStyle(
  el: HTMLElement,
  option: {
    [x: string]: any
  },
) {
  for (let key in option) el.style[key] = option[key]
}

function fileImgChange() {
  var e: any = window.event || event
  var oFile = e.target.files[0]
  upLoadFilesHander(oFile).then((ress) => {
    const { success, result }: any = ress
    if (success) {
      ruleForm.value.flieUrl = result
      ruleForm.value.flieName = oFile.name
      ruleForm.value.flieSize = oFile.size
    }
  })
  const loading: any = ElLoading?.service({
    lock: true,
    text: '上传中...',
    spinner: 'el-icon-loading',
  })
  loading.close()
}
//合并指令传递的数据和默认配置的数据
function formatCOlorOption(val: string | Props) {
  const option =
    typeof val !== 'string'
      ? Object.assign(defaultStyle, val)
      : {
          val,
          ...defaultStyle,
        }
  return {
    option,
  }
}
const deleteFlieName = (val: any) => {
  ruleForm.value.flieUrl = ''
}

//过渡
const defaultStyle: {
  transition?: string
} = {
  transition: 'all 0.6s linear',
}
const requireFileOk = () => {
  requireFile.value.click()
}
const rules = reactive({
  ProductName: [
    {
      required: true,
      message: 'Enter a specific product name',
      trigger: 'blur',
    },
  ],
  Email: [
    {
      required: false,
      message: 'Select',
      trigger: 'blur',
    },
  ],
  flieUrl: [
    {
      required: true,
      message: 'Please select',
      trigger: 'blur',
    },
  ],
  explanation: [
    {
      required: false,
      message: 'Please enter',
      trigger: 'blur',
    },
  ],
  unit: [
    {
      required: true,
      message: 'Please enter',
      trigger: 'blur',
    },
  ],
  EmailAddress: [
    {
      required: true,
      message: 'Please enter',
      trigger: 'blur',
    },
  ],
})
const ruleFormRef = ref<FormInstance>()
const messages = ref([])
const isUpload = ref<Boolean>(true)
const productInfo = ref({
  productImg: img,
  productName: 'The secret to looking glowup nowadays',
  price: '$1.40 - 2.50',
  link: 'send',
  isShow: false,
})

const productList = ref([
  {
    productImg:
      'https://us-east-pat.s3.amazonaws.com/test/b2b/cos/images/6829c33f-8227-4b87-8df6-f41aa7e7e50e.jpg',
    productName:
      'D07 Lady Ladies Wrist Smart Watch Blood Oxygen NFC IP68 Waterproof',
    price: 'US$ 28 - 32',
    link: 'Send',
  },
  {
    productImg:
      'https://us-east-pat.s3.amazonaws.com/test/b2b/cos/images/c033aab2-4283-4f6f-baad-31087d21db91.jpg',
    productName:
      'Js8 PRO Max Ladies Smart Watch Heart Rate Blood Sports Wholease Wrist Amoled 2.1inch Big Screen',
    price: ' US$ 19.6 - 23',
    link: 'Send',
  },
  {
    productImg:
      'https://us-east-pat.s3.amazonaws.com/test/b2b/cos/images/af6ce6c1-dcb2-4a8e-a8f1-ed1d747480a6.webp',
    productName:
      'HK85 Fashion Mens Smart Watch Ladies Women Wrist Sports Watch Play Music Bluetooth Call',
    price: 'US$ 19.6 - 23',
    link: 'Send',
  },
])
const store: any = useUserStore()
const automaticPromptRef = ref('')
let msg = ''
//获取子组件中state的值，这个好像是写多余了，可以直接使用automaticPromptRef.value.setState('');获取state值
const getState = (v: string) => {
  msg = v
}
//监听聊天框数据的改变
watch(
  messages,
  (newVal, oldVal) => {
    if (newVal?.length > 0) setSrollHeight()
  },
  {
    deep: true,
  },
)
//让聊天滑动窗口滑到底部
const setSrollHeight = () => {
  nextTick(() => {
    const div = document.getElementById('srollId')
    if (div) div.scrollTop = div?.scrollHeight
  })
}

//发送按钮
const handleButtonClick = () => {
  if (!msg.trim()) {
    return ElMessage({
      message: 'Please enter content',
      type: 'error',
    })
  }
  sendData(msg.trim(), 0)
  automaticPromptRef.value.setState('')
}
function setChatMessage(text) {
  console.log(text, 'text')
  automaticPromptRef.value.setState(text)
  // automaticPromptRef.value.elAutocomplete = item
}
const sendData = (msg, msgType) => {
  let data = {
    content: msg,
    isSent: true,
    cmd: '11',
    msgType,
    chatType: '2',
    fromLang: 'cn',
    toLang: 'en',
    group_id: '',
    time: moment(new Date()).format('HH:mm:ss'),
    to: store.chatInfo.serviceId,
    form: store.chatInfo.clientId,
  }
  messages.value?.push(data)
  sendWebSocket(data)
}
//关闭商品弹窗
const toCloseLink = () => {
  productInfo.value.isShow = false
}
//发布询价单
const submitForm = (formEl: any) => {
  if (!formEl) return
  formEl.validate((valid: boolean) => {
    if (valid) {
      sendData(ruleForm.value, 4)
    } else {
      return false
    }
  })
}
const openWindow = (event: any) => {
  urlDownload(event)
}
const handleMessageClick = (event: any) => {
  const target = event.target
  if (target.tagName === 'A') {
    openWindow(target.href)
  } else if (target.tagName === 'IMG') {
    // 点击的图片进行放大操作
    ImageViewer({
      //切记额images这个参数是数组，我的target.valueof().src值是一个http的图片地址
      images: [target.valueOf().src],
      curIndex: 0,
      zIndex: 2000,
      showDownload: true,
      showThumbnail: true,
      handlePosition: 'bottom',
      maskBgColor: 'rgba(0,0,0,0.7)',
    })
  }
}
const downLoad = (message: any) => {
  urlDownload(message.content.flieUrl)
}

const urlDownload = (url: string, fileName = '下载文件') => {
  // 创建隐藏的可下载链接
  let eleLink = document.createElement('a')
  eleLink.download = fileName
  eleLink.style.display = 'none'
  eleLink.href = url
  // 触发点击
  document.body.appendChild(eleLink)
  eleLink.click()
  // 然后移除
  document.body.removeChild(eleLink)
}

//消息框样式动态选择
const getMessageClass = (isSent: boolean) => {
  return isSent ? 'message-container-right' : 'message-container-left'
}
//发送商品信息
const toSendLink = (e: any) => {
  sendData(e, 3)
}
</script>
<style lang="scss" scoped>
$primary-color: #e0493f;

.shirnk-aside {
  position: relative;
  overflow: initial;

  .shrink-text {
    position: absolute;
    top: 50%;
    transform: translate(-50%);
    line-height: 15px;
    height: 15px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    left: -12px;
    font-size: 10px;
  }

  .shrink-box {
    overflow-y: scroll;
    height: 100%;
  }
}

.inquiry-list {
  display: flex;
  width: 360px;
  padding: 12px 12px 8px 12px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  border-radius: 8px 0 8px 8px;
  border: 1px solid #e9ecf1;

  .inquiry-top {
    margin-bottom: 8px;
    width: 100%;
    display: flex;
    justify-content: space-between;

    .product-left {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .product-category {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: #0c203d;
        text-overflow: ellipsis;
        font-family: 'Inter';
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        margin-bottom: 6px;
      }

      .product-name {
        font-family: 'Inter';
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
      }
    }
  }

  .design-requirements {
    width: 336px;
    height: 36px;
    justify-content: space-between;
    line-height: 36px;
    margin-top: 8px;
    padding: 0px 8px;
    display: flex;
    align-items: center;
    background: #f6f9fc;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    align-self: stretch;
    overflow: hidden;
    border-radius: 4px;
    color: #475263;
    text-overflow: ellipsis;
    font-family: 'Inter';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;

    .img {
      width: 20px;
      height: 20px;
      line-height: 20px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.we-connecting {
  display: flex;
  padding: 8px;
  font-size: 12px;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  width: max-content;
  background: #f8f8fa;
  margin: 16px auto;
  margin-top: 0px;
  color: #798494;
}

.title-message {
  color: #798494;
  height: 56px;
  line-height: 56px;
  text-align: center;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: 'Helvetica Neue';
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
}

.message-time {
  color: #798494;
  text-align: center;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: 'Inter';
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  &::after,
  &::before {
    display: flex;
    content: ' ';
    height: 0.5px;
    background: #e6e8ed;
    flex: 1;
    justify-content: space-between;
    align-items: center;
  }

  &::after {
    margin-left: 8px;
  }

  &::before {
    margin-right: 8px;
  }
}

.class-send-box {
  display: flex;
  justify-content: space-between;

  .send {
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #c7cdd4;
    color: #031327;
    font-family: 'PingFang SC';
    font-size: 12px;
    width: 56px;
    font-weight: 400;
    line-height: 20px;
    text-align: center;
  }
}

.class-send-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  align-self: stretch;
  overflow: hidden;
  color: #0c203d;
  text-overflow: ellipsis;
  font-family: 'Helvetica Neue';
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.classSend-price {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

.class-send-price {
  color: #0c203d;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: 'Helvetica Neue';
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.72px;
}

.recentlyViewd {
  display: flex;
  height: 44px;
  width: 100%;
  font-size: 14px;
  padding: 12px 8px;
  font-weight: 400;
  align-items: center;
  background: #f8f8faff;
  color: #010914;
  font-feature-settings: 'clig' off, 'liga' off;
}

.onlineCustomer {
  color: #010914;
  font-family: 'PingFang SC';
  font-size: 14px;
  margin-left: 8px;
  font-style: normal;
  font-weight: 400;
}

.el-header-left {
  height: 76px;
  width: 100%;
  border: 1px solid #e6e8ed;
  text-align: center;
  padding: 16px;

  .el-input {
    :deep(.el-input__wrapper) {
      background: var(--Fill-Grey-Fill-1, #f8f8fa);
    }

    height: 44px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    width: 100%;

    .el-input__inner {
      font-size: 14px;
    }
  }
}

.el-container-center {
  background: #fff;
}

.el-header {
  padding: 0px;
}

.el-header-center {
  border-top: 1px solid #e6e8ed;
  border-bottom: 1px solid #e6e8ed;
  border-right: 1px solid #e6e8ed;
  display: flex;
  height: 44px;
  line-height: 44px;
  background: rgba(248, 248, 250, 1);
  justify-content: space-between;
  flex-direction: column;

  .name {
    color: #010914;
    font-family: 'Inter';
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
  }

  .url {
    color: #798494;
  }
}

.el-header-right {
  height: 76px;
  width: 100%;
  border: 1px solid #e6e8ed;
  display: flex;
  align-items: center;

  img {
    width: 15.42px;
    height: 17.92px;
    margin-right: 14px;
  }

  .name {
    color: #010914;
    font-family: 'PingFang SC';
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
  }
}

.el-footer {
  width: 100%;
  border-top: 0px;
  padding: 0px;
  height: calc(100vh - 60vh - 44px);
  position: relative;

  .btn-send {
    display: flex;
    justify-content: space-between;
    align-items: center;
    bottom: 10px;
    position: absolute;
    width: 100%;
    background: #fff;
    padding: 14px 21px 18px 21px;
    padding-bottom: 0px;

    .send {
      width: 80px;
      height: 32px;
      color: #fff;
      border: 1px solid #c7cdd4;
      font-family: 'PingFang SC';
      font-size: 15px;
      display: flex;
      color: #0c203d;
      justify-content: center;
      align-items: center;
    }

    div {
      &:nth-of-type(1) {
        font-family: 'PingFang SC';
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
      }
    }
  }

  .static-box {
    display: flex;
    background: #f8f8faff;
    padding: 8px 16px;
    height: 52px;
  }

  .staticList {
    height: 36px;
    border: 1px solid #e6e8ed;
    border-radius: 36px;
    background: #fff;
    width: max-content;
    color: #000000;
    padding: 0px 16px;
    font-family: 'Inter';
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;
    text-align: center;
    margin-right: 8px;
  }
}

.el-menu-item {
  line-height: initial;
  padding: 0px !important;
  height: 86px;
  border-left: 3px solid transparent;

  &.is-active {
    background: #eff0f1;
    border-left: 3px solid #1890ff;
  }
}

.user-info-box {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0px 10px;
  box-sizing: border-box;
  justify-content: space-between;

  .user-img-box {
    margin-right: 10px;
    display: flex;
    align-items: center;

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

  .user-info-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 100%;

    .user-box-right-nbs {
      width: 100%;
    }

    .user-reply-box {
      position: relative;
      display: flex;
    }

    .count {
      right: 16px;
      top: 4px;
      position: absolute;
      display: flex;
      width: var(--Edges-xl, 16px);
      height: var(--Edges-xl, 16px);
      min-width: var(--Edges-xl, 16px);
      padding: var(--Spacing-none, 0);
      flex-direction: column;
      justify-content: center;
      color: #fff;
      align-items: center;
      border-radius: var(--Radius-full, 1000px);
      background: red;
    }

    .label {
      margin-left: 5px;
      color: #3875ea;
      font-size: 12px;
      background: #d8e5ff;
      border-radius: 2px;
      padding: 1px 5px;

      &.pc {
        background: rgba(100, 64, 194, 0.16);
        color: #6440c2;
      }
    }
  }

  .user-name-box {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .user-name {
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      max-width: 80px;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.65);
      margin-right: 10px;
      font-family: 'Inter';
      font-style: normal;
      font-weight: 600;
    }
  }

  .user-reply {
    word-break: break-all;
    text-overflow: ellipsis;
    max-width: 80px;
    overflow: hidden;
    color: #798494;
    font-feature-settings: 'clig' off, 'liga' off;
    text-overflow: ellipsis;
    font-family: 'Inter';
    margin-top: 3px;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
  }

  .user-time {
    color: #999;
    font-size: 12px;
    font-style: normal;
    font-family: 'Inter';
    font-weight: 400;
  }
}

.customer-info-right {
  .customer-info-box {
    display: flex;

    .avatar-box {
      width: 88px;
      height: 88px;
      border-radius: 8px;
      margin-right: 12px;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .avatar-input-box {
      display: flex;
      align-items: center;
      margin-top: 8px;
      justify-content: space-between;

      .change {
        margin-right: 27px;
        color: #010914;
        text-align: right;
        font-family: 'PingFang SC';
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
      }

      .delete {
        color: #ff6600;
        text-align: right;
        font-family: 'PingFang SC';
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
      }
    }

    .avatar-input-right {
      display: flex;
    }

    .avatar-right {
      flex: 1;

      .avatar-right-name {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        flex: 1 0 0;
        overflow: hidden;
        color: #010914;
        font-feature-settings: 'clig' off, 'liga' off;
        text-overflow: ellipsis;
        font-family: 'Inter';
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
      }

      .avatar-right-price {
        display: flex;
        color: #010914;
        font-feature-settings: 'clig' off, 'liga' off;
        font-family: 'Inter';
        font-size: 16px;
        font-style: normal;
        line-height: 24px;

        div {
          &:nth-of-type(1) {
            margin-right: 4px;
            font-weight: 600;
          }

          &:nth-of-type(2) {
            font-weight: 400;
          }
        }
      }
    }
  }
}

.el-input__wrapper {
  width: 48px;
}

.user-wrapper {
  padding: 16px;
}

.user-info {
  padding-top: 15px;
  padding-bottom: 10px;
}

.chat-bar {
  height: 50px;
  width: 100%;
  line-height: 50px;
  text-align: left;
}

.send-btn {
  position: absolute;
  right: 0;
  bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  margin-top: 10px;
  margin-right: 10px;
}

.underline-link {
  text-decoration: underline;
}

.message-container {
  display: flex;
  align-items: start;
  margin-bottom: 10px;
  position: relative;
}

.message-container .time {
  text-align: center;
  color: #999;
  font-size: 14px;
  position: absolute;
  width: 100%;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 12px;
  padding: 7px;
  background: #f6f9fc;

  .avatar-image {
    border-radius: 50%;
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.bubble {
  background-color: #e8e8e8;
  color: #000;
  padding: 10px 14px;
  border-radius: 5px;
  background: #f5f5f5;
  border-radius: 10px;
  color: #000;
  font-size: 14px;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;

  .img-wraper img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  .bubble-title {
    font-family: 'Helvetica Neue';
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    margin-bottom: 4px;
  }

  .bubble-h1 {
    color: #1a65d6;
    cursor: pointer;
    font-family: 'Helvetica Neue';
    font-size: 14px;
    font-style: normal;
    display: block;
    font-weight: 500;
    line-height: 20px;
    letter-spacing: 0.56px;
    margin-bottom: 4px;

    &:nth-of-type(2) {
      margin-bottom: 0px;
    }
  }
}

.official-box {
  width: 464px;
}

.official-box ul li {
  position: relative;
  padding-left: 15px;
}

.official-box ul li::before {
  content: ' ';
  left: 2px;
  position: absolute;
  background: #1a65d6;
  width: 5px;
  height: 5px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
}

.message-container-right {
  justify-content: flex-end;
}

.message-container-left {
  justify-content: flex-start;
}

.avatar-number-input :deep(.el-input) {
  width: 102px !important;
}

.avatar-number-input {
  width: 102px !important;
}

.add {
  display: flex;
  height: var(--Layout-lg, 32px);
  padding: 0 var(--Spacing-lg, 12px) 0 var(--Spacing-md, 8px);
  justify-content: center;
  align-items: center;
  gap: 4px;
  border-radius: var(--Radius-xs, 4px);
  border: var(--Edges-zero, 1px) solid var(--color-Stroke-Weak, #e6e8ed);
  background: var(--color-bg-Program-White, #fff);
  width: 72px;
  height: 32px;
  margin-top: 16px;

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

.form {
  margin-top: 32px;

  :deep(.el-form-item__label) {
    color: #010914;
    font-family: 'PingFang SC';
    font-size: 14px;
    font-style: normal;
    font-weight: bolder;
    line-height: 20px;
  }

  :deep(.el-input__wrapper) {
    padding: 0px;
  }

  :deep(.el-input__inner) {
    padding: 8px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    flex: 1 0 0;
    overflow: hidden;
    color: #798494;
    font-feature-settings: 'clig' off, 'liga' off;
    text-overflow: ellipsis;
    font-family: 'PingFang SC';
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    background: #f2f3f5;
  }

  :deep(.el-textarea__inner) {
    background: #f2f3f5;
  }
}

#srollId {
  border-right: 1px solid #e6e8ed;
}

.browse-glance {
  display: flex;
  position: relative;
  padding: 16px 12px 16px 12px;

  .browse-img {
    width: 64px;
    height: 64px;
    margin-right: 12px;
  }

  &::before {
    position: absolute;
    content: ' ';
    height: 0.5px;
    background: #e6e8ed;
    width: 91%;
    bottom: 0px;
  }

  .units {
    margin-top: 8px;
    color: #0c203d;
    font-feature-settings: 'clig' off, 'liga' off;
    font-family: 'Helvetica Neue';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
    display: flex;
    justify-content: space-between;

    .price {
      flex: 1;

      color: #0c203d;
      font-feature-settings: 'clig' off, 'liga' off;
      font-family: 'Helvetica Neue';
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
      line-height: 24px;
      letter-spacing: 0.72px;
      -webkit-line-clamp: 1;
    }
  }

  .send {
    margin-left: 5px;
    display: flex;
    width: 56px;
    font-size: 12px;
    height: var(--Layout-md, 24px);
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #c7cdd4;
  }

  .title {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    line-height: 20px;
    font-size: 12px;
    font-family: 'PingFang SC';
    font-weight: 400;
    margin: 0px auto;
  }
}

.classSendLink {
  .classSend-img {
    width: 72px;
    height: 72px;
    margin-right: 12px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .classSendDiv {
    display: flex;
    padding-bottom: 8px;
  }

  width: 360px;
  padding: 12px 12px 0px 12px;
  border-radius: 8px 0 8px 8px;
  border: 1px solid #e9ecf1;
}

.sendlinkbox {
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: center;
  border-top: 1px solid #e9ecf1;

  .box-send,
  .box-close {
    color: #626d7a;
    font-family: 'Helvetica Neue';
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
  }

  img {
    width: 16px;
    height: 16px;
    margin-left: 8px;
  }

  display: flex;
  align-items: center;
  color: #626d7a;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: 'Helvetica Neue';
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.el-image {
  img {
    width: 100%;
    height: 100%;
  }
}

.img-wraper {
  video {
    width: 100%;
    height: 100%;
  }
}

.sendlinkbox {
  div {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .box-send {
    width: 100%;
    line-height: 40px;
  }

  .box-close {
    width: 100%;
    line-height: 40px;
    position: relative;

    &::before {
      content: ' ';
      width: 1px;
      background: #e9ecf1ff;
      height: 24px;
      position: absolute;
      left: 0px;
    }
  }
}

.click-to-upload {
  color: #073a3d;
  font-family: 'Inter';
  font-size: 14px;
  font-style: normal;
  margin-bottom: 4px;
  line-height: 20px;
}

.or-drag-and-drap {
  color: #475467;
  font-family: 'Inter';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}

.recently-input-box {
  padding: 12px;
}

.requirements-box {
  position: relative;
  z-index: 0;
}

.image-content,
.video-content {
  width: 300px;
}

input {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: transparent;
}

.requirements-box,
.requirements-box1 {
  .box {
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .upload-info {
      align-items: center;
      display: flex;
    }
  }

  display: flex;
  width: 100%;
  padding: 14px 12px;
  height: 68px;
  box-sizing: border-box;
  align-items: center;
  justify-content: space-between;

  .upload-name {
    color: #073a3dff;
    font-family: 'Inter';
    display: flex;
    font-size: 14px;
    margin-bottom: 4px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
  }

  .upload-info {
    display: inline-block;
    color: #798494ff;
    text-overflow: ellipsis;
    font-family: 'Inter';
    font-size: 14px;
    display: flex;
    align-items: center;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;

    span {
      margin-left: 6px;
    }
  }
}

.requirements-box {
  border: 1px solid #eaecf0;
  padding: 12px 58px 12px 14px;
}

.or-drag-and-drap {
  line-height: 20px;
}

.requirements-box1 {
  background: #f6f9fcff;
}

.uploadInfo {
  width: 40px;
  height: 40px;
}

:deep(.el-select) {
  height: 36px;
  background: #ffffffff;
}

:deep(.el-select__wrapper) {
  height: 36px !important;
}

:deep(.el-input__validateIcon) {
  display: none;
}

.product-count {
  color: #0c203dff;
  font-feature-settings: 'clig' off, 'liga' off;
  font-family: 'Helvetica Neue';
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0.72px;
}

.flieName {
  width: 80%;
}

.from-unit {
  color: #475263ff;
  font-family: 'Inter';
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 16px;
}

.product-info {
  align-self: stretch;
  color: #475263;
  font-family: 'Inter';
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e6e8ed;
}

.footerSubmit {
  width: 80px;
  height: 32px;
  font-size: 14px;
  background: $primary-color;
  display: flex;
  align-items: center;
  font-family: 'PingFang SC';
  justify-content: center;
  text-align: center;
  color: #fff;
  border-radius: 4px;
}

:deep(.el-form-item__label):before {
  display: none;
}

.is-required :deep(.el-form-item__label)::after {
  content: '*';
  color: var(--el-color-danger);
  margin-left: 4px;
}
</style>
