<template>
    <div class="phone">
        <div class="phonecont" v-if="chatlist.length>0">
          <a-button class="more" v-if="showMore" @click="loadMore">点击加载更多</a-button>
          <div class="nomore" v-else>---没有更多了---</div>

          <div
            class="msgbox"
            :class="
              user_doctor.user_id == item.from_user_id
                ? 'patientmsg'
                : ''
            "
            v-for="item in chatlist"
            :key="item.message_id"
          >
           <a-avatar  v-if="user_doctor.user_id == item.from_user_id && (item.message_type!='TIMCustomElem' || (item.message_type=='TIMCustomElem' &&  JSON.parse(JSON.parse(item.message_content).Data)
                      .message_type == 7))">
            <img
             
              class="chatAvater"
              :src="user_doctor.avatar"
              alt=""
            />
           
           </a-avatar>
           
           <a-avatar  v-if="user_doctor.user_id != item.from_user_id && item.message_type!='TIMCustomElem'">
            <img
             
              class="chatAvater"
              src="https://img.applets.igandanyiyuan.com/basic/file/patient_avatar.png"
             
              alt=""
            />
           </a-avatar>
            <div class="msgcon" :class="item.message_type=='TIMCustomElem'?'tipcon':''"
            :style="(item.message_type=='TIMCustomElem'&& JSON.parse(JSON.parse(item.message_content).Data)
                      .message_type == 7)?'margin:6px;':''">
              <div class="msgtext" v-if="item.message_type == 'TIMTextElem'">
                {{ JSON.parse(item.message_content).Text }}
              </div>
              <div class="msgtext" v-if="item.message_type == 'TIMImageElem'">

                 <a-image  width="200" :src="(JSON.parse(item.message_content).ImageInfoArray)[0].URL"  :preview-props="{
      actionsLayout: ['rotateRight', 'zoomIn', 'zoomOut'],
    }" />
              </div>
              <div
                class="msgtext"
                v-else-if="item.message_type == 'TIMCustomElem'"
                :class="JSON.parse(JSON.parse(item.message_content).Data)
                      .message_type == 7?'otherColor':''"
              >
              <div
                  v-if="
                    JSON.parse(JSON.parse(item.message_content).Data)
                      .message_type == 1
                  "
                  class="text"
                >
                  {{ JSON.parse(JSON.parse(item.message_content).Data)
                      .title}}
                </div>
                <div
                  v-else-if="
                    JSON.parse(JSON.parse(item.message_content).Data)
                      .message_type == 2
                  "
                  class="text"
                >
                  系统推送评价消息
                </div>
                <div
                  v-else-if="
                    JSON.parse(JSON.parse(item.message_content).Data)
                      .message_type == 3
                  "
                  class="text"
                >
                  系统推送医生端系统通知
                </div>
                <div
                  v-else-if="
                    JSON.parse(JSON.parse(item.message_content).Data)
                      .message_type == 4
                  "
                  class="text"
                >
                  系统推送医生端服务通知
                </div>
                <div
                  v-else-if="
                    JSON.parse(JSON.parse(item.message_content).Data)
                      .message_type == 5
                  "
                  class="text"
                >
                  系统推送患者端系统消息
                </div>
                <div
                  v-else-if="
                    JSON.parse(JSON.parse(item.message_content).Data)
                      .message_type == 6
                  "
                  class="text"
                >
                药师审核中
                </div>
                <div
                  v-else-if="
                    JSON.parse(JSON.parse(item.message_content).Data)
                      .message_type == 7
                  "
                  class="text"
                >
                 <div class="chufangbox">
                   <div class="title">处方已开具</div>
                   <div class="productbox">
                     <div class="row">
                      <div class="name">RP：</div>
                     <div class="desc">{{ JSON.parse(JSON.parse(item.message_content).Data)
                      .data.product_name }}</div> 
                     </div>
                     <div class="row">
                      <div class="name">开方日期：</div>
                      <div class="desc">{{JSON.parse(JSON.parse(item.message_content).Data)
                      .data.pharmacist_verify_time}}</div>
                     </div> 
                    
                   </div>
                 </div>
                </div>
                <div
                  v-else-if="
                    JSON.parse(JSON.parse(item.message_content).Data)
                      .message_type == 10
                  "
                  class="text"
                >
                系统推送糖组检测报告
                </div>
                <div
                  v-else-if="
                    JSON.parse(JSON.parse(item.message_content).Data)
                      .message_type == 11
                  "
                  class="text"
                >
                系统推送患者病例
                </div>
                <div
                  v-else-if="
                    JSON.parse(JSON.parse(item.message_content).Data)
                      .message_type == 11
                  "
                  class="text"
                >
                  系统推送患者信息
                </div>
              </div>
              <div class="date"  v-if="item.message_type != 'TIMCustomElem'">{{ parseTime(item.message_send_time) }}</div>
            </div>
          </div>
        </div>
        <div class="phonecont" v-else>
            <a-empty />
        </div>
      </div>
