<template>
  <div>
    <el-drawer
      title="消息信息"
      :visible.sync="drawerVisible"
      :size="900"
      :wrapper-closable="true"
    >
      <div class="drawer-container">
          <el-descriptions :column="3" class="info-section">
            <el-descriptions-item label="消息类型" :span="3">
              <dict-tag :options="dict.type.message_type" :value="chat.type"/>
            </el-descriptions-item>
            <el-descriptions-item label="消息发送者" :span="1">
              <user-link :id="chat.sendId" :text="chat.senderName"/>
            </el-descriptions-item>
            <el-descriptions-item label="发送时间" :span="2">
              {{ chat.createTime | defaultValue }}
            </el-descriptions-item>
            <el-descriptions-item label="消息内容" :span="3">
              <div v-if="chat.type === MessageType.PICTURE">
                <image-preview
                  :src="chat.content"
                  :width="32"
                  :height="32"
                >
                </image-preview>
              </div>
              <div v-else-if="chat.type === MessageType.VIDEO">
                <video :src="chat.content" style="width: 50px; height: 50px; background-color: #000; cursor: pointer;" @click="handleVideo(chat)"/>
              </div>
              <div v-else>{{ chat.content }}</div>
            </el-descriptions-item>
          </el-descriptions>

        <!-- 聊天记录区块 -->
          <el-tabs>
            <el-tab-pane label="聊天记录列表" :lazy="true">
              <chat-msg v-if="chat.id != null" :query="{chatId: chat.id}"/>
            </el-tab-pane>
          </el-tabs>
      </div>
    </el-drawer>

    <el-dialog title="聊天视频" :visible.sync="videoVisible" width="800px">
      <video :src="chat.content" style="width: 100%; height: fit-content; background-color: #000; max-height: 600px;" controls/>
    </el-dialog>

  </div>
</template>



<script>
// 保持原有导入不变...
import UserLink from "@/views/system/user/UserLink.vue";
import ChatMsg from "@/views/bst/chatMsg/index.vue";
import {getChat} from "@/api/bst/chat";
import {MessageType} from "@/utils/constants";




export default {
  name: 'ChatDrawer',
  computed: {
    MessageType() {
      return MessageType
    }
  },
  components: {ChatMsg, UserLink},
  dicts: ['message_type'],
  data() {
    return {
      videoVisible: false,
      drawerVisible: false, // 新增抽屉显示控制
      loading: false,
      chat: {},
      showMap: false,
      deviceDialogVisible: false,
      deviceList: [],
      selectedDevice: null,
      deviceLoading: false,
      bindLoading: false
    }
  },
  methods: {
    handleVideo(chat) {
      this.chat = chat;
      this.videoVisible = true;
    },
    loadData(chatId) {
      this.drawerVisible = true;
      this.getDetail(chatId);
    },
    getDetail(chatId) {
      this.loading = true;
      getChat(chatId).then(res => {
        this.chat = res.data;
        this.showMap = true;
      }).finally(() => {
        this.loading = false;
      })
    },
  }
}
</script>
<style scoped>
/* 主容器调整 */
.drawer-container {
  padding: 0 20px;
}

::v-deep(.el-drawer__header){
  padding:0 0;
  height: 0px;
  margin-bottom: 0;
}

::v-deep(.el-drawer__title){
  font-size: 20px;
}


</style>
