<template>
  <div>
    <div class="bigBox">
      <!-- 左侧内容 -->
      <section class="big-left">
        <section class="gig-serch">
          <el-input placeholder="请输入关键字" v-model="listQuery.content" clearable></el-input>
          <el-button @click="searchData" class="ml6">
            <el-icon>
              <Search />
            </el-icon>查询</el-button>
          <el-button type="primary" @click="addUserHander">
            <!--  v-if='filterqx("isaqbm") == "1"' -->
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>新增</span>
          </el-button>
        </section>
        <section class="big-ul" v-loading="loading">
          <ul v-if="typeList.length > 0">
            <li v-for="(item, ind) in typeList" :key="ind" @click="changeItem(item, ind)"
              :style="{ background: index == ind ? 'linear-gradient(91deg, var(--el-color-primary) 0%, var(--el-table-cell-bmx-backgroundcolor) 100%)' : '#fff' }">
              <div :style="{ background: getColor(item.type) }" class="head_box"><span
                  v-html="getDict(item.type)"></span></div>
              <div class="git-li-right">
                <div class="title1" :style="{ color: index == ind ? '#fff' : '' }">{{ item.title }}</div>
                <div class="detail" :style="{ color: index == ind ? '#fff' : '' }">{{ item.content }}</div>
                <div class="time" :style="{ color: index == ind ? '#fff' : '' }">{{ item.time }}</div>
              </div>
              <div class="circle" v-if="item.count > 0">{{ item.count > 99 ? '99+' : item.count }}</div>
              <div class="delClass">
                <!-- v-if='filterqx("isaqbm") == "1" && item.orgcode == dept.ssdwid' -->
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                  @confirm="handleDelete(item.id)">
                  <template #reference>
                    <span @click.stop class="operdel"
                      style="text-decoration: underline;font-size: 13px;font-weight: 800;">删除</span>
                  </template>
                </el-popconfirm>
              </div>
            </li>
          </ul>
          <div v-else class="big-kong">
            暂无数据
          </div>
        </section>
        <section class="fenye">
          <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
            layout="total, prev,  next, jumper" :total="total"></el-pagination>
        </section>
      </section>
      <!-- 中间内容 -->
      <section class="big-center" ref="bigCenter">
        <div class="task_detail" id="task_detail1" ref="main">
          <div class="title2 mb10">{{ item.title }}</div>
          <div v-if="item.content && item.content.length > 200" class="msg-box">
            <span style="color:#999">{{ open ? item.content : item.content.substring(0, 200) + '...' }}</span>
            <span class="ckxq" v-if="!open" @click="handleOpen(true)">查看详情</span>
            <span class="ckxq" v-if="open" @click="handleOpen(false)">收起</span>
          </div>
          <div v-else>
            <span style="color:#999">{{ item.content }}</span>
          </div>
          <div class="mt10">
            <span v-if="imgList && imgList.length > 0">
              <span v-for="(it, i) in imgList" :key="i">
                <img :src="it.url" @click="handlePictureCardPreview(it)" :key="it.id">
              </span>
            </span>
          </div>
          <div class="mt10">
            <el-button v-if="item.title" @click="openSend(item.id)" size="mini">回复</el-button>
            <span v-if="fileList && fileList.length > 0">

              <span class="black" v-for="(it, i) in fileList" :key="it.id">
                附件{{ i + 1 }}：
                <span class="ckxq textlin" @click="clickFileList(it)">{{ it.originalName
                  }}</span>
                <span class="ckxq" @click="doPreview(it)">【预览】</span>
              </span>
            </span>
          </div>
        </div>
        <div class="message_box" :style="{ height: messageHeight, overflow: 'auto' }">
          <div class="message">
            <ul v-if="messageList && messageList.length > 0">
              <li v-for="(item, index) in messageList" :key="index">
                <div>
                  <div class="userUnit">{{ item.orgname }}（{{ item.deptname }}）</div>
                  <div class="username">
                    <span class="black">回复人：<span class="blue">{{ item.username }}</span></span>
                    <span class="black">回复时间：{{ item.addtime }}</span>
                  </div>
                </div>
                <div style="color: gray;line-height: 20px;">{{ item.content }}</div>
                <div style="margin-top: 10px;" v-if="item.imgArray && item.imgArray.length > 0">
                  <img :src="it.url" v-for="it in item.imgArray" @click="handlePictureCardPreview(it)" :key="it.id">
                </div>
                <div class="mt10" v-if="item.fileArray && item.fileArray.length > 0">
                  <span v-for="(it, i) in item.fileArray" :key="i" class="mr10">
                    <span style="color: gray;">附件{{ i + 1 }}:</span>
                    <span class="ckxq textlin" @click="clickFileList(it)" target="_blank">{{ it.originalName
                      }}&ensp;</span>
                    <span class="ckxq " @click="doPreview(it)">【预览】</span>
                  </span>
                </div>
              </li>
            </ul>
            <div v-else
              style="width: 100%;height: 100%;color: gray;display: flex;align-items: center;justify-content: center;font-size: 16px;">
              暂无回复，发布一条试试吧！
            </div>
          </div>
        </div>
      </section>
      <!-- 右边内容 -->
      <section class="big-right">
        <el-tabs v-model="activeName" type="card" class="demo-tabs">
          <el-tab-pane label="附件" name="01">
            <ul class="file_list" v-if="fjList && fjList.length > 0">
              <li v-for="(item, i) in fjList" :key="item.id" class="flie_item">
                <a>
                  <span class="black">
                    {{ i + 1 }}、【{{ item.originalName }}】
                  </span>
                  <span class="right-seefil blue" v-if="item.isImg" @click="handlePictureCardPreview(item)">查看大图</span>
                  <span class="right-seefil gree" @click="clickFileList(item)" v-if="!item.isImg">下载</span>
                  <span class="right-seefil gree" @click="doPreview(item)" v-if="!item.isImg">预览</span>
                </a>
              </li>
            </ul>
          </el-tab-pane>
          <el-tab-pane label="参与人员" name="02">
            <ul class="user_list" v-if="ryList && ryList.length > 0">
              <li v-for="item in ryList" :key="item" class="user_item">
                <div class="head" :style="{ background: item.color }">
                  {{ item.username.substring(item.username.length - 1) }}
                </div>
                <span class="black">{{ item.username }}</span>
              </li>
            </ul>
          </el-tab-pane>
        </el-tabs>
      </section>
    </div>
    <!-- 预览 -->
    <el-dialog v-model="flyldialog" :show-close="false" top="10px" bottom="10px">
      <div style="height: 84vh; text-align: center">
        <Kkfile :files="fileid" @changedialog="changedialog" />
      </div>
    </el-dialog>
    <!-- 放大 -->
    <el-dialog v-model="dialogVisible" :show-close="false" top="10px" bottom="10px">
      <div style="height: 80vh; text-align: center">
        <el-image style="width: 47vw; height: 75vh" :src="dialogImageUrl" fit="scale-down" />
        <el-button type="primary" @click="dialogVisible = false">
          <el-icon>
            <Close />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </div>
    </el-dialog>
    <!-- 新增 -->
    <div v-if="comprehensiveShow" class="dialog-box">
      <Addaqtl @close="close" :title="title" :saveBtnShow="true" />
    </div>
    <!-- 回复 -->
    <div v-if="DiaShow" class="dialod">
      <el-dialog :title="'消息内容'" v-model="DiaShow" stripe width="800px" top="10%" :before-close="handleClose">
        <div class="config">
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="135px" style="display: block;"
            :inline="true">
            <el-form-item label="消息内容" style="width: 77%;">
              <el-input v-model="ruleForm.content" :rows="5" type="textarea" style="width: 100%;" />
            </el-form-item>
            <el-form-item label="附件：" style="width: 77%;">
              <MOSTY.Upload v-model="ruleForm.files" :delrow="delrow" :isAutoWidth="true" :isEdit="fileEdit"
                :placeholder="'请上传pdf,ofd, doc, docx,wps'" :gsgfList="['pdf', 'ofd', 'doc', 'docx', 'wps']"
                :ShowfileList="true" :showinput="true" :limit="5" :nopicer="true" :isImg="false" />
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">

            <el-button type="primary" @click="handleSave(ruleFormRef)" :loading="saveLoading">
              <el-icon>
                <DocumentChecked />
              </el-icon>
              <span>保存</span>
            </el-button>
            <el-button @click="handleClose" type="primary">
              <el-icon>
                <DocumentDelete />
              </el-icon>
              <span>关闭</span>
            </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { getItem } from "@/utils/storage";
