<template>
  <view>
    <u-navbar :border-bottom="false" back-text="" title="">
      <view slot="" class="navbar-center">
        <view class="info">
          <text class="name">{{ userInfo.name }}</text>
        </view>
      </view>
      <!-- <view class="navbar-right" slot="right">
        <u-button v-if='userInfo.carewState && userInfo.carewState != "admin"' @click='InsertOrDelFollow()'
          size="mini" class='btn' :plain="userInfo.carewState.indexOf('未关注') < 0" type="primary">{{
            userInfo.carewState }}</u-button>
      </view> -->
    </u-navbar>
    <view v-if="userInfo.carewState.indexOf('未关注') && showAttention" style="width: 100%;background-color: #fff;">
      <view class="attention-box">
        <view>关注方便以后常联系</view>
        <view class="attention-right">
          <view class="attention-btn" @click='InsertOrDelFollow()'>关注</view>
          <image src="/static/common/img/close.png" @click="() => showAttention = false"></image>
        </view>
      </view>
    </view>
    <!-- 认证用户 -->
    <view id="messagesList"></view>
    <view v-if="false" class="quick Tips">
      <view class="justify-center section_2">
        <text>关注他，方便以后常聊</text>
        <image class="image_2" src="/static/common/img/msgclose.png"/>
      </view>
    </view>
    <!-- 未认证yonghu -->
    <view :style="{ height: errShow ? '0.16rem' : '0' }" class="errTips">
      <view class="flex-row group_3">
        <image class="image_2" src="/static/common/img/16462770928974838161.png"/>
        <text class="text_5">该用户尚未进行认证，请注意信息的甄别，保护个人信息！</text>
      </view>
    </view>
    <view :class="[{ emoji: emoji }, { msg: CommonWords }, { text: inputShow }]" class="msgList" @mousedown="close">
      <scroll-view :scroll-top="scrollTop" :scroll-with-animation="true" class="scroll" scroll-y="true"
                   @refresherrefresh=''>
        <!-- <scroll-view scroll-y="true" class="scroll" @refresherrefresh='' :scroll-top="scrollTop"
        :scroll-with-animation="true" :refresher-enabled='true' refresher-background='#f6f7fa'
        refresher-default-style="black"> -->
        <template v-for="(v, i) in MsgList">
          <view style='display:none'>{{ v.sendDate ? v.sendDate = v.sendDate.replace(/-/g, "/") : '' }}</view>
          <!-- 提示消息（时间） -->
          <view v-if='new Date(v.sendDate) - new Date(MsgList[i > 1 ? i - 1 : 0].sendDate) > 30000'
                class="tis">
            <text
                v-if='new Date(v.sendDate) - 0 + (3600000 * 24) > new Date() && new Date(v.sendDate).getDate() == new Date().getDate()'
                class="text">{{ v.sendDate.slice(10, 16) }}
            </text>
            <text v-else class="text">{{ v.sendDate }}</text>
          </view>
          <!-- 系统提示对方基本信息 -->
          <view v-if='v.istips && v.type == 0' class="systis">
            <view>
              <view class="flex-col section_2">
                <view class="flex-row group_2">
                  <text>姓名：{{ v.Name }}</text>
                </view>
                <view class="flex-row group_2">
                  <text>年龄：{{ v.Age }}</text>
                </view>
                <view class="flex-row group_2">
                  <text>班级：{{ v.School }}</text>
                </view>
                <view class="flex-row group_2">
                  <text>现居地（区）：{{ v.Address }}</text>
                </view>
                <view class="flex-row group_2">
                  <text>手机号码:{{ v.Phone }}</text>
                </view>
              </view>
            </view>
          </view>
          <view v-if='v.istips && v.type == 1' class="tis">
            <text class="text">{{ v.title }}</text>
          </view>
          <template v-if='!v.mymsg && !v.hemsg && !v.istips'>
            <!-- 我方的消息 -->
            <view v-if='v.fromUserId == vuex_user.id' class="mymsg">
              <view class="justify-end group_5">
                <view class="flex-col items-center text-wrapper">
                  <text>{{ v.message }}</text>
                </view>
                <!-- <image :src="$u.http.config.imgUrl+vuex_user.head" class="image_3" /> -->
                <u-avatar :src="$u.http.config.imgUrl + vuex_user.head" class="image_1"></u-avatar>
              </view>
            </view>
            <!-- 对方消息 -->
            <view v-else class="hemsg">
              <view class="flex-row group">
                <u-avatar :src="$u.http.config.imgUrl + userInfo.head" class="image_3 image_11"
                          @click='toDeatil'></u-avatar>
                <view class="right-text-wrapper_1 flex-col items-center">
                  <text>{{ v.message }}</text>
                </view>
              </view>
            </view>
          </template>

          <!-- 我方交换信息 -->
          <template v-else>
            <view v-if='v.mymsg' class="mymsg">
              <view class="justify-end group_5">
                <view class="exchange">
                  <view class="top-group justify-center">
                    <view class="flex-col section_3">
                      <text class="text_11 text_12">请求交换信息</text>
                      <!-- <view class="bottom-group flex-row view_1">
                      <view @click='InfoExchange(v.type,false)' class="left-text-wrapper flex-col items-center">
                        <text>拒绝</text>
                      </view>
                      <view @click='InfoExchange(v.type,true)' class="right-text-wrapper flex-col items-center">
                        <text>同意</text>
                      </view>
                    </view> -->
                    </view>
                  </view>
                </view>
                <!-- <image :src="$u.http.config.imgUrl+vuex_user.head" class="image_3" /> -->
                <u-avatar :src="$u.http.config.imgUrl + vuex_user.head" class="image_3"></u-avatar>
              </view>
            </view>
            <!-- 对方交换信息 -->
            <view v-if='v.hemsg' class="hemsg">
              <view class="flex-row group">
                <!-- <image @click='toDeatil' :src="$u.http.config.imgUrl+userInfo.head" class="image_3 image_11" /> -->
                <u-avatar :src="$u.http.config.imgUrl + userInfo.head" class="image_1"
                          @click='toDeatil'></u-avatar>
                <view class="exchange">
                  <view class="top-group justify-center">
                    <view class="flex-col section_3">
                      <text class="text_11 text_12">请求交换信息</text>
                      <view class="bottom-group flex-row view_1" style='justify-content: center;'>
                        <view v-if='v.type == 0' class="left-text-wrapper flex-col items-center"
                              @click='InfoExchange(false, i)'>
                          <text>拒绝</text>
                        </view>
                        <view v-if='v.type == 0' class="right-text-wrapper flex-col items-center"
                              @click='InfoExchange(true, i)'>
                          <text>同意</text>
                        </view>
                        <view v-if='v.type == 1'
                              class="left-text-wrapper flex-col items-center">
                          <text>已同意</text>
                        </view>
                        <view v-if='v.type == 2'
                              class="left-text-wrapper flex-col items-center">
                          <text>已拒绝</text>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </template>
        </template>
      </scroll-view>
    </view>

    <view class="msgbox">
      <view v-if='chatType != 1' :style="[{ background: quick ? '#fff' : 'none' }]" class="quick">
        <view v-if="quick" class="justify-between section_7">
          <view class="flex-row" style='transform: translateX(-50%);'>
            <view class="flex-col  items-center text-wrapper_2" @click='exchangeInfo(1)'>
              <text class="text">交换信息</text>
            </view>
            <!-- 	<view @click='exchangeInfo(0)' class="flex-col items-end text-wrapper_3">
              <text class="text">交换联系方式</text>
            </view> -->
          </view>
          <image class="image_13" src="/static/common/img/msgclose.png" @click="quick = false"/>
        </view>
        <!-- <view style="display: flex; justify-content: flex-end" v-else>
          <image style="margin: 0.08rem; width: 0.2rem; height: 0.2rem" @click="quick = true"
            src="/static/common/img/msgopen.png" class="image_13" />
        </view> -->
      </view>
      <view class="flex-row section_1">
        <view class="input-box">
          <!-- <text class="text" @click="CommonWords = !CommonWords; emoji = false;">常用语</text> -->
          <u-input v-model="message" :auto-height="true" :type="'textarea'" class="input" @blur="inputBlur"
                   @click="shuru" @focus="inputFocus"/>
          <view class="icon" @click="emoji = !emoji; CommonWords = false; emojicurrent = 0;">
            <image class="image" src="/static/common/img/icon-happy-face.png"/>
          </view>
          <view v-if="message != ''" class="btn">
            <u-button class="sendOut" size="mini" @click="SendMessage">发送</u-button>
          </view>
          <view v-else class="icon" @click="expandBox = !expandBox">
            <image class="image" src="/static/common/img/add-circle.png"/>
          </view>
        </view>
      </view>
      <!-- 常用语 -->
      <view class="CommonWords">
        <scroll-view :class="CommonWords ? 'open' : ''" scroll-y="true"
                     style="transition: all 0.3s; height: 0rem">
          <text v-for="(v, i) in CommonlyMsg" :key="i" @click="choice(v)">{{ v }}</text>
        </scroll-view>
      </view>
      <!-- emoji 表情 -->
      <swiper :class="emoji ? 'emojishow' : ''" :current="emojicurrent" class="slider">
        <swiper-item v-for="(item, key) in emojiData" :key="key" :class="[key == emojiData.length - 1 ? 'lastbox' : '']"
                     class="slider-emoji">
          <text v-for="(emoji, index) in item" :key="index" class="slider-emoji-icon"
                @click="selemoji(emoji)">{{
              emoji
            }}
          </text>
        </swiper-item>
      </swiper>
      <!-- 点击加号 -->
      <view class="expandBox">
        <view :class="expandBox ? 'open' : ''" style="transition: all 0.3s; height: 0rem">
          <view class="expand-content">
            <view v-for="i in expandList" class="expand-item" @click="expandFn(i.type)">
              <image :src="i.img"></image>
              <text class="expand-text">{{ i.text }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-toast ref="uToast"/>
    <u-top-tips ref="uTips" :navbar-height="0"></u-top-tips>
  </view>
</template>

<script>
import emoji from "../../../static/common/js/emoji";

export default {
  data() {
    return {
      // 常用语
      CommonlyMsg: ['您好，很高兴认识你！', '您好，有空聊一聊吗？', '嗨，你好呀！', '好的，我知道了。', '我们下次再聊，拜拜。'],
      CommonWords: false, // 常用语 显示隐藏
      quick: false, // 交换信息 显示隐藏
      message: "", // 交换信息 显示隐藏
      emojiData: [],
      emoji: false,
      inputShow: false,
      scrollTop: 999999999999,
      emojicurrent: 0,
      userId: '',
      userInfo: '',
      MsgList: [],
      errShow: false,
      chatType: -1,
      id: '',
      type: 0,
      connectionId: '',
      state: false,
      role: 0,
      showAttention: true,
      expandBox: false, // 点击加号展开
      expandList: [
        /* {
        text: '拍照',
        img: '/static/common/img/changeCard.png',
        type:0
      }, {
        text: '相册',
        img: '/static/common/img/changePhone.png',
        type:1
      }, {
        text: '位置',
        img: '/static/common/img/changeAddress.png',
        type:2
      },  */
        {
          text: '交换名片',
          img: '/static/common/img/changeCard.png',
          type: 3
        }]
    };
  },
  onLoad(e) {

    // 管理员对用户
    if (e.id == 'admin') {
      this.type = 2;
      this.chatType = 1;
      this.userId = e.fromid;
      this.role = 1,
          this.getList()

      this.emojiInit();
      this.LinkChar();
      this.goBottom()
      this.toBind()
      return
    }

    // 判断聊天类型
    if (e.chatType == undefined) {
      uni.switchTab({
        url: "../../message/msgList/msgList",
      });
      return;
    }
    this.type = e.type
    this.id = e.id
    this.chatType = e.chatType

    // 用户对管理员
    if (e.chatType == 1) {
      this.userInfo = {
        name: '管理员',
        head: e.head,
        carewState: 'admin'
      }
      this.getList()
    }
    // 用户和用户
    if (e.chatType == 0) {
      if (!e.id) {
        uni.switchTab({
          url: "../../main/index/index",
        });
        return;
      }
      this.userId = e.id;
      this.getList()
      this.getDetail();
    }

    if (this.errShow) {
      setTimeout(() => {
        this.errShow = false
      }, 3000)
    }
    this.goBottom()
    this.emojiInit();
    this.LinkChar();
  },
  onShow() {

    if (this.vuex_msgList) {
      var msgList = this.vuex_msgList;
      if (this.chatType == 1) {
        if (this.type = 2) {
          msgList = msgList.replace((this.userId + 'user,'), '')
        } else {
          msgList = msgList.replace('admin,', '')
        }
      } else {
        msgList = msgList.replace((this.userId + ','), '')
      }
      this.$u.vuex('vuex_msgList', msgList)
      if (!msgList || msgList.indexOf(',') < 0) {
        this.$u.vuex('vuex_msgList', '')
        var tab = this.vuex_tabbar;
        tab[1].isDot = false;
        this.$u.vuex('vuex_tabbar', tab);
      }
    }
    this.goBottom()
    this.getDetail();
  },
  onHide() {
    if (this.chatType == 1) {
      this.colseBind()
    }
  },
  onUnload() {
    if (this.chatType == 1) {
      this.colseBind()
    }
  },
  methods: {
    expandFn(type) {
      switch (type) {
        case 3:
          this.exchangeInfo()
          break;
      }
    },
    //管理员聊天绑定
    toBind() {
      let data = {
        manageUser: this.vuex_user.id,
        lockUser: this.userId
      }
      this.$u.api.toBind(data).then(res => {
      })
    },
    //管理员聊天取消绑定
    colseBind() {
      let data = {
        lockUser: this.userId
      }
      this.$u.api.colseBind(data).then(res => {
      })
    },
    // 回应交换信息
    InfoExchange(bool, index) {
      this.$connection
          .invoke("whetherAgreeExchange", this.vuex_user.id, this.userId, bool)
          .then((res) => {
            this.MsgList[index].type = bool ? 1 : 2;
            this.goBottom()
          })
    },
    //请求交换信息
    exchangeInfo() {
      this.$connection
          .invoke("exchangeInfo", this.vuex_user.id, this.userId)
          .then((res) => {
            this.MsgList.push({
              fromUserId: this.vuex_user.id,
              mymsg: true,
              type: 0,
              sendDate: this.getIsTime()
            })
            this.goBottom()
            this.quick = false
          })
    },
    // 获取当前时间
    getIsTime() {
      const year = new Date().getFullYear();
      const Month = new Date().getMonth() + 1;
      const day = new Date().getDate();
      const Hours = new Date().getHours();
      const Minut = new Date().getMinutes();
      const second = new Date().getSeconds();

      //小于10的拼接上0字符串
      function addZero(s) {
        return s < 10 ? ('0' + s) : s;
      }

      return year + '-' + addZero(Month) + '-' + addZero(day) + ' ' + addZero(Hours) + ':' + addZero(Minut) +
          ':' + addZero(second)
    },

    // 获取聊天记录
    getList(id) {
      const data = {
        getUserId: this.vuex_user.id,
        userId: this.userId,
        chatType: this.chatType
      }
      if (id) {
        data.getUserId = id;
      }
      this.$u.api.getChatRecord(data).then(res => {
        this.MsgList = res
      })
    },
    // 查看用户主页
    toDeatil() {
      if (this.chatType == 0) {
        this.$u.route({
          url: '/pages/AlumniCircle/userDetail/userDetail?id=' + this.userId + '&type=1'
        })
      }
    },
    // 关注
    InsertOrDelFollow() {
      const data = {
        userId: this.vuex_user.id,
        carewId: this.userId,
      }
      this.$u.apiList.InsertOrDelFollow(data).then(res => {
        console.log(res, '关注成功');
        if (res.succeed) {
          // this.$tips('关注成功!', 'success')
          this.$refs.uToast.show({
            title: '关注成功',
            type: 'success',
          })
          this.showAttention = false
        }
        // this.getDetail()
      })
    },
    //获取用户信息
    getDetail() {
      this.$u.api.getUserInfo({
        userId: this.userId
      }).then((res) => {
        this.userInfo = {
          name: res.baseData.userName,
          head: res.baseData.head,
          carewState: res.carewState
        }
        if (res.carewState.includes('未关注')) {
          this.showAttention = true
        } else {
          this.showAttention = false
        }
      });
    },
    //链接聊天
    LinkChar() {
      // 聊天限制提示3条后不能发送消息
      this.$connection.on("FailInSend", (user, msg) => {
        if (type == false) {
          this.MsgList.push({
            title: msg,
            sendDate: this.getIsTime(),
            istips: true,
            type: 1,
          })
          this.goBottom()
        }
      })

      //交换信息对方选择
      this.$connection.on("whetherAgreeExchange", (user, type) => {
        if (type == false) {
          this.MsgList.push({
            title: '对方已拒绝您的交换请求',
            sendDate: this.getIsTime(),
            istips: true,
            type: 1,
          })
          this.goBottom()
        }
      })

      //交换信息
      this.$connection.on("ExchangeInfo", (user, type) => {
        this.MsgList.push({
          fromUserId: user,
          hemsg: true,
          type: 0,
          sendDate: this.getIsTime()
        })
        this.goBottom()
      })
      // 显示
      this.$connection.on("ShowUserInfo", (user, message) => {
        // console.log(user, message);
        const data = JSON.parse(message)
        this.MsgList.push({
          Name: data.Name,
          sendDate: this.getIsTime(),
          istips: true,
          type: 0,
          Phone: data.Phone,
          Age: data.Age,
          Address: data.Address,
          School: data.School
        })
        this.goBottom()
      });
      //接收数据
      this.$connection.on("ReceiveMessage", (user, message, type) => {
        // console.log(user, message, type, this.chatType)
        if (this.route.indexOf('dialogBox') >= 0) {
          if (type <= 2 && this.chatType == 0 || type >= 3 && this.chatType == 1) {
            if (user == this.userId || (this.userId == '' && type == 4)) {
              this.MsgList.push({
                fromUserId: user,
                message: message,
                sendDate: this.getIsTime(),
                toUserId: this.vuex_user.id,
              })
              this.goBottom()
            } else {
              this.AddTisp(user, type)
            }
          } else {
            this.AddTisp(user, type)
          }
        }
      });
    },
    // 添加提示
    AddTisp(user, type) {
      var tab = this.vuex_tabbar;
      tab[1].isDot = true;
      this.$u.vuex('vuex_tabbar', tab);
      var msgList = this.vuex_tabbar
      var msgList = this.vuex_msgList
      // 管理员对普通用户
      if (type == 4) {
        user = 'admin'
      }
      if (type == 3) {
        user += 'user'
      }
      if (msgList.indexOf(user) < 0) {
        msgList += (user + ',');
      }
      this.$u.vuex('vuex_msgList', msgList)
    },
    charLink() {
      var that = this;
      (function start(ms, that) {
        setTimeout(() => {
          try {
            that.$connection
                .start()
                .then(() => {
                  that.connectionId = that.$connection.connection.transport.url.split(
                      "=")[1]
                  that.CharLogin()
                  if (that.state) {
                    this.SendMessage()
                    that.state = false
                  }
                })
                .catch((e) => {
                  //重试
                  // console.log("websocket连接失败", e);
                  return start(500, that);
                });
          } catch (e) {
            //重试
            // console.log("websocket连接失败", e);
            return start(500, that);
          }
        }, ms);
      })(0, that)
    },
    CharLogin() {
      //绑定用户账号和connectionId
      if (this.vuex_user.id) {
        this.$connection
            .invoke("login", this.connectionId, this.vuex_user.id)
            .then((res) => {
              // console.log("登录成功", res);
            })
            .catch((err) => {
              // console.log("登录失败", err);;
            });
      } else {
        setTimeout(() => {
          this.CharLogin()
        }, 1000)
      }
    },
    // 发送消息
    async SendMessage() {
      // 判断当前学校是否认证，未认证不可聊天

      const req = {
        userId: this.vuex_user.id,
      }
      const res = await this.$u.apiList.MyPage(req)
      console.log(JSON.parse(JSON.stringify(res)), 'res')
      const edcationList = res.edcationList
      if (!edcationList.length) {
        return this.$refs.uToast.show({
          title: '认证后可进行聊天操作',
          type: 'warning',
        })

      }
      const findRow = edcationList.find(x => x.isSelected === true);
      if ([0, 2].includes(findRow.certifyStatus)) {
        return this.$refs.uToast.show({
          title: '认证后可进行聊天操作',
          type: 'warning',
        })

      }
      this.$connection
          .invoke("sendMessage", this.vuex_user.id, this.userId, this.message, parseInt(this.chatType), this
              .role)
          .then((res) => {
            this.MsgList.push({
              fromUserId: this.vuex_user.id,
              message: this.message,
              sendDate: this.getIsTime(),
              toUserId: this.userId,
            })
            this.state = true
            this.close()
            this.goBottom()
            this.message = ''
          }).catch((err) => {
        this.charLink()
      });
    },
    // 退出连接
    closeChar() {
      this.$connection.invoke("signOut", this.vuex_user.id).then((res) => {
        ;
      });
      // this.$connection.onclose(function (data) { //去掉斜杠
      //   console.log("websocket连接断开");
      //   //重试
      //   this.LinkChar()
      // })
    },
    // 表情
    emojiInit() {
      var number = 60;
      var page = Math.ceil(emoji.length / number);
      for (let i = 0; i < page; i++) {
        this.emojiData[i] = [];
        for (let k = 0; k < number; k++) {
          emoji[i * number + k] ?
              this.emojiData[i].push(emoji[i * number + k]) : "";
        }
      }
    },
    inputFocus() {
      this.CommonWords = false;
      this.emoji = false;
      this.goBottom();
    },
    inputBlur() {
      ;
    },
    shuru() {
      this.goBottom()
    },
    choice(txt) {
      this.message = txt;
    },
    close() {
      this.CommonWords = false;
      this.emoji = false;
    },
    sendOut() {
      this.close();
    },
    selemoji(m) {
      this.message += m;
    },
    goBottom() {
      setTimeout(() => {
        this.scrollTop += 1;
      }, 200);
    },
    //返回上一级
    router() {
      if (this.type == 2) {
        this.$u.route({
          url: '/pages/message/adminList/adminList'
        });
        return
      }
      if (this.type == 0) {
        uni.switchTab({
          url: '../../message/msgList/msgList'
        })
      } else {
        this.$u.route({
          url: 'pages/AlumniCircle/userDetail/userDetail?id=' + this.id + '&type=3'
        });
      }

    },
  },
};
</script>

<style lang="scss" scoped>
.msgList.emoji,
.msgList.msg {
  position: relative;
  bottom: 3rem;
}

.errTips {
  position: absolute;
  z-index: 9999;
  width: 100%;
  background: #fff;
  height: 0.16rem;
  overflow: hidden;
  transition: all 1s;

  .group_3 {
    color: rgb(255, 117, 134);
    font-size: 0.11rem;
    line-height: 0.12rem;
    letter-spacing: 0.011rem;
    white-space: nowrap;
    justify-content: center;
  }

  .image_2 {
    width: 0.16rem;
    height: 0.14rem;
  }

  .text_5 {
    margin-left: 0.085rem;
    line-height: 1.4;
  }
}

.emojishow {
  height: 3rem !important;
}

.slider {
  background: #fff;
  width: 7.75rem;
  height: 0rem;
  transition: all 0.3s;

  .slider-emoji {
    overflow-y: scroll;
    width: 100vw !important;
  }

  &-emoji {
    width: 6.75rem;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;

    &-icon {
      font-size: 0.265rem;
      display: inline-block;
      width: 10%;
      text-align: center;
      padding: 0.05rem 0;
      border-radius: 0.1rem;
      //   border-bottom: 1px solid #ccc;
    }

    &-icon:active {
      background: #ccc;
    }
  }
}

.lastbox {
  justify-content: flex-start;
}

.msgList {
  .scroll {
    height: calc(100vh - 1rem);
    background: #fff;
    padding: 0 0.17rem;
    box-sizing: border-box;

    ::v-deep .uni-scroll-view-content {
      height: auto;
      padding-bottom: 0.2rem;
    }
  }

  > view {
    margin-top: 0;
  }

  .systis {
    width: 80%;
    background-color: #f1f1f5;
    margin: 0.15rem auto;
    margin-top: 0.2rem;
    border-radius: 0.1rem;

    .section_2 {
      margin-right: 0.02rem;
      margin-top: 0.15rem;
      padding: 0.13rem 0.075rem 0.13rem 0.18rem;
      border-radius: 0.087rem 0.087rem 0.087rem 0.087rem;
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .group_2 {
      color: rgb(160, 162, 172);
      font-size: 0.12rem;
      line-height: 0.2rem;
      letter-spacing: 0.012rem;

      text {
        width: 100%;
      }
    }

    .text_6 {
      margin-top: 0.08rem;
      color: rgb(160, 162, 172);
      font-size: 0.12rem;
      line-height: 0.16rem;
      letter-spacing: 0.012rem;
      white-space: nowrap;
    }

    .group_3 {
      margin-top: 0.095rem;
      color: rgb(160, 162, 172);
      font-size: 0.12rem;
      line-height: 0.12rem;
      letter-spacing: 0.012rem;
      white-space: nowrap;
    }

    .group_4 {
      margin-top: 0.095rem;
      padding-left: 0.005rem;
    }

    .text_5 {
      margin-top: 0.07rem;
    }

    .text_8 {
      margin-left: 0.04rem;
    }

    .text_9 {
      align-self: center;
      color: rgb(160, 162, 172);
      font-size: 0.12rem;
      line-height: 0.12rem;
      letter-spacing: 0.012rem;
      white-space: nowrap;
    }

    .text_10 {
      color: rgb(46, 155, 255);
      font-size: 0.12rem;
      line-height: 0.16rem;
      white-space: nowrap;
    }
  }

  .exchange {
    .top-group {
      margin-left: 0.15rem;
      margin-top: 0.085rem;
      margin-right: 0.15rem;
    }

    .left-text-wrapper {
      padding: 0.065rem 0 0.055rem;
      background-color: rgb(255, 255, 255);
      border-radius: 0.03rem;
      width: 0.65rem;
      height: 0.25rem;
      border: solid 0.01rem rgb(255, 255, 255);
    }

    .right-text-wrapper {
      margin-left: 0.24rem;
      padding: 0.06rem 0;
      background-color: rgb(255, 255, 255);
      border-radius: 0.03rem;
      width: 0.65rem;
      height: 0.25rem;
      border: solid 0.01rem rgb(255, 255, 255);
    }

    .text_11 {
      color: rgb(255, 255, 255);
      font-size: 0.15rem;
      line-height: 0.14rem;
      letter-spacing: 0.015rem;
      white-space: nowrap;
      text-align: center;
    }

    .bottom-group {
      color: rgb(115, 129, 255);
      font-size: 0.12rem;
      line-height: 0.12rem;
      letter-spacing: 0.012rem;
      white-space: nowrap;
    }

    .right {
      margin-left: 0.14rem;
    }

    .section_3 {
      margin-top: 0.06rem;
      padding: 0.15rem 0.33rem;
      border-radius: 0.075rem 0.075rem 0.075rem 0.075rem;
      background-image: url("~@/static/common/img/exchangeBjImg.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
    }

    .text_12 {
    }

    .view_1 {
      margin-top: 0.21rem;
    }
  }

  .hemsg {
    margin-top: 0.15rem;

    .image_3 {
      width: 0.4rem !important;
      height: 0.4rem !important;
      border-radius: 50%;
      overflow: hidden;
      flex: 0 0 0.4rem !important;
    }

    .right-text-wrapper_1 {
      margin-left: 0.15rem;
      margin-top: 0.085rem;
      padding: 0.1rem;
      background-color: #f6f8fa;
      border-radius: 0.1rem;
      // border-top-left-radius: 0;
      max-width: 65%;
      word-break: break-all;
    }

    .group {
      color: rgb(0, 0, 0);
      font-size: 0.15rem;
      line-height: 0.16rem;
      letter-spacing: 0.015rem;
      //   white-space: nowrap;
    }

    .image_11 {
      margin-bottom: 0.035rem;
    }
  }

  .tis {
    margin-top: 0.15rem;

    .text {
      display: block;
      text-align: center;
      color: rgb(180, 182, 189);
      font-size: 0.11rem;
      line-height: 0.12rem;
      letter-spacing: 0.011rem;
      white-space: nowrap;
    }
  }

  .mymsg {
    margin-top: 0.1rem;

    .image_3 {
      width: 0.4rem;
      height: 0.4rem;
      border-radius: 50%;
    }

    .text-wrapper {
      margin-right: 0.14rem;
      margin-top: 0.085rem;
      padding: 0.1rem 0.1rem 0.09rem;
      border-radius: 0.1rem;
      // border-top-right-radius: 0;
      background: #3CB5FB;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      max-width: 65%;
      word-break: break-all;

    }

    .group_5 {
      margin-top: 0.025rem;
      color: rgb(255, 255, 255);
      font-size: 0.15rem;
      line-height: 0.16rem;
      letter-spacing: 0.015rem;
      white-space: wrap;
    }
  }
}

.Tips {
  position: absolute;
  z-index: 9;
  top: 0.44rem;
  left: 0;
  right: 0;
  background: #fff;
}

.navbar-center {
  text-align: center;
  width: 100%;

  text {
    display: block;
  }

  .info {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .name {
    line-height: 0.15rem;
    font-weight: 800;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
  }

  .shool {
    font-size: 0.11rem;
    color: #cacaca;
  }
}

.navbar-right {
  .btn {
    // height: 0.3rem;
    background-color: #2e9bff;
    border-radius: 0.05rem;
    font-size: 0.15rem;
    line-height: 0.15rem;
    color: #ffffff;
    margin-right: 0.22rem;
  }
}

.quick {
  .section_2 {
    padding: 0.08rem 0.095rem 0.06rem;
    color: rgb(46, 155, 255);
    font-size: 0.11rem;
    line-height: 0.12rem;
    letter-spacing: 0.011rem;
    white-space: nowrap;
    position: relative;
  }

  .image_2 {
    position: absolute;
    right: 0.095rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.18rem;
    height: 0.18rem;
  }

  .info {
    font-size: 0.11rem;
    line-height: 0.18rem;
    letter-spacing: 0.01rem;
    color: #2e9bff;
  }

  .text {
    text-transform: uppercase;
    color: #fff !important;
    line-height: 0.25rem !important;
  }

  .section_7 {
    padding: 0.055rem 0.095rem 0.045rem 50%;
    color: rgb(255, 255, 255);
    font-size: 0.12rem;
    line-height: 0.12rem;
    white-space: nowrap;
    background-color: rgba(46, 155, 255, 0.1);
  }

  .image_13 {
    margin: 0.04rem 0 0.025rem;
    width: 0.18rem;
    height: 0.18rem;
  }

  .text-wrapper_2 {
    background-color: rgb(115, 129, 255);
    border-radius: 0.05rem;
    width: 0.97rem;
    height: 0.25rem;
    color: #fff;
  }

  .text-wrapper_3 {
    margin-left: 0.14rem;
    background-color: rgb(115, 129, 255);
    border-radius: 0.05rem;
    height: 0.25rem;
  }
}

.msgbox {
  position: fixed;
  bottom: 0;
  width: 100%;

  .section_1 {
    // height: 0.52rem;
    background-color: #fff;
    border: solid 0.01rem #eeeeee;
    padding: 0.11rem 0.1rem 0.11rem 0.1rem;

    .input-box {
      display: flex;
      width: 100%;
      background: #f6f8f9;
      padding: 6rpx;
      border-radius: 20rpx;
      align-items: center;
    }
  }

  .text {
    font-size: 0.14rem;
    line-height: 0.15rem;
    color: #505051;
    margin: 0 0.1rem;
    line-height: 0.36rem;
  }

  .input {
    width: 80%;
    min-height: 0.36rem !important;
    line-height: 0.36rem;
    // background-color: #f7f7f7;
    border-radius: 0.1rem;
    font-size: 0.14rem;
    padding-right: 0.1rem !important;

    ::v-deep .u-input__input {
      padding: 0.05rem;
      min-height: 0.16rem !important;
      transform: translateY(0.03rem);
    }
  }

  .icon {
    margin-left: 0.05rem;
    // padding: 0.03rem 0;
    margin-top: 10rpx;
  }

  .btn {
    padding: 0.03rem 0;

    .sendOut {
      height: 60rpx;
      line-height: 60rpx;
      width: 90rpx;
      margin-left: 0.05rem;
      background: linear-gradient(178deg, #3CB5FB 0%, #06E1FA 100%);;
      color: #ffffff;

    }
  }

  .image {
    width: 0.26rem;
    height: 0.26rem;
  }

  .CommonWords {
    width: 100%;
    background-color: #f6f7fa;

    text {
      transition: all 0.3s;
      display: block;
      padding: 0.1rem 0 0.1rem 0.2rem;
      font-size: 0.14rem;
      line-height: 0.2rem;
      height: 0.4rem;
      overflow: hidden;
      color: #505051;
    }

    text:active {
      background: #ccc;
    }
  }

  .open {
    height: 3rem !important;
    transition: all 0.3s;
  }

  .expandBox {
    width: 100%;
    background-color: #fff;

    .expand-content {
      width: 100%;
      padding: 20rpx 30rpx;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .expand-item {
        width: 140rpx;
        text-align: center;
        color: #999999;
      }

      image {
        width: 140rpx;
        height: 140rpx;
        margin-bottom: 10rpx;
      }
    }

  }

  .open {
    width: 100%;
    height: 1.5rem !important;
    transition: all 0.3s;
  }
}

.attention-box {
  width: 686rpx;
  height: 100rpx;
  background: #F6F8F9;
  box-shadow: 0rpx 2rpx 10rpx -2rpx rgba(0, 0, 0, 0.06), 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.04), 0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.02);
  border-radius: 24rpx;
  margin: 0 auto;
  padding: 0 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.attention-right {
  display: flex;
  align-items: center;

  image {
    width: 44rpx;
    height: 44rpx;
  }
}

.attention-btn {
  width: 120rpx;
  height: 48rpx;
  text-align: center;
  line-height: 48rpx;
  background: linear-gradient(178deg, #3CB5FB 0%, #06E1FA 100%);
  border-radius: 64rpx;
  font-size: 24rpx;
  color: #fff;
  margin-right: 20rpx;
}
</style>
