<template>
  <div class="main-page background-gray">
    <div class="detail-page-header flex-row-colCenter">
      <span
        class="back"
        @click="goBack"
      ><i class="el-icon-back"></i>返回</span>
      <el-divider direction="vertical"></el-divider>
      <span class="title">
        {{
          type === 'update' ? '修改病患':
          type === 'add' ? '新增病患':
          type === 'detail' ? '病患详情' : ''
        }}
      </span>
    </div>
    <div class="main-page-body">
      <div class="mainContent background-white">
        <el-tabs
          v-model="patientType"
          type="card"
        >
          <el-tab-pane
            label="胸痛中心"
            :disabled="type !== 'add'"
            name="1"
          ></el-tab-pane>
          <el-tab-pane
            label="卒中中心"
            :disabled="type !== 'add'"
            name="2"
          ></el-tab-pane>
          <el-tab-pane
            label="创伤中心"
            :disabled="type !== 'add'"
            name="3"
          ></el-tab-pane>
          <el-tab-pane
            label="烧伤中心"
            :disabled="type !== 'add'"
            name="4"
          ></el-tab-pane>
        </el-tabs>
        <el-form
          class="detailForm"
          label-width="160px"
          :model="dataForm"
          size="mini"
          ref="dataForm"
          :disabled="type === 'detail'"
          :rules="rules"
        >
          <h2>基本信息</h2>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="姓名："
                prop="name"
              >
                <el-input
                  placeholder="请输入姓名"
                  v-model="dataForm.name"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="身份证号："
                prop="identityNumber"
              >
                <el-input
                  placeholder="请输入身份证号"
                  v-model="dataForm.identityNumber"
                />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
              <el-form-item
                label="手环ID："
                prop="braceletId"
              >
                <el-input
                  placeholder="请输入手环ID"
                  v-model="dataForm.braceletId"
                />
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="性别："
                prop="sex"
              >
                <el-radio-group v-model="dataForm.sex">
                  <el-radio :label="1">男</el-radio>
                  <el-radio :label="2">女</el-radio>
                  <el-radio :label="3">未知</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="年龄："
                prop="age"
              >
                <el-input
                  placeholder="请输入年龄"
                  v-model="dataForm.age"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="出生日期："
                prop="dateOfBirth"
              >
                <el-date-picker
                  type="date"
                  placeholder="请选择出生日期"
                  v-model="dataForm.dateOfBirth"
                  style="width: 100%;"
                  prefix-icon="el-icon-date"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  @change="dateOfBirthChange"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <template v-if="patientType == 1 || patientType == 2">
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="发病时间："
                  prop="onsetTime"
                >
                  <el-date-picker
                    type="datetime"
                    placeholder="请选择发病时间"
                    v-model="dataForm.onsetTime"
                    style="width: 100%;"
                    prefix-icon="el-icon-date"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    @change="onsetTimeChange"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="发病时长："
                  prop="onsetTimeLength"
                >
                  <el-input
                    placeholder="请输入发病时长"
                    v-model="dataForm.onsetTimeLength"
                  >
                    <i
                      slot="suffix"
                      class="suffix"
                    >小时</i>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="联系人："
                  prop="contactPerson"
                >
                  <el-input
                    placeholder="请输入联系人"
                    v-model="dataForm.contactPerson"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-else-if="patientType == 3 || patientType == 4">
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="受伤时间："
                  prop="injuryTime"
                >
                  <el-date-picker
                    type="datetime"
                    placeholder="请选择受伤时间"
                    v-model="dataForm.injuryTime"
                    style="width: 100%;"
                    prefix-icon="el-icon-date"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="事件类型："
                  prop="eventType"
                >
                  <el-select
                    v-model="dataForm.eventType"
                    placeholder="请选择事件类型"
                    multiple
                    style="width: 100%"
                    :clearable="true"
                  >
                    <el-option
                      label="交通、运输事故"
                      value="1"
                    />
                    <el-option
                      label="高处坠落"
                      value="2"
                    />
                    <el-option
                      label="暴力袭击/性侵犯"
                      value="3"
                    />
                    <el-option
                      label="动物咬伤/攻击"
                      value="4"
                    />
                    <el-option
                      label="烧伤（烫伤）/爆炸伤"
                      value="5"
                    />
                    <el-option
                      label="锐器刺伤/枪伤/贯通伤"
                      value="6"
                    />
                    <el-option
                      label="触电/雷击伤"
                      value="7"
                    />
                    <el-option
                      label="创伤（其他创伤）"
                      value="8"
                    />
                    <el-option
                      label="冬季运动损伤"
                      value="9"
                    />
                    <el-option
                      label="机械损伤"
                      value="10"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="医保类型："
                  prop="medicalInsuranceType"
                >
                  <el-select
                    v-model="dataForm.medicalInsuranceType"
                    placeholder="请选择医保类型"
                    style="width: 100%"
                    :clearable="true"
                  >
                    <el-option
                      label="城镇职工基本医疗保险"
                      value="1"
                    />
                    <el-option
                      label="新型农村合作医疗"
                      value="2"
                    />
                    <el-option
                      label="城镇居民基本医疗保险"
                      value="3"
                    />
                    <el-option
                      label="自费"
                      value="4"
                    />
                    <el-option
                      label="军免"
                      value="5"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="联系电话："
                prop="phoneNumber"
              >
                <el-input
                  placeholder="请输入联系电话"
                  v-model="dataForm.phoneNumber"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="地址："
                prop="address"
              >
                <el-input
                  placeholder="请输入地址"
                  v-model="dataForm.address"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="受伤地址："
                prop="injuredAddress"
                v-if="patientType == 3"
              >
                <el-input
                  placeholder="请输入受伤地址"
                  v-model="dataForm.injuredAddress"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <h2>来院方式</h2>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="呼叫方式："
                prop="callMethod"
              >
                <el-radio-group v-model="dataForm.callMethod">
                  <el-radio label="1">120急救</el-radio>
                  <el-radio label="2">基层转院</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="呼叫120时间："
                prop="callTime"
              >
                <el-date-picker
                  type="datetime"
                  placeholder="请选择呼叫120时间"
                  v-model="dataForm.callTime"
                  style="width: 100%;"
                  prefix-icon="el-icon-date"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="医院人员："
                prop="hospitalStaff"
              >
                <el-input
                  placeholder="请输入医院人员"
                  v-model="dataForm.hospitalStaff"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="出车单位："
                prop="carCompanyId"
              >
                <el-select
                  v-model="dataForm.carCompanyId"
                  placeholder="请选择出车单位"
                  style="width: 100%"
                  filterable
                  :clearable="true"
                  @change="carCompanyChange"
                >
                  <el-option
                    v-for="item in siteList"
                    :label="item.siteName"
                    :key="item.id"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="到达受伤现场时间："
                prop="arrivalTime"
              >
                <el-date-picker
                  type="datetime"
                  placeholder="请选择到达受伤现场时间"
                  v-model="dataForm.arrivalTime"
                  style="width: 100%;"
                  prefix-icon="el-icon-date"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="从现场出发时间："
                prop="departureTime"
              >
                <el-date-picker
                  type="datetime"
                  placeholder="请选择到达受伤现场时间"
                  v-model="dataForm.departureTime"
                  style="width: 100%;"
                  prefix-icon="el-icon-date"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="接诊医院名称："
                prop="inHospitalCode"
              >
                <el-select
                  v-model="dataForm.inHospitalCode"
                  placeholder="请选择接诊医院名称"
                  style="width: 100%"
                  :clearable="true"
                  filterable
                  remote
                  ref="hospitalCode"
                  :loading="selectLoading"
                  :remote-method="remoteMethod"
                  @focus="remoteMethod('')"
                >
                  <el-option
                    v-for="item in hospitalList"
                    :label="item.hospitalName"
                    :key="item.id"
                    :value="item.hospitalCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="车牌号："
                prop="licensePlateNumber"
              >
                <el-input
                  placeholder="请输入车牌号"
                  v-model="dataForm.licensePlateNumber"
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
              v-if="dataForm.callMethod == 2"
            >
              <el-form-item
                label="基层医院名称："
                prop="outHospitalCode"
              >
                <el-select
                  v-model="dataForm.outHospitalCode"
                  placeholder="请选择基层医院名称"
                  style="width: 100%"
                  filterable
                  :clearable="true"
                  remote
                  ref="hospitalCode"
                  :loading="selectLoading2"
                  :remote-method="remoteMethod2"
                  @focus="remoteMethod2('')"
                >
                  <el-option
                    v-for="item in hospitalList2"
                    :label="item.hospitalName"
                    :key="item.id"
                    :value="item.hospitalCode"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <h2>生命体征</h2>
          <el-row>
            <el-col :span="8">
              <el-form-item label="血压(收缩压/舒张压)：">
                <el-col :span="11">
                  <el-form-item
                    prop="systolicBloodPressure"
                    style="margin-bottom:0"
                  >
                    <el-input
                      placeholder="收缩压范围为0~300"
                      v-model="dataForm.systolicBloodPressure"
                    >
                      <i
                        slot="suffix"
                        class="suffix"
                      >mmHg</i>
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col
                  style="text-align:center"
                  :span="2"
                >/</el-col>
                <el-col :span="11">
                  <el-form-item
                    prop="diastolicBloodPressure"
                    style="margin-bottom:0"
                  >
                    <el-input
                      placeholder="舒张压范围为0~300"
                      v-model="dataForm.diastolicBloodPressure"
                    >
                      <i
                        slot="suffix"
                        class="suffix"
                      >mmHg</i>
                    </el-input>
                  </el-form-item>
                </el-col>

              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="呼吸："
                prop="breathing"
              >
                <el-input
                  placeholder="呼吸范围为0~200"
                  v-model="dataForm.breathing"
                >
                  <i
                    slot="suffix"
                    class="suffix"
                  >rpm</i>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="脉搏："
                prop="pulse"
              >
                <el-input
                  placeholder="脉搏范围为0~200"
                  v-model="dataForm.pulse"
                >
                  <i
                    slot="suffix"
                    class="suffix"
                  >bpm</i>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="体温："
                prop="bodyTemperature"
              >
                <el-input
                  placeholder="体温范围为20~50"
                  v-model="dataForm.bodyTemperature"
                >
                  <i
                    slot="suffix"
                    class="suffix"
                  >℃</i>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="心率："
                prop="heartRate"
              >
                <el-input
                  placeholder="心率范围为0~200"
                  v-model="dataForm.heartRate"
                >
                  <i
                    slot="suffix"
                    class="suffix"
                  >bpm</i>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="血氧饱和度："
                prop="bloodOxygenSaturation"
              >
                <el-input
                  placeholder="血氧饱和度范围为0~100"
                  v-model="dataForm.bloodOxygenSaturation"
                >
                  <i
                    slot="suffix"
                    class="suffix"
                  >%</i>
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="血糖："
                prop="bloodSugar"
              >
                <el-input
                  placeholder="血糖范围为0~30"
                  v-model="dataForm.bloodSugar"
                >
                  <i
                    slot="suffix"
                    class="suffix"
                  >mmol/L</i>
                </el-input>
              </el-form-item>
            </el-col>
            <template v-if="patientType == 1 || patientType == 2">
              <el-col :span="8">
                <el-form-item
                  label="身高："
                  prop="height"
                >
                  <el-input
                    placeholder="身高范围为100~220"
                    @change="calcBMI"
                    v-model="dataForm.height"
                  >
                    <i
                      slot="suffix"
                      class="suffix"
                    >cm</i>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="体重："
                  prop="weight"
                >
                  <el-input
                    placeholder="体重范围为0~220"
                    v-model="dataForm.weight"
                    @change="calcBMI"
                  >
                    <i
                      slot="suffix"
                      class="suffix"
                    >kg</i>
                  </el-input>
                </el-form-item>
              </el-col>
            </template>
          </el-row>
          <el-row>
            <el-col
              :span="8"
              v-if="patientType == 1 || patientType == 2"
            >
              <el-form-item
                label="BMI："
                prop="bmi"
              >
                <el-input
                  placeholder="根据身高体重自动生成"
                  v-model="dataForm.bmi"
                  readonly
                >
                  <i
                    slot="suffix"
                    class="suffix"
                  >kg/m*m</i>
                </el-input>
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
              v-if="patientType == 2"
            >
              <el-form-item
                label="意识："
                prop="awareness"
              >
                <el-select
                  v-model="dataForm.awareness"
                  placeholder="请选择意识"
                  style="width: 100%"
                  :clearable="true"
                >
                  <el-option
                    label="正常"
                    value="1"
                  />
                  <el-option
                    label="模糊"
                    value="2"
                  />
                  <el-option
                    label="谵妄"
                    value="3"
                  />
                  <el-option
                    label="昏迷"
                    value="4"
                  />
                  <el-option
                    label="消失"
                    value="5"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <template v-if="patientType==1">
            <h2>病情评估</h2>

            <el-form-item
              label="病情评估(单选):"
              prop="conditionAssessmentOne"
            >
              <el-radio-group v-model="dataForm.conditionAssessmentOne">
                <el-radio :label="1">持续性胸闷/胸痛</el-radio>
                <el-radio :label="2">间歇性胸闷/胸痛</el-radio>
                <el-radio :label="3">症状缓解</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item
              label="病情评估(多选):"
              prop="conditionAssessmentTwoList"
            >
              <el-checkbox-group v-model="dataForm.conditionAssessmentTwoList">
                <el-checkbox :label="1">呼吸困难</el-checkbox>
                <el-checkbox :label="2">腹痛</el-checkbox>
                <el-checkbox :label="3">齿痛</el-checkbox>
                <el-checkbox :label="4">肩背痛</el-checkbox>
                <el-checkbox :label="5">合并出血</el-checkbox>
                <el-checkbox :label="6">合并心衰</el-checkbox>
                <el-checkbox :label="7">合并恶性心律失常</el-checkbox>
                <el-checkbox :label="8">不明原因昏厥 </el-checkbox>
                <el-checkbox :label="9">自汗/大汗淋漓</el-checkbox>
                <el-checkbox :label="10">心慌心悸</el-checkbox>
                <el-checkbox :label="11">烦躁不安</el-checkbox>
                <el-checkbox :label="12">颈前部束缚感</el-checkbox>
                <el-checkbox :label="13">乏力</el-checkbox>
                <el-checkbox :label="14">气喘</el-checkbox>
                <el-checkbox :label="99">其他</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="院前诊断:"
                  prop="preHospitalDiagnosis"
                >
                  <el-input
                    placeholder="请输入院前诊断"
                    v-model="dataForm.preHospitalDiagnosis"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="院前会诊时间:"
                  prop="preHospitalConsultationTime"
                >
                  <el-date-picker
                    type="datetime"
                    placeholder="请选择院前会诊时间"
                    v-model="dataForm.preHospitalConsultationTime"
                    style="width: 100%;"
                    prefix-icon="el-icon-date"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="院前首份心电图时间:"
                  prop="firstECGTimeBeforeHospital"
                >
                  <el-date-picker
                    type="datetime"
                    placeholder="请选择院前会诊时间"
                    v-model="dataForm.firstECGTimeBeforeHospital"
                    style="width: 100%;"
                    prefix-icon="el-icon-date"
                    format="yyyy-MM-dd HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="院前会诊结果:"
                  prop="preHospitalConsultationResults"
                >
                  <el-input
                    placeholder="请输入院前会诊结果"
                    v-model="dataForm.preHospitalConsultationResults"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="院前会诊医生:"
                  prop="preHospitalConsultationDoctor"
                >
                  <el-input
                    placeholder="请输入院前会诊医生"
                    v-model="dataForm.preHospitalConsultationDoctor"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <h2>院前给药</h2>
            <div class="row">
              <span class="span">双联抗血小板治疗给药</span>
              <el-form-item
                label="是否给药:"
                prop="whetherToGiveDualAntiplateletTherapy"
              >
                <el-radio-group v-model="dataForm.whetherToGiveDualAntiplateletTherapy">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="给药时间:"
                prop="dosingTimeOfDualAntiplateletTherapy"
                v-if="dataForm.whetherToGiveDualAntiplateletTherapy==1"
              >
                <el-date-picker
                  type="datetime"
                  placeholder="请选择给药时间"
                  v-model="dataForm.dosingTimeOfDualAntiplateletTherapy"
                  style="width: 100%;"
                  prefix-icon="el-icon-date"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
            </div>

            <div class="row">
              <span class="span">首次抗凝给药</span>
              <el-form-item
                label="是否给药:"
                prop="whetherTheFirstAnticoagulantAdministration"
              >
                <el-radio-group v-model="dataForm.whetherTheFirstAnticoagulantAdministration">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="给药时间:"
                prop="timeOfFirstAnticoagulantAdministration"
                v-if="dataForm.whetherTheFirstAnticoagulantAdministration==1"
              >
                <el-date-picker
                  type="datetime"
                  placeholder="请选择给药时间"
                  v-model="dataForm.timeOfFirstAnticoagulantAdministration"
                  style="width: 100%;"
                  prefix-icon="el-icon-date"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
            </div>

            <div class="row">
              <span class="span">他汀给药</span>
              <el-form-item
                label="是否给药:"
                prop="whetherToAdministerAStatin"
              >
                <el-radio-group v-model="dataForm.whetherToAdministerAStatin">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="给药时间:"
                prop="statinAdministrationTime"
                v-if="dataForm.whetherToAdministerAStatin==1"
              >
                <el-date-picker
                  type="datetime"
                  placeholder="请选择给药时间"
                  v-model="dataForm.statinAdministrationTime"
                  style="width: 100%;"
                  prefix-icon="el-icon-date"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
            </div>

            <div class="row">
              <span class="span">β受体阻滞剂</span>
              <el-form-item
                label="是否给药:"
                prop="whetherBetaBlocker"
              >
                <el-radio-group v-model="dataForm.whetherBetaBlocker">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="2">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label="给药时间:"
                prop="betaBlockerAdministrationTime"
                v-if="dataForm.whetherBetaBlocker==1"
              >
                <el-date-picker
                  type="datetime"
                  placeholder="请选择给药时间"
                  v-model="dataForm.betaBlockerAdministrationTime"
                  style="width: 100%;"
                  prefix-icon="el-icon-date"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                ></el-date-picker>
              </el-form-item>
            </div>
          </template>
          <template v-else-if="patientType==2">
            <h2 v-if="patientType==2">FAST_ED评分</h2>
            <el-form-item
              label="评分内容:"
              prop="fastEDScoreList"
            >
              <el-checkbox-group v-model="dataForm.fastEDScoreList">
                <el-checkbox :label="1">F面瘫、口角歪斜</el-checkbox>
                <el-checkbox :label="2">A肢体无力</el-checkbox>
                <el-checkbox :label="3">S言语不清</el-checkbox>
                <el-checkbox :label="4">T迅速求助</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </template>
          <template v-else-if="patientType==3">
            <h2>START快速检伤</h2>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="患者能否行走:"
                  prop="canThePatientWalk"
                >
                  <el-radio-group v-model="dataForm.canThePatientWalk">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="患者有无自主呼吸:"
                  prop="isBreathingSpontaneously"
                >
                  <el-radio-group v-model="dataForm.isBreathingSpontaneously">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="患者呼吸频率:"
                  prop="breathingRate"
                >
                  <el-radio-group v-model="dataForm.breathingRate">
                    <el-radio :label="1">＞30次/分或者＜6次/分</el-radio>
                    <el-radio :label="2">6-30次/分</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="患者颈动脉搏动:"
                  prop="isArterialPulsation"
                >
                  <el-radio-group v-model="dataForm.isArterialPulsation">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="2">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="患者神志:"
                  prop="consciousness"
                >
                  <el-radio-group v-model="dataForm.consciousness">
                    <el-radio :label="1">正常</el-radio>
                    <el-radio :label="2">异常</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <h2>检伤级别</h2>
            <el-form-item
              label="检伤级别(单选):"
              prop="inspectionLevel"
            >
              <el-radio-group v-model="dataForm.inspectionLevel">
                <el-radio :label="1">Ⅰ级</el-radio>
                <el-radio :label="2">Ⅱ级</el-radio>
                <el-radio :label="3">Ⅲ级</el-radio>
                <el-radio :label="4">Ⅳ级</el-radio>
              </el-radio-group>
            </el-form-item>
            <h2>预警级别</h2>
            <el-form-item
              label="预警级别(单选):"
              prop="warningLevel"
            >
              <el-radio-group v-model="dataForm.warningLevel">
                <el-radio :label="1">轻度</el-radio>
                <el-radio :label="2">中度</el-radio>
                <el-radio :label="3">重度</el-radio>
              </el-radio-group>
            </el-form-item>
            <h2>体格检查</h2>
            <el-row v-if="patientType==3">
              <el-col :span="8">
                <el-form-item
                  label="瞳孔:"
                  prop="pupil"
                >
                  <el-select
                    v-model="dataForm.pupil"
                    placeholder="请选择瞳孔"
                    style="width: 100%"
                    :clearable="true"
                  >
                    <el-option
                      label="正常"
                      value="1"
                    />
                    <el-option
                      label="扩大"
                      value="2"
                    />
                    <el-option
                      label="缩小"
                      value="3"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="光反射:"
                  prop="lightReflection"
                >
                  <el-select
                    v-model="dataForm.lightReflection"
                    placeholder="请选择光反射"
                    style="width: 100%"
                    :clearable="true"
                  >
                    <el-option
                      label="正常"
                      value="1"
                    />
                    <el-option
                      label="迟钝"
                      value="2"
                    />
                    <el-option
                      label="消失"
                      value="3"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="意识:"
                  prop="awareness"
                >
                  <el-select
                    v-model="dataForm.awareness"
                    placeholder="请选择意识"
                    style="width: 100%"
                    :clearable="true"
                  >
                    <el-option
                      label="正常"
                      value="1"
                    />
                    <el-option
                      label="模糊"
                      value="2"
                    />
                    <el-option
                      label="谵妄"
                      value="3"
                    />
                    <el-option
                      label="昏迷"
                      value="4"
                    />
                    <el-option
                      label="消失"
                      value="5"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="气道:"
                  prop="airway"
                >
                  <el-select
                    v-model="dataForm.airway"
                    placeholder="请选择气道"
                    style="width: 100%"
                    :clearable="true"
                  >
                    <el-option
                      label="通畅"
                      value="1"
                    />
                    <el-option
                      label="阻塞"
                      value="2"
                    />
                    <el-option
                      label="部分阻塞"
                      value="3"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="循环:"
                  prop="cycle"
                >
                  <el-select
                    v-model="dataForm.cycle"
                    placeholder="请选择循环"
                    style="width: 100%"
                    :clearable="true"
                  >
                    <el-option
                      label="正常"
                      value="1"
                    />
                    <el-option
                      label="脉搏有力"
                      value="2"
                    />
                    <el-option
                      label="脉搏快"
                      value="3"
                    />
                    <el-option
                      label="脉搏慢"
                      value="4"
                    />
                    <el-option
                      label="脉搏消失"
                      value="5"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="心率:"
                  prop="heartRateState"
                >
                  <el-select
                    v-model="dataForm.heartRateState"
                    placeholder="请选择心率"
                    style="width: 100%"
                    :clearable="true"
                  >
                    <el-option
                      label="齐"
                      value="1"
                    />
                    <el-option
                      label="不齐"
                      value="2"
                    />
                    <el-option
                      label="消失"
                      value="3"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="胸部:"
                  prop="chest"
                >
                  <el-select
                    v-model="dataForm.chest"
                    placeholder="请选择胸部"
                    style="width: 100%"
                    :clearable="true"
                  >
                    <el-option
                      label="正常"
                      value="1"
                    />
                    <el-option
                      label="反常呼吸"
                      value="2"
                    />
                    <el-option
                      label="压痛"
                      value="3"
                    />
                    <el-option
                      label="隆起"
                      value="4"
                    />
                    <el-option
                      label="塌陷"
                      value="5"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="腹部:"
                  prop="abdomen"
                >
                  <el-select
                    v-model="dataForm.abdomen"
                    placeholder="请选择腹部"
                    style="width: 100%"
                    :clearable="true"
                  >
                    <el-option
                      label="正常"
                      value="1"
                    />
                    <el-option
                      label="膨隆"
                      value="2"
                    />
                    <el-option
                      label="舟状"
                      value="3"
                    />
                    <el-option
                      label="板状腹"
                      value="4"
                    />
                    <el-option
                      label="压痛"
                      value="5"
                    />
                    <el-option
                      label="反跳痛"
                      value="6"
                    />
                    <el-option
                      label="肝大"
                      value="7"
                    />
                    <el-option
                      label="脾大"
                      value="8"
                    />
                    <el-option
                      label="腹部包块"
                      value="9"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="肠鸣:"
                  prop="bowel"
                >
                  <el-select
                    v-model="dataForm.bowel"
                    placeholder="请选择肠鸣"
                    style="width: 100%"
                    :clearable="true"
                  >
                    <el-option
                      label="正常"
                      value="1"
                    />
                    <el-option
                      label="亢进"
                      value="2"
                    />
                    <el-option
                      label="减弱"
                      value="3"
                    />
                    <el-option
                      label="消失"
                      value="4"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="patientType==3">
              <el-col :span="8">
                <el-form-item
                  label="肌力:"
                  prop="muscleStrength"
                >
                  <el-select
                    v-model="dataForm.muscleStrength"
                    placeholder="请选择肌力"
                    style="width: 100%"
                    :clearable="true"
                  >
                    <el-option
                      label="正常"
                      value="1"
                    />
                    <el-option
                      label="减弱"
                      value="2"
                    />
                    <el-option
                      label="增强"
                      value="3"
                    />
                    <el-option
                      label="消失"
                      value="4"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="骨折:"
                  prop="fracture"
                >
                  <el-select
                    v-model="dataForm.fracture"
                    placeholder="请选择骨折"
                    style="width: 100%"
                    :clearable="true"
                  >
                    <el-option
                      label="无"
                      value="1"
                    />
                    <el-option
                      label="有，闭合"
                      value="2"
                    />
                    <el-option
                      label="有，开放"
                      value="3"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="其他体格检查:"
                  prop="otherPhysicalExamination"
                >
                  <el-input
                    placeholder="请输入其他体格检查"
                    v-model="dataForm.otherPhysicalExamination"
                  />
                </el-form-item>
              </el-col>
            </el-row>
          </template>
          <template v-else-if="patientType==4">
            <h2>烧伤</h2>
            <el-form-item
              label="烧伤验证程度划分:"
              prop="dataForm"
            >
              <el-radio-group v-model="dataForm.degreeOfBurn">
                <el-radio :label="1">轻度烧伤</el-radio>
                <el-radio :label="2">中度烧伤</el-radio>
                <el-radio :label="3">重度烧伤</el-radio>
                <el-radio :label="4">特重烧伤</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="烧伤深度评估:"
              prop="burnDepth"
            >
              <el-radio-group v-model="dataForm.burnDepth">
                <el-radio :label="1">Ⅰ°</el-radio>
                <el-radio :label="2">浅Ⅱ°</el-radio>
                <el-radio :label="3">深Ⅱ°</el-radio>
                <el-radio :label="4">Ⅲ°</el-radio>
                <el-radio :label="5">Ⅳ°</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item
              label="烧伤面积:"
              prop="burnArea"
            >
              <el-input
                placeholder="请输入烧伤面积"
                v-model="dataForm.burnArea"
              >
                <i
                  slot="suffix"
                  class="suffix"
                >cm²</i>
              </el-input>
            </el-form-item>
          </template>
          <h2>病史信息</h2>
          <el-form-item
            label="院前诊断:"
            v-if="patientType == 2 || patientType == 3 || patientType == 4"
            prop="preHospitalDiagnosis"
          >
            <el-input
              placeholder="请输入院前诊断"
              type="textarea"
              :rows="2"
              resize="none"
              v-model="dataForm.preHospitalDiagnosis"
            />
          </el-form-item>
          <el-form-item
            label="主诉:"
            prop="chiefComplaint"
          >
            <el-input
              placeholder="请输入主诉"
              type="textarea"
              :rows="2"
              resize="none"
              v-model="dataForm.chiefComplaint"
            />
          </el-form-item>
          <el-form-item
            label="现病史:"
            prop="historyOfPresentIllness"
          >
            <el-input
              placeholder="请输入现病史"
              type="textarea"
              :rows="2"
              resize="none"
              v-model="dataForm.historyOfPresentIllness"
            />
          </el-form-item>
          <el-form-item
            label="既往史(多选):"
            prop="pastHistoryList"
          >
            <el-checkbox-group v-model="dataForm.pastHistoryList">
              <el-checkbox :label="1">高血压</el-checkbox>
              <el-checkbox :label="2">糖尿病</el-checkbox>
              <el-checkbox :label="3">高血脂</el-checkbox>
              <el-checkbox :label="4">脑卒中病史</el-checkbox>
              <el-checkbox :label="5">心脏病史</el-checkbox>
              <el-checkbox :label="6">血液系统病史</el-checkbox>
              <el-checkbox :label="7">肿瘤疾病史</el-checkbox>
              <el-checkbox :label="8">传染病史 </el-checkbox>
              <el-checkbox :label="9">肝炎</el-checkbox>
              <el-checkbox :label="10">疫区生存</el-checkbox>
              <el-checkbox :label="11">手术史</el-checkbox>
              <el-checkbox :label="99">其他既往史</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item
            label="过敏史(多选):"
            prop="allergiesList"
          >
            <el-checkbox-group
              style="float: left"
              v-model="dataForm.allergiesList"
            >
              <el-checkbox :label="1">青霉素</el-checkbox>
              <el-checkbox :label="2">头孢</el-checkbox>
              <el-checkbox :label="99">其他</el-checkbox>
            </el-checkbox-group>
            <el-input
              v-if="dataForm.allergiesList.indexOf(99) > -1"
              placeholder="请补充其他过敏史"
              style="float: left;width: 200px;margin-left: 20px"
              v-model="dataForm.otherAllergies"
            />
          </el-form-item>
          <el-form-item
            label="用药情况:"
            prop="medication"
          >
            <el-input
              type="textarea"
              :rows="2"
              resize="none"
              placeholder="请输入用药情况"
              v-model="dataForm.medication"
            />
          </el-form-item>
          <el-form-item
            label="绕行急诊:"
            v-if="patientType == 1"
            prop="whetherToBypassTheEmergencyDepartment"
          >
            <el-radio-group v-model="dataForm.whetherToBypassTheEmergencyDepartment">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            label="绕行CCU:"
            v-if="patientType == 1"
            prop="whetherToBypassCCU"
          >
            <el-radio-group v-model="dataForm.whetherToBypassCCU">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <template v-if="patientType == 3 || patientType == 4">
            <h2>急救措施</h2>
            <el-form-item
              label="急救措施(多选):"
              prop="firstAidMeasuresList"
            >
              <el-checkbox-group v-model="dataForm.firstAidMeasuresList">
                <el-checkbox :label="1">止血包扎</el-checkbox>
                <el-checkbox :label="2">使用升压药物</el-checkbox>
                <el-checkbox :label="3">心肺复苏</el-checkbox>
                <el-checkbox :label="4">输液</el-checkbox>
                <el-checkbox :label="5">固定（包括颈托、铲担、充气夹板）</el-checkbox>
                <el-checkbox :label="6">气道开放（气管插管、鼻/口咽通气）</el-checkbox>
                <el-checkbox :label="7">使用气血药物（氨甲环酸）</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </template>
          <el-form-item
            label="附件上传："
            prop="fileList"
          >
            <fileUpload :setFileList="fileList" ref="fileUpload" />
          </el-form-item>
   
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { queryDetail } from '@/api/data'
import { queryHospitalList } from '@/api/common'
import { queryEmergencySiteList } from '@/api/site'
import { identityNumberCheck, onsetTimeLengthCheck, breathingCheck, pulseCheck, bodyTemperatureCheck, bloodOxygenSaturationCheck, bloodSugarCheck, heightCheck, weightCheck, bloodPressureCheck, burnAreaCheck } from '../../util/valid'
import fileUpload from '../../components/fileUpload.vue'
export default {
  name: "detail",
  data() {
    const arrivalTimeCheck = (rule, value, callback) => {
      if (value && this.dataForm.callTime && new Date(value).getTime() <= new Date(this.dataForm.callTime).getTime()) {
        callback(new Error())
      } else {
        callback()
      }
    }

    const departureTimeCheck = (rule, value, callback) => {
      if (value && (
        (this.dataForm.arrivalTime && new Date(value).getTime() <= new Date(this.dataForm.arrivalTime).getTime()) ||
        (this.dataForm.callTime && new Date(value).getTime() <= new Date(this.dataForm.callTime).getTime())
      )) {
        callback(new Error())
      } else {
        callback()
      }
    }

    return {
      patientType: '1',//1.胸痛;2.卒中;3.创伤,4烧伤
      type: '',
      associationId: '',
      fileList: [],
      siteList: [],
      hospitalList: [],
      hospitalList2: [],
      selectLoading: false,
      selectLoading2: false,
      token: '',
      dataForm: {
        fastEDScoreList: [],
        conditionAssessmentTwoList: [],
        pastHistoryList: [],
        allergiesList: [],
        firstAidMeasuresList: []
      },
      rules: {
        identityNumber: [{ validator: identityNumberCheck, trigger: 'blur' }],
        onsetTimeLength: [{ validator: onsetTimeLengthCheck, message: '请输入数字', trigger: 'blur' }],
        phoneNumber: [{ pattern: /^[1][3,4,5,7,8,9][0-9]{9}$/, message: '请输入正确格式的手机号', trigger: 'blur' }],
        systolicBloodPressure: [{ validator: bloodPressureCheck, message: '收缩压范围为0~300', trigger: 'blur' }],
        diastolicBloodPressure: [{ validator: bloodPressureCheck, message: '舒张压范围为0~300', trigger: 'blur' }],
        breathing: [{ validator: breathingCheck, message: '呼吸范围为0~200', trigger: 'blur' }],
        pulse: [{ validator: pulseCheck, message: '脉搏范围为0~200', trigger: 'blur' }],
        bodyTemperature: [{ validator: bodyTemperatureCheck, message: '体温范围为20~50', trigger: 'blur' }],
        heartRate: [{ validator: pulseCheck, message: '心率范围为0~200', trigger: 'blur' }],
        bloodOxygenSaturation: [{ validator: bloodOxygenSaturationCheck, message: '血氧饱和度范围为0~100', trigger: 'blur' }],
        bloodSugar: [{ validator: bloodSugarCheck, message: '血糖范围为0~30', trigger: 'blur' }],
        height: [{ validator: heightCheck, message: '身高范围为100~220', trigger: 'blur' }],
        weight: [{ validator: weightCheck, message: '收缩压和舒张压范围为0~300', trigger: 'blur' }],
        burnArea: [{ validator: burnAreaCheck, message: '请输入数字', trigger: 'blur' }],
        carCompanyId: [{ required: true, message: '请选择出车单位' }],
        inHospitalCode: [{ required: true, message: '请选择接诊医院名称' }],
        arrivalTime: [{ validator: arrivalTimeCheck, message: '到达受伤现场时间要大于呼叫120时间' }],
        departureTime: [{ validator: departureTimeCheck, message: '从现场出发时间要大于呼叫120时间和到达受伤现场时间' }]
      }

    }
  },
  mounted() {
    this.init()
  },
  components: {
    fileUpload
  },
  methods: {
    init() {
      const query = this.$route.query
      this.patientType = query.patientType || '1'
      this.associationId = query.associationId
      this.secret = query.secret
      this.type = query.type
      queryEmergencySiteList().then(res => {
        if (res.msg === 201) {
          this.siteList = res.respData
        } else {
          this.$message.error(res.content)
        }
      })
      queryHospitalList().then(res => {
        this.hospitalList = res.respData
        this.hospitalList2 = res.respData
      })
      console.log(this.type)
      if (this.type === 'update' || this.type === 'detail') {
        this.getDetailData()
      }
    },
    getDetailData() {
      const params = {
        patientType: this.patientType,
        associationId: this.associationId,
        secret: this.secret
      }
      const query = this.$route.query
      if (!(query.token && query.params)) {
        this.$message.error('无效数据，请联系管理员')
        return
      }
      queryDetail(params, query).then((res) => {
        if (res.msg == 201) {
          if (res.respData.inHospitalName) {
            this.remoteMethod(res.respData.inHospitalName)
          }
          this.dataForm = {
            ...res.respData,
            fastEDScoreList: res.respData.fastEDScoreList || [],
            conditionAssessmentTwoList: res.respData.conditionAssessmentTwoList || [],
            pastHistoryList: res.respData.pastHistoryList || [],
            allergiesList: res.respData.allergiesList || [],
            firstAidMeasuresList: res.respData.firstAidMeasuresList || [],
            eventType: res.respData.eventType ? res.respData.eventType.split(',') : []
          }
          this.fileList = res.respData.fileList || []
        } else {
          this.$message.error(res.content)
        }
      })
    },
    remoteMethod(query) {
      this.selectLoading = true;
      queryHospitalList(query).then(res => {
        this.hospitalList = res.respData
        this.selectLoading = false;
      })
    },
    remoteMethod2(query) {
      this.selectLoading2 = true;
      queryHospitalList(query).then(res => {
        this.hospitalList2 = res.respData
        this.selectLoading2 = false;
      })
    },
    carCompanyChange(val) {
      if (val) {
        const site = this.siteList.find(i => i.id === val)
        if (!site) {
          this.$message.error('无效数据');
          return
        }
        queryHospitalList(site.hospitalName).then(res => {
          this.hospitalList = res.respData
          this.$set(this.dataForm, 'inHospitalCode', site.hospitalCode || '')
        })
      }
    },
    dateOfBirthChange(str) {
      if (this.dataForm.age) {
        return
      }
      var r = str.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
      if (r == null) return false;
      let age = 0
      var d = new Date(r[1], r[3] - 1, r[4]);
      if (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]) {
        var Y = new Date().getFullYear();
        age = (Y - r[1])
      }
      this.$set(this.dataForm, 'age', age)
    },
    onsetTimeChange(date) {
      if (this.dataForm.onsetTimeLength) {
        return
      }
      var time = (new Date().getTime() - new Date(date).getTime()) / (60 * 60 * 1000)
      if (time > 0) {
        this.$set(this.dataForm, 'onsetTimeLength', time.toFixed())
      }
    },
    calcBMI() {
      var weight = parseInt(this.dataForm.weight);
      var height = parseInt(this.dataForm.height);
      let bmi = ''
      if (weight > 0 && height > 0) {
        bmi = (weight / (height * height / 10000)).toFixed(2);
      }
      this.$set(this.dataForm, 'bmi', bmi)
    },
    goBack() {
      this.$router.push('/business/hospital')
    },
  }
}
</script>