import { filterqx } from "@/utils/auth.js"
import { onMounted, ref, nextTick, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import Kkfile from "@/components/MyComponents/kkfile/index.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { createAndClickLink } from "@/utils/tools.js";
import WebSocketClass from "@/utils/websocket.js"
import { ElMessage } from "element-plus";
import Addaqtl from "./Addaqtl.vue";
const { proxy } = getCurrentInstance();
const loading = ref(false)
const saveLoading = ref(false)
const activeName = ref('01')
const dialogVisible = ref(false);
const open = ref(false);
const comprehensiveShow = ref(false);
const dialogImageUrl = ref("");
const title = ref('新增讨论组')
const bigCenter = ref(null)
const main = ref(null)
const ruleFormRef = ref()
const listQuery = ref({
  pageSize: 10,
  pageCurrent: 1,
  content: ''
})
const flyldialog = ref(false)
const DiaShow = ref(false)
const messageHeight = ref()
const fileid = ref('')
const total = ref(8)
const index = ref(-1)
const typeList = ref([])
const item = ref({})
// 图片后缀列表
const imgSuffix = ref(['.bmp', '.jpg', '.png', '.tif', '.gif', '.pcx', '.apng', '.webp'])
//中间图片
const imgList = ref([])
//中间附件
const fileList = ref([])
const messageList = ref([])
// websocket
const ws = ref(null)
//右边附件f
const fjList = ref([])
//右边人员
const ryList = ref([])
//回复表单
const ruleForm = ref({})
// 部门信息
const dept = getItem('deptId')
// 初始化
onMounted(() => {
  // 查询左侧列表
  getPageList()
  // 连接weboscket
  let userId = getItem('USERID')
  connectSocket(dept.ssbmid, userId)
});
const handleOpen = (val) => {
  open.value = val
  getContentHeight()
}
const getContentHeight = () => {
  nextTick(() => {
    messageHeight.value = `calc(100vh - ${main.value.offsetHeight}px)`
  })
}
// 处理websocket数据
const getWebSocketData = async (data) => {
  // 新增讨论组
  if (data.type == '01') {
    typeList.value.unshift(data.data)
    index.value = index.value + 1
  } else if (data.type == '02') {
    // 删除讨论组
    // 如果删除当前数据，切换到下一跳数据，否则直接删除
    let currentIndex = -1;
    typeList.value.forEach((item, ind) => {
      if (item.id == data.data) {
        currentIndex = ind
      }
    })
    typeList.value = typeList.value.filter(item => {
      return item.id != data.data
    })
    if (currentIndex != -1) {
      if (currentIndex < index.value) {
        index.value = index.value - 1
        getInfo(typeList.value[index.value].id)
      } else if (currentIndex == index.value) {
        if (currentIndex == 0) {
          index.value = 0
        } else {
          index.value = index.value - 1
        }
        getInfo(typeList.value[index.value].id)
      }
    }
  } else if (data.type == '03') {
    // 新增消息，查看是否当前打开的讨论组
    if (item.value.id == data.data.discussid) {
      let message = await getMessageInfo(data.data.id)
      if (message) {
        messageList.value.unshift(message)
        ryList.value.push(
          {
            username: message.username,
            color: getRandomColor()
          }
        )
        let fileArray = []
        let imgArray = []
        message.fileList.forEach(ele => {
          if (imgSuffix.value.indexOf(ele.suffix.toLowerCase()) !== -1) {
            ele.isImg = true
            fjList.value.unshift(ele)
            imgArray.push(ele)
          } else {
            ele.isImg = false
            fjList.value.unshift(ele)
            fileArray.push(ele)
          }
        });
        message.fileArray = fileArray
        message.imgArray = imgArray
        ryList.value = uniqueBy(ryList.value, 'username')
      }
    }
  } else if (data.type == '04') {
    // 找到新增的消息，消息数量 +1
    typeList.value.forEach(it => {
      if (it.id == data.data && item.value.id != data.data) {
        it.count = it.count + 1
      }
    })
  }
}
// 查询消息详情
const getMessageInfo = (id) => {
  return new Promise(ok => {
    getApi({}, '/mosty-jcgl/discuss/getMessageInfo?id=' + id).then(res => {
      ok(res)
    })
  })
}
// 连接websocket
const connectSocket = (ssbmid, userId) => {
  ws.value = new WebSocketClass().connect({ ssbmid, userId })
  ws.value.onopen = () => {
    // socket链接成功
  }
  ws.value.onmessage = (e) => {
    let data = JSON.parse(e.data);
    // 处理数据
    getWebSocketData(data)
  }
  ws.value.onclose = () => {
    ws.value = null
  }
}
// 搜索
const searchData = () => {
  listQuery.value.pageCurrent = 1
  getPageList()
}

// 接收外层新增保存
const handleSave = async (ruleFormRef) => {
  if (!ruleFormRef) return;
  await ruleFormRef.validate((valid) => {
    if (valid) {
      saveLoading.value = true;
      ruleForm.value.files = ruleForm.value.files ? ruleForm.value.files.toString() : null;
      ruleForm.value.discussid = item.value.id
      postApi(ruleForm.value, "/mosty-jcgl/discuss/addmessage").then(() => {
        saveLoading.value = false;
        ElMessage.success("消息发送成功");
        DiaShow.value = false
        ruleFormRef.value.clearValidate();
        ruleFormRef.value.resetFields()
        ruleForm.value = {}
      }).catch(() => {
        saveLoading.value = false;
      })
    } else {
      ElMessage.error("请输入必填项!");
    }
  });
};
// 获取右侧消息详情
const getInfo = (id) => {
  getApi({}, '/mosty-jcgl/discuss/getInfo?id=' + id).then(resp => {
    item.value = resp
    imgList.value = []
    fileList.value = []
    fjList.value = []
    ryList.value = [
      {
        username: resp.username,
        color: getRandomColor()
      }
    ]
    // 讨论组附件
    if (resp.discussFileList && resp.discussFileList.length > 0) {
      resp.discussFileList.forEach(ele => {
        if (imgSuffix.value.indexOf(ele.suffix.toLowerCase()) !== -1) {
          ele.isImg = true
          fjList.value.push(ele)
          imgList.value.push(ele)
        } else {
          fileList.value.push(ele)
          ele.isImg = true
          fjList.value.push(ele)
        }
      });
    }
    // 消息列表
    messageList.value = resp.messageList || []
    if (messageList.value && messageList.value.length > 0) {
      messageList.value.forEach(message => {
        ryList.value.push(
          {
            username: message.username,
            color: getRandomColor()
          }
        )
        let fileArray = []
        let imgArray = []
        message.fileList.forEach(ele => {
          if (imgSuffix.value.indexOf(ele.suffix.toLowerCase()) !== -1) {
            ele.isImg = true
            fjList.value.push(ele)
            imgArray.push(ele)
          } else {
            ele.isImg = false
            fjList.value.push(ele)
            fileArray.push(ele)
          }
        });
        message.fileArray = fileArray
        message.imgArray = imgArray
      })
    }
    ryList.value = uniqueBy(ryList.value, 'username')
  })
}
// 查询左侧列表
const getPageList = () => {
  loading.value = true
  getApi(listQuery.value, "/mosty-jcgl/discuss/getPageList").then((res) => {
    typeList.value = res.records;
    typeList.value.forEach(item => {
      item.count = 0;
    })
    total.value = res.total;
    loading.value = false
    index.value = 0;
    // 获取右侧消息详情
    getInfo(typeList.value[index.value].id)
    setTimeout(() => {
      getContentHeight()
    }, 1000)
  }).finally(() => {
    loading.value = false;
  });
}
// 姓名去重
const uniqueBy = (arr, key) => {
  const seen = new Set();
  return arr.filter((item) => {
    const keyValue = item[key];
    if (seen.has(keyValue)) {
      return false;
    } else {
      seen.add(keyValue);
      return true;
    }
  });
};
//删除某一项
function handleDelete(id) {
  postApi({}, "/mosty-jcgl/discuss/delDiscuss/" + id)
}
// 关闭回复弹窗
function handleClose() {
  proxy.$modal.confirm('离开会丢失页面中修改的内容，确认离开吗？')
    .then(() => {
      DiaShow.value = false
      ruleFormRef.value.clearValidate();
      ruleFormRef.value.resetFields()
      ruleForm.value = {}
    })
    .catch(() => {
      // catch error
    })

}
// 打开回复弹窗
function openSend() {
  DiaShow.value = true
}
// 根据类型区分颜色
function getColor(type) {
  switch (type) {
    case "1":
      return "#E39352";
    case "2":
      return "#7B98D0";
    case "3":
      return "#31aef1";
    case "4":
      return "#D142CB";
    case "5":
      return "#D6413F";
    case "6":
      return "#8BC784";
    case "7":
      return "#4E8F31";
    case "8":
      return "#7CB1CB";
    case "8":
      return "#7B98D0";
    case "9":
      return "#7B98D0";
  }
}
// 字典翻译
const getDict = (id) => {
  switch (id) {
    case "1":
      return "消防";
    case "2":
      return "交通";
    case "3":
      return "生产";
    case "4":
      return "设备";
    case "5":
      return "电气";
    case "6":
      return "食品";
    case "7":
      return "特种<br/>作业";
    case "8":
      return "特种<br/>设备";
    case "9":
      return "其它";
  }
}
function changeItem(item, ind) {
  index.value = ind
  typeList.value[index.value].count = 0
  getInfo(item.id)
  setTimeout(() => {
    getContentHeight()
  }, 1000)
}
// 打开新增弹窗
function addUserHander() {
  title.value = '新增讨论组'
  comprehensiveShow.value = true
}
// 关闭新增弹窗
function close() {
  comprehensiveShow.value = false
}
// 预览
function doPreview(item) {
  if (item) {
    fileid.value = item.id;
    flyldialog.value = true
  } else {
    ElMessage.warning(`请先上传文件`);
  }
}
// 关闭预览
function changedialog() {
  flyldialog.value = false
  fileid.value = ''
}
// 图片放大
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url;
  dialogVisible.value = true;
};
// 下载附件
const clickFileList = (file) => {
  createAndClickLink(file.url, file.name);
};
// 16进制 随机色
function getRandomColor() {
  let letters = "0123456789ABCDEF";
  let color = "#";
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
};
// 分页
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getPageList();
};
// 查询当前页
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getPageList();
};
</script>

