<template>
  <div >
    <div class="chat-records">
      <el-card v-for="(lt, index) in msg" :key="index" class="chat-record" :class="{ 'received': lt.msgType == '1', 'sent': lt.msgType == '2' }">
        <div   :class="{ 'right': lt.msgType == '2'}" style="margin-bottom: 20px;">
        <div class="timestamp" style="margin-bottom: 10px;">
          <span v-if="lt.msgType=='1'"> {{patientName}}</span>
          <span v-if="lt.msgType=='2'"> {{doctorName}}</span>
        </div>
        <div class="message">
          <div  :class="{ 'right': lt.msgType == '2'}">{{lt.content}}</div>
        </div>
        </div>
      </el-card>
    </div>


  </div>
</template>

<script>

  export default {
    name: "MsgList",
    data() {
      return {
        usageJson:{},
        prescribeItem:{},
        statusDrugReportOptions:[],
        reportItem:{},
        drugReportItem:{},
        followList:[],
        inquirySubTypeOptions:[],
        statusOptions:[],


        total:0,
        msg:[],
        doctorName:null,
        patientName:null,
        form: {

          }
      }
    },
    created() {

    },
    methods: {

      getDetails(doctorName,patientName) {

        this.doctorName = doctorName;
        this.patientName = patientName;
        this.msgList();
      },
      msgList(){
        this.msg=[{"content":"您是否已在线下就诊，且对所购买的药品无过敏或不良反应？","msgType":"2"},{"content":"是，我线下就诊过","msgType":"1"},{"content":"您是否已详细阅读药物说明，确认自己符合药物适用人群，并了解用药方法、用药禁忌等信息?","msgType":"2"},{"content":"是，我已充分了解","msgType":"1"}];

      },
    }
  }
</script>
<style>

  .contentx{
      height: 100%;
      background-color: #fff;
      padding: 0px 20px 20px;


      margin: 20px;
  }
  .el-descriptions-item__label.is-bordered-label{
    font-weight: normal;
  }
  .el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
  }
  .desct{
      padding-top: 20px;
      padding-bottom: 20px;
      color: #524b4a;
      font-weight: bold;
    }
</style>
<style scoped>
.chat-records {

  overflow-y: auto;
}
.timestamp {
  font-size: 12px;
  color: #A9A9A9;
}
.chat-record {
  margin: 10px;
  flex-direction: column;
  align-items: flex-start;
}
.sent {
  background-color: #fbfdff;
  color: #000839;
}
.right{
  float: right;
}
.received {
  background-color: #fbfdff;
  color: #000000;
}

.el-descriptions-item__content {
    max-width: 150px;
    min-width: 100px;
}
</style>
<style scoped>
.order-content{
  margin: 10px;

}

.operate-container {
  background: #F2F6FC;
  height: 60px;
  margin: -20px -20px 0;
  line-height: 60px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}
</style>
