<template>
  <div v-if="pageShowInfo.appntDTO">
    <div class="proposal-exhibition-container" v-if="!isWeixin || (isWeixin && showShareType == '01')">
      <div>
        <div class="mb50">
          <img class="w178 h41 div_1" src="@/assets/images/proposal/proposal_logo.png" />
          <div class="white fw500 fs18 div_2">{{ mainRiskName }}</div>
          <van-sticky @scroll="testSticky">
            <div class="pl15 pt15 flex justify-content-fs align-items-c sticky_div"
                 :class="pageShowType.isFixed ? 'divbg_1' : 'divbg_2'">
              <div class="mr9 title_item" v-for="(item, index) in pageShowInfo.insuredDTOs" :key="index"
                   @click="checkInsure(item.insuredId)">
                <div class="relative sub_insure_item">
                  <div class="bg-white insured_item"
                       :class="item.insuredId == pageShowInfo.showInsuredDTO.insuredId ? 'shadow' : ''">
                    <div class="insured_item_1">
                      <img :src="headPicture[item.relationToAppnt + '_' + item.sex]" />
                    </div>
                    <div class="text-center fs12"
                         :class="item.insuredId == pageShowInfo.showInsuredDTO.insuredId ? 'color_3A81F6' : ''">
                      {{ relationToAppntType[item.relationToAppnt + '_' + item.sex] }}<br />
                      {{ item.name }}
                    </div>
                  </div>
                  <div class="triangle_shadow" v-if="item.insuredId == pageShowInfo.showInsuredDTO.insuredId"></div>
                  <div class="triangle" v-if="item.insuredId == pageShowInfo.showInsuredDTO.insuredId"></div>
                </div>
              </div>
            </div>
          </van-sticky>
          <!--被保险人数据-->
          <div>
            <!-- 险种信息 -->
            <div class="pt15 bg-white relative div_3">
              <div :class="pageShowType.productCheckStatus ? '' : 'hideInfo_insure'">
                <div class="fs14 flex justify-content-a align-items-c">
                  <div class="text-center">
                    <label class="fs14 color_3A81F6 fw600 lh24">被保险人</label><br />
                    <label class="fs13 color_666666 lh20"
                    >{{ pageShowInfo.showInsuredDTO.sex == '0' ? '男' : '女'
                      }}&nbsp;{{ pageShowInfo.showInsuredDTO.insuredAge }}周岁</label
                    >
                  </div>
                  <div class="line_gray"></div>
                  <div class="text-center">
                    <label class="fs14 color_3A81F6 fw600 lh24">投保人</label><br />
                    <label class="fs13 color_666666 lh20">{{ pageShowInfo.appntDTO.sex == '0' ? '男' : '女'
                      }}&nbsp;{{ pageShowInfo.appntDTO.age }}周岁</label>
                  </div>
                  <div class="line_gray"></div>
                  <div class="text-center">
                    <label class="fs14 color_3A81F6 fw600 lh24">首年保费</label><br />
                    <label class="fs13 color_FFA42F lh20">{{ pageShowInfo.showInsuredDTO.totalPrem | numFormat
                      }}元</label>
                  </div>
                </div>
                <div class="fs15 line_title">产品计划</div>
                <div class="fs12 div_4">
                  <div class="risk_head flex text-center line-height table fs12 bg_DBEFFE">
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7">投保险种</div>
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border" v-if="ispremshow">
                      保额(元）
                    </div>
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">保险期间</div>
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">交费期间</div>
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">首年保费(元)</div>
                  </div>
                  <div class="risk_body flex text-center table bg_f7fbff"
                       v-for="(riskItem, index) in pageShowInfo.showInsuredDTO.riskDTOLst" :key="index">
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7">{{ riskItem.riskName }}</div>
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border" v-if="ispremshow">
                      {{ riskItem.amt ? riskItem.amt : '--' }}
                    </div>
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">
                      {{ riskItem.insureName }}
                    </div>
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">{{ riskItem.payName
                      }}
                    </div>
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">
                      {{ riskItem.showPrem ? riskItem.showPrem : '--' }}
                    </div>
                  </div>
                </div>

                <!--养老计划-->
                <div v-if="pageShowInfo.showInsuredDTO.riskDTOLstNew.length" class="fs15 line_title">养老计划</div>
                <div class="fs12 div_4" v-if="pageShowInfo.showInsuredDTO.riskDTOLstNew.length">
                  <div class="risk_head flex text-center line-height table fs12 bg_DBEFFE">
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7">投保险种</div>
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">
                      养老保险金开始领取年龄
                    </div>
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">养老保险金领取方式
                    </div>
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">保证给付期</div>
                    <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">每次养老保险金(元)
                    </div>
                  </div>
                  <div v-for="(riskItem, index) in pageShowInfo.showInsuredDTO.riskDTOLstNew" :key="index">
                    <div class="risk_body flex text-center table bg_f7fbff">
                      <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7">{{ riskItem.riskName }}</div>
                      <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">
                        {{ riskItem.pensionAge }} 周岁
                      </div>
                      <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">
                        {{ riskItem.receivePensionWay == '0' ? '年领' : '月领' }}
                      </div>
                      <div class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">
                        {{ riskItem.guaranteedYear }} 年
                      </div>
                      <div v-if="riskItem.receivePensionWay == '0'"
                           class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">
                        {{ riskItem.amt }}
                      </div>
                      <div v-if="riskItem.receivePensionWay == '1'"
                           class="flex justify-content-c align-items-c pl7 pr7 pt7 pb7 table_border">
                        {{ riskItem.amt | fillNumber }}
                      </div>
                    </div>
                  </div>
                </div>

                <div class="h20">&ensp;</div>
              </div>
              <div class="up_down_div">
                <img src="@/assets/images/proposal/proposal_down.png"
                     :class="pageShowType.productCheckStatus ? '' : 'img180'" @click="testProductCheck" />
              </div>
            </div>
            <!--保险责任-->
            <div class="pt15 pb17 bg-white text-center relative model_title">
              <div class="fs16 color_3A81F6 lh24 fw600">保险责任</div>
              <div class="line_C8DBFB"></div>
              <div class="flex align-items-c justify-content-c">
                <div
                  class="fs14 cheeck_risk_type_left"
                  :class="pageShowType.dutyShowType == '00' ? 'checked_risk_type' : 'no_check_risk_type'"
                  @click="checkShowDutyType('00')"
                >
                  按责任显示
                </div>
                <div
                  class="fs14 cheeck_risk_type_right"
                  :class="pageShowType.dutyShowType == '01' ? 'checked_risk_type' : 'no_check_risk_type'"
                  @click="checkShowDutyType('01')"
                >
                  按险种显示
                </div>
              </div>
              <div :class="pageShowType.riskCheckStatus ? '' : 'hideInfo'" class="text-left div_5">
                <div v-if="pageShowType.dutyShowType == '01'">
                  <div class="div_6 duty_by_duty" v-for="(item, index) in pageShowInfo.showInsuredDTO.riskDTOLst"
                       :key="index">
                    <div v-if="item.riskDutySortResult">
                      <div v-for="(subItem3, subIndex3) in getObjectKeys(item.riskDutySortResult)"
                           :key="subIndex3"></div>
                    </div>
                    <div class="fw600 fs15 color_3A81F6 show_risk_name">
                      {{ item.riskName }}
                    </div>
                    <div v-for="(subItem, subIndex) in item.riskDutySortResult[item.riskCode]" :key="subIndex">
                      <div v-for="(subItem3, subIndex3) in getObjectValues(subItem)" :key="subIndex3">
                        <div class="div_16" v-for="(subItem4, subIndex4) in subItem3" :key="subIndex4">
                          <div class="fw600 fs14 flex align-items-c justify-content-fs">
                            <div class="head_radis"></div>
                            <div class="title_2">{{ subItem4.dutyName }}</div>
                          </div>
                          <div class="fs13 color_333333 div_17">
                            <div v-html="initDutyColor(subItem4.dutyStairExplain)"></div>
                          </div>
                          <div class="fs13 color_666666 div_17"
                               v-if="subItem4.dutyDetailExplain && subItem4.dutyDetailExplain != ''">
                            <div v-html="showDutyDetailExplain(subItem4.dutyDetailExplain)"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div v-if="pageShowType.dutyShowType == '00'">
                  <div class="duty_by_duty" v-for="(item, index) in pageShowInfo.showInsuredDTO.dutySortResult"
                       :key="index">
                    <div v-for="(subItem1, subIndex1) in getObjectKeys(item)" :key="subIndex1">
                      <div class="fw600 fs15 color_3A81F6 show_risk_name">
                        {{ subItem1 }}
                      </div>
                      <div class="div_16" v-for="(subItem2, subIndex2) in item[subItem1]" :key="subIndex2">
                        <div class="fw600 fs14 flex align-items-c justify-content-fs">
                          <div class="head_radis"></div>
                          <div class="title_2">{{ subItem2.dutyName }}</div>
                        </div>
                        <div class="fs13 div_17 color_333333">
                          <div v-html="initDutyColor(subItem2.dutyStairExplain)"></div>
                        </div>
                        <div class="fs13 div_17 color_666666"
                             v-if="subItem2.dutyDetailExplain && subItem2.dutyDetailExplain != ''">
                          <div v-html="showDutyDetailExplain(subItem2.dutyDetailExplain)"></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="up_down_div">
                <img src="@/assets/images/proposal/proposal_down.png"
                     :class="pageShowType.riskCheckStatus ? '' : 'img180'" @click="testRiskCheck" />
              </div>
            </div>
            <!--产品条款-->
            <div class="pt15 pb17 bg-white text-center relative model_title">
              <div class="fs16 color_3A81F6 lh24 fw600">产品条款</div>
              <div class="line_C8DBFB"></div>
              <div
                class="fs14 pl12 pr12 lh20 color_3A81F6 flex align-items-c justify-content-s"
                v-for="(riskItem, index) in pageShowInfo.showInsuredDTO.riskDTOLst"
                :key="index"
              >
                <div class="text-center pl5 pr5 calue_name">《{{ riskItem.clauseName }}》</div>
                <van-button class="calue_button" @click="goCaluePDF(riskItem)" v-no-more-click="1000">查看</van-button>
              </div>
              <div class="div_9"></div>
            </div>
            <!--产品中利益演示-->
            <div class="pt15 pb17 bg-white text-center relative model_title">
              <div class="fs16 color_3A81F6 lh24 fw600">产品总利益演示</div>
              <div class="line_C8DBFB"></div>
              <div class="mt15 ml15 mr15">
                <div
                  class="flex justify-content-s align-items-c fs14 div_last"
                  v-for="(moneyItem, index) in pageShowInfo.showInsuredDTO.demoLabel"
                  :key="index"
                >
                  <div class="text-left" style="width: 75%">
                    <span>{{ moneyItem.contentLabel }}</span>
                  </div>
                  <div class="text-right" v-if="moneyItem.content == 'currentBonus_M'">
                    <span class="color_3A81F6">{{ moneyItem.value | numFormat2 }}</span
                    >{{ moneyItem.content | productRateUnit }}
                  </div>
                  <div class="text-right" v-else>
                    <span class="color_3A81F6">{{ moneyItem.value | numFormatNo }}</span
                    >{{ moneyItem.content | productRateUnit }}
                  </div>
                </div>
              </div>
              <div class="text-center flex justify-content-e align-items-c fs14 check_age">
                <div>当被保险人在</div>
                <div class="check_one flex justify-content-fe align-items-c" @click="popupShow = true">
                  {{ pageShowInfo.showInsuredDTO.checkAge }}&emsp;<img class="img_10"
                                                                       src="@/assets/images/proposal/proposal_select_down.png" />
                </div>
                <div>岁时</div>
              </div>
              <div class="flex justify-content-s align-items-c mt15 mb20 ml15 mr15">
                <img class="w20" src="@/assets/images/proposal/proposal_lessen.png"
                     @click="reduce(pageShowInfo.showInsuredDTO)" />
                <van-slider
                  class="w220"
                  active-color="#9EC2FC"
                  bar-height="4px"
                  :min="1"
                  :max="pageShowInfo.showInsuredDTO.policyYear"
                  v-model="pageShowInfo.showInsuredDTO.sliderValue"
                  @input="input(pageShowInfo.showInsuredDTO.sliderValue, pageShowInfo.showInsuredDTO.demoValue, pageShowInfo.showInsuredDTO.demoLabel)"
                >
                  <div slot="button" class="customer_button"></div>
                </van-slider>
                <img class="w20" src="@/assets/images/proposal/proposal_add.png"
                     @click="exhibitionAdd(pageShowInfo.showInsuredDTO)" />
              </div>
              <select-radio
                class="mb10"
                v-if="pageShowInfo.showInsuredDTO.tap"
                @radioChange="radioChange(pageShowInfo.showInsuredDTO)"
                :required="false"
                :radios="pageShowInfo.showInsuredDTO.radios"
                :value.sync="pageShowInfo.showInsuredDTO.tap"
              ></select-radio>
              <div class="fs12 text-center pb15" style="color: #999999">拖动按钮查看不同年龄的保单利益</div>

              <!-- 国富人寿富贵尊享终身寿险（分红型）添加利益演示提示 -->
              <div v-if="mainRiskCodes.includes('GFRS_M0095')" class="fs13 div_11 text-left">
                <b
                >本利益演示基于公司的精算及其他假设，不代表公司的历史经营业绩，也不代表对公司未来经营业绩的预期，保单的红利分配是不确定的，红利水平是不保证的，在某些年度红利可能为零。
                </b>
              </div>
              <div class="div_10"></div>
            </div>
            <!-- 责任免除 -->
            <div class="pt15 pb17 bg-white model_title relative">
              <div :class="pageShowType.dutyCheckStatus ? '' : 'hideInfo_hesitate'">
                <div class="fs16 color_3A81F6 lh24 fw600 text-center">责任免除</div>
                <div class="line_C8DBFB"></div>
                <div class="fs14 div_height div_11">
                  <b>
                    因下列情形之一导致被保险人身故或全残的，我们不承担给付保险金的责任：<br />
                    一、投保人对被保险人的故意杀害、故意伤害；<br />
                    二、被保险人故意犯罪或者抗拒依法采取的刑事强制措施；<br />
                    三、被保险人故意自伤，或自保险合同成立或者保险合同效力恢复之日起2年内自杀，但被保险人自杀时为无民事行为能力人的除外；<br />
                    四、被保险人服用、吸食或注射毒品；<br />
                    五、被保险人酒后驾驶、无合法有效驾驶证驾驶，或驾驶无合法有效行驶证的机动车；<br />
                    六、战争、军事冲突、暴乱或武装叛乱；<br />
                    七、核爆炸、核辐射或核污染。<br />
                    发生上述第一项情形导致被保险人身故的，保险合同终止，我们向被保险人的继承人（除投保人本人外）退还保险合同的现金价值。<br />
                    发生上述第一项情形导致被保险人全残的，保险合同终止，我们向被保险人退还保险合同的现金价值。<br />
                    发生上述其他情形导致被保险人身故或全残的，保险合同终止，我们向您退还保险合同的现金价值。
                  </b>
                </div>
                <div class="h20">&ensp;</div>
                <div class="up_down_div">
                  <img src="@/assets/images/proposal/proposal_down.png"
                       :class="pageShowType.dutyCheckStatus ? '' : 'img180'" @click="dutyCheck" />
                </div>
              </div>
            </div>
            <!-- 犹豫期退保 -->

            <div class="pt15 pb17 bg-white relative">
              <div :class="pageShowType.hesitateCheckStatus ? '' : 'hideInfo_hesitate'">
                <div class="fs16 color_3A81F6 lh24 fw600 text-center">犹豫期退保</div>
                <div class="line_C8DBFB"></div>
                <div class="fs14 div_height div_11">
                  <b>自您签收保险合同之日起，有15日的犹豫期。</b
                  >在此期间请您认真审视保险合同，如果您认为保险合同与您的需求不相符，您可以在此期间提出解除保险合同，我们将退还您所支付的全部保险费。<br />
                  您在犹豫期后解除保险合同的，<b>自我们收到解除合同通知书之日起，保险合同终止。</b>我们自收到解除合同通知书之日起30日内向您退还保险合同的现金价值。
                  <b>您在犹豫期后解除合同可能会遭受一定损失。</b>
                </div>
                <div class="h20">&ensp;</div>
                <div class="up_down_div">
                  <img src="@/assets/images/proposal/proposal_down.png"
                       :class="pageShowType.hesitateCheckStatus ? '' : 'img180'" @click="hesitateCheck" />
                </div>
              </div>
            </div>
            <!-- 风险提示 -->
            <div class="pt15 pb17 bg-white relative" v-if="showDangerInfo">
              <div :class="pageShowType.hesitateCheckStatus ? '' : 'hideInfo_hesitate'">
                <div class="fs16 color_3A81F6 lh24 fw600 text-center">风险提示</div>
                <div class="line_C8DBFB"></div>
                <div class="fs14 div_height div_11">
                  <b>本产品为分红保险，您可以保单红利的形式享有本产品的盈余分配权，但未来的保单红利为非保证利益，其红利分配是不确定的，在某些年度红利可能为零。</b>
                </div>
                <div class="h20">&ensp;</div>
                <div class="up_down_div">
                  <img src="@/assets/images/proposal/proposal_down.png"
                       :class="pageShowType.hesitateCheckStatus ? '' : 'img180'" @click="hesitateCheck" />
                </div>
              </div>
            </div>
            <!-- 温馨提示-->
            <div class="pt15 pb17 bg-white model_title">
              <div class="fs16 color_3A81F6 lh24 fw600 text-center">温馨提示</div>
              <div class="line_C8DBFB"></div>
              <div class="fs13 div_11">
                <b>
                  本资料仅供客户理解产品条款所用，有关产品的说明、解释、承诺或保证，如与产品条款不一致，均以产品条款为准。 </b>
              </div>
              <div class="div_12"></div>
            </div>
          </div>
        </div>
        <div class="div_14"></div>
        <div class="fixed div_13">
          <van-button class="img_11" @click="goToCompanyProfile" v-no-more-click="1000"></van-button>
          <van-button class="img_12" @click="goPDF" v-no-more-click="1000"></van-button>
        </div>
        <div v-show="!isWeixin" class="fixed fs15 flex text-centerjustify-content-c last_fix_div">
          <div class="color_3A81F6 bg-white text-center" @click="insure">转投保</div>
          <div class="bg_3A81F6 white text-center" @click="sharePeople">分享给客户</div>
        </div>
        <div v-show="isWeixin" class="fix_bottom">
          <div class="fix_bottom_sub">
            <img src="@/assets/images/sharePeople.png" />
            <div>{{ agent.name }}</div>
          </div>
          <div class="fix_bottom_sub" @click="callPhone">
            <img src="@/assets/images/sharePhone.png" />
            <div>{{ agent.phoneNo }}</div>
          </div>
        </div>
        <van-popup v-model="popupShow" position="bottom">
          <van-picker show-toolbar :columns="pageShowInfo.showInsuredDTO.ageColums" @confirm="checkAge"
                      @cancel="popupShow = false" />
        </van-popup>
      </div>
    </div>
    <div v-if="isWeixin && showShareType == '00'" class="share_content">
      <div class="div_01">
        <img class="img_15" src="@/assets/images/proposal/proposal_gfrs_logo.png" />
      </div>
      <div class="div_02">
        <div class="text-center div_021">
          <div class="text-center div_022">{{ mainRiskName }}</div>
          <!-- 如果没有姓名的话，根据性别展示男士或女士 -->
          <div class="text-center div_023">
            尊敬的<span v-if="pageShowInfo.appntDTO.name">{{ pageShowInfo.appntDTO.name.substr(0, 1) }}</span
          >{{ pageShowInfo.appntDTO.sex == '0' ? '先生' : '女士' }}
          </div>
        </div>
        <img class="img_13" src="@/assets/images/proposal/proposal_share_bg.png" />
      </div>
      <div class="text-center">
        <img @click="showShareType = '01'" class="img_14" src="@/assets/images/proposal/proposal_open.png" />
      </div>
      <div class="fs12 text-center div_03">敬呈</div>
    </div>
  </div>
