<template>
   <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
         <el-form-item label="数据查询" prop="searchKey">
            <el-input
               v-model="queryParams.searchKey"
               placeholder="患者姓名/项目名称"
               clearable
               style="width: 240px"
               @keyup.enter="handleQuery"
            />
         </el-form-item>
         <el-form-item label="创建时间" style="width: 308px;">
            <el-date-picker
               v-model="authoredTime"
               value-format="YYYY-MM-DD"
               type="daterange"
               range-separator="-"
               start-placeholder="开始日期"
               end-placeholder="结束日期"
            ></el-date-picker>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
         </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">

<!--         <el-col :span="1.5">-->
<!--            <el-button-->
<!--               type="success"-->
<!--               plain-->
<!--               icon="Edit"-->
<!--               :disabled="single"-->
<!--               @click="handleUpdate"-->
<!--            >合管</el-button>-->
<!--         </el-col>-->
         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
      </el-row>

     <el-table
         v-if="refreshTable"
         v-loading="loading"
         :data="dataList"
         row-key="chargeName"
         :default-expand-all="false"
     >
       <!-- 子表列 -->
       <el-table-column
           type="expand"
           width="50"
           fixed="left"
       >
         <template #default="props">
           <el-table
               :data="props.row.children"
               style="width: 100%"
               :show-header="true"
               ref="childTable"
           >
             <el-table-column
                 prop="observationName"
                 label="名称"
             ></el-table-column>
             <el-table-column
                 prop="observationResult"
                 label="结果"
             ></el-table-column>
             <el-table-column
                 prop="specimenName"
                 label="样本"
             >
             </el-table-column>
             <el-table-column
                 prop="referenceRange"
                 label="参考范围"
                >
             </el-table-column>
             <el-table-column
                 prop="receivedDate"
                 label="观测人"
             ></el-table-column>
             <el-table-column
                 prop="observationDate"
                 label="观测时间"
             ></el-table-column>
           </el-table>
         </template>
       </el-table-column>
       <!-- 母表列 -->
       <el-table-column
           prop="chargeName"
           label="项目名称"
           :sortable="true"
       ></el-table-column>
       <el-table-column
           prop="patientName"
           label="患者姓名"
           :sortable="true"
       ></el-table-column>
       <el-table-column
           prop="genderEnumText"
           label="性别"
           :sortable="true"
       ></el-table-column>
       <el-table-column
           prop="doctorName"
           label="开单医生"
           :sortable="true"
       ></el-table-column>
       <el-table-column
           prop="authoredTime"
           label="开单时间"
           :sortable="true"
       ></el-table-column>
       <el-table-column
           label="操作"
           width="120"
           fixed="right"
       >
         <template #default="scope">
           <el-button
               type="primary"
               size="mini"
               @click="printReport(scope.row)"
           >
             打印报告
           </el-button>
         </template>
       </el-table-column>
     </el-table>

     <pagination
         v-show="total > 0"
         :total="total"
         v-model:page="queryParams.pageNum"
         v-model:limit="queryParams.pageSize"
         @pagination="getList"
     />

   </div>
</template>

<script setup name="Config">
import {reportList, reports} from "./components/report.js";
import {formatDateStr} from "@/utils/index.js";

const { proxy } = getCurrentInstance();

const dataList = ref([]);
const refreshTable = ref(true);

const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const authoredTime = ref([
    //默认三天前
  formatDateStr(new Date(new Date().setDate(new Date().getDate() - 3)), 'YYYY-MM-DD'),
  formatDateStr(new Date(), 'YYYY-MM-DD'),
]);

const data = reactive({
  form: {},
  queryParams: {
    pageNo: 1,
    pageSize: 10,
    searchKey: undefined
  },
});

const { queryParams, form, rules } = toRefs(data);

/** 查询参数列表 */
function getList() {
  loading.value = true;
  queryParams.value.authoredTimeSTime = authoredTime.value[0] + ' 00:00:00';
  queryParams.value.authoredTimeETime = authoredTime.value[1] + ' 23:59:59';
  reportList(queryParams.value).then(response => {
    dataList.value = proxy.handleTree(response.data.records , "id");
    total.value = response.data.total;
    loading.value = false;
  });
}
/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}
/** 表单重置 */

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNo = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleQuery();
}
function printReport(row) {
  reports(row.id).then( response => {

  })
}


getList();
</script>
