<template>
  <div class="msg">
    <!-- 标题区域 -->
    <div class="msg_title"></div>
    <!-- 关闭按钮区域 -->
    <div class="msg_close" @click="close"></div>
    <!-- 评价时间区域 -->
    <div class="msg_box">评价时间：{{ showObj.time }}</div>
    <!-- 姓名区域 -->
    <div class="msg_box">姓名：{{ showObj.name }}</div>

    <!-- 头像区域 -->
    <div class="msg_box2">
      头像
      <el-image
        class="img"
        fit="cover"
        src="https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg"
        :preview-src-list="[
          'https://pic.rmb.bdstatic.com/daca09fd4974fe3361289d3306db4d63.jpeg',
        ]"
        hide-on-click-modal
      ></el-image>
    </div>
    <!-- 来源渠道区域 -->
    <div class="msg_box">来源渠道：{{ showObj.type }}</div>

    <!-- 订单号区域 -->
    <div class="msg_box">订单号：{{ showObj.order }}</div>

    <!-- 舆情等级区域 -->
    <div class="msg_box">舆情等级：{{ showObj.level }}</div>

    <!-- 评价内容区域 -->
    <div class="msg_box3">
      <div>评价内容</div>
      <div class="box_info">
        {{ showObj.content }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const $emit = defineEmits(["closeMsg"]);
defineProps(["showObj"]);

const close = () => {
  $emit("closeMsg", false);
};
</script>

<style lang="scss" scoped>
.msg {
  position: absolute;
  top: 100px;
  left: 2760px;
  width: 1293px;
  height: 1053px;
  background-image: url(@/assets/images/9.png);
  background-size: 100% 100%;

  .msg_title {
    margin-top: 51px;
    margin-left: 47px;
    margin-bottom: 42px;
    width: 1068px;
    height: 96px;
    background-image: url(@/assets/images/80.png);
  }

  .msg_close {
    position: absolute;
    top: 59px;
    right: 57px;
    width: 82px;
    height: 82px;
    cursor: pointer;
    background-image: url(@/assets/images/12.png);
    background-size: 100% 100%;
  }

  .msg_box {
    padding-left: 22px;
    margin-bottom: 25px;
    margin-left: 47px;
    width: 1179px;
    height: 47px;
    line-height: 47px;
    font-size: 23px;
    border-left: 1px solid #90cffc;
    border-top: 1px dashed rgba(0, 186, 186, 0.5);
    border-right: 1px dashed rgba(0, 186, 186, 0.5);
    border-bottom: 1px dashed rgba(0, 186, 186, 0.5);
    background-color: rgba(109, 161, 189, 0.21);
  }

  .msg_box2 {
    display: flex;
    padding-left: 22px;
    padding-top: 13px;
    margin-left: 47px;
    margin-bottom: 25px;
    width: 1179px;
    height: 186px;
    font-size: 23px;
    border-left: 1px solid #90cffc;
    border-top: 1px dashed rgba(0, 186, 186, 0.5);
    border-right: 1px dashed rgba(0, 186, 186, 0.5);
    border-bottom: 1px dashed rgba(0, 186, 186, 0.5);
    background-color: rgba(109, 161, 189, 0.21);

    .img {
      margin-left: 28px;
      width: 235px;
      height: 160px;
    }
  }

  .msg_box3 {
    padding-left: 22px;
    padding-top: 13px;
    margin-left: 47px;
    margin-bottom: 25px;
    width: 1179px;
    height: 224px;
    font-size: 23px;
    border-left: 1px solid #90cffc;
    border-top: 1px dashed rgba(0, 186, 186, 0.5);
    border-right: 1px dashed rgba(0, 186, 186, 0.5);
    border-bottom: 1px dashed rgba(0, 186, 186, 0.5);
    background-color: rgba(109, 161, 189, 0.21);

    .box_info {
      margin-top: 20px;
      padding-right: 22px;
      height: 150px;
      line-height: 36px;
      color: #b3b3b3;
      overflow-y: auto;
    }
  }
}
</style>
