<template>
  <div class="patient-list">
    <el-table
        :data="props.patientList"
        @row-click="rowClick"
        style="height: 100%"
    >
      <el-table-column prop="name" label="姓名" show-overflow-tooltip>
        <template #default="scope">
          <div style="display: flex;align-items: center;position: relative">
            <img style="width: 25px;height: 25px;margin-right: 10px"
                 :src="scope.row.gender === 1 ? '/static/images/member/man.png' :scope.row.gender === 2 ? '/static/images/member/women.png':'无'"
                 alt="" srcset="">

            <span>{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="手机号" width="180" show-overflow-tooltip></el-table-column>
      <el-table-column prop="status" label="状态" width="180" show-overflow-tooltip>
        <template #default="scope">
          <el-tag
              :type="scope.row.status === 1 ? 'warning' : scope.row.status === 2 ? 'success' : scope.row.status === 3 ? 'info' : 'danger'"
          >
            {{
              scope.row.status === 1 ? '待诊' : scope.row.status === 2 ? '在诊' : scope.row.status === 3 ? '已诊' : scope.row.status ===0 ?  '已取消' : '-'
            }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="organizationSectionId" label="科室" show-overflow-tooltip>
        <template #default="scope">
          {{ sectionList.find((item:any)=>item.id===scope.row.organizationSectionId)?.name || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="organizationDoctorId" label="医生" show-overflow-tooltip>
        <template #default="scope">
          {{ roleList.find((item: any) => item.id === scope.row.organizationDoctorId)?.name || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="visitType" label="初/复诊" show-overflow-tooltip>
        <template #default="scope">
          {{ visitType[scope.row.visitType] || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="createDatetime" label="挂号日期" width="180" show-overflow-tooltip>
        <template #default="scope">
          {{ formatDate(scope.row.createDatetime) || '-' }}
        </template>
      </el-table-column>
      <el-table-column prop="memo" label="备注" show-overflow-tooltip></el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
import {defineProps, onMounted, ref} from 'vue'
import {formatDate} from "@/utils/dateUtils.ts";
import {post} from "@/utils/request.ts";

const props = defineProps({
  patientList: {
    type: Array,
    default: () => []
  }
})
onMounted(() => {
  initDoctor()
  initSection()
})
const visitType = ref<any>({
  0: '初诊',
  1: '复诊'
})
const roleList = ref<any>([])
const sectionList = ref<any>([])
const initDoctor = () => {
  let query = {
    keyword: null,
    role: 1
  }
  post('organization/member/search', {query: query}).then((res: any) => {
    roleList.value = res
  })
}
const emit = defineEmits(['rowClick'])
const rowClick = (row: any) => {
  emit('rowClick', row)
}
const initSection = () => {
  post('organization/section/allList').then((res: any) => {
    sectionList.value = res
  })
}
</script>
<style scoped lang="scss">
.patient-list {
  width: 100%;
  padding: 0 24px;
  height: 100%;
}
</style>