</template>

<script>
import {
  Field,
  Popup,
  Picker,
  Cell,
  RadioGroup,
  Radio,
  CellGroup,
  Collapse,
  CollapseItem,
  Slider,
  Row,
  Col,
  Tag,
  Divider,
  Toast,
  Swipe,
  SwipeItem,
  Sticky,
  Tab,
  Tabs,
  Button
} from 'vant'
import SelectRadio from '@/components/ebiz/SelectRadio'
import { getDemo, toInsurance, getDemoByProposalNo, share, getSharingToken } from '@/api/ebiz/proposal/proposal.js'
import { funcPermCheck } from '@/api/ebiz/common/common'
import { haveTap, getTapIndex, relevanceByInsure, isAllEqual } from './js/exhibitionMethod.js'
import { formatRiskList } from '@/assets/js/utils/formatRiskList.js'
import { weixinShare } from '@/assets/js/utils/wxShare.js'
import { getAgentInfo } from '@/api/ebiz/my/my.js'
import getAge from '@/assets/js/utils/age.js'
import dataDictionary from '@/assets/js/utils/data-dictionary'
import riskRules from '../common/risk-rules.js'
import { queryPersonal } from '@/api/ebiz/laurelClub/laurelClub'

export default {
  data() {
    let isWeixin = this.$utils.device().isWeixin //判断环境
    return {
      isCheck: 0, //查看是否有权限
      isWeixin,
      showShareType: '00',
      popupShow: false,
      chooseProductCodes: [],
      // 页面显示配置
      pageShowType: {
        dutyShowType: '00',
        isFixed: false, // 粘性布局状态
        productCheckStatus: true, //产品收展状态
        riskCheckStatus: true, //责任收展状态
        hesitateCheckStatus: true, // 犹豫期退保
        dutyCheckStatus: true // 责任免除
      },
      // 页面显示详细数据
      pageShowInfo: {
        checkAgeColumns: [], //年龄选择
        insuredSlider: {}, // 滑动条
        appntDTO: null, //投保人信息
        insuredDTOs: [{}], //被保险人信息
        showInsuredDTO: {} //页面显示配保人数据
      },
      headPicture: {
        '1_1': require('@/assets/images/proposal/person_po.png'),
        '1_0': require('@/assets/images/proposal/person_br.png'),
        '4_0': require('@/assets/images/proposal/person_ez.png'),
        '3_0': require('@/assets/images/proposal/person_fq.png'),
        '3_1': require('@/assets/images/proposal/person_mq.png'),
        '4_1': require('@/assets/images/proposal/person_nr.png'),
        '2_0': require('@/assets/images/proposal/person_br.png'),
        '2_1': require('@/assets/images/proposal/person_po.png'),
        '5_1': require('@/assets/images/proposal/person_qt.png'),
        '5_0': require('@/assets/images/proposal/person_qt.png')
      },
      relationToAppntType: {
        '1_1': '本人',
        '1_0': '本人',
        '4_0': '儿子',
        '3_0': '父亲',
        '3_1': '母亲',
        '4_1': '女儿',
        '2_1': '配偶',
        '5_1': '其他',
        '2_0': '配偶',
        '5_0': '其他'
      },
      agent: {},
      mainRiskCodes: [],
      time: 5,
      proposalNo: '',
      mainRiskName: '',
      ispremshow: true // 是否展示保额
    }
  },
  computed: {
    showDangerInfo() {
      if (this.pageShowInfo.showInsuredDTO.riskDTOLst) {
        return this.pageShowInfo.showInsuredDTO.riskDTOLst.some(e => e.riskName.includes('分红型'))
      }
    }
  },
  filters: {
    productRateUnit(code) {
      for (let i = 0; i < dataDictionary.productRateUnit.length; i++) {
        if (dataDictionary.productRateUnit[i].code == code) {
          return dataDictionary.productRateUnit[i].label
        }
      }
    },
    numFormat(str) {
      return str.replace(/\.00/, '')
    },
    numFormat2(str) {
      if (str) {
        return Number(str.replace(/,/g, '')).toFixed(2)
      } else {
        return '-'
      }
    },
    numFormatNo(str) {
      if (str) {
        return Number(str.replace(/,/g, '')).toFixed(0)
      } else {
        return '-'
      }
    },
    fillNumber(val) {
      // 小于10，在前面补0
      return Number(val * 0.085).toFixed(2)
    }
  },
  mounted() {
    this.$jump({
      flag: 'navigation',
      extra: {
        title: '建议书预览',
        hiddenRight: '1'
      }
    })
    setTimeout(() => {
      // eslint-disable-next-line no-undef
      EWebBridge.webCallAppInJs('webview_left_button', {
        img: this.$assetsUrl + 'images/del-close-btn@3x.png',
        intercept: '1' //是否拦截原生返回事件 1是 其他否
      })
    }, 100)
    window.appCallBack = this.appCallBack

    localStorage.setItem('pdfShareCode', '')
    document.body.style.backgroundColor = '#fff'
    /*setTimeout(() => {
      // 右上角的显示
      window.EWebBridge.webCallAppInJs('webview_right_button', {
        btns: [
          {
            img: this.$assetsUrl + 'images/share@3x.png'
          }
        ]
      })
    }, 1000)
    window['appCallBack'] = this.appCallBack*/
    // init方法在微信端存储token，接口请求用此token，所以init方法前不要请求接口，会影响分享微信功能，接口会报token为空
    this.init()
    //校验当前用户权限
    funcPermCheck({}).then((res) => {
      this.isCheck = res.result
    })
  },
  created() {
  },

  beforeRouteLeave(to, from, next) {
    document.body.style.backgroundColor = ''
    next()
  },
  methods: {
    initDutyColor(code) {
      if (code) {
        return code.replace(new RegExp('<span>', 'g'), '<span style="color: #3a81f6;font-weight: 600;">').replace(/\.00/, '')
      } else {
        return ''
      }
    },
    showDutyDetailExplain(dutyDetailExplain) {
      return dutyDetailExplain.replace(/\.00/, '') + '。'
    },
    /* 添加定时器 */
    timeOut() {
      let timer = setInterval(() => {
        this.time--
        console.log(this.time)
        if (this.time <= 0) {
          this.time = 0
          clearInterval(timer)
          //处理页面跳转
          this.showShareType = '01'
          this.time = false
        }
      }, 1000)
    },
    /*end*/
    callPhone() {
      console.log('callPhone')
      // window.location.href = 'tel://' + this.agent.phoneNo
      EWebBridge.webCallAppInJs('callSystem', {
        system: 'tel',
        number: this.agent.phoneNo
      })
    },
    checkInsure(insureId) {
      let that = this
      this.pageShowInfo.showInsuredDTO
      this.pageShowInfo.insuredDTOs.map((item) => {
        if (item.insuredId == insureId) {
          // 建议书投保人/被保人姓名不必填, 填写姓名时展示姓名(落库),不填写姓名时展示性别+年龄,如:男30岁(不落库)
          if (!item.name) {
            let sex = item.sex == '0' ? '男' : '女'
            item.name = sex + item.insuredAge + '岁'
          }
          this.pageShowInfo.showInsuredDTO = item
          that.$forceUpdate()
          return
        }
      })
    },
    checkAge(value) {
      this.checkAgeForRate(value - Number(this.pageShowInfo.showInsuredDTO.ageColums[0]) + 1)
      this.popupShow = false
    },
    // 粘性配置
    testSticky(scrollTop) {
      this.pageShowType.isFixed = scrollTop.isFixed
    },
    testProductCheck() {
      this.pageShowType.productCheckStatus = !this.pageShowType.productCheckStatus
    },
    testRiskCheck() {
      this.pageShowType.riskCheckStatus = !this.pageShowType.riskCheckStatus
    },
    hesitateCheck() {
      this.pageShowType.hesitateCheckStatus = !this.pageShowType.hesitateCheckStatus
    },
    dutyCheck() {
      this.pageShowType.dutyCheckStatus = !this.pageShowType.dutyCheckStatus
    },
    checkShowDutyType(type) {
      this.pageShowType.dutyShowType = type
    },
    //页面初始化
    async init() {
      let params = {
        proposalInfoDTO: {
          proposalNo: ''
        }
      }
      if (this.$route.query.proposalOrderNo) {
        this.proposalNo = this.$route.query.proposalOrderNo
        params.proposalInfoDTO.proposalNo = this.$route.query.proposalOrderNo
        this.$CacheUtils.setLocItem('proposalNo', this.$route.query.proposalOrderNo)
      }
      if (this.isWeixin) {
        //在微信端
        params.proposalInfoDTO.proposalNo = this.$route.query.proposalOrderNo
        /*this.mainRiskCodes = JSON.parse(this.$route.query.mainRiskCodes)*/
        this.$CacheUtils.setLocItem('token', this.$route.query.token)
        let agentResult = await getAgentInfo({}) //调取代理人查询接口
        if (agentResult.result == '0') {
          let { agent } = this
          let { name, phoneNo, certificateInfoList } = agentResult
          if (certificateInfoList != null && certificateInfoList != '' && certificateInfoList.length > 0) {
            certificateInfoList.forEach((c) => {
              if (c.certificateType == '0') {
                agent.certificate = c.certificateNo
              }
            })
          } else {
            agent.certificate = '暂无'
          }
          agent.name = name
          agent.phoneNo = phoneNo
          let demoResult = await getDemoByProposalNo(params)
          this.formatLocal(demoResult)
          weixinShare({
            title: this.wxTitle,
            imgUrl: this.$assetsUrl + 'images/logo.png',
            desc: '国富为您量身定制的保险产品，请查收'
          })
        } else {
          Toast.fail(agentResult.resultMessage)
        }
      } else {
        //在app端
        let agentResult = await getAgentInfo({}) //调取代理人查询接口
        if (agentResult.result == '0') {
          this.agent.name = agentResult.name
        }
        params.proposalInfoDTO.proposalNo = this.$route.query.proposalOrderNo
        getDemo(params).then((res) => {
          this.formatLocal(res)
        })
      }
    },
    //app回调
    appCallBack(data) {
      // if (data.trigger == 'right_button_click') {
      //   // eslint-disable-next-line no-undef
      //   EWebBridge.webCallAppInJs('bridge', {
      //     flag: 'share',
      //     extra: {
      //       title: this.wxTitle,
      //       content: '国富为您量身定制的保险产品，请查收',
      //       url: location.origin + '/#/proposal/proposalInfo?proposalNo=' + encodeURI(localStorage.proposalNo) + '&token=' + encodeURI(res.content),
      //       img: this.$assetsUrl + 'images/logo.png'
      //     }
      //   })
      //   share()
      // }
      if (data.trigger == 'left_button_click') {
        this.$jump({
          flag: 'h5',
          extra: {
            title: '建议书列表',
            forbidSwipeBack: 1, //当前页面禁止右滑返回
            url: location.origin + `/#/proposal/list`
          },
          routerInfo: {
            path: `/proposal/list`,
            type: '1'
          }
        })
      }
    },
    async sharePeople() {
      console.log(this.pageShowInfo.insuredDTOs, 'this.pageShowInfo.insuredDTOs')
      let date = new Date()
      let month = date.getMonth() + 1
      if (month <= 9) {
        month = '0' + month
      }
      let reqData = {
        mdType: 'm',
        monthStr: date.getFullYear() + month
      }
      let shareContent
      let resData = await queryPersonal(reqData)
      // debugger
      //准会员话术改为普通人话术
      if (resData.content.length && resData.content[0].slevel < 3) {
        resData.content[0].sgrade = '00'
      }
      if (resData.content.length && resData.content[0].glevel < 3) {
        resData.content[0].ggrade = '00'
      }
      if (resData.content.length && resData.content[0].slevel > 0 && resData.content[0].sgrade && resData.content[0].sgrade != '00') {
        // if(resData.content[0].slevel<3){
        //   resData.content[0].sgrade='00'
        // }
        let sgrade = this.memberConversion(resData.content[0].sgrade)
        shareContent = '国富双冠精英' + resData.content[0].slevel + '级' + sgrade + resData.content[0].name + '为您量身定制的保险产品，请查收'
      } else if (resData.content.length && resData.content[0].glevel > 0 && resData.content[0].ggrade && resData.content[0].ggrade != '00') {
        // if(resData.content[0].glevel<3){
        //   resData.content[0].ggrade='00'
        // }
        let ggrade = this.memberConversion(resData.content[0].ggrade)
        shareContent = '国富桂冠精英' + resData.content[0].glevel + '级' + ggrade + resData.content[0].name + '为您量身定制的保险产品，请查收'
      } else {
        shareContent = this.agent.name + '为您设计的专属保险计划书，请查阅！因为国富，所以民安！'
      }
      console.log(shareContent, 'shareContent')
      let title
      let riskList = [] //所有险种
      let riskCodeList = [] //所有险种code
      this.pageShowInfo.insuredDTOs.map((item) => {
        item.mainRisk.map((item01) => {
          if (item01.isMainRisk == '0') {
            //主险
            riskList.push(item01)
          }
        })
      })
      riskList.map((item) => {
        riskCodeList.push(item.riskCode)
      })
      let sameRisk = isAllEqual(riskCodeList)
      // 一、单个被保险人
      // 1、1个主险（含附加险）的情况，直接显示“主险产品名称”
      // 2、有2个及以上主险组合，建议书名称显示“保险产品组合计划”
      // 二、有多个被保险人
      // 都显示“家庭保障计划”
      if (sameRisk) {
        if (this.pageShowInfo.insuredDTOs.length > 1) {
          title = '家庭保障计划'
        } else {
          title = riskList[0].riskName
        }
      } else {
        if (this.pageShowInfo.insuredDTOs.length > 1) {
          title = '家庭保障计划'
        } else {
          title = '保险产品组合计划'
        }
      }
      let res = await getSharingToken({ shareType: 'proposal_demonstrate' })
      if (res.result == '0') {
        window.EWebBridge.webCallAppInJs('bridge', {
          flag: 'share',
          extra: {
            title: title,
            content: shareContent,
            url:
              location.origin + '/#/proposal/proposalInfo?proposalOrderNo=' + encodeURI(this.$route.query.proposalOrderNo) + '&token=' + encodeURI(res.content),
            img: this.$assetsUrl + 'images/logo.png'
          }
        })
        share()
      } else {
        return this.$toast(res.resultMessage)
      }
    },
    //档位更换时
    radioChange(risk) {
      let that = this
      let key = risk.tap
      risk.demoLabel.forEach((demo) => {
        let result = haveTap(demo.content, '_')
        if (result) {
          let index = getTapIndex(demo.content, '_') + 1
          demo.content = demo.content.slice(0, index) + key //更换content中的值（确保滑动的时候 找到相对应的值）
          demo.value = risk.demoValue[risk.sliderValue][demo.content] //更换label中的对应的值
        }
      })
      setTimeout(() => {
        that.$forceUpdate() //解决页面不刷新问题
      }, 0)
    },
    //将后端返回的数据格式化为本地
    formatLocal(res) {
      if (res.result == '0') {
        /*微信分享添加定时*/
        if (this.isWeixin && this.showShareType == '00') {
          if (this.time) {
            console.log(this.time)
            this.timeOut()
          }
        }
        /*end*/
        let that = this
        let orderDTO = res.content.orderDTO
        this.pageShowInfo.appntDTO = res.content.orderDTO.appntDTO
        this.pageShowInfo.insuredDTOs = res.content.orderDTO.insuredDTOs
        this.pageShowInfo.showInsuredDTO = this.pageShowInfo.insuredDTOs[0]
        let mainRiskNameList = []
        that.pageShowInfo.insuredDTOs.forEach((item) => {
          item.riskDTOLst.forEach((item01) => {
            if (item01.isMainRisk == '0') {
              if (
                item01.mainRiskCode == 'GFRS_M0080' ||
                item01.mainRiskCode == 'GFRS_M0083' ||
                item01.mainRiskCode == 'GFRS_M0085' ||
                item01.mainRiskCode == 'GFRS_M0098' ||
                item01.mainRiskCode == 'GFRS_M0103' ||
                item01.mainRiskCode == 'GFRS_M0112' ||
                item01.mainRiskCode == 'GFRS_M0100'
              ) {
                that.ispremshow = false
              }
              mainRiskNameList.push(item01.riskName)
            }
          })
        })
        // 一、单个被保险人
        // 1、1个主险（含附加险）的情况，直接显示“主险产品名称”
        // 2、有2个及以上主险组合，建议书名称显示“保险产品组合计划”
        // 二、有多个被保险人
        // 都显示“家庭保障计划”
        if (mainRiskNameList.length == 1) {
          if (this.pageShowInfo.insuredDTOs.length > 1) {
            that.mainRiskName = '家庭保障计划'
          } else {
            that.mainRiskName = mainRiskNameList[0]
          }
        } else {
          if (this.pageShowInfo.insuredDTOs.length > 1) {
            that.mainRiskName = '家庭保障计划'
          } else {
            that.mainRiskName = '保险产品组合计划'
          }
        }
        //投保人年龄
        // this.pageShowInfo.appntDTO.age = getAge.getAge(this.pageShowInfo.appntDTO.birthdayLabel, new Date())
        let { insuredLabelResult, insuredResult, insuredInfoResult } = res.content.calculusResDTO
        orderDTO.insuredDTOs.forEach((v) => {
          //根据数据字典 获取当前值
          v.age = getAge.getAge(v.birthdayLabel, new Date())
          // 建议书投保人/被保人姓名不必填, 填写姓名时展示姓名(落库),不填写姓名时展示性别+年龄,如:男30岁(不落库)
          if (!v.name) {
            let sex = v.sex == '0' ? '男' : '女'
            v.name = sex + v.insuredAge + '岁'
          }
          v.riskDTOLstNew = []
          v.riskDTOLst.forEach((risk) => {
            if (risk.isMainRisk == '0') {
              that.mainRiskCodes.push(risk.riskCode)
            }
            if (risk.insuYear == 106 && risk.insuYearFlag == 'A') {
              risk.insureName = '终身'
            } else {
              if (risk.insuYearFlag == 'Y') {
                risk.insureName = risk.insuYear + '年' //页面展示
              } else {
                risk.insureName = '至' + risk.insuYear + '周岁的保单周年日'
              }
            }
            if (risk.payEndYearFlag == 'Y') {
              if (risk.payEndYear == '1000') {
                risk.payName = '一次交清'
              } else {
                risk.payName = risk.payEndYear + '年'
              }
            } else {
              risk.payName = '交至' + risk.payEndYear + '周岁'
            }
            // todo责任显示处理
            if (risk.riskCode == 'GFRS_M0053' || risk.riskCode == 'GFRS_M0061') {
              v.riskDTOLstNew.push(risk)
            }
          })
        })
        this.appntDTO = orderDTO.appntDTO
        let insuredDTOs = [{}]
        insuredDTOs[0].insuredDTOs = orderDTO.insuredDTOs
        insuredDTOs = formatRiskList(insuredDTOs, 'insuredDTOs', 'riskDTOLst')
        this.insuredDTOs = insuredDTOs[0].insuredDTOs
        this.insuredDTOs = relevanceByInsure(this.insuredDTOs, insuredLabelResult, insuredResult, insuredInfoResult) //进行数据关联
        this.getWXTitle(this.insuredDTOs) //获取微信标题
        // 建议书名称
        this.insuredDTOs.forEach((item) => {
          if (item.riskDTOLst && item.riskDTOLst.length > 0) {
            item.riskDTOLst.forEach((ele) => {
              this.chooseProductCodes.push(ele.riskCode)
            })
          }
        })
        localStorage.pdfShareCode = this.chooseProductCodes[0]
      }
    },
    //获取微信分享的标题
    getWXTitle(insuredDTOs) {
      dataDictionary.riskType.forEach((dataRisk) => {
        if (insuredDTOs[0].mainRisk[0].riskCode == dataRisk.code) {
          this.wxTitle = dataRisk.shortName + '计划书'
        }
      })
    },
    //转投保
    async insure() {
      if (this.isCheck == '1') {
        //校验该代理人是否有该产品的售卖权限
        return this.$toast('您暂无使用权限！如有问题咨询，请联系个险业务部。')
      }
      let path = '/sale/insuredInfo?edit=1'
      if (this.mainRiskCodes) {
        if (this.mainRiskCodes.length === 2) {
          let prd26 = this.mainRiskCodes.some((item) => {
            return item === 'GFRS_M0026'
          })
          let prd17 = this.mainRiskCodes.some((item) => {
            return item === 'GFRS_M0017'
          })
          // 如果选择的产品不是GFRS_M0026&GFRS_M0017弹出提示
          if (!(prd26 && prd17)) {
            return Toast.fail('暂不支持组合产品转投保')
          }
        }
        if (
          this.mainRiskCodes[0] == 'GFRS_M0024' ||
          this.mainRiskCodes[0] == 'GFRS_M0040' ||
          this.mainRiskCodes[0] == 'GFRS_M0044' ||
          this.mainRiskCodes[0] == 'GFRS_M0051'
        ) {
          let specilFlag = '1'
          path = `${path}&specilFlag=${specilFlag}`
          let flagPermission = await riskRules.getProductSellPermissionList(this.mainRiskCodes[0], this)
          if (flagPermission.flag) {
            //校验该代理人是否有该产品的售卖权限
            return Toast.fail(flagPermission.resultMessage)
          }
        }
        // }
      }
      let params = {
        proposalInfoDTO: {
          proposalNo: this.proposalNo
        }
      }
      toInsurance(params).then((res) => {
        if (res.result == '0') {
          this.$CacheUtils.setLocItem('orderNo', res.content.orderNo)
          localStorage.chooseProductCodes = ''
          this.$jump({
            flag: 'h5',
            extra: {
              url: location.origin + '/#' + path + '&orderNo=' + res.content.orderNo,
              forbidSwipeBack: '1',
              backToFirst: '1'
            },
            routerInfo: {
              path: path + '&orderNo=' + res.content.orderNo
            }
          })
        } else {
          Toast.fail(res.resultMessage)
        }
      })
    },
    // 滑动块发生变化时
    input(value, demoValue, demoLabel) {
      this.$forceUpdate() //强制组件更新 解决值更改之后 滑块不滑动的问题
      let index = String(value)
      if (demoLabel) {
        demoLabel.forEach((label) => {
          label.value = demoValue[index][label.content]
          if (label.content == 'currentAge') {
            this.pageShowInfo.showInsuredDTO.checkAge = label.value
          }
        })
      }
    },
    // 选择年龄
    checkAgeForRate(index) {
      let risk = this.pageShowInfo.showInsuredDTO
      // 建议书选择106，这两个值相等时，就不能再选择其他年龄了,先去掉
      // if (risk.sliderValue == risk.policyYear) {
      //   return
      // }
      risk.sliderValue = index
      this.$forceUpdate()
      this.slideChange(risk)
    },
    // 点击增加
    exhibitionAdd(risk) {
      if (risk.sliderValue == risk.policyYear) {
        return
      }
      risk.sliderValue++
      this.$forceUpdate()
      this.slideChange(risk)
    },
    //点击减少
    reduce(risk) {
      if (risk.sliderValue == 1) {
        return
      }
      risk.sliderValue--
      this.$forceUpdate()
      this.slideChange(risk)
    },
    //点击滑块增加或者减少时调用
    slideChange(risk) {
      let index = String(risk.sliderValue)
      risk.demoLabel.forEach((label) => {
        label.value = risk.demoValue[index][label.content]
        if (label.content == 'currentAge') {
          this.pageShowInfo.showInsuredDTO.checkAge = label.value
        }
      })
    },
    // 跳转到公司介绍
    goToCompanyProfile() {
      this.$router.push({ path: '/proposal/companyProfile' })
      // this.$jump({
      //   flag: 'h5',
      //   extra: {
      //     url: location.origin + '/#/proposal/companyProfile'
      //   },
      //   routerInfo: {
      //     path: '/proposal/companyProfile'
      //   }
      // })
    },
    //跳转到pdf 进入建议书后 根据建议书编码来查找相应的pdf
    async goPDF() {
      if (this.$route.query.proposalOrderNo) {
        this.$router.push({
          path: '/proposal/pdf',
          query: {
            proposalOrderNo: this.$route.query.proposalOrderNo
          }
        })
      } else {
        this.$router.push({ path: '/proposal/pdf' })
      }

      // this.$jump({
      //   flag: 'h5',
      //   extra: {
      //     url: location.origin + '/#/proposal/pdf'
      //   },
      //   routerInfo: {
      //     path: '/proposal/pdf'
      //   }
      // })
    },
    // 条款PDF
    async goCaluePDF(riskItem) {
      localStorage.showCaluePDFUrl = riskItem.url
      this.$router.push({ path: '/proposal/caluePdf' })
      // this.$jump({
      //   flag: 'h5',
      //   extra: {
      //     url: location.origin + '/#/proposal/caluePdf?',
      //     title: '条款'
      //   },
      //   routerInfo: {
      //     path: '/proposal/caluePdf'
      //   }
      // })
    },
    //写成标准的方法(数组是object的一种)：
    getObjectKeys(object) {
      var keys = []
      for (var property in object) {
        keys.push(property)
      }
      return keys
    },
    getObjectValues(object) {
      var values = []
      for (var property in object) {
        values.push(object[property])
      }
      return values
    },
    memberConversion(status) {
      let text = ''
      switch (status) {
        case '00':
          text = '' //准会员不显示
          break
        case '01':
          text = '正式会员'
          break
        case '02':
          text = '铜牌会员'
          break
        case '03':
          text = '银牌会员'
          break
        case '04':
          text = '金牌会员'
          break
        case '05':
          text = '白金会员'
          break
        case '06':
          text = '终身会员'
          break
      }
      return text
    }
  },
  components: {
    [Field.name]: Field,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [Cell.name]: Cell,
    [RadioGroup.name]: RadioGroup,
    [Radio.name]: Radio,
    [CellGroup.name]: CellGroup,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Slider.name]: Slider,
    [Row.name]: Row,
    [Col.name]: Col,
    [Tag.name]: Tag,
    [Divider.name]: Divider,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Sticky.name]: Sticky,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Button.name]: Button,
    SelectRadio
  }
}
</script>

