<script setup>
import { user } from '~/store/index';
import { getAvatarUrl } from '~/utils/helper';
import { ElMessage } from "element-plus";
import text from '~/assets/image/text.png'
import notext from '~/assets/image/no_text.png'
console.log("2022/10/19 16:02");
const props = defineProps({
  id: String
})
const chatBox = ref()
const ws = new WebSocket("wss://socket.txhlwxx.com")
// let userList = ref(undefined)

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

      if (data.type === 'login') {
        // console.log(data.client_name, '1111');
        const [id, name, banned] = data.client_name.split('|');
        // console.log(noSayId);
        login_data = {
          id, name, banned
        }
      }
      if (data.type === 'say') {
        const [id, name, banned] = data.from_client_name.split('|')
        const contentMiYao = data.content.split(",")[1];
        const fileType = data.content.split("|")[1];
        const fileContent = data.content.split("|")[0];
        if (contentMiYao) {
          const contentMiYaoId = contentMiYao.split(":")[1];
          const contentMiDesc = contentMiYao.split(":")[0];
          if (contentMiYao && contentMiYaoId && contentMiDesc === "禁言某个人id") {
            if (!noSayId.includes(contentMiYaoId)) {
              noSayId.push(contentMiYaoId);
            }
            const content = data.content.split(",")[0];
            data.content = content
          }
          if (contentMiYao && contentMiYaoId && contentMiDesc === "解禁某个人id") {
            noSayId.splice(noSayId.indexOf(contentMiYaoId), 1);
            const content = data.content.split(",")[0];
            data.content = content
          }
        }
        if (fileType) {
          return
        }
        msgList.value.push({
          id,
          name,
          time: data.time,
          content: data.content,
          bannedN: false,
        })
        msgList.value.forEach((el, index, array) => {
          el.bannedN = false;
          if (noSayId.includes(el.id)) {
            el.bannedN = true;
          }
        })
        nextTick(() => {
          chatBox.value.scrollTo({
            top: (chatItemBox.value.getBoundingClientRect()).height,
            left: 0,
            behavior: "smooth"
          })
        })

      }

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

})

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

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

const msg = ref('')

const chatItemBox = ref()
function handleSendClick() {
  if (noSayId.includes(user.value.user_id)) {
    msg.value = ''
    return ElMessage.warning('您已被禁言')
  }
  ws.send(JSON.stringify({
    type: "say",
    to_client_id: 'all',
    to_client_name: '所有人',
    content: msg.value,
  }))
  msg.value = ''

}

let noSayId = [];


function banText(item) {
  isBanned = true;
  const miyao = "禁言某个人id:" + item.id;
  ws.send(JSON.stringify({
    type: "say",
    to_client_id: 'all',
    to_client_name: '所有人',
    content: item.name + "已被禁言," + miyao
  }))

}

function JCText(item) {
  isBanned = false;
  const miyao = "解禁某个人id:" + item.id;
  ws.send(JSON.stringify({
    type: "say",
    to_client_id: 'all',
    to_client_name: '所有人',
    content: item.name + "解除禁言," + miyao
  }))

}

</script>

<template>
  <div class="w-300px h-250px flex flex-col shadow chat text-white">
    <div class="h-80 overflow-hidden overflow-y-auto flex-auto chat_scroll" ref="chatBox">
      <ul ref="chatItemBox">
        <li v-show="item.content" v-for="item in msgList" class="mb-5px px-10px py-5px chat_li rounded-10px relative"
          :key="item.id">
          <!-- <div class="mr-3">
            <el-avatar :src="getAvatarUrl(item.id)"></el-avatar>
          </div> -->
          <div class="flex flex-col flex-auto">
            <div class="flex justify-between items-center">
              <span class="text-14px mb-5px font-bold">{{ item.name }}</span>
              <div v-if="user.user_role_id === '75'" class="">
                <img v-if="!item.bannedN" @click="banText(item)" :src="text" alt="">
                <img v-else :src="notext" @click="JCText(item)" alt="">
              </div>
            </div>
            <div class="mb-3 rounded-md min-h-20px box-content">
              <p class="word_wrap text-16px" v-html="item.content"></p>
            </div>
            <!-- <span class="text-xs text-hex-8083A3">{{item.time}}</span> -->
          </div>
        </li>
      </ul>
    </div>
    <div v-if="user.user_role_id === '76'" class="flex flex-none p-3">
      <el-input class="input" v-model="msg"></el-input>
      <el-button rounded type="primary" @click="handleSendClick" class="ml-4 button">发送</el-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$color: #1259A1;
.chat_li {
  background-color: rgba($color: #000000, $alpha: .4);
}

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

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

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

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

  span {
    font-size: 14px;
  }
}
.chat_scroll::-webkit-scrollbar
{
    width: 2px;
}
.chat_scroll::-webkit-scrollbar-thumb
{
    border-radius: 10px;  background: $color;  box-shadow: inset 0 0 5px rgba(0, 122, 204);
}
.chat_scroll::-webkit-scrollbar-track
{
    border-radius: 10px;  background: #ededed;
    box-shadow: inset 0 0 5px rgba( 0, 0, 0, .1);
}
.chat_scroll{
  scrollbar-width: 2px;
  scrollbar-color: $color #fff;
}
</style>