<template>
    <div style="background-color: #f0f2f5; padding-bottom: 20px; min-height: 100%; " >
      <div style="padding: 20px; background-color: #fff;">
       随访详情
      </div>
      <div class="contentx" v-if="item!=null">
          <div class="desct">
            随访信息
          </div>
          <el-descriptions title="" :column="3" border>
              <el-descriptions-item label="模板名称" >
                  <span v-if="item!=null">{{tempName}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="随访结果" >
              <span v-if="item!=null">
                  <dict-tag :options="writeStatusOptions" :value="item.writeStatus"/>
              </span>
              </el-descriptions-item>
              <el-descriptions-item label="推送时间" >
                  <span v-if="item!=null">{{item.planTime}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间" >
                  <span v-if="item!=null">{{item.createTime}}</span>
              </el-descriptions-item>
              <el-descriptions-item label="更新时间" >
                  <span v-if="item!=null">{{item.updateTime}}</span>
              </el-descriptions-item>
 <!--             <el-descriptions-item label="聊天记录" >
                    <el-link type="primary" disabled :underline="false" v-if="msgs==null || msgs.length==0">无聊天记录</el-link>
                    <el-link type="primary" @click="im.open = true" :underline="false" v-if="msgs.length>0 ">查看聊天记录</el-link>
              </el-descriptions-item> -->
          </el-descriptions>
      </div>
      <div class="contentx" v-if="item!=null">
        <div class="desct">
          患者信息
        </div>
        <el-descriptions title="" :column="3" border >
            <el-descriptions-item label="患者姓名"  >
                <span v-if="item!=null">{{item.patientName}}</span>
            </el-descriptions-item>
            <el-descriptions-item label="患者电话"  >
                <span v-if="item!=null">{{item.patientPhone}}</span>
            </el-descriptions-item>

        </el-descriptions>
        </div>
         <div class="contentx" v-if="item!=null">
        <div class="desct">
          随访内容
        </div>
        <el-descriptions title="" :column="1" border direction="vertical">
            <el-descriptions-item label="随访内容"  >
                <div v-show="list != null&&list!=''" >
                 <div  :class="'questionnaire_'+index"   v-for="(item, index) in list"   :key="index" >
                      <div class="flex-1">
                        <span :class="item.require ? 'require' : 'noRequire'">{{index+1}}.{{item.question}}</span>
                      <div>
                          <div v-if="'1' == item.type">
                             <el-row v-for="(answerItem,i) in item.options"  :key="i">
                                <el-col :span="23" :offset="1"> <el-radio disabled v-model="item.answers" :label="item.options[i]"></el-radio></el-col>
                             </el-row>
                          </div>
                          <div v-if="'2' == item.type">
                              <el-row v-for="(answerItem,i) in item.options"  :key="i">
                                 <el-col :span="23" :offset="1">
                                  <el-checkbox-group v-model="item.answers">
                                     <el-checkbox :label="item.options[i]" disabled></el-checkbox>
                                  </el-checkbox-group>
                                </el-col>
                              </el-row>
                          </div>
                          <div v-if="'3' == item.type">
                              <el-row>
                                <el-col :span="23" :offset="1"><el-input v-model="item.answers" :disabled="true" type="textarea"></el-input></el-col>
                              </el-row>
                          </div>
                        </div>
                      </div>
                  </div>
                </div>
            </el-descriptions-item>
        </el-descriptions>
        </div>
        <el-dialog
          title="聊天记录"
          :visible.sync="im.open"
          width="80%"
          append-to-body >
          <div class="chat-records">
            <el-card v-for="(lt, index) in msgs" :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'"> {{lt.userNickName}}</span>
                <span v-if="lt.msgType=='2'"> {{lt.doctorName}}</span>
              {{ lt.createTime }}
              </div>
              <div class="message">
              <div v-if="lt.msgContentType == '1'" :class="{ 'right': lt.msgType == '2'}">{{lt.content}}</div>
              <div v-if="lt.msgContentType == '2'" :class="{ 'right': lt.msgType == '2'}">
                    <audio ref="audioPlayer" controls>
                      <source :src="lt.content" type="audio/mp3" />
                    </audio>
                </div>
                <div v-if="lt.msgContentType == '4'" :class="{ 'right': lt.msgType == '2'}">
                  <video  :src="lt.content" controls style="max-width: 400px; max-height: 400px;"></video>
              </div>
              <span v-if="lt.msgContentType == '5'" :class="{ 'right': lt.msgType == '2'}"><el-link type="primary" :underline="false" @click="handlePrescribe(JSON.parse(lt.content).prescribeId)">处方单</el-link></span>
              <span v-if="lt.msgContentType == '6'" :class="{ 'right': lt.msgType == '2'}">提交问诊报告</span>
              <span v-else-if="lt.msgContentType == '3'" :class="{ 'right': lt.msgType == '2'}">
                <el-image
                        style="width: 100px"
                        :src="lt.content"
                        :preview-src-list="[lt.content]">
                </el-image>
              </span>
              </div>
              </div>
            </el-card>
          </div>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="msgParam.pageNum"
            :limit.sync="msgParam.pageSize"
            @pagination="getInquiryOrderMsgList"
          />
      </el-dialog>
      <el-drawer
            :append-to-body="true"
            :with-header="false"
            size="75%"
            title="处方单" :visible.sync="prescribeOpen">
         <prescribeDetails  ref="prescribeDetails" />
      </el-drawer>
    </div>
</template>

<script>
  import {getInquiryOrderMsgList} from "@/api/inquiryOrder";
  import { listFollow, getFollowById, delFollow, addFollow, updateFollow, exportFollow } from "@/api/follow";
  import prescribeDetails from '@/views/components/myDrugStore/prescribeDetails.vue';
  export default {
    components: { prescribeDetails },
    name: "followDtail",
    props:["data"],
    data() {
      return {
        prescribeOpen:false,
        im:{
          open:false,
        },
        total:0,
        msgs:[],
        msgParam:{
          pageNum: 1,
          pageSize: 10,
        },
        list:[],
        tempName:null,
        // 0待推送 1已推送 2 已取消字典
        pushStatusOptions: [],
        // 0未填写 1已填写字典
        writeStatusOptions: [],
        item:null,
        form: {
          sreason: '',
        }
      }
    },
    created() {
      this.getDicts("sys_follow_push_status").then(response => {
        this.pushStatusOptions = response.data;
      });
      this.getDicts("sys_follow_write_status").then(response => {
        this.writeStatusOptions = response.data;
      });
    },
    methods: {
      handlePrescribe(prescribeId){
        this.prescribeOpen=true;
        setTimeout(() => {
              this.$refs.prescribeDetails.getDetails(prescribeId);
        }, 1);
      },
      getInquiryOrderMsgList(){
        getInquiryOrderMsgList(this.msgParam).then(response => {
          this.msgs= response.data.list;
          this.total = response.data.total;
        });
      },
      getDetails(followId,tempName) {
        this.tempName = tempName;
        this.item = null;
        this.list=[];
        getFollowById(followId).then(response => {
            this.item = response.follow;
            if(this.item.formJson!=null){
              this.list=JSON.parse(this.item.formJson );
            }
            this.msgParam.doctorId=this.item.doctorId;
            this.msgParam.userId=this.item.userId;
            // this.getInquiryOrderMsgList();

        });
      },
    }
  }
</script>
<style>

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

  }
</style>
<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;
     }
    .require:before {
        content: '* ';
        color: red;
    }
    .noRequire:before{
      content: '* ';
      color: white;
    }
</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;
}

</style>