<style lang="scss" scoped>
.detail-page-header {
  height: 45px;
  background: #ffffff;
  margin-bottom: 5px;
  padding-left: 20px;
  font-size: 14px;
  color: #333333;
  .back {
    cursor: pointer;
  }
  .title {
    font-weight: 600;
  }
}
.flex-row-colCenter {
  display: flex;
  align-items: center;
}
.padding-left-20 {
  padding-left: 20px;
  text-align: right;
  width: 160px;
}
.background-gray {
  background: #f5f5f5;
  padding: 10px 20px;
}
.background-white {
  background: #ffffff;
}
.main-page-body {
  .mainContent {
    padding: 20px;
    .detailForm {
      h2 {
        min-width: 80px;
        height: 16px;
        font-size: 14px;
        font-weight: 600;
        color: #333333;
        line-height: 16px;
        padding-bottom: 15px;
      }
    }
    .suffix {
      margin-right: 10px;
      color: #333;
    }
    .row {
      display: flex;
      .span {
        width: 200px;
        display: inline-block;
        text-align: right;
      }
    }
    .btn {
      float: right;
      width: 100px;
    }
  }
}
</style>
<style lang="scss">
.background-gray {
  .el-tabs__item,
  .el-tabs__item.is-disabled {
    color: #333;
  }
  .el-tabs__item.is-active,
  .el-tabs__item.is-disabled.is-active {
    color: #017bce;
  }
  .el-input.is-disabled .el-input__inner {
    background-color: #fff;
    border-color: #40a2de;
    color: #606266;
  }
  .el-radio__input.is-disabled .el-radio__inner {
    border-color: #40a2de;
    background-color: #fff;
  }
  .el-radio__input.is-disabled.is-checked .el-radio__inner {
    border-color: #40a2de;
    background-color: #fff;
  }
  .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
    background-color: #40a2de;
  }
  .el-radio__input.is-disabled + span.el-radio__label {
    color: #606266;
  }
  .el-radio__input.is-disabled.is-checked + span.el-radio__label {
    color: #017bce;
  }
  .el-textarea.is-disabled .el-textarea__inner {
    background-color: #fff;
    border-color: #40a2de;
    color: #606266;
  }
  .el-checkbox__input.is-disabled .el-checkbox__inner {
    background-color: #fff;
    border-color: #40a2de;
  }
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner {
    background-color: #017bce;
    border-color: #017bce;
  }
  .el-checkbox__input.is-disabled.is-checked .el-checkbox__inner::after {
    border-color: #fff;
  }
  .el-checkbox__input.is-disabled + span.el-checkbox__label {
    color: #606266;
  }

  .el-checkbox__input.is-checked.is-disabled + span.el-checkbox__label {
    color: #017bce;
  }
}
</style>