<style lang="scss" scoped>
.expand-enter-active,
.expand-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  max-height: 0;
  visibility: hidden;
}

::v-deep .el-tabs {
  .el-tabs__header {
    margin-bottom: 0;
    border-bottom: 0;

    .el-tabs__nav {
      width: 100%;
      border: none;
    }

    .el-tabs__item {
      width: 50% !important;
      background: var(--el-table-cell-bmx-backgroundcolor);
      border-top: 2px solid #fff;
      border-bottom: 2px solid #fff;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
      line-height: 38px;
      margin: 0 1px;

      &.is-active {
        background: var(--el-color-primary);
        color: #fff;
        border-top: 2px solid var(--el-color-primary);
        border-bottom: 2px solid var(--el-color-primary);
      }
    }
  }
}

.bigBox {

  display: flex;
  justify-content: space-between;

  .big-left {
    width: 22%;
    padding: 10px;
    background-color: #fff;

    .gig-serch {
      display: flex;
      align-items: center;
    }

    .big-ul {
      margin-top: 10px;
      height: calc(100vh - 257px);
      overflow-y: auto;

      li:hover>.delClass {
        display: block;
      }

      li {
        display: flex;
        padding: 5px;
        border-bottom: 1px solid #e0e0e0;
        border-top: 1px solid #e0e0e0;
        position: relative;

        .head_box {
          height: 40px;
          width: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: #B3D0AE;
          font-size: 10px;
          border-radius: 3px;
          color: #fff;
          margin-right: 10px;
        }

        .git-li-right {
          width: 80%;
          position: relative;

          .title1 {
            width: 80%;
            color: #000;
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 隐藏超出容器的部分 */
            text-overflow: ellipsis;
            /* 使用省略号表示被隐藏的文本 */
          }

          .detail {
            width: 100%;
            color: #999999;
            white-space: nowrap;
            /* 防止文本换行 */
            overflow: hidden;
            /* 隐藏超出容器的部分 */
            text-overflow: ellipsis;
            /* 使用省略号表示被隐藏的文本 */
          }

          .time {
            width: 100%;
            font-size: 10px;
            color: #999999;
            margin-top: 10px;
          }
        }

      }
    }
  }
}

