<template>

  <div style="display: flex">





    <div style="flex: 2">
      <!-- 中间部分  -->

      <!-- 中间部分的上部分  -->
      <div style="display: flex">
        <div>
          <!--      图片       -->

        </div>

        <!-- 中间部分的上部分的中间部分  -->
        <div style="flex: 2">
          <div style="display: flex">
            <div style="width: 200px">
              <h3>姓名：张三</h3>
            </div>
            <div style="width: 200px">
              <h3>性别：男</h3>
            </div>
            <div style="width: 200px">
              <h3>年龄：24</h3>
            </div>
            <div style="width: 600px">
              <h3>联系方式：114514</h3>
            </div>
          </div>
        </div>






        <!-- 中间部分的上部分的中间部分  -->

        <div style="width: 100px"></div>



      </div>
      <!-- 中间部分的上部分  -->



      <!-- 中间部分的中间部分  -->

      <div style="display: flex">
        <div style="display: flex; width: 200px">
          <div>
            <el-icon @click="addMedicalRecord"><circle-plus-filled /></el-icon>
          </div>
          <div>
            <span @click="addMedicalRecord">开病历</span>
          </div>
        </div>

        <div style="flex: 2">
          <el-button type="info" @click="viewHealthInfo">查看健康上报信息</el-button>
        </div>

      </div>

      <!-- 中间部分的中间部分  -->



      <!-- 中间部分的下部分  -->
      <div style="align-self: start">病历</div>
      <div>
        <el-table :data="medicalRecord" :row-class-name="tableRowClassName" style="width: 100%" >
          <el-table-column prop="time" label="就诊时间" sortable />
          <el-table-column prop="doctor" label="主治医师" />
          <el-table-column prop="number" label="诊断" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button
                  size="mini"
                  type="danger"
                  @click="myShow"
              >详情</el-button
              >
            </template>
          </el-table-column>





        </el-table>

        <el-pagination
            :currentPage="currentPage"
            :page-size="pageSize"
            :page-sizes="[5,10,20]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>

      <!-- table -->



      <!-- 中间部分的下部分  -->
    </div>
    <!-- 中间部分  -->


  </div>


</template>

<script>
import {CirclePlusFilled, Edit} from "@element-plus/icons-vue";
import request from "@/utils/request";


export default {
  name: "DoctorViewPatient",
  components:{
    CirclePlusFilled,
    Edit,

  },
  mounted() {
    //显示病历
    //this.loadMedicalRecords()
  },
  data(){
    return{
      childNum: 2,
      currentPage:1,
      pageSize:10,
      total:0,
      medicalRecord:[
        {
          time: '2022-2-14',
          doctor: '李四',
          number: 'x'
        },
        {
          time: '2022-2-17',
          doctor: '张三',
          number: 'y'
        }
        ]

    }

  },
  methods:{
    loadMedicalRecords(){
      // 将数据库数据呈现到前台
      request.get("",{

      }).then(res=>{
        console.log(res)
        this.medicalRecord=res.data
      })
    },
    viewHealthInfo(){
      //查看健康上报信息
      this.$emit('addNum',this.childNum++)
    },
    //添加一个病历
    addMedicalRecord(){
      console.log('添加了病历');
    },
    tableRowClassName({row}) {
      //是否为自己接诊的患者
      if (row.doctor === '张三') {
        return 'selfPatient';
      }
      else{
        return 'otherPatient';
      }
    },
    myShow({row}){


    }

  }
}
</script>

<style>
.el-table .selfPatient{
  background: #39c5bb;
}
.el-table .otherPatient{
  background: #F2F6FC;
}
</style>





