<template>

  <div style="display: flex">




    <div style="flex: 2">
      <el-table :data="patientData" :row-class-name="tableRowClassName" style="width: 100%" >
        <el-table-column prop="username" label="患者姓名" />
        <el-table-column prop="userid" style="width: 1px" v-if="showId" type="userid"></el-table-column>
        <el-table-column prop="sex" label="性别" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="contact" label="联系方式" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
                size="small"
                type=""
                @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 style="height: 50px"></div>

    </div>


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

</template>

<script>

import request from "@/utils/request";



export default {
  name: 'DoctorHomeView',
  components: {


  },
  mounted: function() {
    //显示患者信息
    //this.loadPatientInfo()
  },

  data(){
    return{
      data: 'A',
      showId: false,
      currentPage:1,
      pageSize:10,
      total:0,
      patientData:[
        {
          username: '1',
          sex: '1',
          age: 'a',
          contact: '1'
        }

      ],

    }
  },
  methods:{
    loadPatientInfo(){
      // 将数据库数据呈现到前台
      request.get("/doctor//getAllMyUsers",{
        params:{userid:this.$store.getters.userid}
      }).then(res=>{

        this.patientData=res.data
      })
    },
    tableRowClassName({row}) {
      //健康状态异常的条件
      if (row.username === '张三') {
        return 'dangerousPatient';
      }
      else{
        return 'normalPatient';
      }
    },
    myShow(){
      this.data.type = 'B'
    }




  }


}
</script>


<style>
.el-table .dangerousPatient{
  background: red;
}
.el-table .normalPatient{
  background: #F2F6FC;
}
</style>