.big-kong {
  height: calc(100% - 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: gray;
}

.circle {
  width: 20px;
  height: 20px;
  font-size: 10px;
  color: #fff;
  background: red;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 10px;
  right: 10px;
}

.delClass {
  display: none;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.big-center {
  width: 55%;
  background-color: #fff;
  height: calc(100vh - 100px);

  .task_detail {
    padding: 5px 25px 15px 25px;
    overflow: auto;

    .msg-box {}

    .reply_but {
      background: #397D01;
      padding: 5px 15px;
      cursor: pointer;
      color: #fff;
      border-radius: 3px;
      margin-right: 10px;
    }

    .title2 {
      color: #000;
      font-size: 20px;
      font-weight: 600;
    }
  }

  .message_box {
    border-top: 1px solid #e1e1e1;
    overflow: auto;
    padding-bottom: 150px;
    box-sizing: border-box;

    .message {
      overflow-y: auto;
      margin-block-start: 0 !important;

      li {
        padding: 20px 15px;
        border-bottom: 1px solid #e1e1e1;

        .userUnit {
          color: #000;
          font-size: 14px;
          font-weight: 600;
        }

        .username {
          padding: 10px 0;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}

.big-right {
  width: 22%;
  background-color: #fff;
}

.ckxq {
  color: var(--el-color-primary);
  cursor: pointer;
  text-decoration: underline;

}

.black {
  color: #000;
}

.blue {
  color: blue;
}

.gree {
  color: var(--el-color-primary);
}

.textlin {
  text-decoration: underline;
}

.right-seefil {
  margin: 0 2px;
  text-decoration: underline;
}

.file_list {
  height: calc(100vh - 200px);
  overflow-y: auto;
}

.file_list .flie_item {
  padding: 10px;
  border-bottom: 1px solid #e1e1e1;
  display: flex;
  justify-content: space-between;
}

.user_list {
  display: flex;
  flex-wrap: wrap;
  padding: 15px 5px;

  .user_item {
    text-align: center;
    width: 16.6%;
    margin-bottom: 10px;

    .head {
      width: 40px;
      height: 40px;
      background: #397D01;
      border-radius: 50%;
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0 auto;
    }
  }
}

img {
  object-fit: scale-down;
  width: 80px;
  height: 80px;
  margin-right: 10px;
  background: #e0e0e0;
}
</style>
