<!--医生列表显示模块-->
<template>
<!--  显示医生 ,根据showModel具体值决定相应显示界面-->
  <div style="margin: 15px;min-height: calc(100vh - 50px)">
    <span>
    <el-button @click="showModel='allDoc'" type="primary">所有医生</el-button>
    <el-button @click="showMyDoctor" type="primary">我的医生</el-button>
  </span>
<!--    显示所有医生-->
  <div v-if="showModel=='allDoc'" >
    <el-table :data="FriendList" style=";width: 100%">
        <el-table-column prop="username" ></el-table-column>
        <el-table-column prop="hospitalname" ></el-table-column>
        <el-table-column prop="description" show-overflow-tooltip="true" style="flex: 1"></el-table-column>
        <el-table-column prop="userid" style="width: 1px" v-if="showId"></el-table-column>
      <el-table-column >
        <template #default="scope">
            <el-button type="success" size="small" @click="showBasicInfoOfDoc(scope.row)"> 查看详情</el-button>
          <el-button type="success" size="small" @click="beginToChatWith(scope.row)">咨询</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
<!--  展示某个医生具体信息-->
  <div v-if="showModel=='oneDoc'" style="padding: 100px;">
    <el-row style="height: 800px" >
      <el-col :span="12">
        <div>
          <el-card :body-style="{ padding: '30px' }"  class="box-card" style="width: 300px;font-size: larger">
            <div>医生姓名： {{dname}}</div>
            <el-icon></el-icon>
            <div>医生电话： {{phonenumber}}</div>
            <el-icon></el-icon>
            <div>所属医院： {{hospital}}</div>
            <el-icon></el-icon>
            <div>专长： {{specialty}}</div>
            <el-icon></el-icon>
            <div>选择情况： {{selectable}}</div>
            <el-icon></el-icon>
            <div v-if="DocSelectable==true">
              <el-button type="success" v-if="DocSelectableSelected==true" @click="chooseDoctor">选择</el-button>
              <el-button type="primary" v-if="DocSelectableSelected==false" @click="cancelDoctor">取消选择</el-button>
              <el-button @click="showModel='allDoc'" type="warning">返回列表</el-button>
            </div>
            <div v-else>
              <el-button type="info" disabled >已满不可选择</el-button>
            </div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div>
          <img src="../assets/780.png" class="image"/>
        </div>
      </el-col>
    </el-row>
  </div>
<!--  开启一次对话聊天-->
  <div v-if="showModel=='chat'" style="flex: 1;padding-top: 10px" >
    <div>
      <el-table :data="WordsList" height="450" style="width: 100%" :show-header=false>
        <el-table-column prop="userA" label="Date" width="100" style="padding-left: 0px"/>
        <el-table-column prop="messageA" label="content" align="left"/>
        <el-table-column prop="messageB" label="content" align="right"/>
        <el-table-column prop="userB" label="Address" style="padding-right: 0px" width="100"/>
      </el-table>
      <el-input v-model="aMessage" placeholder="Please input" :rows="3" type="textarea"/>
      <el-button type="primary" @click="sendMessage">发送</el-button>
    </div>
  </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import { ref } from 'vue'

export default {
  name: "Contact",
  created() {
    //初始化时及刷新所有医生数据
    this.loadAllDoctors();
    //用轮询的方式每隔一段时间刷新一次聊天记录数据
    this.$nextTick(() => {
      setInterval(this.getData, 1000);
    });
  },
  data(){
    return{
      //医生基本信息
      FriendList:[],
      phonenumber:"default",
      hospital:"default",
      specialty:"default",
      dname:"default",
      //控件可见性控制
      selectable:"",
      showId:false,
      showModel:"",
      DocSelectable:true,
      DocSelectableSelected:true,
      //用于聊天记录显示与对话功能的变量
      userid:this.$store.getters.userid,
      username:this.$store.getters.username,
      specificDocTobeOperatedId:"",
      specificDocTobeOperatedName:"",
      aMessage: ref(''),
      WordsList:[]
    }
  },
  methods:{
    //获得所有医生数据并刷新
    loadAllDoctors(){
      request.get('/worker/getAllDoctors').then(res=>{
        this.FriendList=res;
      })
    },
    //读取自己医生的各项数据
    loadMyDoctor(){
      request.get('/doctor/getMyDoctor',{params:{userid:this.userid}}).then(res=>{
        this.DocSelectableSelected=false,
        this.phonenumber=res.data.phonenumber,
        this.hospital=res.data.hospitalname,
        this.specialty=res.data.description,
        this.dname=res.data.username,
        this.selectable=res.msg,
        this.specificDocTobeOperatedId=res.data.userid
      })
    },
    //读取一个特定医生信息（可为自己的医生）
    loadSpecificDoctors(doctorId){
      if(doctorId == this.$store.getters.doctor){
        this.DocSelectableSelected=false}else {
        this.DocSelectableSelected=true
      }
      request.post('/doctor/getDoctor',{userid:doctorId}).then(res=>{
            this.phonenumber=res.data.phonenumber,
            this.hospital=res.data.hospitalname,
            this.specialty=res.data.description,
            this.dname=res.data.username,
            this.selectable=res.msg,
            this.specificDocTobeOperatedId=res.data.userid
      })
    },
    //对自己的医生的信息进行显示
    showMyDoctor(){
      this.showModel='oneDoc';
      this.loadMyDoctor();
    },
    //对特定医生的信息进行显示（通过行号获取特定医生的id用于查询）
    showBasicInfoOfDoc(row){
      this.showModel='oneDoc';
      this.loadSpecificDoctors(row.userid);
    },
    //选择一个特定的医生
    chooseDoctor(){
      this.DocSelectableSelected=false;
      request.get("/user/selectDoctor",{params:{userid:this.userid,doctorid:this.specificDocTobeOperatedId}})
          .then(res=>{this.loadMyDoctor();
                      this.$store.commit('setdoctor',this.specificDocTobeOperatedId);
                      this.$store.commit('setDoctorname',this.specificDocTobeOperatedName)});
    },
    //取消选择的医生
    cancelDoctor(){
      this.DocSelectableSelected=true;
      request.get("/user/selectDoctor",{params:{userid:this.userid,doctorid:"000000000000000000"}})
      .then(res=>{
        this.$store.commit('setdoctor',"000000000000000000");
        this.$store.commit('setDoctorname',"系统医生");
        this.loadSpecificDoctors(this.specificDocTobeOperatedId);
      });
    },
    //切换到聊天界面并把聊天对象的数据进行初始化以便聊天记录查询
    beginToChatWith(row){
      this.specificDocTobeOperatedId=row.userid;
      this.specificDocTobeOperatedName=row.username;
      this.showModel='chat';
    },
    //发送一条消息
    sendMessage(){
      request.get("/sendMessage",{params:{senderid:this.userid,receiverid:this.specificDocTobeOperatedId,message:this.aMessage}});
      this.aMessage="";
    },
    //读取特定的聊天记录
    getData(){
        request.get("/getMessage",{params:{userid1:this.userid,userid2:this.specificDocTobeOperatedId}}).then(res=>{
          if(res){
            this.WordsList=[];
            for(var i=0;i<res.length;i++){
              if(res[i].senderid==this.userid){
                this.WordsList.push({userA: this.username+':',messageA: res[i].message});
              }else {
                this.WordsList.push({userB: ':'+this.specificDocTobeOperatedName,messageB: res[i].message});
              }
            }
          }
        })
    }
  }
}
</script>

<style scoped>
</style>