<template>
  <div class="questionEyehistory">
    <p class="title">眼科病史问卷调查</p>
    <van-dialog v-model="tipShow" title="指导语提示" @close="closeTip">
      <div class="tips">
        <span style="color:red;">请您务必认真作答！</span>
        <span>屈光手术检查前，需要您填写眼科病史、既往病史和家族史的相关信息，请耐心填写问卷。</span>
        <!-- <div style="color:red;margin-top:10px;">
          <span>注意：</span>
          <span>所有的年份填写都是<b style="color:green"> “ 已有几年时间 ”</b>，而非 “ 哪一年 ”。</span>
        </div>
        <div class="flex margin-top-10">
          <p style="color:red;margin-top:10px;"><b>例如：</b></p>
          <div>
            <div style="color:green">
              <span>停戴时间：2年</span>
              <van-icon name="success" style="padding-left:12px;font-size:24px" />
            </div>
            <div style="color:red;">
              <span>停戴时间：2023年</span>
              <van-icon name="cross" style="padding-left:12px;font-size:24px" />
            </div>
          </div>
        </div> -->
      </div>
    </van-dialog>
    <van-form @submit="judgeTodayWrite" @failed="onFailed">
      <div class="qustion-content">
        <div v-if="!isHaveParams" class="li-row margin-bottom-10">
          <span class="li-row-title">请填写身份信息</span>
          <van-radio-group v-model="dataForm.idcardType" direction="horizontal" class="margin-top-10 margin-bottom-10"
            @change="idcardRadioChange">
            <van-radio name="身份证">身份证</van-radio>
            <van-radio name="护照">护照</van-radio>
          </van-radio-group>
          <div class="li-row">
            <van-field v-model.trim="dataForm.idcard"
              :rules="dataForm.idcardType ==='护照' ? formRyles.requirePatient : formRyles.idcard" required clearable
              :label="dataForm.idcardType" placeholder="请输入证件号" @clear="clearidcard" @input="idcardInput" />
          </div>
        </div>
        <div>
          <van-field v-model.trim="dataForm.zhiye" class="margin-bottom-10" required :rules="formRyles.requirePatient"
            clearable label="职 业" placeholder="请输入职业" />
          <van-field v-model.trim="dataForm.minzu" class="margin-bottom-10" required clearable
            :rules="formRyles.requirePatient" label="民 族" placeholder="请输入民族" />
          <van-field v-model.trim="dataForm.jiguan" class="margin-bottom-10" required clearable
            :rules="formRyles.requirePatient" label="出生地" placeholder="请输入籍贯" />
          <van-field v-model.trim="dataForm.changzhuguo" class="margin-bottom-10" required
            :rules="formRyles.requirePatient" clearable label="常住国" placeholder="请输入常住国" />
        </div>
        <div class="li-row margin-top-20 required1">
          <div class="nobackground">
            <van-field required :rules="formRyles.requireQuestion" name="radio">
              <template #input>
                <p class="margin-bottom-10">
                  <span class="li-row-title">1、发现近视/远视/散光：</span>
                </p>
                <div class="padd">
                  <van-radio-group v-model="dataForm.jsEyetypeRadio" direction="horizontal" class="shili-radio">
                    <van-radio name="双眼">双眼</van-radio>
                    <van-radio name="右眼">右眼</van-radio>
                    <van-radio name="左眼">左眼</van-radio>
                  </van-radio-group>
                </div>
              </template>
            </van-field>
          </div>

          <div class="padd">
            <div v-if="dataForm.jsEyetypeRadio" class="flex-2 margin-top-10 centerfield">
              <span>总共有</span>
              <van-field v-model.trim="dataForm.jsTimeInput" type="number" class="width-field-100 margin-left-10"
                placeholder="几年" :rules="formRyles.requireContent" @change="maxNumberChange('jsTimeInput',$event)" />
              <van-popover v-model="jsShowPopover" trigger="click" :actions="unitList"
                @select="onSelect($event,'jsUnit')">
                <template #reference>
                  <span class="unitClass">
                    {{ dataForm.jsUnit }}
                    <van-icon name="arrow-down" size="14" />
                  </span>
                </template>
              </van-popover>
            </div>
          </div>
        </div>
        <div class="li-row centerfield">
          <div class="nobackground">
            <van-field required :rules="formRyles.requireQuestion" name="radio">
              <template #input>
                <p>
                  <span class="li-row-title">2、戴眼镜：</span>
                  <van-radio-group v-model="dataForm.dyjRadio" direction="horizontal" @change="radioChange('dyjRadio')">
                    <van-radio name="有">有</van-radio>
                    <van-radio name="无">无</van-radio>
                  </van-radio-group>
                </p>
              </template>
            </van-field>
          </div>

          <div v-if="dataForm.dyjRadio.includes('有')" class="padd margin-top-10">
            <div class="flex">
              <span>总共有</span>
              <van-field v-model.trim="dataForm.dyjTimeInput" :rules="formRyles.requireContent" placeholder="几年"
                type="number" class="width-field-100 margin-left-10" @change="maxNumberChange('dyjTimeInput',$event)" />
              <van-popover v-model="dyjShowPopover" :rules="formRyles.requireQuestion" trigger="click"
                :actions="unitList" @select="onSelect($event,'dyjUnit')">
                <template #reference>
                  <span class="unitClass">
                    {{ dataForm.dyjUnit }}
                    <van-icon name="arrow-down" size="14" />
                  </span>
                </template>
              </van-popover>
            </div>
            <div class="margin-top-10 nobackground">
              <van-field :rules="formRyles.requireQuestion" name="radio">
                <template #input>
                  <van-radio-group v-model="dataForm.dyjbeizhu" direction="horizontal"
                    @change="radioChange('dyjbeizhu')">
                    <van-radio name="常天戴">常天戴</van-radio>
                    <van-radio name="偶尔戴">偶尔戴</van-radio>
                  </van-radio-group>
                </template>
              </van-field>
            </div>
            <div class=" margin-top-10">
              <span style="font-weight:700;">戴镜度数：</span>
              <div class="flex">
                <span class="flex">
                  右眼:
                  <van-field v-model.trim="dataForm.djdsOd"
                    :rules="dataForm.djdsIsDisabled ? formRyles.requireNoContent : formRyles.requireContent"
                    placeholder="度数" :disabled="dataForm.djdsIsDisabled" class="width-field-70 margin-left-10" />
                </span>
                <span class="flex padding-left-10">
                  左眼:
                  <van-field v-model.trim="dataForm.djdsOs"
                    :rules="dataForm.djdsIsDisabled ? formRyles.requireNoContent : formRyles.requireContent"
                    placeholder="度数" :disabled="dataForm.djdsIsDisabled" class="width-field-70 margin-left-10" />
                </span>
                <span class="padding-left-10">
                  <van-checkbox v-model="dataForm.djdsBX" shape="square" name="不详"
                    @change="checkboxChange('djdsCheck',$event)">不详</van-checkbox>
                </span>
              </div>
            </div>
          </div>
        </div>
        <div class="li-row centerfield nobackground">
          <van-field required :rules="formRyles.requireQuestion" name="radio">
            <template #input>
              <p>
                <span class="li-row-title">3、戴隐形眼镜：</span>
                <van-radio-group v-model="dataForm.yxyjRadio" direction="horizontal" @change="radioChange('yxyjRadio')">
                  <van-radio name="有">有</van-radio>
                  <van-radio name="无">无</van-radio>
                </van-radio-group>

              </p>
            </template>
          </van-field>
          <div v-if="dataForm.yxyjRadio.includes('有')" class="padd leixing background-field">
            <div class="ok">
              <div class="flex margin-bottom-10">
                <van-checkbox v-model="dataForm.yxyjOkCheck" shape="square" name="OK镜"
                  @change="checkboxChange('yxyjOkCheck',$event)">OK镜</van-checkbox>
                <template v-if="dataForm.yxyjOkCheck">
                  <van-field v-model.trim="dataForm.yxyjOkInput" :rules="formRyles.requireContent" placeholder="几年"
                    type="number" class="width-field-100 back-gley" @input="inputChange('yxyjOkCheck',$event)" />
                  <van-popover v-model="okShowPopover" trigger="click" :actions="unitList"
                    @select="onSelect($event,'yxyjOkUnit')">
                    <template #reference>
                      <span class="unitClass">
                        {{ dataForm.yxyjOkUnit }}
                        <van-icon name="arrow-down" size="14" />
                      </span>
                    </template>
                  </van-popover>
                </template>
              </div>
              <template v-if="dataForm.yxyjOkCheck">
                <p class="padd pinlv">
                  <span>频率：</span>
                  <van-field required :rules="formRyles.requireQuestion" name="radio">
                    <template #input>
                      <van-radio-group v-model="dataForm.yxyjOkPlRadio" direction="horizontal">
                        <van-radio name="常戴">常戴</van-radio>
                        <van-radio name="偶戴">偶戴</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>

                </p>
                <p class="padd">
                  <span>已停戴有：</span>
                  <van-field v-model.trim="dataForm.yxyjOkTdTimeInput" :rules="formRyles.requireContent"
                    placeholder="几年" class="width-field-100 back-gley" type="number" />
                  <van-popover v-model="okTjTimeshowPopover" trigger="click" :actions="unitList"
                    @select="onSelect($event,'yxyjOkTdTimeUnit')">
                    <template #reference>
                      <span class="unitClass">
                        {{ dataForm.yxyjOkTdTimeUnit }}
                        <van-icon name="arrow-down" size="14" />
                      </span>
                    </template>
                  </van-popover>
                </p>
              </template>
            </div>
            <div class="gmj">
              <div class="flex margin-bottom-10">
                <van-checkbox v-model="dataForm.yxyjGmjCheck" shape="square" name="巩膜镜"
                  @change="checkboxChange('yxyjGmjCheck',$event)">巩膜镜</van-checkbox>
                <template v-if="dataForm.yxyjGmjCheck">
                  <van-field v-model.trim="dataForm.yxyjGmjInput" :rules="formRyles.requireContent" placeholder="几年"
                    type="number" class="width-field-100 back-gley" @input="inputChange('yxyjGmjCheck',$event)" />
                  <van-popover v-model="gmjShowPopover" trigger="click" :actions="unitList"
                    @select="onSelect($event,'yxyjGmjUnit')">
                    <template #reference>
                      <span class="unitClass">
                        {{ dataForm.yxyjGmjUnit }}
                        <van-icon name="arrow-down" size="14" />
                      </span>
                    </template>
                  </van-popover>
                </template>
              </div>
              <template v-if="dataForm.yxyjGmjCheck">
                <p class="padd pinlv">
                  <span>频率：</span>
                  <van-field required :rules="formRyles.requireQuestion" name="radio">
                    <template #input>
                      <van-radio-group v-model="dataForm.yxyjGmjPlRadio" direction="horizontal">
                        <van-radio name="常戴">常戴</van-radio>
                        <van-radio name="偶戴">偶戴</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>

                </p>
                <p class="padd">
                  <span>已停戴有：</span>
                  <van-field v-model.trim="dataForm.yxyjGmjTdTimeInput" :rules="formRyles.requireContent"
                    placeholder="几年" class="width-field-100 back-gley" type="number" />
                  <van-popover v-model="gmjTjTimeshowPopover" trigger="click" :actions="unitList"
                    @select="onSelect($event,'yxyjGmjTdTimeUnit')">
                    <template #reference>
                      <span class="unitClass">
                        {{ dataForm.yxyjGmjTdTimeUnit }}
                        <van-icon name="arrow-down" size="14" />
                      </span>
                    </template>
                  </van-popover>
                </p>
              </template>
            </div>
            <div class="rgp margin-top-10">
              <div class="flex margin-bottom-10">
                <van-checkbox v-model="dataForm.yxyjRgpCheck" shape="square" name="RGP"
                  @change="checkboxChange('yxyjRgpCheck',$event)">RGP</van-checkbox>
                <template v-if="dataForm.yxyjRgpCheck">
                  <van-field v-model.trim="dataForm.yxyjRgpInput" :rules="formRyles.requireContent" placeholder="几年"
                    type="number" class="width-field-100 back-gley" @input="inputChange('yxyjRgpCheck',$event)" />
                  <van-popover v-model="rgpShowPopover" trigger="click" :actions="unitList"
                    @select="onSelect($event,'yxyjRgpUnit')">
                    <template #reference>
                      <span class="unitClass">
                        {{ dataForm.yxyjRgpUnit }}
                        <van-icon name="arrow-down" size="14" />
                      </span>
                    </template>
                  </van-popover>
                </template>
              </div>
              <template v-if="dataForm.yxyjRgpCheck">
                <p class="padd pinlv">
                  <span>频率：</span>
                  <van-field required :rules="formRyles.requireQuestion" name="radio">
                    <template #input>
                      <van-radio-group v-model="dataForm.yxyjRgpPlRadio" direction="horizontal">
                        <van-radio name="常戴">常戴</van-radio>
                        <van-radio name="偶戴">偶戴</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                </p>
                <p class="padd">
                  <span>已停戴有：</span>
                  <van-field v-model.trim="dataForm.yxyjRgpTdTimeInput" :rules="formRyles.requireContent"
                    placeholder="几年" type="number" class="width-field-100 back-gley" />
                  <van-popover v-model="rgpTjTimeshowPopover" trigger="click" :actions="unitList"
                    @select="onSelect($event,'yxyjRgpTdTimeUnit')">
                    <template #reference>
                      <span class="unitClass">
                        {{ dataForm.yxyjRgpTdTimeUnit }}
                        <van-icon name="arrow-down" size="14" />
                      </span>
                    </template>
                  </van-popover>
                </p>
              </template>
            </div>
            <div class="rj margin-top-10">
              <div class="flex margin-bottom-10">
                <van-checkbox v-model="dataForm.yxyjRjCheck" shape="square" name="软镜"
                  @change="checkboxChange('yxyjRjCheck',$event)">软镜</van-checkbox>
                <template v-if="dataForm.yxyjRjCheck">
                  <van-field v-model.trim="dataForm.yxyjRjInput" :rules="formRyles.requireContent" placeholder="几年"
                    type="number" class="width-field-100 back-gley" @input="inputChange('yxyjRjCheck',$event)" />
                  <van-popover v-model="rjshowPopover" trigger="click" :actions="unitList"
                    @select="onSelect($event,'yxyjRjUnit')">
                    <template #reference>
                      <span class="unitClass">
                        {{ dataForm.yxyjRjUnit }}
                        <van-icon name="arrow-down" size="14" />
                      </span>
                    </template>
                  </van-popover>
                </template>
              </div>
              <template v-if="dataForm.yxyjRjCheck">
                <p class="padd pinlv">
                  <span>频率：</span>
                  <van-field required :rules="formRyles.requireQuestion" name="radio">
                    <template #input>
                      <van-radio-group v-model="dataForm.yxyjRjPlRadio" direction="horizontal">
                        <van-radio name="常戴">常戴</van-radio>
                        <van-radio name="偶戴">偶戴</van-radio>
                      </van-radio-group>
                    </template>
                  </van-field>
                </p>
                <p class="padd">
                  <span>已停戴有：</span>
                  <van-field v-model.trim="dataForm.yxyjRjTdTimeInput" :rules="formRyles.requireContent"
                    placeholder="几年" type="number" class="width-field-100 back-gley" />
                  <van-popover v-model="rjTjTimeshowPopover" trigger="click" :actions="unitList"
                    @select="onSelect($event,'yxyjRjTdTimeUnit')">
                    <template #reference>
                      <span class="unitClass">
                        {{ dataForm.yxyjRjTdTimeUnit }}
                        <van-icon name="arrow-down" size="14" />
                      </span>
                    </template>
                  </van-popover>
                </p>
              </template>
            </div>
          </div>
        </div>
        <div class="li-row" />
        <div class="li-row">
          <div class="nobackground">
            <van-field required :rules="formRyles.requireQuestion" name="radio">
              <template #input>
                <p>
                  <span class="li-row-title">4、2年内稳定情况：</span>
                  <van-radio-group v-model="dataForm.twoYearwdqkRadio" direction="horizontal"
                    @change="radioChange('twoYearwdqkRadio')">
                    <van-radio name="稳定">稳定</van-radio>
                    <van-radio name="不稳定">不稳定</van-radio>
                    <van-radio name="不详">不详</van-radio>
                  </van-radio-group>
                </p>
              </template>
            </van-field>
          </div>
          <p v-if="dataForm.twoYearwdqkRadio==='不稳定'" class="padd centerfield">
            <span>每年增长：</span>
            <van-field v-model.trim="dataForm.everyYearDsInput" class="width-field-100" placeholder="请输入"
              :rules="formRyles.requireContent" />
            <span style="padding-left:10px">度</span>
          </p>
        </div>
        <div class="li-row nobackground">
          <van-field required :rules="formRyles.requireQuestion" name="radio">
            <template #input>
              <p>
                <span class="li-row-title">5、其它屈光手术史：</span>
                <van-radio-group v-model="dataForm.qtqgssRadio" direction="horizontal"
                  @change="radioChange('qtqgssRadio')">
                  <van-radio name="否认">否认</van-radio>
                  <van-radio name="有">有</van-radio>
                </van-radio-group>
              </p>
            </template>
          </van-field>
          <van-field v-if="dataForm.qtqgssRadio==='有'" v-model.trim="dataForm.qtqgssInput"
            :rules="formRyles.requireContent" rows="2" autosize maxlength="150" show-word-limit type="textarea"
            placeholder="请输入其它屈光手术史" />
        </div>
        <div class="li-row nobackground">
          <van-field required :rules="formRyles.requireQuestion" name="radio">
            <template #input>
              <p>
                <span class="li-row-title">6、眼病及眼科手术史：</span>
                <van-radio-group v-model="dataForm.ybykSssRadio" direction="horizontal"
                  @change="radioChange('ybykSssRadio')">
                  <van-radio name="否认">否认</van-radio>
                  <van-radio name="有">有</van-radio>
                </van-radio-group>
              </p>
            </template>
          </van-field>
          <van-field v-if="dataForm.ybykSssRadio==='有'" v-model.trim="dataForm.ybykSssInput"
            :rules="formRyles.requireContent" rows="2" autosize maxlength="150" show-word-limit type="textarea"
            placeholder="请输入眼病及眼科手术史" />
        </div>
        <div class="li-row required8">
          <p>
            <span class="li-row-title">7、眼睛是否有不适：</span>
          </p>
          <van-field name="checkboxGroup" class="background-field" required :rules="formRyles.requireQuestion">
            <template #input>
              <van-checkbox-group v-model="dataForm.yjbsCheckbox" direction="horizontal"
                @change="checkChange('yjbsCheckbox')">
                <van-checkbox v-for="(item,index) in visualSymptomslist" :key="index"
                  :disabled="(dataForm.yjbsCheckbox.includes('无') && item !=='无') ||
                    (dataForm.yjbsCheckbox.length > 0 && !dataForm.yjbsCheckbox.includes('无') && item==='无') ? true : false " :name="item" shape="square">{{ item }}</van-checkbox>
              </van-checkbox-group>
            </template>
          </van-field>
        </div>
        <div class="li-row required9">
          <p>
            <span class="li-row-title">8、要求手术原因：</span>
          </p>
          <div>
            <van-field name="checkboxGroup" class="background-field" required :rules="formRyles.requireQuestion">
              <template #input>
                <van-checkbox-group v-model="dataForm.yqssCheckbox" direction="horizontal"
                  @change="checkChange('yqssCheckbox')">
                  <van-checkbox v-for="(item,index) in causesOperationlist" :key="index" :name="item" shape="square">
                    {{ item }}</van-checkbox>
                </van-checkbox-group>
              </template>
            </van-field>
            <p v-if="dataForm.yqssCheckbox.includes('体检')" class="tijian">
              <van-field name="checkboxGroup" class="background-field" :rules="formRyles.requireQuestion">
                <template #input>
                  <van-checkbox-group v-model="dataForm.tijianCheckbox" direction="horizontal">
                    <van-checkbox v-for="(item,index) in tijianList" :key="index" :name="item" shape="square">{{ item }}
                    </van-checkbox>
                  </van-checkbox-group>
                </template>
              </van-field>
            </p>
            <van-field v-if="dataForm.yqssCheckbox.includes('其它')" v-model.trim="dataForm.ssqtInput"
              :rules="formRyles.requireContent" class="margin-top-10" rows="2" autosize type="textarea"
              placeholder="请输入其它原因" />
          </div>
        </div>
        <div class="li-row nobackground">
          <van-field required :rules="formRyles.requireQuestion" name="radio">
            <template #input>
              <p>
                <span class="li-row-title">9、外伤/手术史：</span>
                <van-radio-group v-model="dataForm.wsOperaRadio" direction="horizontal"
                  @change="radioChange('wsOperaRadio')">
                  <van-radio name="否认">否认</van-radio>
                  <van-radio name="有">有</van-radio>
                </van-radio-group>
              </p>
            </template>
          </van-field>
          <van-field v-if="dataForm.wsOperaRadio==='有'" v-model.trim="dataForm.wsOperaInput"
            :rules="formRyles.requireContent" rows="2" autosize maxlength="150" show-word-limit type="textarea"
            placeholder="请输入外伤/手术史" />
        </div>
        <div class="li-row nobackground">
          <van-field required :rules="formRyles.requireQuestion" name="radio">
            <template #input>
              <p>
                <span class="li-row-title">10、药物过敏史：</span>
                <van-radio-group v-model="dataForm.ywgmsRadio" direction="horizontal"
                  @change="radioChange('ywgmsRadio')">
                  <van-radio name="否认">否认</van-radio>
                  <van-radio name="有">有</van-radio>
                </van-radio-group>
              </p>
            </template>
          </van-field>
          <van-field v-if="dataForm.ywgmsRadio==='有'" v-model.trim="dataForm.ywgmsInput"
            :rules="formRyles.requireContent" rows="2" autosize maxlength="150" show-word-limit type="textarea"
            placeholder="请输入药物过敏史" />
        </div>
        <div class="li-row nobackground">
          <van-field required :rules="formRyles.requireQuestion" name="radio">
            <template #input>
              <p>
                <span class="li-row-title">11、瘢痕体质：</span>
                <van-radio-group v-model="dataForm.bhtzRadio" direction="horizontal" @change="radioChange('bhtzRadio')">
                  <van-radio name="否认">否认</van-radio>
                  <van-radio name="有">有</van-radio>
                </van-radio-group>
              </p>
            </template>
          </van-field>
          <van-field v-if="dataForm.bhtzRadio==='有'" v-model.trim="dataForm.bhtzInput" :rules="formRyles.requireContent"
            rows="2" autosize maxlength="150" show-word-limit type="textarea" placeholder="请输入瘢痕体质" />
        </div>
        <div class="li-row nobackground">
          <van-field required :rules="formRyles.requireQuestion" name="radio">
            <template #input>
              <p>
                <span class="li-row-title">12、其它全身病史：</span>
                <van-radio-group v-model="dataForm.qtbsRadio" direction="horizontal" @change="radioChange('qtbsRadio')">
                  <van-radio name="否认">否认</van-radio>
                  <van-radio name="有">有</van-radio>
                </van-radio-group>
              </p>
            </template>
          </van-field>
          <div v-if="dataForm.qtbsRadio==='有'">
            <van-field name="checkboxGroup" class="background-field" :rules="formRyles.requireQuestion">
              <template #input>
                <van-checkbox-group v-model="dataForm.qtbsCheck" direction="horizontal"
                  @change="checkChange('qtbsCheck')">
                  <van-checkbox v-for="(item,index) in historyList" :key="index" :name="item" shape="square">{{ item }}
                  </van-checkbox>
                </van-checkbox-group>
              </template>
            </van-field>
            <van-field v-if="dataForm.qtbsCheck.includes('其它')" v-model.trim="dataForm.qtbsInput"
              :rules="formRyles.requireContent" class="margin-top-10" rows="2" autosize maxlength="150" show-word-limit
              type="textarea" placeholder="请输入其它全身病史" />
          </div>
        </div>
        <div class="li-row nobackground">
          <van-field required :rules="formRyles.requireQuestion" name="radio">
            <template #input>
              <p>
                <span class="li-row-title">13、半年内服药史：</span>
                <van-radio-group v-model="dataForm.fysRadio" direction="horizontal" @change="radioChange('fysRadio')">
                  <van-radio name="否认">否认</van-radio>
                  <van-radio name="有">有</van-radio>
                </van-radio-group>
              </p>
            </template>
          </van-field>
          <div v-if="dataForm.fysRadio==='有'">
            <van-field name="checkboxGroup" class="background-field" :rules="formRyles.requireQuestion">
              <template #input>
                <van-checkbox-group v-model="dataForm.fysCheck" direction="horizontal"
                  @change="checkChange('fysCheck')">
                  <van-checkbox v-for="(item,index) in bnFysList" :key="index" :name="item" shape="square">
                    {{ item }}
                  </van-checkbox>
                </van-checkbox-group>
              </template>
            </van-field>
            <div v-if="dataForm.fysCheck.includes('激素类药物')" class="margin-top-10">
              激素类药物：
              <van-field v-model.trim="dataForm.fysJislInput" :rules="formRyles.requireContent" rows="2" autosize
                maxlength="150" show-word-limit class="margin-top-10" type="textarea" placeholder="请输入激素类药物" />
            </div>
            <div v-if="dataForm.fysCheck.includes('精神类药物')" class="margin-top-10">
              精神类药物：
              <van-field v-model.trim="dataForm.fysJingslInput" :rules="formRyles.requireContent" rows="2" autosize
                maxlength="150" show-word-limit class="margin-top-10" type="textarea" placeholder="请输入精神类药物" />
            </div>
            <div v-if="dataForm.fysCheck.includes('其它')" class="margin-top-10">
              其它：
              <van-field v-model.trim="dataForm.fysInput" :rules="formRyles.requireContent" rows="2" autosize
                maxlength="150" show-word-limit class="margin-top-10" type="textarea" placeholder="请输入其他半年内服药史" />
            </div>
          </div>

        </div>
        <div class="li-row nobackground">
          <van-field required :rules="formRyles.requireQuestion" name="radio">
            <template #input>
              <p>
                <span class="li-row-title">14、直系亲属近视/远视/散光：</span>
                <van-radio-group v-model="dataForm.jzsRadio" direction="horizontal" @change="radioChange('jzsRadio')">
                  <van-radio name="否认">否认</van-radio>
                  <van-radio name="有">有</van-radio>
                </van-radio-group>
              </p>
            </template>
          </van-field>
          <van-field v-if="dataForm.jzsRadio==='有'" v-model.trim="dataForm.jzsInput" :rules="formRyles.requireContent"
            rows="2" autosize maxlength="150" show-word-limit type="textarea" placeholder="请输入家族史" />
        </div>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="judgeTodayWrite" :disabled="buttonDisbled">{{ buttonText }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { Toast } from 'vant'
import { Dialog } from 'vant'
import { isIDNumber } from '@/utils/validate'
import urlAddress from '@/mixins/urlAddress'
import clearContent from '@/mixins/clearContent'
export default {
  mixins: [urlAddress, clearContent],
  data() {
    return {
      showPopupSign: false,
      idcardErrorShow: false,
      dataForm: {
        idcardType: '身份证',
        idcard: '',
        zhiye: '',
        minzu: '汉族',
        jiguan: '',
        changzhuguo: '中国',
        date: '',
        // 视力逐渐减退
        jsEyetypeRadio: '',
        jsTimeInput: '',
        jsUnit: '年',
        // 戴眼镜
        dyjRadio: '',
        dyjTimeInput: '',
        dyjUnit: '年',
        dyjbeizhu: '',
        // 现镜度数
        xjdsRadio: null,
        xjdsOdInput: null,
        xjdsOsInput: null,
        // 现镜配置时间
        xjpzTimeInput: null,
        xjpzTimeUnit: '年',
        // 是否禁用戴镜度数的填写输入框
        djdsIsDisabled: false,
        // 戴镜度数
        djdsOd: '',
        djdsOs: '',
        djdsBX: '',
        // 戴隐形眼镜
        yxyjRadio: '',
        // ok镜
        yxyjOkCheck: false,
        yxyjOkInput: '',
        yxyjOkUnit: '年',
        yxyjOkPlRadio: '',
        yxyjOkTdTimeInput: '',
        yxyjOkTdTimeUnit: '年',
        // 巩膜镜
        yxyjGmjCheck: false,
        yxyjGmjInput: '',
        yxyjGmjUnit: '年',
        yxyjGmjPlRadio: '',
        yxyjGmjTdTimeInput: '',
        yxyjGmjTdTimeUnit: '年',
        // RGP
        yxyjRgpCheck: false,
        yxyjRgpInput: '',
        yxyjRgpUnit: '年',
        yxyjRgpPlRadio: '',
        yxyjRgpTdTimeInput: '',
        yxyjRgpTdTimeUnit: '年',
        // 软镜
        yxyjRjCheck: false,
        yxyjRjInput: '',
        yxyjRjUnit: '年',
        yxyjRjPlRadio: '',
        yxyjRjTdTimeInput: '',
        yxyjRjTdTimeUnit: '年',
        // 2年内稳定情况
        twoYearwdqkRadio: '',
        // 每年增长度数
        everyYearDsInput: '',
        // 其它屈光手术史
        qtqgssRadio: '',
        qtqgssInput: '',
        // 眼病及眼科手术史
        ybykSssRadio: '',
        ybykSssInput: '',
        // 眼睛是否有不适
        yjbsCheckbox: [],
        // 要求手术原因
        yqssCheckbox: [],
        // 选择体检后的选项
        tijianCheckbox: [],
        // 手术其它原因
        ssqtInput: '',
        // 外伤/手术史
        wsOperaRadio: '',
        wsOperaInput: '',
        // 药物过敏史
        ywgmsRadio: '',
        ywgmsInput: '',
        // 瘢痕体质
        bhtzRadio: '',
        bhtzInput: '',
        // 其它全身病史
        qtbsRadio: '',
        qtbsCheck: [],
        qtbsInput: '',
        // 半年内服药史
        fysRadio: '',
        fysCheck: [],
        // 激素类药物
        fysJislInput: '',
        // 精神类药物
        fysJingslInput: '',
        fysInput: '',
        // 家族史
        jzsRadio: '',
        jzsInput: ''
      },
      visualSymptomslist: ['视疲劳', '眩光', '眼干', '无'],
      causesOperationlist: ['体检', '戴镜不适', '改变形象', '方便工作生活', '其它'],
      tijianList: ['兵检', '军检', '医检', '公务员', '警校'],
      historyList: ['甲亢', '甲减', '高血压', '抑郁', '焦虑', '糖尿病', '其它'],
      bnFysList: ['激素类药物', '精神类药物', '其它'],
      patientInfo: {},
      unitList: [
        { text: '年', value: '年' },
        { text: '月', value: '月' },
        { text: '周', value: '周' },
        { text: '天', value: '天' },
        { text: '小时', value: '小时' },
      ],
      dyqkList: [{
        text: '常天戴',
        value: '常天戴'
      }, {
        text: '偶尔戴',
        value: '偶尔戴'
      }],
      patientIdNumber: '',
      isHaveParams: true,
      jsShowPopover: false,
      dyjShowPopover: false,
      djqkShowPopover: false,
      xjpzShowPopover: false,
      okShowPopover: false,
      okTjTimeshowPopover: false,
      gmjShowPopover: false,
      gmjTjTimeshowPopover: false,
      rgpShowPopover: false,
      rgpTjTimeshowPopover: false,
      rjshowPopover: false,
      rjTjTimeshowPopover: false,
      // 表单校验规则
      formRyles: {
        requirePatient: [
          { required: true }
        ],
        requireQuestion: [
          { required: true, message: '请做出选择' }
        ],
        requireContent: [
          { required: true }
        ],
        requireNoContent: [
          { required: false }
        ],
        yxyjRequire: [
          {
            validator: value => {
              !!(this.dataForm.yxyjOkCheck && this.dataForm.yxyjGmjCheck && this.dataForm.yxyjRgpCheck && this.dataForm.yxyjRjCheck)
            },
            message: '请做出选择',
            trigger: 'onBlur'
          }
        ],
        idcard: [
          { required: true },
          {
            // pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: '身份证号格式输入错误'
          }
        ]
      },
      buttonDisbled: false,
      buttonText: '提交',
      tipShow: false,
    }
  },
  created() {
    this.getUrlAddress()
    this.getSearchParam()
  },
  mounted() {
    this.tipShow = true
  },
  methods: {
    // 获取参数
    getSearchParam() {
      if (window.location.search) {
        console.log(window.location.search)
        this.isHaveParams = true
        var searchHref = window.location.search.replace('?', '')
        var params = searchHref.split('=')
        console.log(params)

        const paramsInfo = params[1].replace(/%3D|\s/g, '')
        this.patientInfo = JSON.parse(this.$Base64.decode(paramsInfo))
        console.log(this.patientInfo)
        // this.getInfo()
      } else {
        this.isHaveParams = false
      }
    },
    closeTip() {
      this.tipShow = false
    },
    async getInfo() {
      const { data: res } = await this.$http.get('/quguang/survey/getInfo', {
        params: {
          backId: this.patientInfo.backId
        }
      })
      if (res.code === 0) {
        this.dataForm = res.data.questionList
      } else {
        Toast(res.msg)
      }
    },
    trim(v) {
      this[v] = this[v].replace(/\s+/g, '')
    },
    onFailed() {
      Dialog.alert({
        title: '提醒',
        message: '您还有必填项未填写完，请填写完后再提交，谢谢配合。',
        theme: 'round-button'
      })
      // Toast('您还有必填项未填写完，请认真填写后再保存')
    },
    idcardRadioChange() {
      this.dataForm.idcard = ''
      this.idcardErrorShow = false
    },
    idcardInput(val) {
      this.dataForm.idcard = val.trim()
      this.idcardErrorShow = !isIDNumber(this.dataForm.idcard.trim())
    },
    // input改变时
    inputChange(text, e) {
      console.log(e)
      e ? this.dataForm[text] = true : ''
    },
    checkboxChange(text, e) {
      if (!this.dataForm[text] && text === 'yxyjOkCheck') {
        this.dataForm.yxyjOkInput = ''
        this.dataForm.yxyjOkPlRadio = ''
        this.dataForm.yxyjOkTdTimeInput = ''
      }
      if (!this.dataForm[text] && text === 'yxyjGmjCheck') {
        this.dataForm.yxyjGmjInput = ''
        this.dataForm.yxyjGmjPlRadio = ''
        this.dataForm.yxyjGmjTdTimeInput = ''
      }
      if (!this.dataForm[text] && text === 'yxyjRgpCheck') {
        this.dataForm.yxyjRgpInput = ''
        this.dataForm.yxyjRgpPlRadio = ''
        this.dataForm.yxyjRgpTdTimeInput = ''
      }
      if (!this.dataForm[text] && text === 'yxyjRjCheck') {
        this.dataForm.yxyjRjInput = ''
        this.dataForm.yxyjRjPlRadio = ''
        this.dataForm.yxyjRjTdTimeInput = ''
      }
      if (text === 'djdsCheck') {
        console.log('djdsCheck', e);
        this.dataForm.djdsOd = ''
        this.dataForm.djdsOs = ''
        this.dataForm.djdsIsDisabled = e
      }
    },
    // 清理身份证号
    clearidcard() {
      this.dataForm.idcard = ''
      this.idcardErrorShow = false
    },
    onSelect(action, text) {
      this.dataForm[text] = action.value
    },
    // 数字不能大于100
    maxNumberChange(text, e) {
      if (e.target.value >= 100) {
        this.dataForm[text] = ''
        Dialog.confirm({
          message: '输入的年数不得大于100，请仔细查看后重新填写'
        })
      }
    },
    // 判断当天有没有提交过
    async judgeTodayWrite() {
      this.buttonDisbled = true
      const { data: res } = await this.$http.get(this.url + '/quguang/survey/judgeTodayWrite', {
        params: {
          patientIdNumber: this.dataForm.idcard.trim(),
          formName: '眼科病史问卷调查'
        }
      })
      if (res.code === 0) {
        // 状态为1是提交过
        res.data > 0
          ? Dialog.confirm({
            title: '提醒',
            message: '您今天已提交过眼科病史问卷调查是否重复提交?'
          })
            .then(() => {
              this.questionSubmitHandle()
            })
            .catch(() => {
              // on cancel
              this.buttonDisbled = false
            }) : this.questionSubmitHandle()
      } else {
        Toast(res.msg)
      }
    },
    // 提交
    async questionSubmitHandle() {
      // 隐形眼镜提交判断
      if (this.dataForm.yxyjRadio === '有' && !this.dataForm.yxyjOkCheck && !this.dataForm.yxyjGmjCheck && !this.dataForm.yxyjRgpCheck && !this.dataForm.yxyjRjCheck) {
        return Dialog.alert({
          title: '提醒',
          message: '第四项戴隐形眼镜请填写完整后提交，谢谢配合',
          theme: 'round-button'
        })
      }
      this.buttonText = '提交中请稍等'
      const { data: res } = await this.$http.post(this.url + '/quguang/survey', {
        backId: this.patientInfo.backId,
        centreCode: this.patientInfo.centreCode ? this.patientInfo.centreCode : 'WZYSG_QG',
        formContent: JSON.stringify(this.dataForm),
        formName: '眼科病史问卷调查',
        patientIdNumber: this.dataForm.idcard.trim(),
        writeDate: this.$moment().format('YYYY-MM-DD'),
        type: 1
      })
      if (res.code === 0) {
        this.buttonDisbled = false
        this.buttonText = '提交'
        this.isHaveParams ? (
          Toast('您已提交成功！'),
          this.$router.push({
            name: 'complete',
            params: {
              name: 'questionEyehistory'
            }
          })) : (this.$router.push({
            name: 'question',
            params: {
              name: 'question',
              patientIdNumber: this.dataForm.idcard.trim(),
              idcardType: this.dataForm.idcardType.trim(),
              idcard: this.dataForm.idcard.trim(),
              zhiye: this.dataForm.zhiye.trim(),
              minzu: this.dataForm.minzu.trim(),
              jiguan: this.dataForm.jiguan.trim(),
              changzhuguo: this.dataForm.changzhuguo.trim()
            }
          }), Toast('请填写手术前问卷！'))
        // this.$router.push({
        //   name: 'complete',
        //   params: {
        //     name: 'questionEyehistory'
        //   }
        // })
      } else {
        this.buttonDisbled = false
        this.buttonText = '提交'
        Toast(res.msg)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.questionEyehistory {
  padding: 10px;
  padding-top: 0;
  .title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    color: #4c9ef5;
    position: fixed;
    width: 100vw;
    left: 50%;
    padding-top: 20px;
    padding-bottom: 10px;
    top: 0;
    z-index: 999;
    background: #fff;
    transform: translateX(-50%);
  }
  .tips {
    font-size: 14px;
    padding: 16px;
    margin-bottom: 16px;
    color: #373737;
  }
  .van-form {
    margin-top: 80px;
  }
  .qustion-content {
    font-size: 16px;
    .li-row {
      margin-bottom: 8px;
      p {
        display: flex;
        align-items: center;
      }
      .li-row-title {
        font-weight: 700;
      }
      .OD-OS {
        span {
          display: flex;
          align-items: center;
        }
        span:nth-child(2) {
          padding-left: 14px;
        }
      }
      .padd {
        padding-left: 20px;
      }
    }
  }
  .tijian {
    border-top: 1px solid #ccc;
    margin-top: 10px;
    padding-top: 10px;
  }
  .unitClass {
    margin-left: 10px;
    border: 1px solid #f2f3f5;
    padding: 8px 10px;
  }
  .buttons {
    text-align: center;
    position: absolute;
    bottom: 10px;
    width: 100%;
  }
  .question-button {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
}
</style>
<style lang="scss">
.questionEyehistory {
  .width-160 {
    width: 160px;
  }
  .width-150 {
    width: 150px;
  }
  .width-field-50 {
    .van-field__control {
      width: 50px;
    }
  }
  .width-field-60 {
    .van-field__control {
      width: 60px;
    }
  }
  .width-field-70 {
    .van-field__control {
      width: 70px;
    }
  }
  .width-field-80 {
    .van-field__control {
      width: 80px;
    }
  }
  .width-field-100 {
    .van-field__control {
      width: 100px;
    }
  }
  .centerfield {
    .van-field__control {
      text-align: center;
    }
  }
  .flex {
    display: flex;
    justify-content: left;
    align-items: center;
  }
  .margin-bottom-10 {
    margin-bottom: 10px;
  }
  .margin-top-10 {
    margin-top: 10px;
  }
  .van-cell--required::before {
    left: -5px;
  }
  .van-field__label {
    width: 70px;
    text-align: center;
  }
  .background-field {
    .van-cell__value {
      background: #fff;
    }
  }
  .van-cell__value {
    background: #f2f3f5;
  }
  .van-stepper__input {
    width: 40px;
  }
  .van-field__control {
    padding: 4px 2px;
  }
  .van-cell {
    width: auto;
    align-items: center;
    padding: 0;
  }
  .van-checkbox__icon,
  .van-radio__icon .van-icon {
    font-size: 14px;
  }
  .van-cell::after {
    border-bottom: none;
  }
  .buttons {
    padding: 10px;
    .van-button:nth-child(1) {
      margin-right: 10px;
    }
    .van-button--round {
      width: 45%;
    }
  }
  .leixing {
    .van-checkbox-group--horizontal {
      display: block;
    }
    .leixing-div {
      display: flex;
      align-items: center;
      padding: 4px 0;
    }
    .van-checkbox {
      width: 70px;
    }
  }
  .van-radio--horizontal {
    margin-right: 6px;
  }
  .van-radio__label {
    margin-left: 2px;
  }
  .van-checkbox--horizontal {
    margin-right: 6px;
  }
  .pinlv {
    .van-cell__value {
      background: #fff;
      display: flex;
      align-items: center;
    }
    .van-cell--required::before {
      left: -60px;
    }
  }
  .van-field__control--custom {
    display: block;
  }
  .back-gley {
    .van-cell__value {
      background: #f2f3f5;
    }
  }
  .van-field__error-message {
    font-size: 14px;
  }
  .required8,
  .required9 {
    .li-row-title {
      padding-left: 1px;
    }
    .van-cell--required::before {
      top: -22px;
    }
  }
  .required1 {
    .van-cell--required::before {
      top: 6px;
    }
  }
}
.nobackground {
  .van-cell__value {
    background: transparent;
    font-size: 16px;
  }
}
.customBackground {
  background: #f2f3f5;
}
</style>
