<template>
  <!-- 消息-首页 -->
  <HeaderNav headerText="消息" headerRouter="/"></HeaderNav>
  <div class="message-index">
    <div class="platform-service">
      <div class="service-left">
        <img src="@/assets/img/asset/platform-service.svg" class="platform-head" alt="" />
        <div class="left-info">
          <div class="info-name pf500 fs18 fc061237">平台客服</div>
          <div class="info-message pf500 fs12 fc999999">消息内容文本显示</div>
        </div>
      </div>
      <div class="service-right pf500 fs12 fc999999">11/07 22:55:50</div>
    </div>
    <div
      class="merchant-service margin-top17"
      v-for="(item, index) in OTCChatData"
      :key="index">
      <div class="service-left">
        <img src="@/assets/img/asset/Avatar.svg" class="platform-head" alt="" />
        <div class="left-info">
          <div class="info-name pf500 fs18 fc061237">{{ item.otc_name }}</div>
          <div class="info-message pf500 fs12 fc999999">消息内容文本显示</div>
        </div>
      </div>
      <div class="service-right pf500 fs12 fc999999">{{ item.update_time }}</div>
    </div>
  </div>
</template>
<script setup>
  import HeaderNav from "../../../index/components/HeaderNav.vue";
  import { GetOTCChat, GetOTCChatDetails } from "@/api/otc";
  import { ref, onMounted } from "vue";

  const OTCChatData = ref();

  const getOTCChatData = async () => {
    const data = await GetOTCChat();
    OTCChatData.value = data.list;
    console.log(OTCChatData.value);

    const data1 = await GetOTCChatDetails(OTCChatData.value[0].otc);
    console.log(2, data1);
  };

  onMounted(async () => {
    await getOTCChatData();
  });
</script>
<style lang="less" scoped>
  .message-index {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin-top: 48px;
    width: 100%;

    .margin-top17 {
      margin-top: 17px;
    }

    .platform-service,
    .merchant-service {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 345px;
      height: 56px;

      .service-left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        height: 56px;

        .platform-head {
          width: 56px;
          height: 56px;
        }

        .left-info {
          margin-left: 15px;

          .info-message {
            margin-top: 3px;
          }
        }
      }
    }
  }
</style>
