<template>
  <!-- 预约列表 -->
  <div>
    <!-- 搜索 -->
    <el-form ref="form" :inline="true" :model="queryForm" @submit.native.prevent>
      <el-form-item>
        <!-- 患者 -->
        <el-select v-model="queryForm.pkPtPtid" clearable filterable :loading="patientLoading" placeholder="患者搜索" remote
          :remote-method="patientRemoteMethod" reserve-keyword>
          <el-option v-for="item in patientList" :key="item.patientId" :label="item.patientName"
            :value="item.patientId" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- 医生 -->
        <el-select v-model="queryForm.pkDocDocid" clearable filterable :loading="doctorLoading" placeholder="医生搜索"
          remote :remote-method="doctorRemoteMethod" reserve-keyword>
          <el-option v-for="item in doctorList" :key="item.docId" :label="item.docName" :value="item.docId" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- 时间 -->
        <el-date-picker v-model="timeValue" clearable end-placeholder="结束日期" range-separator="至"
          start-placeholder="开始日期" type="daterange" @change="getData" />
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" native-type="submit" type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 内容 -->
    <el-table ref="tableSort" v-loading="listLoading" :data="bookingList" highlight-current-row
      @current-change="selectBooking">
      <el-table-column label="序号" show-overflow-tooltip width="95">
        <template #default="scope">
          {{ (queryForm.pageNum - 1) * 10 + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="医生" prop="doctorVO.docName" show-overflow-tooltip />
      <el-table-column label="患者" prop="patientVO.patientName" show-overflow-tooltip />
      <el-table-column label="性别" prop="patientVO.patientSex" show-overflow-tooltip />
      <el-table-column label="年龄" prop="patientVO.patientAge" show-overflow-tooltip />
      <el-table-column label="身高(cm)" prop="bkHeight" show-overflow-tooltip />
      <el-table-column label="体重(kg)" prop="bkWeight" show-overflow-tooltip />
      <el-table-column label="预约时间" prop="bkBkTime" show-overflow-tooltip />
      <el-table-column label="创建时间" prop="bkCreateTime" show-overflow-tooltip />
    </el-table>
    <div class="pagination">
      <el-pagination :background="true" :current-page="queryForm.pageNum" layout="total, sizes, prev, pager, next, jumper"
      :page-size="queryForm.pageSize" :total="total" @current-change="handleCurrentChange"
      @size-change="handleSizeChange" />
    </div>



  </div>
</template>

<script>
import { getBookList } from '@/api/booking.js'
import { getPatients } from '@/api/booking.js'
import { getDoctorList } from '@/api/booking.js'
import { timeProcessing, startTimeProcessing, endTimeProcessing } from '@/utils/myMethod.js'
export default {
  name: 'Booking',
  props: {
    work: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listLoading: false,
      bookingList: [],
      queryForm: {
        bkHeight: null, //身高
        bkStatus: null, //状态
        bkWeight: null, //体重
        endTime: null, //结束时间
        pkDocDocid: null, //医生ID
        pkPtPtid: null, //患者ID
        startTime: null, //开始时间
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      patientLoading: false,
      patientList: [], //患者列表
      doctorLoading: false,
      doctorList: [], //医生列表
      timeValue: null, //时间

      //选择
      selectedRows: [],
    }
  },
  created() {
    this.getList()
  },
  methods: {
    //选择
    selectBooking(val) {
      if (this.work) {
        //数据处理
        let userInfo = {
          bookingId: val.bookingId,//预约ID
          gender: val.patientVO.patientSex,//性别 0男 1女
          age: val.patientVO.patientAge,//年龄
          height: val.bkHeight,//身高
          weight: val.bkWeight,//体重
          name: val.patientVO.patientName,//患者姓名
          bkBkTime: val.bkBkTime,//预约时间
        }
        this.$emit('selectBookingList', userInfo)
      }

    },
    //获取数据
    getList() {
      if (this.work) {
        this.listLoading = true
        this.bookingList = [
          {
            bookingId: 1,
            doctorVO: {
              docName: '张医生'
            },
            patientVO: {
              patientName: '李患者',
              patientSex: 0,
              patientAge: 20,
            },
            bkHeight: 175,
            bkWeight: 70,
            bkBkTime: '2025-07-22 10:00',
            bkCreateTime: '2025-07-22 10:00'
          },
          {
            bookingId: 2,
            doctorVO: {
              docName: '王医生'
            },
            patientVO: {
              patientName: '赵患者',
              patientSex: 1,
              patientAge: 21,
            },
            bkHeight: 165,
            bkWeight: 55,
            bkBkTime: '2025-07-22 11:00',
            bkCreateTime: '2025-07-22 11:00'
          }
        ]
        this.listLoading = false
      } else {
        getBookList(this.queryForm)
          .then((res) => {
            if (res.success) {
              this.bookingList = res.data.list
              for (let item of this.bookingList) {
                item.bkBkTime = timeProcessing(item.bkBkTime)
                item.bkCreateTime = timeProcessing(item.bkCreateTime)
              }
              this.total = res.data.total
            } else {
              this.$baseMessage(res.msg, 'error')
            }
          })
          .catch((error) => {
            console.log(error)
          })
          .finally(() => {
            this.listLoading = false
          })
      }
    },
    //查询患者
    patientRemoteMethod(query) {
      if (query !== '') {
        this.patientLoading = true
        let param = {
          pageNum: 1,
          pageSize: 10,
          patientName: query,
        }
        getPatients(param)
          .then((res) => {
            if (res.success) {
              this.patientList = res.data.list
            }
            this.patientLoading = false
          })
          .catch((error) => {
            this.patientLoading = false
            this.patientList = []
          })
      }
    },
    //查询医生
    doctorRemoteMethod(query) {
      if (query !== '') {
        this.doctorLoading = true
        let param = {
          pageNum: 1,
          pageSize: 10,
          docName: query,
        }
        getDoctorList(param)
          .then((res) => {
            if (res.success) {
              this.doctorList = res.data.list
            }
            this.doctorLoading = false
          })
          .catch((error) => {
            this.doctorLoading = false
            this.doctorList = []
          })
      }
    },
    //时间筛选
    getData(value) {
      if (value == null) {
        this.queryForm.startTime = null
        this.queryForm.endTime = null
      } else {
        this.queryForm.startTime = startTimeProcessing(value[0])
        this.queryForm.endTime = endTimeProcessing(value[1])
      }
    },
    //查询
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getList()
    },
    //分页
    handleSizeChange(val) {
      this.queryForm.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getList()
    },
  },
}
</script>

<style scoped>
.pagination{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>
