<template>
  <div>
    <div class="cell-group">
      <div class="table-header orange">
        <div class="normal-header">
          <div class="td w1">{{$t('customService.insuranceQuery.InsurantNumber')}}</div>
          <div class="td w2">{{$t('customService.insuranceQuery.Insurant')}}</div>
          <div class="td w2">{{$t('customService.insuranceQuery.InsurantName')}}</div>
          <div class="td w2">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
          <div class="td w2">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
          <div class="td w2">{{$t('customService.insuranceQuery.period')}}</div>
        </div>
      </div>
      <div class="table-content">
        <div class="data-line">
          <div class="td w1">P3**********0772</div>
          <div class="td w2">平安</div>
          <div class="td w2">{{dataForm.v1}}</div>
          <div class="td w2">HK$10,000</div>
          <div class="td w2">2020-1-1</div>
          <div class="td w2">{{dataForm.v2}}</div>
        </div>
      </div>
    </div>

    <div class="cell-group">
      <div class="table-header">
        <div class="normal-header">
          <div class="title">{{$t('customService.insuranceQuery.t2Title')}}</div>
          <div
            class="guide"
            :class="{rotate180 : !insuranceForm.f1}"
            @click="insuranceForm.f1 = !insuranceForm.f1"
          ></div>
        </div>
      </div>
      <div class="table-content" :class="{hide : !insuranceForm.f1}">
        <div class="data-line">
          <div class="cell1">
            <div class="label">{{$t('customService.insuranceQuery.t2InsurantClassify')}}</div>
            <div class="label">{{dataForm.v1}}</div>
          </div>
          <div class="separator-v"></div>
          <div class="cell1">
            <div class="label">{{$t('customService.insuranceQuery.InsurantAmount')}}</div>
            <div class="label">HK$10,000</div>
          </div>
        </div>
        <div class="separator-h"></div>
        <div class="data-line">
          <div class="cell1">
            <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
            <div class="label">2020-1-1</div>
          </div>
          <div class="separator-v"></div>
          <div class="cell1">
            <div class="label">{{$t('customService.insuranceQuery.period')}}</div>
            <div class="label">{{dataForm.v2}}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="cell-group">
      <div class="table-header">
        <div class="normal-header">
          <div class="title">{{$t('customService.insuranceQuery.t3Title')}}</div>
          <div
            class="guide"
            :class="{rotate180 : !insuranceForm.f2}"
            @click="insuranceForm.f2 = !insuranceForm.f2"
          ></div>
        </div>
      </div>
      <div class="table-content" :class="{hide : !insuranceForm.f2}">
        <div class="data-line">
          <div class="cell1">
            <div class="label">
              {{$t('customService.insuranceQuery.t3InsurantNameCn')}}
              <span>修改</span>
            </div>
            <div class="label">平安</div>
          </div>
          <div class="separator-v"></div>
          <div class="cell1">
            <div class="label">
              {{$t('customService.insuranceQuery.t3InsurantNameEn')}}
              <span>修改</span>
            </div>
            <div class="label">Pingan</div>
          </div>
        </div>
        <div class="separator-h"></div>
        <div class="data-line">
          <div class="cell1">
            <div class="label">{{$t('customService.insuranceQuery.effectiveDate')}}</div>
            <div class="label">2020-1-1</div>
          </div>
          <div class="separator-v"></div>
          <div class="cell1">
            <div class="label">
              {{$t('customService.insuranceQuery.t3InsurantIdNumber')}}
              <span>修改</span>
            </div>
            <div class="label">123*****567</div>
          </div>
        </div>
        <div class="separator-h"></div>
        <div class="data-line">
          <div class="cell1">
            <div class="label">
              {{$t('customService.insuranceQuery.t3InsurantContactAddress')}}
              <span>修改</span>
            </div>
            <div class="label">{{dataForm.v3}}</div>
          </div>
          <div class="separator-v"></div>
          <div class="cell1">
            <div class="label">
              {{$t('customService.insuranceQuery.t3InsurantAddress')}}
              <span>修改</span>
            </div>
            <div class="label">{{dataForm.v3}}</div>
          </div>
        </div>

        <div class="separator-h"></div>
        <div class="data-line">
          <div class="cell1">
            <div class="label">
              {{$t('customService.insuranceQuery.t3InsurantMobile')}}
              <span>修改</span>
            </div>
            <div class="label">（852）2888 8888</div>
          </div>
          <div class="separator-v"></div>
          <div class="cell1">
            <div class="label">
              {{$t('customService.insuranceQuery.t3InsurantEmail')}}
              <span>修改</span>
            </div>
            <div class="label">123@ping.com.cn</div>
          </div>
        </div>

        <div class="separator-h"></div>
        <div class="data-line">
          <div class="cell1">
            <div class="label">
              {{$t('customService.insuranceQuery.t3InsuredNameCn')}}
              <span>修改</span>
            </div>
            <div class="label">平安</div>
          </div>
          <div class="separator-v"></div>
          <div class="cell1">
            <div class="label">
              {{$t('customService.insuranceQuery.t3InsuredNameEn')}}
              <span>修改</span>
            </div>
            <div class="label">Pingan</div>
          </div>
        </div>

        <div class="separator-h"></div>
        <div class="data-line">
          <div class="cell1">
            <div class="label">{{$t('customService.insuranceQuery.t3InsuredBirthday')}}</div>
            <div class="label">1999-1-1</div>
          </div>
          <div class="separator-v"></div>
          <div class="cell1">
            <div class="label">
              {{$t('customService.insuranceQuery.t3InsuredIdNumber')}}
              <span>修改</span>
            </div>
            <div class="label">123*****567</div>
          </div>
        </div>
      </div>
    </div>

    <div class="cell-group">
      <div class="table-header">
        <div class="normal-header">
          <div class="title">{{$t('customService.insuranceQuery.t4Title')}}</div>
          <div
            class="guide"
            :class="{rotate180 : !insuranceForm.f3}"
            @click="insuranceForm.f3 = !insuranceForm.f3"
          ></div>
        </div>
      </div>
      <div class="table-content" :class="{hide : !insuranceForm.f3}">
        <div class="data-line">
          <div class="td w2">{{$t('customService.insuranceQuery.t4NameCn')}}</div>
          <div class="td w2">{{$t('customService.insuranceQuery.t4NameEn')}}</div>
          <div class="td w2">{{$t('customService.insuranceQuery.t4Relation')}}</div>
          <div class="td w2">{{$t('customService.insuranceQuery.t4Allocation')}}</div>
        </div>
        <div class="separator-h"></div>
        <div class="data-line">
          <div class="td w2">{{dataForm.v4}}</div>
          <div class="td w2">Zhangsan</div>
          <div class="td w2">{{dataForm.v4_2}}</div>
          <div class="td w2">50%</div>
        </div>
        <div class="separator-h"></div>
        <div class="data-line">
          <div class="td w2">李四</div>
          <div class="td w2">Lisi</div>
          <div class="td w2">{{dataForm.v4_3}}</div>
          <div class="td w2">50%</div>
        </div>
      </div>
    </div>

    <div class="cell-group">
      <div class="table-header">
        <div class="normal-header">
          <div class="title">{{$t('customService.insuranceQuery.t5Title')}}</div>
          <div
            class="guide"
            :class="{rotate180 : !insuranceForm.f4}"
            @click="insuranceForm.f4 = !insuranceForm.f4"
          ></div>
        </div>
      </div>
      <div class="table-content" :class="{hide : !insuranceForm.f4}">
        <div class="data-line">
          <div class="cell1">
            <div class="label">{{$t('customService.insuranceQuery.t5PaymentPeriod')}}</div>
            <div class="label">30年</div>
          </div>
          <div class="separator-v"></div>
          <div class="cell1">
            <div class="label">{{$t('customService.insuranceQuery.t5PaymentMethod')}}</div>
            <div class="label">{{dataForm.v5}}</div>
          </div>
        </div>
        <div class="separator-h"></div>

        <div class="data-line">
          <div class="cell1">
            <div class="label">{{$t('customService.insuranceQuery.t5PaymentCurrency')}}</div>
            <div class="label">{{dataForm.v6}}</div>
          </div>
          <div class="separator-v"></div>
          <div class="cell1">
            <div class="label">{{$t('customService.insuranceQuery.t5CurrentPremium')}}</div>
            <div class="label">HK$2,000</div>
          </div>
        </div>
        <div class="separator-h"></div>

        <div class="data-line">
          <div class="cell1">
            <div class="label">{{$t('customService.insuranceQuery.t5PaymentBank')}}</div>
            <div class="label">{{dataForm.v7}}</div>
          </div>
          <div class="separator-v"></div>
          <div class="cell1">
            <div class="label">{{$t('customService.insuranceQuery.t5PaymentAccount')}}</div>
            <div class="label">1234******888</div>
          </div>
        </div>
        <div class="separator-h"></div>
      </div>
    </div>

    <div class="cell-group">
      <div class="table-header">
        <div class="normal-header">
          <div class="title">{{$t('customService.insuranceQuery.t6Title')}}</div>
          <div
            class="guide"
            :class="{rotate180 : !insuranceForm.f5}"
            @click="insuranceForm.f5 = !insuranceForm.f5"
          ></div>
        </div>
      </div>
      <div class="table-content" :class="{hide : !insuranceForm.f5}">
        <div class="data-line">
          <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentPeriod')}}</div>
          <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentMethod')}}</div>
          <div class="td w2">{{$t('customService.insuranceQuery.t6ClosingDate')}}</div>
          <div class="td w2">{{$t('customService.insuranceQuery.t6PaymentAmount')}}</div>
        </div>
        <div class="separator-h"></div>
        <div class="data-line">
          <div class="td w2">第二期</div>
          <div class="td w2">{{dataForm.v8}}</div>
          <div class="td w2">2021-1-1</div>
          <div class="td w2">HK$2,000</div>
        </div>
        <div class="separator-h"></div>
        <div class="data-line">
          <div class="td w2">首期</div>
          <div class="td w2">{{dataForm.v8}}</div>
          <div class="td w2">2020-1-1</div>
          <div class="td w2">HK$2,000</div>
        </div>
      </div>
    </div>
  </div>
</template>


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