</template>
<script setup>
import { ref, toRefs, reactive, watch,nextTick } from 'vue';
import {getIm } from '@/api/order/list';
const props = defineProps({
  id:{
    type: String,
    default:'',
  },
  user_doctor:{
    type:Object
  }

});
const {user_doctor}=toRefs(props);
const firstIn=ref(false);
const pager = reactive({
  page: 1,
  page_size: 10,
});
const chatlist = ref([]);
const showMore = ref(true);
const HandleGetIm = async (params = {}) => {
  const { code, data } = await getIm(params);
  if (code == 200) {
   
    if ( data.data.length < 10) {
      showMore.value = false;
    }else{
      showMore.value = true;
    }
    chatlist.value = data.data.reverse().concat(chatlist.value);
    if(!firstIn.value){
      nextTick(() => {
      // 要放在对响应式数据修改之后
      let ele = document.querySelector('.phonecont');
      ele.scrollTop = ele.scrollHeight;
    });
    }

    firstIn.value=true
  }
};
watch(()=>props.id,(newVal,oldVal)=>{
    if(newVal){
      firstIn.value=false;
      chatlist.value=[];
      pager.page=1;
      pager.order_inquiry_id=newVal;
      HandleGetIm({ ...pager });  
    }
},{immediate:true,deep:true})


const loadMore=()=>{
  pager.page= pager.page+1;
  pager.order_inquiry_id=props.id;
  HandleGetIm({ ...pager });
 
}
</script>
<style scoped>
.more {
  display: flex;
  margin: 20px auto 10px;
}
.nomore {
  font-size: 12px;
  color: #666;
  text-align: center;
  margin: 20px auto 10px;
}
.phone {
  margin-top: 35px;
  position: relative;
  background: #111;
  border-radius: 55px;
  box-shadow: 0px 0px 0px 2px #aaa;
  width: 360px;
  height: 480px;
  padding: 105px 25px 60px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
.phone:before {
  content: '';
  width: 60px;
  height: 10px;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  margin-left: -30px;
  background: #333;
  top: 50px;
}
.phonecont {
  width: 100%;
  height: 100%;
  overflow: scroll;
  background: #fff;
}
.chatAvater {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.msgbox {
  display: flex;
  margin: 4px 12px 12px;

  flex-direction: row-reverse;
}
.patientmsg {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.phonecont .msgtext {
  max-width: 80vw;
  border-radius: 5px;
  padding: 5px 8px;
  word-break: break-all;
  color: var(--color-text-1);
  background: #efefef;

}
.patientmsg .msgtext{
  background: #3CC7C0;
  color:#fff;
  
  
}

.msgbox .msgcon {
  margin-right: 6px;
}
.patientmsg .msgcon {
  margin-left: 6px;
}
.date {
  font-size: 12px;
  color: #666;
}
.patientmsg .tipcon{
  width:88%;
  margin:0 auto;
  text-align: center;
  
}
.tipcon .msgtext{
  color: var(--color-text-1);
  background: #efefef;
}
.phonecont .otherColor{
  background: #3CC7C0;
  color:#fff;
}

.tipcon .msgtext{
  padding:0px;
  font-size: 15px;
}
.chufangbox{
  margin:0 20px;
}
.productbox .row{
  display: flex;
  align-items: center;
}
.chufangbox .title{
  padding: 8px 0;
  border-bottom:1px solid #E7E7E7;;
}
.productbox{
  padding: 8px 0;
}
.productbox .row .name{
  color:#fff;
}
.desc{
  line-height: 28px;
  color:#fff;
  font-size: 15px;
}
</style>