<template>
  <el-container>
    <el-header height="36px" style="margin-top: 8px">
      <el-date-picker
        v-model="dateRange"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :shortcuts="shortcuts"
        style="width: 260px"
      ></el-date-picker>
      <el-select v-model="overviewParam.ward" style="width: 130px" placeholder="请选择科室" filterable clearable>
        <el-option v-for="item in userWards" :key="item.code" :value="item.code" :label="item.name"></el-option>
      </el-select>
      <el-select v-model="overviewParam.fileStatus" style="width: 90px">
        <el-option label="未签收" value="0"></el-option>
        <el-option label="已签收" value="1"></el-option>
      </el-select>
      <el-select v-model="overviewParam.lateFlag" style="width: 90px">
        <el-option label="全部" value="3"></el-option>
        <el-option label="迟交" value="1"></el-option>
        <el-option label="未迟交" value="0"></el-option>
      </el-select>
      <el-input v-model="overviewParam.bah" style="width: 110px" placeholder="住院号" clearable></el-input>
      <el-button type="primary" icon="el-icon-search" @click="searchPatient">检索</el-button>
      <el-button type="primary" icon="el-icon-s-operation" @click="showAdvanceSearch = true">高级条件检索</el-button>
      <el-divider direction="vertical"></el-divider>

      <el-dropdown trigger="click" type="primary" @command="handleCommand">
        <el-button type="primary">功能菜单<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item icon="el-icon-upload" command="save">保存首页<span class="keyboard">Ctrl + s</span></el-dropdown-item>
            <el-dropdown-item icon="el-icon-printer" command="sign" divided>签收首页<span class="keyboard">Ctrl + a</span></el-dropdown-item>
            <el-dropdown-item icon="el-icon-printer" command="unSign">解除签收</el-dropdown-item>
            <el-dropdown-item icon="el-icon-printer" command="allLate" divided>迟交总览</el-dropdown-item>
            <el-dropdown-item icon="el-icon-printer" command="lend" divided>借阅标记</el-dropdown-item>
            <el-dropdown-item icon="el-icon-printer" command="unLend">借阅归还</el-dropdown-item>
            <el-dropdown-item icon="el-icon-printer" command="print1" divided>打印正面</el-dropdown-item>
            <el-dropdown-item icon="el-icon-printer" command="print2">打印反面</el-dropdown-item>
            <el-dropdown-item icon="el-icon-printer" command="confirmPrint">确认已打印</el-dropdown-item>
            <el-dropdown-item icon="el-icon-printer" command="exportExcel" divided>导出Excel</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-header>
    <el-container>
      <el-aside width="350px">
        <el-table :data="overview.slice((currentPage - 1) * 15, currentPage * 15)" :height="tableHeight" stripe highlight-current-row @row-click="fetchSheetInfo">
          <el-table-column label="姓名" width="80">
            <template #default="scope">
              <img class="sex-icon" :src="scope.row.sex === 1 ? maleIcon : femaleIcon" />
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column prop="bah" label="住院号" width="70"></el-table-column>
          <el-table-column prop="times" label="次数" width="40"></el-table-column>
          <el-table-column prop="doctorName" label="医生" width="60"></el-table-column>
          <el-table-column prop="signDate" label="签收日期"></el-table-column>
        </el-table>
        <el-pagination small :hide-on-single-page="false" :page-size="15" layout="prev, pager, next" @current-change="handleCurrentPageChange" :total="overview.length">
        </el-pagination>
      </el-aside>
      <el-main>
        <div style="display: flex">
          <div :style="mainInfo">
            <div id="page0">
              <h3 style="width: 100%; font-size: 17px; text-align: center">住 院 病 案 首 页</h3>
              <div style="width: 100%; height: 32px; line-height: 32px; font-size: 15px; text-align: center">
                医疗机构: <span style="font-weight: 700">湖南泰和医院</span> （组织机构代码: <span style="font-weight: 700">43010150145</span>）
              </div>
              <div style="height: 25px; line-height: 25px; display: flex">
                <div>
                  医疗付费方式:
                  <select v-model="sheet.payMethod" style="width: 180px">
                    <option v-for="(item, index) in dics.getPayMethod" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                  </select>
                </div>
                <div style="width: 120px; margin-left: 12px">健康卡号: {{ sheet.healthCardNo }}</div>
                <div style="width: 100px">第&nbsp;{{ sheet.admissTimes }}&nbsp;次住院</div>
                <div style="width: 130px">病案号: {{ sheet.bah }}</div>
              </div>
            </div>
            <div id="page1" style="border: 1px solid black; padding: 5px">
              <div>
                姓名: <input id="name" v-model="sheet.name" style="width: 70px" />
                性别:
                <select id="sex" v-model="sheet.sex">
                  <option v-for="(item, index) in dics.getSexCode" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                出生日期: <input id="birthDate" v-model="sheet.birthDate" style="width: 130px" /> 年龄:
                <input id="age" v-model="sheet.age" style="width: 30px" />
                国籍:
                <select id="country" v-model="sheet.country">
                  <option v-for="(item, index) in dics.getCountry" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
              </div>
              <div>
                （年龄不足 1 周岁的）年龄:
                <input id="ageDays" v-model="sheet.ageDays" style="width: 50px" />天 新生儿出生体重:
                <input id="newBornWeight" v-model="sheet.newBornWeight" style="width: 70px" />克 新生儿入院体重:
                <input id="newBornAdmissWeight" v-model="sheet.newBornAdmissWeight" style="width: 70px" />克
              </div>
              <div>
                出生地:
                <input id="birthPlaceName" v-model="sheet.birthPlaceName" style="width: 230px" @click="showSearchData('birth')" />
                籍贯:
                <input id="nativePlaceName" v-model="sheet.nativePlaceName" style="width: 170px" @click="showSearchData('native')" />
                民族:
                <select id="nation" v-model="sheet.nation">
                  <option v-for="(item, index) in dics.getNation" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
              </div>
              <div>
                身份证号:
                <input id="socialNo" v-model="sheet.socialNo" style="width: 160px" maxlength="18" />
                职业:
                <select id="occupation" v-model="sheet.occupation">
                  <option v-for="(item, index) in dics.getOccupation" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                婚姻:
                <select id="marriage" v-model="sheet.marriage">
                  <option v-for="(item, index) in dics.getMarriageCode" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
              </div>
              <div>
                现住址: <input id="livePlace" v-model="sheet.livePlace" style="width: 300px" /> 电话: <input id="phone" v-model="sheet.phone" style="width: 90px" /> 邮编:
                <input id="addrZipCode" v-model="sheet.addrZipCode" style="width: 70px" maxlength="6" />
              </div>
              <div>
                户口地址:
                <input id="hkPlaceName" v-model="sheet.hkPlaceName" style="width: 300px" @click="showGoSearchBtn1 = true" @blur="dismissShowSearch(1)" />
                <el-button icon="el-icon-search" type="primary" v-show="showGoSearchBtn1" @click="showSearchData('hk')">前往搜索</el-button>
                邮编:
                <input id="hkZipCode" v-model="sheet.hkZipCode" style="width: 70px" maxlength="6" />
              </div>
              <div>
                工作单位及地址:
                <input id="unitName" v-model="sheet.unitName" style="margin-right: 0; width: 145px" />
                /<input id="unitPlace" v-model="sheet.unitPlace" style="width: 145px" /> 单位电话: <input id="unitPhone" v-model="sheet.unitPhone" style="width: 80px" /> 邮编:
                <input id="unitZipCode" v-model="sheet.unitZipCode" style="width: 50px" maxlength="6" />
              </div>
              <div>
                联系人姓名: <input id="contactName" v-model="sheet.contactName" style="width: 90px" />
                联系人关系:
                <select id="contactRelation" v-model="sheet.contactRelation">
                  <option v-for="(item, index) in dics.getRelations" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
              </div>
              <div>
                联系人地址:
                <input id="contactAddrName" v-model="sheet.contactAddrName" style="width: 300px" @click="showGoSearchBtn2 = true" @blur="dismissShowSearch(2)" />
                <el-button icon="el-icon-search" type="primary" v-show="showGoSearchBtn2" @click="showSearchData('contact')">前往搜索</el-button>
                联系人电话: <input id="contactPhone" v-model="sheet.contactPhone" style="width: 90px" />
              </div>
              <div>
                入院途径:
                <select id="zyAdmissWay" v-model="sheet.zyAdmissWay">
                  <option v-for="(item, index) in dics.getAdmissWay" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                是否手术:
                <select id="hasSurgery" v-model="sheet.hasSurgery" @change="hasSurgeryChanged(sheet.hasSurgery)">
                  <option v-for="itm in operations" :key="itm.code" :value="itm.code">{{ itm.name }}</option>
                </select>
              </div>
              <div>
                入院时间:<input id="admissDate" v-model="sheet.admissDate" readonly style="width: 135px" /> 入院科别:<input
                  v-model="sheet.admissDept"
                  readonly
                  style="width: 120px"
                />
                病房:<input v-model="sheet.admissWard" readonly style="width: 80px" /> 转科科别:<input v-model="sheet.transDept" readonly style="width: 120px" />
              </div>
              <div>
                出院时间:<input id="dismissDate" v-model="sheet.dismissDate" readonly style="width: 135px" /> 出院科别:<input
                  v-model="sheet.dismissDept"
                  readonly
                  style="width: 120px"
                />
                病房:<input v-model="sheet.dismissWard" readonly style="width: 80px" /> 住院天数:<input id="admissDays" v-model="sheet.admissDays" style="width: 70px" />
              </div>
              <div>
                门（急）诊诊断:
                <input v-model="sheet.clinicDiagStr" style="width: 350px" readonly />
                疾病编码:
                <input v-model="sheet.clinicDiagCode" readonly style="width: 110px" />
              </div>
              <div id="diagTable" style="height: max-content; display: flex; width: 720px">
                <div style="width: 360px">
                  <table style="width: 100%; border: 1px solid black; border-collapse: collapse">
                    <tr>
                      <th>主要诊断</th>
                      <th>疾病编码</th>
                      <th>入院病情</th>
                      <th>出院病情</th>
                    </tr>
                    <tr>
                      <td>
                        <input id="disdiagMain" style="border: none !important; width: 170px" v-model="sheet.disdiagList[0].name" @click="onSearchDiagFocus(0)" readonly />
                        <div v-show="showDel[0]" class="not-print" style="width: 100%; text-align: center">
                          <el-button type="primary" icon="el-icon-edit" @click="showSearch = true">修改</el-button>
                        </div>
                      </td>
                      <td style="text-align: center">
                        <input style="border: none !important; width: 100px" v-model="sheet.disdiagList[0].code" readonly />
                      </td>
                      <td>
                        <select id="disdiagMainAdmStatus" style="border: none !important; width: 30px" v-model="sheet.disdiagList[0].admissStatus">
                          <option v-for="(item, index) in dics.getDisAdmissStatus" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.code }}&nbsp;&nbsp;</option>
                        </select>
                      </td>
                      <td>
                        <select style="border: none !important; width: 30px" v-model="sheet.disdiagList[0].dismissStatus" @change="handleSelectCybq">
                          <option v-for="(item, index) in dics.getDisdiagStatus" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.code }}&nbsp;&nbsp;</option>
                        </select>
                      </td>
                    </tr>
                    <tr>
                      <th colspan="4">其他诊断</th>
                    </tr>
                    <tr v-for="n in 11" :key="n">
                      <td>
                        <input style="border: none !important; text-align: left; padding-left: 5px" v-model="sheet.disdiagList[n].name" @click="onSearchDiagFocus(n)" readonly />
                        <div v-show="showDel[n]" class="not-print" style="width: 100%; text-align: center">
                          <el-button type="primary" circle icon="el-icon-edit" @click="showSearch = true"></el-button>
                          <el-button type="danger" circle icon="el-icon-delete" @click="deleteDisdiag(n)"></el-button>
                          <el-button type="success" circle icon="el-icon-plus" @click="insertDisdiag(n)"></el-button>
                        </div>
                      </td>
                      <td>
                        <input style="border: none !important; width: 90px" v-model="sheet.disdiagList[n].code" readonly />
                      </td>
                      <td>
                        <select style="border: none !important; width: 30px" v-model="sheet.disdiagList[n].admissStatus">
                          <option v-for="(item, index) in dics.getDisAdmissStatus" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.code }}&nbsp;&nbsp;</option>
                        </select>
                      </td>
                      <td>
                        <select style="border: none !important; width: 30px" v-model="sheet.disdiagList[n].dismissStatus" @change="handleSelectCybq">
                          <option v-for="(item, index) in dics.getDisdiagStatus" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.code }}&nbsp;&nbsp;</option>
                        </select>
                      </td>
                    </tr>
                  </table>
                </div>
                <div style="width: 360px">
                  <table style="border: 1px solid black; border-collapse: collapse">
                    <tr v-for="n in 14" :key="n">
                      <td>
                        <input style="border: none !important; width: 170px" v-model="sheet.disdiagList[n + 11].name" @click="onSearchDiagFocus(n + 11)" readonly />
                        <div v-show="showDel[n + 11]" class="not-print" style="width: 100%; text-align: center">
                          <button circle @click="showSearch = true">
                            <i class="el-icon-edit"></i>
                          </button>
                          <button circle @click="deleteDisdiag(n + 11)">
                            <i class="el-icon-delete"></i>
                          </button>
                          <button circle @click="insertDisdiag(n + 11)">
                            <i class="el-icon-upload"></i>
                          </button>
                        </div>
                      </td>
                      <td>
                        <input style="border: none !important; width: 100px" v-model="sheet.disdiagList[n + 11].code" readonly />
                      </td>
                      <td>
                        <select style="border: none !important; width: 30px" v-model="sheet.disdiagList[n + 11].admissStatus">
                          <option v-for="(item, index) in dics.getDisAdmissStatus" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.code }}&nbsp;&nbsp;</option>
                        </select>
                      </td>
                      <td>
                        <select style="border: none !important; width: 30px" v-model="sheet.disdiagList[n + 11].dismissStatus" @change="handleSelectCybq">
                          <option v-for="(item, index) in dics.getDisdiagStatus" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.code }}&nbsp;&nbsp;</option>
                        </select>
                      </td>
                    </tr>
                  </table>
                </div>
              </div>
              <div style="border-bottom: 1px solid black; font-size: 12px">
                备注：
                <span>入院病情：</span>1.有，2.临床未确定，3.情况不明，4.无 <span style="margin-left: 10px">出院病情：</span>1.治愈，2.好转，3.未愈，4.死亡，9.其他
              </div>
              <div>
                损伤、中毒的外部原因:
                <input id="hurtReasonName" v-model="sheet.hurtReasonName" style="width: 300px" @click="showSearchData('hurt')" />
                疾病编码:
                <input id="hurtReasonCode" v-model="sheet.hurtReasonCode" style="width: 110px" readonly />
              </div>
              <div>
                病理诊断:
                <input id="pathologicDiagStr" v-model="sheet.pathologicDiagStr" style="width: 300px" @click="showSearchData('pathologic')" />
                病理编码:
                <input id="pathologicDiagCode" v-model="sheet.pathologicDiagCode" style="width: 90px" readonly />
                病理号: <input id="blh" v-model="sheet.blh" style="width: 70px" />
              </div>
              <div>
                药物过敏:
                <select id="allergy" v-model="sheet.allergy" @change="onAllergyChanged">
                  <option v-for="(item, index) in haveOrNot" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                ，过敏药物:
                <input id="allergicMedicine" v-model="sheet.allergicMedicine" style="width: 110px" />
                死亡患者尸检:
                <select id="autopsy" v-model="sheet.autopsy">
                  <option v-for="(item, index) in autopsies" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
              </div>
              <div>
                输血前四项: HbsAg
                <select id="hbsAg" v-model="sheet.hbsAg">
                  <option v-for="(item, index) in dics.getHbsag" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                HCV-Ab
                <select id="hcvAb" v-model="sheet.hcvAb" style="margin-left: 8px">
                  <option v-for="(item, index) in dics.getHbsag" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                HIV-Ab
                <select id="hivAb" v-model="sheet.hivAb" style="margin-left: 8px">
                  <option v-for="(item, index) in dics.getHbsag" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                TP-Ab
                <select id="tpAb" v-model="sheet.tpAb" style="margin-left: 8px">
                  <option v-for="(item, index) in dics.getHbsag" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
              </div>
              <div>
                血型:
                <select id="bloodType" v-model="sheet.bloodType" @change="handleSelectBloodType">
                  <option v-for="(item, index) in dics.getBloodType" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                Rh:
                <select id="rh" v-model="sheet.rh">
                  <option v-for="(item, index) in dics.getHbsag" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
              </div>
              <div>
                科室主任:
                <input id="deptLeaderName" style="width: 70px" v-model="sheet.deptLeaderName" @click="showSearchData('deptleader')" />
                主任(副主任)医师:
                <input id="leaderDoctorName" style="width: 70px" v-model="sheet.leaderDoctorName" @click="showSearchData('leaderdoctor')" />
                主治医师:
                <input id="mainDoctorName" style="width: 70px" v-model="sheet.mainDoctorName" @click="showSearchData('maindoctor')" />
                住院医师:
                <input id="admissDoctorName" style="width: 70px" v-model="sheet.admissDoctorName" @click="showSearchData('admissdoctor')" />
              </div>
              <div>
                责任护士:
                <input id="dutyNurseName" style="width: 70px" v-model="sheet.dutyNurseName" @click="showSearchData('dutynurse')" />
                进修医师:
                <input id="studyDoctorName" style="width: 70px" v-model="sheet.studyDoctorName" @click="showSearchData('studydoctor')" />
                实习医师:
                <input id="internshipDoctorName" style="width: 70px" v-model="sheet.internshipDoctorName" @click="showSearchData('internshipdoctor')" />
                编码员:
                <input style="width: 70px" v-model="sheet.coderName" @click="showSearchData('coder')" />
              </div>
              <div>
                病案质量:
                <select id="qualityControlLevel" v-model="sheet.qualityControlLevel">
                  <option v-for="(item, index) in dics.getQualityLevel" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                质控医师:
                <input id="qualityControlDoctorName" style="width: 70px" v-model="sheet.qualityControlDoctorName" @click="showSearchData('qualitycontroldoctor')" />
                质控护士:
                <input style="width: 70px" v-model="sheet.qualityControlNurseName" @click="showSearchData('qualitycontrolnurse')" />
                质控日期:
                <input id="qualityControlDate" style="width: 170px" type="date" v-model="sheet.qualityControlDate" />
              </div>
            </div>
            <div id="page2" style="border: 1px solid black; padding: 5px">
              <table id="surgeryTable" style="border: 1px solid black; border-collapse: collapse; width: 100%">
                <tr>
                  <th rowspan="2">手术及操作名称</th>
                  <th rowspan="2" style="width: 70px">手术及操作日期</th>
                  <th rowspan="2" style="width: 10px">手术级别</th>
                  <th rowspan="2">手术及操作编码</th>
                  <th colspan="3">手术及操作医师</th>
                  <th rowspan="2" style="width: 30px">切口愈合等级</th>
                  <th rowspan="2">麻醉方式</th>
                  <th rowspan="2">麻醉医师</th>
                </tr>
                <tr>
                  <th>术者</th>
                  <th>I助</th>
                  <th>II助</th>
                </tr>
                <tr v-for="n in 5" :key="n">
                  <td style="padding: 3px">
                    <textarea
                      id="surgeryMain"
                      style="border: none !important; width: 90px"
                      rows="3"
                      v-model="sheet.surgeryList[n - 1].name"
                      @click="onSearchSurgeryFocus(n - 1)"
                      readonly
                    ></textarea>
                    <div v-show="showDel[n - 1]" class="not-print" style="width: 100%; text-align: center">
                      <el-button type="primary" circle icon="el-icon-edit" @click="showSearch = true"></el-button>
                      <el-button type="danger" circle icon="el-icon-delete" @click="deleteSurgery(n - 1)"></el-button>
                    </div>
                  </td>
                  <td style="padding: 3px">
                    <textarea style="border: none !important; width: 70px" v-model="sheet.surgeryList[n - 1].date" rows="3"></textarea>
                  </td>
                  <td style="text-align-last: center">
                    <select style="border: none !important; width: 30px" v-model="sheet.surgeryList[n - 1].level">
                      <option v-for="(item, index) in dics.getOperateScale" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.code }}</option>
                    </select>
                  </td>
                  <td>
                    <input v-model="sheet.surgeryList[n - 1].code" style="border: none !important; width: 70px" readonly />
                  </td>
                  <td>
                    <input style="border: none !important; width: 40px" v-model="sheet.surgeryList[n - 1].operatorName" @click="showSearchSurgerior('operator', n)" />
                  </td>
                  <td style="width: 50px">
                    <input style="border: none !important; width: 40px" v-model="sheet.surgeryList[n - 1].assistantOneName" @click="showSearchSurgerior('assistantone', n)" />
                  </td>
                  <td style="width: 50px">
                    <input style="border: none !important; width: 40px" v-model="sheet.surgeryList[n - 1].assistantTwoName" @click="showSearchSurgerior('assistanttwo', n)" />
                  </td>
                  <td style="text-align-last: center">
                    <select v-model="sheet.surgeryList[n - 1].cutHeal" style="border: none !important">
                      <option v-for="(item, index) in dics.getCutHealGrade" :key="index" :value="item.code">
                        {{ item.code }}
                      </option>
                    </select>
                  </td>
                  <td>
                    <select v-model="sheet.surgeryList[n - 1].anaesthesia" style="border: none !important">
                      <option v-for="(item, index) in dics.getAnaesthesia" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                    </select>
                  </td>
                  <td>
                    <input style="border: none !important; width: 40px" v-model="sheet.surgeryList[n - 1].anaesthesiaorName" @click="showSearchSurgerior('anaesthesiaor', n)" />
                  </td>
                </tr>
              </table>
              <div>
                离院方式:
                <select id="zyDismissWay" v-model="sheet.zyDismissWay" @change="onDismissWayChanged">
                  <option v-for="(item, index) in dics.getZyDismissWay" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                ，拟接收医疗机构名称:
                <input id="dismissDestination" v-model="sheet.dismissDestination" style="width: 210px" />
              </div>
              <div>
                是否有出院31天内再住院计划:
                <select id="admissAgainInOneMonth" v-model="sheet.admissAgainInOneMonth" @change="onAdmissAgainChanged">
                  <option v-for="(item, index) in haveOrNot" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                ，目的:
                <input id="admissAgainPurpose" v-model="sheet.admissAgainPurpose" style="width: 300px" />
              </div>
              <div>
                颅脑损伤患者昏迷时间: 入院前<input id="comaDaysBeforeAdmiss" v-model="sheet.comaDaysBeforeAdmiss" style="width: 30px" />天
                <input id="comaHoursBeforeAdmiss" v-model="sheet.comaHoursBeforeAdmiss" style="width: 30px" />小时
                <input id="comaMinutesBeforeAdmiss" v-model="sheet.comaMinutesBeforeAdmiss" style="width: 30px" />分钟 入院后<input
                  v-model="sheet.comaDaysAfterAdmiss"
                  style="width: 30px"
                />天 <input id="comaHoursAfterAdmiss" v-model="sheet.comaHoursAfterAdmiss" style="width: 30px" />小时
                <input id="comaMinutesAfterAdmiss" v-model="sheet.comaMinutesAfterAdmiss" style="width: 30px" />分钟
              </div>
              <div>
                住院费用（元）: 总费用
                <input v-model="sheet.totalCost" style="width: 110px" readonly />
                (自付金额:
                <input v-model="sheet.selfPay" style="width: 110px" readonly />)
              </div>
              <div>
                1.综合医疗服务类: (1)一般医疗服务费:
                <input v-model="sheet.generalMedicalServiceFee" style="width: 70px" readonly />
                (2)一般治疗操作费:
                <input v-model="sheet.generalTreatmentOperatingFee" style="width: 70px" readonly />
                (3)护理费:
                <input v-model="sheet.careFee" style="width: 50px" readonly />
              </div>
              <div>
                (4)其他费:
                <input v-model="sheet.elseFee" style="width: 70px" readonly />
              </div>
              <div>
                2.诊断类: (5)病理诊断费:
                <input v-model="sheet.pathologicDiagFee" style="width: 70px" readonly />
                (6)实验室诊断费:
                <input v-model="sheet.experimentDiagFee" style="width: 70px" readonly />
                (7)影像学诊断费:
                <input v-model="sheet.ctDiagFee" style="width: 70px" readonly />
              </div>
              <div>
                (8)临床诊断项目费:
                <input v-model="sheet.clinicalDiagFee" style="width: 70px" readonly />
              </div>
              <div>
                3.治疗类: (9)非手术治疗项目费:
                <input v-model="sheet.notSurgicalFee" style="width: 70px" readonly />
                (临床物理治疗费:
                <input v-model="sheet.clinicalPhysicalFee" style="width: 70px" readonly />)
              </div>
              <div>
                (10)手术治疗费:
                <input v-model="sheet.surgicalFee" style="width: 70px" readonly />
                (麻醉费:
                <input v-model="sheet.anesthetizeFee" style="width: 70px" readonly />
                &nbsp;&nbsp;手术费:
                <input v-model="sheet.surgeryFee" style="width: 70px" readonly />)
              </div>
              <div>
                4.康复类: (11)康复费:
                <input v-model="sheet.recoverFee" style="width: 70px" readonly />
              </div>
              <div>
                5.中医类: (12)中医治疗费:
                <input v-model="sheet.tcmTreatmentFee" style="width: 70px" readonly />
              </div>
              <div>
                6.西药类: (13)西药费:
                <input v-model="sheet.westMedicineFee" style="width: 70px" readonly />
              </div>
              <div>
                7.中药类: (14)中成药费:
                <input v-model="sheet.chinesePatentMedicineFee" style="width: 70px" readonly />
                (15)中草药费:
                <input v-model="sheet.chineseHerbalMedicineFee" style="width: 70px" readonly />
              </div>
              <div>
                8.血液和血液制品类: (16)血费:
                <input v-model="sheet.bloodFee" style="width: 50px" readonly />
                (17)白蛋白类制品费:
                <input v-model="sheet.albuminProductsFee" style="width: 50px" readonly />
                (18)球蛋白类制品费:
                <input v-model="sheet.globulinProductsFee" style="width: 50px" readonly />
              </div>
              <div>
                (19)凝血因子类制品费:
                <input v-model="sheet.coagulationFactorProductsFee" style="width: 70px" readonly />
                (20)细胞因子类制品费:
                <input v-model="sheet.cytokineProductsFee" style="width: 70px" readonly />
              </div>
              <div>
                9.耗材类: (21)检查用一次性医用材料费:
                <input v-model="sheet.costOfDisposableMedicalMaterialsForExamination" style="width: 70px" readonly />
                (22)治疗用一次性医用材料费:
                <input v-model="sheet.costOfDisposableMedicalMaterialsForTreatment" style="width: 70px" readonly />
              </div>
              <div>
                (23)手术用一次性医用材料费:
                <input v-model="sheet.costOfDisposableMedicalMaterialsForOperation" style="width: 70px" readonly />
              </div>
              <div>
                10.其他类: (24)其他费:
                <input v-model="sheet.otherFees" style="width: 70px" readonly />
              </div>
              <div>
                主要诊断治愈好转情况:
                <span style="border-bottom: 1px solid black; padding: 0 5px">
                  {{ filterDismissStatus(sheet.disdiagList[0].dismissStatus) }}
                </span>
              </div>
              <div>
                诊断符合情况: 门诊与出院
                <select id="diagConform1" v-model="sheet.diagConform1" style="margin-right: 12px">
                  <option v-for="(item, index) in dics.getDiagConform" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                入院与出院
                <select id="diagConform2" v-model="sheet.diagConform2">
                  <option v-for="(item, index) in dics.getDiagConform" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
              </div>
              <div>
                术前与术后
                <select id="diagConform3" v-model="sheet.diagConform3" style="margin-right: 12px">
                  <option v-for="(item, index) in dics.getDiagConform" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                临床与病理
                <select id="diagConform4" v-model="sheet.diagConform4" style="margin-right: 12px">
                  <option v-for="(item, index) in dics.getDiagConform" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                放射与病理
                <select id="diagConform5" v-model="sheet.diagConform5">
                  <option v-for="(item, index) in dics.getDiagConform" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
              </div>
              <div>
                抢救情况: 抢救
                <input id="rescueTimes" v-model="sheet.rescueTimes" type="number" style="width: 90px" />次， 成功
                <input id="rescueSuccessTimes" v-model="sheet.rescueSuccessTimes" type="number" style="width: 90px" />次
              </div>
              <div>
                病例分型:
                <select id="caseClassification" v-model="sheet.caseClassification" style="margin-right: 12px">
                  <option v-for="(item, index) in dics.getCaseClassification" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                实施重症监护:
                <select id="hasIcu" v-model="sheet.hasIcu" @change="handleSelectIcu">
                  <option v-for="(item, index) in haveOrNot" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                ，监护总时间:
                <input id="icuDays" v-model="sheet.icuDays" style="width: 30px" />天 <input id="icuHours" v-model="sheet.icuHours" style="width: 30px" />小时
              </div>
              <div>
                单病种管理:
                <select id="monopathyManagement" v-model="sheet.monopathyManagement" style="margin-right: 12px">
                  <option v-for="(item, index) in yesOrNo" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                实施临床路径管理:
                <select id="clinicalPathwayManagement" v-model="sheet.clinicalPathwayManagement" style="margin-right: 12px">
                  <option v-for="(item, index) in dics.getClinicalPathwayManagement" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                实施DRGs管理:
                <select id="drgsManagement" v-model="sheet.drgsManagement">
                  <option v-for="(item, index) in dics.getDrgsManagement" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
              </div>
              <div>
                抗生素使用:
                <select id="useAntibiotic" v-model="sheet.useAntibiotic" style="margin-right: 12px">
                  <option v-for="(item, index) in yesOrNo" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                细菌培养标本送检:
                <select id="bacilliculture" v-model="sheet.bacilliculture" style="margin-right: 12px">
                  <option v-for="(item, index) in yesOrNo" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                法定传染病:
                <select id="statutoryEpidemic" v-model="sheet.statutoryEpidemic">
                  <option v-for="(item, index) in dics.getStatutoryEpidemic" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
              </div>
              <div>
                肿瘤分期: T
                <select id="tumorLevelT" v-model="sheet.tumorLevelT" style="margin-right: 12px">
                  <option v-for="(item, index) in dics.getTumorLevelT" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                N
                <select id="tumorLevelN" v-model="sheet.tumorLevelN" style="margin-right: 12px">
                  <option v-for="(item, index) in dics.getTumorLevelN" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                M
                <select id="tumorLevelM" v-model="sheet.tumorLevelM" style="margin-right: 12px">
                  <option v-for="(item, index) in dics.getTumorLevelM" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                分期
                <select id="tumorLevel" v-model="sheet.tumorLevel" style="margin-right: 18px">
                  <option v-for="(item, index) in dics.getTumorLevel" :key="index" :value="item.code">&nbsp;&nbsp;{{ item.name }}&nbsp;&nbsp;</option>
                </select>
                新生儿Apgar评分: <input style="margin-right: 0; width: 50px" v-model="sheet.xxeApgar" />分
              </div>
            </div>
          </div>
          <div class="page-wrapper" :style="isCollapse ? collapseMessageArea : messageArea">
            <div class="page-inner">
              <el-tag type="success" size="small">当前科室CD型病例比例：{{ cdPercentage }}</el-tag>
              <div style="border-bottom: 1px solid black; margin: 6px 0 6px 0"></div>
              <div v-show="forceVerifies.length > 0" style="padding: 8px 0 4px 0; font-weight: bold">以下条目为强制要求，请完善。</div>
              <div v-for="(item, index) in forceVerifies" :key="index" class="message-item" :style="messageColor(index)" @click="handleClickMessage(item.code, index)">
                {{ index + 1 }}、{{ item.name }}
              </div>
              <div v-show="adviceVerifies.length > 0" style="padding: 8px 0 4px 0; font-weight: bold">以下条目为建议执行，不做强制要求。</div>
              <div v-for="(item, index) in adviceVerifies" :key="index" style="padding: 6px; margin-bottom: 6px; border-radius: 4px; background: #eea7a752; color: #ff2b2b">
                {{ index + 1 }}、{{ item.name }}
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>

    <el-dialog v-model="showAdvanceSearch" title="高级条件检索" width="380px">
      <div style="margin-top: 5px">
        <el-tag type="info">医生条件</el-tag>
        <div style="margin-top: 5px">
          &nbsp;&nbsp;医生姓名：<el-input v-model="advanceSearch.doctorName" style="width: 160px" clearable @click="showSearchData('advanceSearchDoctor')"></el-input>
        </div>
      </div>
      <div style="margin-top: 10px">
        <el-tag type="info">患者条件</el-tag>
        <div style="margin-top: 5px">
          &nbsp;&nbsp;诊断编码：<el-input v-model="advanceSearch.icdCode" style="width: 160px" clearable @click="showSearchData('advanceSearchDiag')"></el-input>
        </div>
        <div style="margin-top: 5px">
          &nbsp;&nbsp;手术编码：<el-input v-model="advanceSearch.surgeryCode" style="width: 160px" clearable @click="showSearchData('advanceSearchSurgery')"></el-input>
        </div>
        <div style="margin-top: 5px">
          &nbsp;&nbsp;患者性别：
          <el-select v-model="advanceSearch.sex" style="width: 100px" clearable>
            <el-option v-for="item in dics.getSexCode" :key="item.code" :value="item.code" :label="item.name"></el-option>
          </el-select>
        </div>
      </div>
      <div style="width: 100%; text-align: right; margin-top: 15px">
        <el-button icon="el-icon-search" type="primary" @click="doAdvanceSearch">开始检索</el-button>
      </div>
    </el-dialog>

    <el-dialog v-model="showSearch" title="数据搜索" width="700px">
      检索依据：
      <el-select v-model="searchMethod" style="width: 100px">
        <el-option v-for="item in searchMethods" :key="item.code" :label="item.name" :value="item.code"></el-option>
      </el-select>
      &nbsp;&nbsp;&nbsp;&nbsp; 搜索内容：
      <el-input
        ref="searchInput"
        v-model="searchContent"
        prefix-icon="el-icon-search"
        placeholder="请输入搜索内容"
        style="width: 160px"
        clearable
        @input="executeSearch"
      ></el-input>
      <el-table :data="searchResults" height="400" stripe highlight-current-row @row-click="handleSelectSearch">
        <el-table-column prop="code" label="编码" width="200"></el-table-column>
        <el-table-column prop="name" label="名称" width="450"></el-table-column>
      </el-table>
      <div style="margin-top: 15px; width: 100%; text-align: right">
        <el-button type="primary" icon="el-icon-arrow-left" @click="lastPage" :disabled="currentSRPage === 1">上一页</el-button>
        <el-button type="primary" icon="el-icon-arrow-right" @click="nextPage" :disabled="currentSRPage > 1 && searchResults.length < 10">下一页</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import { yesOrNo, haveOrNot, searchMethods, autopsies, initShowDel, filterDismissStatus, clone } from './common'
