<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <el-col :span="24" class="one" v-if="id">
          <el-container>
            <el-header class="Header">{{ info.nick_name || '平台用户' }}</el-header>
            <el-main class="Main">
              <el-col :span="24" class="list" v-for="(item, index) in list" :key="index">
                <el-col :span="24" class="time">{{ item.send_time }}</el-col>
                <el-col :span="24" class="message" v-if="item.receiver_id != info._id">
                  <el-col :span="2" class="left">
                    <a-avatar :size="55" style="background-color: #409eff">
                      {{ item.sender_name }}
                    </a-avatar>
                  </el-col>
                  <el-col :span="20" class="right">
                    <div class="name">{{ item.sender_name }}</div>
                    <div class="content">
                      <text>{{ item.content }}</text>
                    </div>
                  </el-col>
                </el-col>
                <el-col :span="24" class="message flexOne" v-else>
                  <el-col :span="2" class="left">
                    <a-avatar :size="55" style="background-color: #409eff">
                      {{ item.sender_name }}
                    </a-avatar>
                  </el-col>
                  <el-col :span="20" class="right">
                    <div class="name">{{ item.sender_name }}</div>
                    <div class="content">
                      <text>{{ item.content }}</text>
                    </div>
                  </el-col>
                </el-col>
              </el-col>
            </el-main>
            <el-footer class="Footer">
              <el-col :span="24" class="Footer1">
                <textarea class="input" v-model="textarea" placeholder="请输入您想输入的内容" />
              </el-col>
              <el-col :span="24" class="Footer2">
                <el-button type="primary" size="small" @click="toSend">发送</el-button>
              </el-col>
            </el-footer>
          </el-container>
        </el-col>
        <el-col :span="24" class="two" v-else>
          <p>您还未选中或发起聊天，快去跟好友聊一聊吧</p>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
const id = inject('id')
const list = inject('list')
const info = inject('info')
const textarea = inject('textarea')
const toSend = inject('toSend')
</script>
<style scoped lang="scss">
.main {
  .one {
    height: 72vh;
    width: 100%;
    border-radius: 0 5px 5px 0;
    color: #a3a7ae;
    .Header {
      position: sticky;
      top: 0;
      background: #eee;
      z-index: 1;
      height: 50px;
      box-sizing: border-box;
      line-height: 50px;
      margin-left: 18px;
      margin-right: 20px;
      border-bottom: 1px solid #d9d9d9;
      white-space: nowrap;
      word-break: break-all;
      display: inline-block;
      font-size: 16px;
      color: grey;
    }
    .Main {
      height: 52vh;
      .list {
        .time {
          width: 100%;
          font-size: 12px;
          margin: 7px auto;
          text-align: center;
          color: #a3a7ae;
        }
        .flexOne {
          flex-direction: row-reverse;
          .left {
            text-align: right;
          }
          .right {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            .content {
              color: #fff !important;
              background: #409eff !important;
              padding: 12px !important;
              border-radius: 10px 0 10px 10px !important;
            }
          }
        }
        .message {
          display: flex;
          margin: 0 0 10px 0;
          .left {
            .image {
              width: 50px;
              height: 50px;
              border-radius: 50%;
            }
          }
          .right {
            .name {
              padding-bottom: 5px;
              color: #a3a7ae;
              display: inline-block;
              font-size: 12px;
            }
            .content {
              width: fit-content;
              font-size: 14px;
              color: #333;
              background: rgb(255, 255, 255);
              padding: 12px;
              border-radius: 0 10px 10px 10px;
            }
          }
        }
      }
    }
    .Main::-webkit-scrollbar {
      display: none;
    }
    .Footer {
      border-top: 1px solid #ddd;
      background: #eee;
      padding: 10px;
      .Footer1 {
        .input {
          color: #333;
          width: 100%;
          height: 80px;
          display: block;
          box-sizing: border-box;
          padding: 0 8px 0 17px;
          font-size: 14px;
          line-height: 22px;
          background: #eee;
          overflow: auto;
          border: none;
        }
        textarea:focus {
          outline: none;
        }
      }
      .Footer2 {
        margin: 10px 0 0 0;
        text-align: right;
      }
    }
  }
  .two {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70vh;
    width: 100%;
    border-radius: 0 5px 5px 0;
    color: #a3a7ae;
    font-size: 16px;
  }
}
</style>
