<template>
  <div class="mobile-margin">
    <div class="reservation-container" v-if="step == 1">
      <div class="title"><u><span class="pointer">{{$t('clarms.step1.register')}}</span>/<span class="pointer">{{$t('clarms.step1.login')}}</span></u>{{$t('clarms.step1.t1')}}</div>
      <div class="form-name default-mt"> {{$t('clarms.step1.label0')}}</div>
      <div class="gird-g form default-mt">
        <div class="pure-u-1 pure-u-md-1-2 form-item">
          <div class="label">
            {{$t('clarms.step1.label1')}}
          </div>
          <div class="ipt-wrap">
            <input class="ipt" type="text" v-model="data.name">
          </div>
        </div>

        <div class="pure-u-1 pure-u-md-1-2 form-item">
          <div class="label">
            {{$t('clarms.step1.label2')}}
          </div>
          <div class="ipt-wrap">
            <input class="ipt" type="text" v-model="data.name">
          </div>
        </div>

        <div class="pure-u-1 pure-u-md-1-2 form-item">
          <div class="label">
            {{$t('clarms.step1.label3')}}
          </div>
          <div class="ipt-wrap">
            <div class="down-arrow"></div>
            <select class="ipt" v-model="data.reservationType">
              <option v-for="(item,index) in reservationTypes" :key="index" :value="item.value">{{item.name}}</option>
            </select>
          </div>
        </div>

        <div class="pure-u-1 pure-u-md-1-2 form-item">
          <div class="label">
            {{$t('clarms.step1.label4')}}
          </div>
          <div class="ipt-wrap">
            <input class="ipt" type="text" v-model="data.name">
          </div>
        </div>

        <div class="pure-u-1 pure-u-md-1-2 form-item">
          <div class="label">
            {{$t('clarms.step1.label5')}}
          </div>
          <div class="ipt-wrap">
            <div class="down-arrow"></div>
            <date-picker class="ipt-date" v-model="data.contactDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'3rem', 'color':'#f05a23','font-weight':'600'}"></date-picker>
          </div>
        </div>
      </div>
      <div class="submit-btn">{{$t('clarms.step1.btn')}}</div>
    </div>

    <div class="reservation-container-2" v-if="step == 2">
      <div class="title default-mt">
        <span>{{$t('clarms.step2.label1')}}</span>
        <select>
          <option>陈小明</option>
        </select>
        <span>{{$t('clarms.step2.label2')}}</span>
      </div>
      <hr>
      <div class="gird-g form default-mt">
        <div class="pure-u-1 form-item-2">
          <div class="label">
            <div class="main-label">
              {{$t('clarms.step2.label3')}}
            </div>
            <div class="sub-label">{{$t('clarms.step2.label4')}}</div>
          </div>
          <div class="value">
            <div class="ipt-wrap item-group">
              <div class="check-item pointer" v-if="typeCandidates.indexOf('1') > -1" @click="typeClickHandle('1')">
                <img v-if="typeSelected.indexOf('1') > -1" src="@/assets/images/clarms/checked.png">
                <img v-else src="@/assets/images/clarms/uncheck.png">
                <span>{{$t('clarms.step2.op1')}}</span>
              </div>
              <div class="check-item pointer" v-if="typeCandidates.indexOf('2') > -1" @click="typeClickHandle('2')">
                <img v-if="typeSelected.indexOf('2') > -1" src="@/assets/images/clarms/checked.png">
                <img v-else src="@/assets/images/clarms/uncheck.png">
                <span>{{$t('clarms.step2.op2')}}</span>
              </div>
              <div class="check-item pointer" v-if="typeCandidates.indexOf('3') > -1" @click="typeClickHandle('3')">
                <img v-if="typeSelected.indexOf('3') > -1" src="@/assets/images/clarms/checked.png">
                <img v-else src="@/assets/images/clarms/uncheck.png">
                <span>{{$t('clarms.step2.op3')}}</span>
              </div>
              <div class="check-item pointer" v-if="typeCandidates.indexOf('4') > -1" @click="typeClickHandle('4')">
                <img v-if="typeSelected.indexOf('4') > -1" src="@/assets/images/clarms/checked.png">
                <img v-else src="@/assets/images/clarms/uncheck.png">
                <span>{{$t('clarms.step2.op4')}}</span>
              </div>
              <div class="check-item pointer" v-if="typeCandidates.indexOf('5') > -1" @click="typeClickHandle('5')">
                <img v-if="typeSelected.indexOf('5') > -1" src="@/assets/images/clarms/checked.png">
                <img v-else src="@/assets/images/clarms/uncheck.png">
                <span>{{$t('clarms.step2.op5')}}</span>
              </div>
            </div>
            <div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label5')}}</span></div>
          </div>
        </div>

        <div class="pure-u-1 form-item-2 mt20">
          <div class="label">
            <div class="main-label">
              {{$t('clarms.step2.label6')}}
            </div>
            <div class="sub-label">{{$t('clarms.step2.label7')}} </div>
          </div>
          <div class="value">
            <div>
              <div class="ipt-wrap">
                <input class="ipt2" type="number">
              </div>
            </div>
            <div class="tips"><img src="@/assets/images/clarms/impor.png"> <span>{{$t('clarms.step2.label8')}}</span></div>
          </div>
        </div>

        <div class="pure-u-1 form-item-2 mt20">
          <div class="label">
            <div class="main-label">
              {{$t('clarms.step2.label9')}}
            </div>
          </div>
          <div class="value">
            <div class="ipt-wrap date-container">
              <div class="down-arrow"></div>
              <date-picker class="ipt-date" v-model="data.contactDate" :filtModel="['future']" :check="checkDate" :cusStyle="{border:'none !important','background-color':'transparent !important',height:'3rem', 'color':'#f05a23','font-weight':'600'}"></date-picker>
            </div>
          </div>
        </div>

        <div class="pure-u-1 form-item-2 mt20">
          <div class="label">
            <div class="main-label">
              {{$t('clarms.step2.label10')}}
            </div>
          </div>
          <div class="value">
                <clarms-upload :icon="require('@/assets/images/clarms/icon1.png')" :options="{name:$t('clarms.step2.label11'),imageTypeID:'HT41',imageMainTypeID:'HT11',imageFileName:'医疗收费票据/医疗收据'}" @success="uploadSuccess"></clarms-upload>
                <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon2.png')" :options="{name:$t('clarms.step2.label12'),imageTypeID:'HT26',imageMainTypeID:'HT06',imageFileName:'住院病历'}"></clarms-upload>
          </div>
        </div>


        <div class="pure-u-1 form-item-2 mt20">
          <div class="label">
            <div class="main-label">
              {{$t('clarms.step2.label13')}}
            </div>
          </div>
          <div class="value">
                <clarms-upload :icon="require('@/assets/images/clarms/icon3.png')" :options="{name:$t('clarms.step2.label14'),imageTypeID:'HT29',imageMainTypeID:'HT06',imageFileName:'检查报告'}"></clarms-upload>
                <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon4.png')" :options="{name:$t('clarms.step2.label15'),imageTypeID:'HT34',imageMainTypeID:'HT08',imageFileName:'银行账户'}"></clarms-upload>
                <clarms-upload class="mt20" :icon="require('@/assets/images/clarms/icon5.png')" :options="{name:$t('clarms.step2.label16'),imageTypeID:'HT16',imageMainTypeID:'HT03',imageFileName:'警察报告/证明'}"></clarms-upload>
          </div>
        </div>
      </div>
      <hr>
      <div class="bottom-tip orange mt20">{{$t('clarms.step2.label17')}}</div>
      <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip1')}}</div>

      <div class="bottom-tip orange mt20">{{$t('clarms.step2.label18')}}</div>
      <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip2')}}</div>
      <div class="bottom-tip gray mt10">{{$t('clarms.step2.tip3')}}</div>

      <div class="bottom-tip orange mt10 pointer" @click="agress = !agress">
        <img v-if="agress" src="@/assets/images/clarms/checked.png">
        <img v-else src="@/assets/images/clarms/uncheck.png">
        <span>{{$t('clarms.step2.tip4')}}</span>
      </div>

      <div class="submit-btn">{{$t('clarms.step2.btn')}}</div>

      <div class="contact" @click="toContact">{{$t('clarms.step2.contact')}}</div>
    </div>
  </div>
</template>

<script src="./clarms.js"></script>
<style lang="scss" scoped>
@import "./clarms.scss";
</style>