import { computed, onActivated, onMounted, reactive, ref, watchEffect } from 'vue'
import store from '@/store'
import { operations } from '@/data/index'
import {
  basOutPatients,
  executeAdvanceSearch,
  executeConfirmPrint,
  executePrintVerify,
  executeSaveVerify,
  executeUnArchiveBa,
  getAllDictionary,
  getAllWards,
  getSheetInfo,
  sheetSearch,
} from '@/api/case-front-sheet'
import maleIcon from '@/assets/male-icon.png'
import femaleIcon from '@/assets/female-icon.png'
import { ElMessage, ElMessageBox } from 'element-plus'
import { shortcuts } from '@/data/shortcuts'
import { formatDate, getOneMonthOffset } from '@/utils/date'
import router from '@/router'
import { initLodop, getLodop } from '@/utils/c-lodop'
export default {
  setup() {
    const isCollapse = computed(() => store.state.app.isCollapse)
    const cdStyle = computed(() => {
      return {
        position: 'absolute',
        top: '77px',
        left: isCollapse.value ? '430px' : '590px',
      }
    })
    const currentPage = ref(1)
    const handleCurrentPageChange = (val) => {
      currentPage.value = val
    }
    const userWards = ref([])
    const windowSize = store.state.app.windowSize
    const tableHeight = windowSize.h - 75
    const overview = ref([])
    const sheet = ref({
      disdiagList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      surgeryList: [{}, {}, {}, {}, {}],
    })
    const mainInfo = {
      height: windowSize.h - 45 + 'px',
      padding: '0 20px',
      overflowY: 'scroll',
    }
    const dics = ref({})
    const showGoSearchBtn1 = ref(false)
    const showGoSearchBtn2 = ref(false)
    const showDel = initShowDel()
    const overviewParam = reactive({
      ward: '',
      start: '',
      end: '',
      fileStatus: '0',
      lateFlag: '3',
      bah: '',
    })
    const cdPercentage = ref('')
    const searchPatient = () => {
      overviewParam.start = formatDate(dateRange.value[0])
      overviewParam.end = formatDate(dateRange.value[1])
      basOutPatients(overviewParam).then((res) => {
        cdPercentage.value = res.cdPercentage
        overview.value = res.list
        if (res.list.length === 1) {
          fetchSheetInfo(res.list[0])
        }
      })
    }

    const dateRange = ref([])

    const fetchSheetInfo = (row) => {
      if (row.bah !== sheet.value.bah || row.times !== sheet.value.admissTimes) {
        forceVerifies.value = []
        adviceVerifies.value = []
      }

      getSheetInfo(row.bah, row.times, 2).then((res) => {
        sheet.value = res
        beforePrintSet.value = false
      })
    }

    const pageSizeSR = ref(10)
    const currentSRPage = ref(1)
    const handleCurrentSRChange = (val) => {
      currentSRPage.value = val
      fetchSearchData()
    }
    const showSearch = ref(false)
    const insertDiag = ref(false)
    watchEffect(() => {
      if (showSearch.value) {
        searchResults.value = []
        setTimeout(() => {
          showDel.value = initShowDel()
          searchInput.value.focus()
        }, 300)
      } else {
        insertDiag.value = false
      }
    })
    const searchInput = ref(null)
    const searchUrl = ref('')
    const searchTargetCode = ref('')
    const searchTargetName = ref('')
    const searchContent = ref('')
    const lastPage = () => {
      currentSRPage.value--
      fetchSearchData()
    }
    const nextPage = () => {
      currentSRPage.value++
      fetchSearchData()
    }
    const fetchSearchData = () => {
      const param = {
        method: searchMethod.value,
        target: searchUrl.value,
        content: searchContent.value,
        responceType: sheet.value.responceType,
        page: currentSRPage.value,
        ybType: sheet.value.ybType,
        treatType: sheet.value.treatType,
      }
      sheetSearch(param).then((res) => {
        searchResults.value = res
      })
    }
    const executeSearch = () => {
      if (searchContent.value.length < 2 && searchContent.value !== '-') return
      currentSRPage.value = 1
      if (searchContent.value === '-') {
        searchResults.value = [{ code: '-', name: '-' }]
      } else {
        fetchSearchData()
      }
    }

    const handleCommand = (val) => {
      switch (val) {
        case 'save':
          saveVerify(1)
          break
        case 'sign':
          archiveBa()
          break
        case 'lend':
          lend()
          break
        case 'unLend':
          lend()
          break
        case 'allLate':
          break
        case 'print1':
          beforePrint(1)
          break
        case 'print2':
          beforePrint(2)
          break
        case 'confirmPrint':
          confirmCopyPrint()
          break
        case 'unSign':
          unArchiveBa()
          break
        case 'exportExcel':
          break
      }
    }

    const searchMethod = ref('alpha')
    const searchResults = ref([])
    const showSearchData = (flag) => {
      searchUrl.value = 'place'
      if (flag === 'birth') {
        searchTargetCode.value = 'birthPlace'
        searchTargetName.value = 'birthPlaceName'
      } else if (flag === 'native') {
        searchTargetCode.value = 'nativePlace'
        searchTargetName.value = 'nativePlaceName'
      } else if (flag === 'hk') {
        searchTargetCode.value = 'hkPlace'
        searchTargetName.value = 'hkPlaceName'
      } else if (flag === 'contact') {
        searchTargetCode.value = 'contactAddr'
        searchTargetName.value = 'contactAddrName'
      } else if (flag === 'hurt') {
        searchUrl.value = 'hurtReason'
        searchTargetCode.value = 'hurtReasonCode'
        searchTargetName.value = 'hurtReasonName'
      } else if (flag === 'pathologic') {
        searchUrl.value = 'pathologicDiag'
        searchTargetCode.value = 'pathologicDiagCode'
        searchTargetName.value = 'pathologicDiagStr'
      } else if (flag === 'deptleader') {
        searchUrl.value = 'employee'
        searchTargetCode.value = 'deptLeader'
        searchTargetName.value = 'deptLeaderName'
      } else if (flag === 'leaderdoctor') {
        searchUrl.value = 'employee'
        searchTargetCode.value = 'leaderDoctor'
        searchTargetName.value = 'leaderDoctorName'
      } else if (flag === 'maindoctor') {
        searchUrl.value = 'employee'
        searchTargetCode.value = 'mainDoctor'
        searchTargetName.value = 'mainDoctorName'
      } else if (flag === 'admissdoctor') {
        searchUrl.value = 'employee'
        searchTargetCode.value = 'admissDoctor'
        searchTargetName.value = 'admissDoctorName'
      } else if (flag === 'dutynurse') {
        searchUrl.value = 'employee'
        searchTargetCode.value = 'dutyNurse'
        searchTargetName.value = 'dutyNurseName'
      } else if (flag === 'studydoctor') {
        searchUrl.value = 'employee'
        searchTargetCode.value = 'studyDoctor'
        searchTargetName.value = 'studyDoctorName'
      } else if (flag === 'internshipdoctor') {
        searchUrl.value = 'employee'
        searchTargetCode.value = 'internshipDoctor'
        searchTargetName.value = 'internshipDoctorName'
      } else if (flag === 'coder') {
        searchUrl.value = 'employee'
        searchTargetCode.value = 'coder'
        searchTargetName.value = 'coderName'
      } else if (flag === 'qualitycontroldoctor') {
        searchUrl.value = 'employee'
        searchTargetCode.value = 'qualityControlDoctor'
        searchTargetName.value = 'qualityControlDoctorName'
      } else if (flag === 'qualitycontrolnurse') {
        searchUrl.value = 'employee'
        searchTargetCode.value = 'qualityControlNurse'
        searchTargetName.value = 'qualityControlNurseName'
      } else if (flag === 'advanceSearchDoctor') {
        searchUrl.value = 'employee'
        searchTargetCode.value = 'advanceSearch'
        searchTargetName.value = 'doctor'
      } else if (flag === 'advanceSearchDiag') {
        searchUrl.value = 'normalDiag'
        searchTargetCode.value = 'advanceSearch'
        searchTargetName.value = 'icd'
      } else if (flag === 'advanceSearchSurgery') {
        searchUrl.value = 'surgery'
        searchTargetCode.value = 'advanceSearch'
        searchTargetName.value = 'surgery'
      }
      showSearch.value = true
    }

    const showSearchSurgerior = (flag, index) => {
      if (flag === 'operator') {
        searchTargetCode.value = 'surgeryOperatorCode' + (index - 1)
        searchTargetName.value = 'surgeryOperatorName' + (index - 1)
      } else if (flag === 'assistantone') {
        searchTargetCode.value = 'surgeryAssistantOneCode' + (index - 1)
        searchTargetName.value = 'surgeryAssistantOneName' + (index - 1)
      } else if (flag === 'assistanttwo') {
        searchTargetCode.value = 'surgeryAssistantTwoCode' + (index - 1)
        searchTargetName.value = 'surgeryAssistantTwoName' + (index - 1)
      } else {
        searchTargetCode.value = 'surgeryAnaesthesiaorCode' + (index - 1)
        searchTargetName.value = 'surgeryAnaesthesiaorName' + (index - 1)
      }
      searchUrl.value = 'employee'
      showSearch.value = true
    }

    const showAdvanceSearch = ref(false)
    const advanceSearch = reactive({
      doctorCode: '',
      doctorName: '',
      icdCode: '',
      icdName: '',
      surgeryCode: '',
      surgeryName: '',
      sex: null,
    })
    const doAdvanceSearch = () => {
      advanceSearch.start = formatDate(dateRange.value[0])
      advanceSearch.end = formatDate(dateRange.value[1])
      if (!advanceSearch.doctorName) {
        advanceSearch.doctorCode = ''
      }
      executeAdvanceSearch(advanceSearch).then((res) => {
        overview.value = res
        showAdvanceSearch.value = false
      })
    }

    const handleSelectSearch = (item) => {
      if (searchTargetCode.value.startsWith('surgery')) {
        let no = searchTargetCode.value.charAt(searchTargetCode.value.length - 1)
        switch (searchTargetCode.value.substr(0, searchTargetCode.value.length - 1)) {
          case 'surgeryCode':
            if (no > 0 && no < 5) {
              sheet.value.surgeryList[no] = clone(sheet.value.surgeryList[no - 1])
            }
            sheet.value.surgeryList[no].name = item.name
            sheet.value.surgeryList[no].code = item.code
            sheet.value.surgeryList[no].no = no
            break
          case 'surgeryOperatorCode':
            sheet.value.surgeryList[no].operator = item.code
            sheet.value.surgeryList[no].operatorName = item.name
            break
          case 'surgeryAssistantOneCode':
            sheet.value.surgeryList[no].assistantOne = item.code
            sheet.value.surgeryList[no].assistantOneName = item.name
            break
          case 'surgeryAssistantTwoCode':
            sheet.value.surgeryList[no].assistantTwo = item.code
            sheet.value.surgeryList[no].assistantTwoName = item.name
            break
          case 'surgeryAnaesthesiaorCode':
            sheet.value.surgeryList[no].anaesthesiaor = item.code
            sheet.value.surgeryList[no].anaesthesiaorName = item.name
            break
        }
      } else if (searchTargetCode.value.startsWith('disdiagList')) {
        let no = Number(searchTargetCode.value.replace('disdiagsCode', ''))
        if (insertDiag.value) {
          for (let i = 26; i > no; i--) {
            sheet.value.disdiagList[i] = clone(sheet.value.disdiagList[i - 1])
          }
          sheet.value.disdiagList.splice(27)
          insertDiag.value = false
        }
        sheet.value.disdiagList[no].code = item.code
        sheet.value.disdiagList[no].name = item.name
        sheet.value.disdiagList[no].no = no
        sheet.value.disdiagList[no].admissStatus = sheet.value.disdiagList[no].dismissStatus = '1'
        sheet.value.disdiagList[no].opIdCode = store.state.user.info.code
      } else if (searchTargetCode.value === 'advanceSearch') {
        switch (searchTargetName.value) {
          case 'doctor':
            advanceSearch.doctorCode = item.code
            advanceSearch.doctorName = item.name
            break
          case 'icd':
            advanceSearch.icdCode = item.code
            advanceSearch.icdName = item.name
            break
          case 'surgery':
            advanceSearch.surgeryCode = item.code
            advanceSearch.surgeryName = item.name
            break
        }
      } else {
        sheet.value[searchTargetCode.value] = item.code
        sheet.value[searchTargetName.value] = item.name
        if (searchTargetCode.value === 'birthPlace') {
          sheet.value.nativePlace = item.code
          sheet.value.nativePlaceName = item.name
        }
      }
      searchContent.value = ''
      showSearch.value = false
    }

    const onSearchDiagFocus = (n) => {
      if (n > 0 && !sheet.value.disdiagList[n - 1].code) {
        ElMessage({
          message: '请按顺序填写',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      searchUrl.value = 'normalDiag'
      searchTargetCode.value = 'disdiagsCode' + n
      searchTargetName.value = 'disdiagsName' + n
      if (!sheet.value.disdiagList[n].code) {
        showSearch.value = true
      } else {
        showDel.value[n] = true
      }
    }

    const onSearchSurgeryFocus = (n) => {
      if (n > 0 && !sheet.value.surgeryList[n - 1].code) {
        ElMessage({
          message: '请按顺序填写',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return
      }
      searchUrl.value = 'surgery'
      searchTargetCode.value = 'surgeryCode' + n
      searchTargetName.value = 'surgeryName' + n
      if (!sheet.value.surgeryList[n].code) {
        showSearch.value = true
      } else {
        showDel.value[n] = true
      }
    }

    const hasSurgeryChanged = (val) => {
      if (val === '0') {
        sheet.value.diagConform3 = 0
      }
    }

    const deleteDisdiag = (index) => {
      showDel.value[index] = false
      while (index < 26) {
        sheet.value.disdiagList[index] = sheet.value.disdiagList[index + 1]
        index++
      }
      sheet.value.disdiagList[26] = {}
      sheet.value.disdiagList.splice(27)
    }

    const insertDisdiag = (index) => {
      insertDiag.value = true
      searchUrl.value = 'normalDiag'
      searchTargetCode.value = 'disdiagsCode' + index
      searchTargetName.value = 'disdiagsName' + index
      showSearch.value = true
    }

    const deleteSurgery = (index) => {
      showDel.value[index] = false
      while (index < 4) {
        sheet.value.surgeryList[index] = sheet.value.surgeryList[index + 1]
        index++
      }
      sheet.value.surgeryList[4] = {}
      sheet.value.surgeryList.splice(5)
    }

    const beforePrintSet = ref(false)
    const nullPatient = () => {
      if (!sheet.value.bah) {
        ElMessage({
          message: '请先选择患者！',
          type: 'warning',
          duration: 2500,
          showClose: true,
        })
        return true
      }
      return false
    }
    const saveVerify = (opType) => {
      if (nullPatient()) return
      beforePrintSet.value = false
      const param = {
        opType,
        sheet: sheet.value,
      }
      executeSaveVerify(param)
        .then((res) => {
          ElMessage({
            message: '操作成功。',
            type: 'success',
            duration: 2500,
            showClose: true,
          })
        })
        .catch((e) => {
          forceVerifies.value = e.data
        })
    }
    const beforePrint = (flag) => {
      if (nullPatient()) return
      const param = {
        sheet: sheet.value,
      }
      executePrintVerify(param)
        .then(() => {
          execPrint(flag)
        })
        .catch((e) => {
          forceVerifies.value = e.data.force
          adviceVerifies.value = e.data.advice
          if (e.data.force.length === 0) {
            execPrint(flag)
          }
        })
    }
    const execPrint = (flag) => {
      if (!beforePrintSet.value) {
        const allInput = document.body.getElementsByTagName('input')
        const allTextArea = document.body.getElementsByTagName('textarea')
        const allSelect = document.body.getElementsByTagName('select')
        for (let i = 0; i < allInput.length; i++) allInput[i].setAttribute('value', allInput[i].value)
        for (let i = 0; i < allTextArea.length; i++) allTextArea[i].innerText = allTextArea[i].value
        for (let i = 0; i < allSelect.length; i++) {
          let select = allSelect[i]
          if (select.value === '') {
            if (select.options[select.options.length - 1].value !== '') select.options[select.options.length] = new Option('', '')
            select.options[select.options.length - 1].setAttribute('selected', true)
          } else {
            for (let j = 0; j < select.options.length; j++) {
              if (select.options[j].value === select.value) {
                select.options[j].setAttribute('selected', true)
              } else {
                select.options[j].removeAttribute('selected')
              }
            }
          }
        }
        beforePrintSet.value = true
      }

      const prntStyle =
        "<style>select,input {outline: none;border: none;height: 20px;line-height: 20px;border-radius: 0;background: transparent;border-bottom: 1px solid #333333;-webkit-appearance: none!important;-moz-appearance: none!important;appearance: none!important;} select::-ms-expand {display: none!important;}textarea {outline: none;border: none;background-color: transparent;overflow-y:hidden}input[type='number'] {-moz-appearance: textfield;}table th {border: 1px solid black;text-align: center;}table td {border: 1px solid black;}</style>"
      let pagePrint
      if (flag === 1) {
        const page0 = '<div>' + document.getElementById('page0').innerHTML + '</div>'
        const page1 = '<div>' + document.getElementById('page1').innerHTML + '</div>'
        pagePrint = prntStyle + '<body>' + page0 + page1 + '</body>'
      } else {
        const page2 = '<div>' + document.getElementById('page2').innerHTML + '</div>'
        pagePrint = prntStyle + '<body>' + page2 + '</body>'
      }
      LODOP = getLodop()
      LODOP.PRINT_INIT('casefrontsheet')
      LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', '')
      LODOP.SET_PRINT_MODE('FULL_WIDTH_FOR_OVERFLOW', true) // 整宽不变形
      LODOP.ADD_PRINT_HTM('2mm', '5mm', '100%', '100%', pagePrint)
      LODOP.SET_PRINT_STYLE('ItemType', 3)
      LODOP.ADD_PRINT_TEXT('280mm', '190mm', '20mm', '2mm', `第${flag}页/共2页`)
      LODOP.PREVIEW()
    }

    const archiveBa = () => {
      if (nullPatient()) {
        return
      }
      saveVerify(2)
    }

    const unArchiveBa = () => {
      if (nullPatient()) {
        return
      }

      ElMessageBox.confirm('是否确认解除签收患者【' + sheet.value.name + '】的病案首页？', '提示', {
        type: 'warning',
        confirmButtonText: '解除签收',
        cancelButtonText: '取消',
      })
        .then(() => {
          const param = {
            opType: 3,
            sheet: sheet.value,
          }
          executeUnArchiveBa(param).then((res) => {
            ElMessage({
              message: res,
              type: 'success',
              duration: 2500,
              showClose: true,
            })
          })
        })
        .catch(() => {})
    }

    const confirmCopyPrint = () => {
      if (nullPatient()) {
        return
      }
      if (sheet.value.fileStatus === 2) {
        ElMessageBox.alert('此病案首页已确认过打印！', '提示', {
          showCancelButton: false,
          type: 'warning',
        }).then(() => {})
        return
      }
      ElMessageBox.confirm('是否确认患者【' + sheet.value.name + '】的病案首页已打印，此操作将不可逆转！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          executeConfirmPrint({ sheet: sheet.value }).then(() => {
            ElMessage({
              message: '操作成功',
              type: 'success',
              duration: 2500,
              showClose: true,
            })
          })
        })
        .catch(() => {})
    }

    const lend = () => {
      ElMessage({
        message: '此功能正在努力开发中...',
        type: 'warning',
        duration: 3000,
        showClose: true,
      })
    }

    const handleEvent = (event) => {
      if (router.currentRoute.value.path !== '/allCaseFrontSheet') {
        return
      }
      if ((event.key === 's' && event.ctrlKey) || (event.key === 'S' && event.ctrlKey)) {
        event.preventDefault()
        event.returnValue = false
        saveVerify(1)
      } else if ((event.key === 'a' && event.ctrlKey) || (event.key === 'A' && event.ctrlKey)) {
        event.preventDefault()
        event.returnValue = false
        archiveBa()
      }
    }

    const messageArea = {
      width: windowSize.w - 1440 + 'px',
      height: windowSize.h - 65 + 'px',
      padding: '0 16px',
      overflowY: 'scroll',
    }
    const collapseMessageArea = {
      width: windowSize.w - 1300 + 'px',
      height: windowSize.h - 65 + 'px',
      padding: '0 16px',
      overflowY: 'scroll',
    }

    const forceVerifies = ref([])
    const adviceVerifies = ref([])
    const currentMessageIndex = ref(null)
    const messageColor = (id) => {
      return currentMessageIndex.value === id
        ? {
            background: '#ff2b2b',
            color: 'white',
          }
        : {
            background: '#eea7a752',
            color: '#ff2b2b',
          }
    }
    const handleClickMessage = (id, index) => {
      currentMessageIndex.value = index
      let ele = document.getElementById(id)
      let i = 0
      let timer = setInterval(() => {
        ele.style.background = i % 2 == 0 ? '#fd4343' : 'transparent'
        i++
        if (i > 5) {
          clearInterval(timer)
        }
      }, 500)
    }

    const dismissShowSearch = (flag) => {
      setTimeout(() => {
        if (flag === 1) {
          showGoSearchBtn1.value = false
        } else {
          showGoSearchBtn2.value = false
        }
      }, 100)
    }
    onMounted(() => {
      initLodop()
      document.addEventListener('keydown', handleEvent)
      getAllDictionary().then((res) => {
        dics.value = res
        getAllWards().then((res1) => {
          userWards.value = res1
          const t = getOneMonthOffset()
          dateRange.value[0] = t.start
          dateRange.value[1] = t.end
        })
      })
    })

    onActivated(() => {
      store.commit('app/isCollapseChange', true)
    })

    return {
      currentPage,
      dismissShowSearch,
      handleCurrentPageChange,
      forceVerifies,
      adviceVerifies,
      messageColor,
      handleClickMessage,
      isCollapse,
      messageArea,
      collapseMessageArea,
      cdStyle,
      maleIcon,
      femaleIcon,
      userWards,
      searchPatient,
      operations,
      tableHeight,
      overview,
      mainInfo,
      sheet,
      dics,
      overviewParam,
      cdPercentage,
      showGoSearchBtn1,
      showGoSearchBtn2,
      showDel,
      yesOrNo,
      haveOrNot,
      searchMethods,
      autopsies,
      fetchSheetInfo,
      showSearchData,
      showSearchSurgerior,
      onSearchDiagFocus,
      onSearchSurgeryFocus,
      showSearch,
      searchInput,
      searchContent,
      searchMethod,
      searchResults,
      currentSRPage,
      pageSizeSR,
      handleCurrentSRChange,
      executeSearch,
      lastPage,
      nextPage,
      beforePrint,
      hasSurgeryChanged,
      deleteDisdiag,
      insertDisdiag,
      deleteSurgery,
      handleSelectSearch,
      filterDismissStatus,
      saveVerify,
      dateRange,
      shortcuts,
      handleCommand,
      showAdvanceSearch,
      advanceSearch,
      doAdvanceSearch,
    }
  },
}
</script>

<style scoped>
.keyboard {
  margin-left: 5px;
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem;
}

select,
input {
  outline: none;
  border: none;
  height: 20px;
  line-height: 20px;
  border-radius: 0;
  background: transparent;
  border-bottom: 1px solid #333333;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type='number'] {
  -moz-appearance: textfield;
}
select ::-ms-expand {
  display: none;
}
textarea {
  outline: none;
  border: none;
  background-color: transparent;
}
table th {
  border: 1px solid black;
  text-align: center;
}
table td {
  border: 1px solid black;
}

.page-inner {
  padding: 10px 0 0 0;
  border-radius: 12px;
  text-align: justify;
}

.message-item {
  padding: 6px;
  margin-bottom: 6px;
  border-radius: 4px;
}

.message-item:hover {
  cursor: pointer;
}
.page-wrapper {
  position: relative;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  text-align: justify;
  /* 高斯模糊，过滤器 */
  filter: drop-shadow(0px 0px 15px #bbb);
}
</style>