<style lang="scss">
.proposal-exhibition-container {
  padding-bottom: 10px;

  .sex-radio {
    .van-cell-group {
      background: transparent;

      .van-cell {
        background: transparent;
        justify-content: center;

        .van-field__label {
          width: 0;
          flex: 0;
        }
      }
    }

    .ph30 {
      padding: 0px !important;
    }
  }

  &::before {
    content: '';
    display: table;
  }

  width: 100%;
  background: url('../../../assets/images/proposal/proposal_bg.png') no-repeat;
  background-color: #f7f7f7;
  background-size: 100% auto;

  .line-height {
    line-height: 35px;
  }

  .lh40 {
    line-height: 40px;
  }

  .van-divider {
    margin: 0 0 15px;
  }

  .table {
    & > div {
      width: 19%;
    }

    & > div:last-child {
      width: 25%;
    }
  }

  .wx {
    img {
      width: 100%;
    }
  }

  div::-webkit-scrollbar {
    width: 0;
  }

  .divbg_1 {
    /*background-color: #9ec2fc;*/
    background-color: #f5fbff;
  }

  .divbg_2 {
    background-color: none;
  }

  .hideInfo {
    height: 140px;
    overflow: hidden;
  }

  .hideInfo_insure {
    height: 60px;
    overflow: hidden;
  }

  .hideInfo_hesitate {
    height: 60px;
    overflow: hidden;
  }

  .insured_item {
    position: absolute;
    z-index: 98;
    border-radius: 8px;
    width: 67px;
    height: 100px;

    .insured_item_1 {
      margin: 0px 13.5px 0px 13.5px;
      padding-top: 9px;

      img {
        width: 40px;
        height: 40px;
      }
    }
  }

  .color_3A81F6 {
    color: #3a81f6;
  }

  .bg_3A81F6 {
    background-color: #3a81f6;
  }

  .color_666666 {
    color: #666666;
  }

  .color_333333 {
    color: #333333;
  }

  .color_FFA42F {
    color: #ffa42f;
  }

  .lh24 {
    line-height: 24px;
  }

  .lh20 {
    line-height: 20px;
  }

  .line_gray {
    width: 1px;
    height: 19px;
    background-color: #999999;
    line-height: 24px;
  }

  .sticky_div {
    width: 100%;
    overflow-x: auto;
    box-sizing: border-box;
  }

  .line_title {
    border-left: 6px solid #3a81f6;
    padding-left: 6px;
    height: 18px;
    margin-top: 25px;
    margin-bottom: 15px;
  }

  .risk_head {
    border-top-right-radius: 6px;
    border-top-left-radius: 6px;
    margin: 0px 10px;
    background-color: #dbeffe;
    color: #669efa;
    border: 1px solid #acc5e6;
    line-height: 18px;
  }

  .risk_body {
    border: 1px solid #acc5e6;
    border-top: 0px;
    margin: 0px 10px;
    line-height: 18px;
  }

  .risk_body_last {
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
  }

  .up_down_div {
    z-index: 2;
    position: absolute;
    width: 100%;
    height: 24px;
    left: 0;
    bottom: -12px;
    text-align: center;

    img {
      width: 24px;
      height: 24px;
    }

    .img180 {
      transform: rotate(180deg);
    }
  }

  .model_title {
    margin: 29px 15px;
    padding-top: 15px;
    border-radius: 5px;

    .cheeck_risk_type_left {
      border-bottom-left-radius: 15px;
      border-top-left-radius: 15px;
    }

    .cheeck_risk_type_right {
      border-bottom-right-radius: 15px;
      border-top-right-radius: 15px;
    }

    .checked_risk_type {
      height: 30px;
      line-height: 30px;
      border: 1px solid #3a81f6;
      background-color: #3a81f6;
      padding: 0px 25px;
      color: #ffffff;
    }

    .no_check_risk_type {
      height: 30px;
      line-height: 30px;
      border: 1px solid #3a81f6;
      background-color: #ffffff;
      color: #3a81f6;
      padding: 0px 25px;
    }
  }

  .line_C8DBFB {
    height: 1px;
    margin: 17px;
    border-top: 1px dashed #c8dbfb;
  }

  .calue_name {
    width: 80%;
    text-align: left !important;
  }

  .calue_button {
    width: 20%;
    height: 26px;
    line-height: 26px;
    border-radius: 13px;
    text-align: center;
    border: 1px solid #3a81f6;
    margin-top: 5px;
    margin-bottom: 5px;
    color: #3a81f6;
  }

  .customer_button {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background-color: #3a81f6;
  }

  .last_fix_div {
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    box-shadow: 0px 0px 10px 5px #aaa;
    z-index: 999;

    div {
      width: 50%;
    }
  }

  .fix_bottom {
    position: fixed;
    height: 40px;
    width: 100%;
    margin: auto;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .fix_bottom_sub {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin: 10px;
      font-size: 14px;

      img {
        width: 16px;
        height: 16px;
      }

      div {
        padding-left: 10px;
      }
    }
  }

  .table_border {
    border-left: 1px solid #acc5e6;
  }

  .title_item {
    height: 115px;
  }

  .lh_30 {
    height: 30px;
    line-height: 30px;
  }

  .check_age {
    height: 20px;
    line-height: 20px;
    width: 15em;
    margin: 5px auto;

    .check_one {
      border-bottom: 1px solid gray;
      width: 5em;
      text-align: right;
    }
  }

  .show_risk_name {
    border-left: 5px solid #3a81f6;
    padding-left: 7px;
    text-align: left;
    line-height: 20px;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .duty_by_duty {
    .head_radis {
      width: 6px;
      height: 6px;
      background-color: black;
      border-radius: 3px;
    }

    .title_2 {
      padding-left: 5px;
      line-height: 25px;
    }

    .content_1 {
      padding-left: 23px;
      line-height: 25px;
    }
  }
}

.div_1 {
  margin-top: 13px;
  margin-left: 14px;
}

.div_2 {
  margin-top: 37px;
  margin-left: 17px;
}

.div_3 {
  border-radius: 5px;
  margin: 7px 15px 14px 15px;
}

.div_4 {
  position: relative;
}

.div_5 {
  margin-top: 15px;
}

.div_6 {
  margin-bottom: 20px;
}

.div_7 {
  padding-left: 12px;
  padding-right: 12px;
}

.div_8 {
  line-height: 25px;
}

.div_9 {
  padding-top: 30px;
  width: 100%;
  height: 1px;
}

.img_10 {
  width: 16px;
  height: 16px;
}

.div_10 {
  padding-top: 10px;
  width: 100%;
  height: 1px;
}

.div_11 {
  padding: 10px 13px;
}

.div_12 {
  padding-top: 20px;
  width: 100%;
  height: 1px;
}

.div_13 {
  right: 0px;
  top: 40%;
  width: 30px;
  /*width: 23px;*/
}

.img_11 {
  width: 22px;
  height: 80px;
  background-image: url('../../../assets/images/proposal/proposal_company.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0;
}

.img_12 {
  width: 22px;
  height: 80px;
  margin-top: -2px;
  background-image: url('../../../assets/images/proposal/proposal_pdf.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  border: 0;
}

.div_14 {
  height: 40px;
  width: 100%;
}

.shadow {
  //box-shadow: 2px 2px 2px 3px #3b72f9;
  box-shadow: 0 0 4px #3b72f9;
}

.triangle {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ffffff;
  position: absolute;
  left: 30px;
  top: 99px;
  z-index: 99;
  margin-left: -10px;
}

.triangle_shadow {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #3b72f9;
  position: absolute;
  left: 30px;
  top: 99px;
  margin-left: -10px;
  z-index: 96;
  filter: blur(2px);
}

.sub_insure_item {
  width: 67px;
  height: 105px;
}

.bg_f7fbff {
  background-color: #f5fbff;
}

.bg_DBEFFE {
  background-color: #dbeffe;
}

.div_16 {
  border-bottom: 1px solid #edeef0;
  margin-left: 12px;
  margin-right: 12px;
  padding-bottom: 10px;
  padding-top: 10px;
}

.div_17 {
  padding-left: 11px;
  line-height: 25px;
}

.img_13 {
  width: 100%;
  height: 100%;
}

.img_14 {
  width: 200px;
  height: 70px;
}

.img_15 {
  margin-left: 18px;
  width: 142px;
  height: 27px;
}

.share_content {
  height: 100vh;

  .div_01 {
    width: 100%;
    height: 43px;
    padding-top: 16px;
  }

  .div_02 {
    width: 100%;
    height: 497px;
    position: relative;

    .div_021 {
      position: absolute;
      top: 30px;
      left: 0px;
      width: 100%;
    }

    .div_022 {
      font-size: 25px;
    }

    .div_023 {
      font-size: 16px;
      margin-top: 28px;
      color: #073190;
    }
  }

  .div_03 {
    color: #666666;
    margin-bottom: 12px;
  }
}

.div_last {
  line-height: 20px;
  margin: 5px 0px;
}

.div_height {
  line-height: 24px;
}

.van-button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  /* background-color: #000; */
  border: inherit;
  /* border-color: #000; */
  border-radius: inherit;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  content: ' ';
}
</style>
