index.js

import React, { Component } from 'react'
import { connect } from 'dva'
import styles from  './PlanResult.css'
import  Table from "../../components/Table"
import { Modal, List,Radio, WhiteSpace, WingBlank,Slider} from 'antd-mobile';
import moment from 'moment';
import shareHide from "../../utils/shareHide";
import 'moment/locale/zh-cn';
import share from "../../utils/share";
import Iscroll from "../../components/Iscroll";
import {urlGetParams} from '../../utils/dataFilter'
import {ProtectionItem,SeriousDiseaseList,
MiddleDiseaseList,GeneralDiseaseList,
SeriousDiseaseList_hxf,GeneralDiseaseList_hxf,
SeriousDiseaseList_hxf_huomian,GeneralDiseaseList_hxf_huomian,
SeriousDiseaseList_cqs,GeneralDiseaseList_cqs} from "../../utils/staticData";

moment.locale('zh-cn');

const RadioItem = Radio.RadioItem;

function closest(el, selector) {
  const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
  while (el) {
    if (matchesSelector.call(el, selector)) {
      return el;
    }
    el = el.parentElement;
  }
  return null;
}

class PlanResult extends Component {
  constructor(props){
    super(props)
    this.state={
      termList:[],
      clauseUrlList:[],
      modal:ProtectionItem,
      year:0,
      age:0,
      money:15236,
      modal1: false,
      modal2: false,
      modal3: false,
      modal4: false,
      pdf:'',
      allTime:[],
      tableTitle:[
        {
          title: '年度',
          dataIndex: '0',
          width: '25%',
          align:'center',
        },
        {
          title: '年龄',
          dataIndex: '1',
          width: '25%',
          align:'center',
        },
        {
          title: '现金价值',
          dataIndex: '2',
          width: '50%',
          align:'center',
        }
      ],

      tableTitleInsurance:[
        {
          title: '险种',
          dataIndex: '0',
          width: '25%',
          align:'center',
        },
        {
          title: '保额',
          dataIndex: '1',
          width: '25%',
          align:'center',
        },
        {
          title: '保费',
          dataIndex: '2',
          width: '25%',
          align:'center',
        },
        {
          title: '缴费期限',
          dataIndex: '3',
          width: '25%',
          align:'center',
        }
      ],
      tableList: [],
      tableMainList:[
        {
          key:0,
          0:'12',
          1:'35',
          2:'65',
          3:'74',
        },
        {
          key:1,
          0:'12',
          1:'35',
          2:'65',
          3:'74',
        }
      ],
      insuranceValue:0,
      cutButton:false,
      seriNo:'',
      insName:'',  //姓名
      insAge:'',   //年龄
      insAmnt:'',  //保e
      insPrem:'',  //保费
      hxfAmut:0,   //华夏福保额
      mainTable:[],//主险列表
      fjTable:[],//主险列表
      proposalInterest:[],//利益演示表
      mainRiskCode:'', //主险code
      fjRiskCodeList:[],  //附加险code集合
      
      cctHealth:false, // 常春藤-健康保障
      hxfHealth:false, // 华夏福-健康保障
      cqsHealth:false, // 常青树-健康保障
      
      flmGetMoney:false, //福临门-固定领取
      zhenaiGetMoney:false, //珍爱-固定领取
      hxfGetMoney:false, //华夏福-固定领取
      hxhnjGetMoney:false, //华夏红年金-固定领取
      
      cctPremExempt:false,  //常春藤保费豁免
      flmPremExempt:false,   // 福临门保费豁免
      zhenaiPremExempt:false,   // 珍爱保费豁免
      hxfPremExempt:false,//华夏福附加重大豁免险种 保费豁免
      cqsPremExempt:false,//常青树 保费豁免
      hxhnjPremExempt:false,//华夏红年金 保费豁免
      
      cctDieSafeguard:false ,  // 常春藤身故保障
      flmDieSafeguard:false ,  // 福临门身故保障
      zhenaiDieSafeguard:false ,  // 珍爱身故保障
      hxfDieSafeguard:false ,  // 华夏福身故保障
      cqsDieSafeguard:false ,  // 常青树身故保障
      hxhnjDieSafeguard:false ,  // 华夏红年金身故保障
      
      ybtHealthCase:false ,  // 医保通医疗保障
      hxfHealthCase:false ,  // 华夏福医疗保障
      
      ybtElseCase:false ,  // 医保通其他保障
      cashValue:'0',
      payTime:0,  //几年交

      illnessData:[],
      illnessData3:SeriousDiseaseList,
      illnessData1:MiddleDiseaseList,
      illnessData2:GeneralDiseaseList,
      hxfSeriousDisease:SeriousDiseaseList_hxf,
      hxfGeneralDisease:GeneralDiseaseList_hxf,
      hxfhmSeriousDisease:SeriousDiseaseList_hxf_huomian,
      hxfhmGeneralDisease:GeneralDiseaseList_hxf_huomian,
      cqsSeriousDisease:SeriousDiseaseList_cqs,
      cqsGeneralDisease:GeneralDiseaseList_cqs,
      illnessName:'所保重疾',
      seriNo:'',
      riskName:'',
      riskCode:'',
      cover:true,
      totalPrem:'',
      PaymentPeriodList:[],//保险期间list
      mainWithFJPrem:0,//主险及其捆绑险种保费和
      mainList:[],//主险列表
    }
  }

  componentWillMount(){
    // alert( '屏幕的高度'+ document.body.clientHeight ,'正文的高的'+ document.body.scrollHeight )
    let url = window.location.href;
    const params = urlGetParams(url);
    console.log('params--->',params)
    if(params.seriNo){
      let seriNo = params.seriNo;
      let riskName = params.riskName;
      let riskCode = params.riskCode;
      let thumbnail = params.thumbnail;
      let urlShare = "";
      if(params.isShare){//处理多次转发参数问题
        urlShare = window.location.href;
      }else{
        urlShare = window.location.href+`&isShare=t&phoneNum=${localStorage.getItem('number')}`;
      }
      share({
        decodeUrl: window.location.href.split('#')[0],
        title: riskName,
        desc: '您的专属保险计划书，请您查收！',
        shareUrl: urlShare,
        thumbnail: thumbnail,
        record:{
              "operCode": riskCode,
              "operTitle": riskName,
              "operFunction": 100120,
              "operType": 202,
              "phoneNum": params.isShare ? params.phoneNum : ""
            }
      });

      this.setState({
        seriNo:seriNo,
        riskName:riskName,
        riskCode:riskCode,
      })
    }else{
      this.setState({
        // cover:false,
        seriNo:window.localStorage.getItem("seriNo"),
        riskName:window.localStorage.getItem("riskName"),
        riskCode:window.localStorage.getItem("riskCode"),
      })
    }
    //点击记录
    this.props.dispatch({
      type:"home/setClickRecord",
      payload: {
        "operCode": params.riskCode,
        "operFunction": 100120,
        "operTitle": params.riskName,
        "operType": 201,
        "phoneNum": params.isShare ? params.phoneNum : ""
      },
      callback(data){
        console.log('点击分享计划书结果页面链接，记录一次') 
      }
    });

  }
  componentDidMount(){
    document.title = this.state.riskName
    let that = this;
    shareHide(false);
    if(this.state.cover){
      setTimeout(()=>{
        that.setState({
          cover:false,
        })
      },3000)
    }

    this.getMessage();
    this.getPerodList();//获取缴费期间值
    
  }

componentWillUnmount(){
  document.title = ''
}
getPerodList(){
  let that = this;
  let date = new Date();
  let nowDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
  this.props.dispatch({
    type:'planEditor/PremiumPaymentPeriod',
    payload:{
      "riskCode":this.state.riskCode,
      "birthday": this.state.riskCode=='511404' ? nowDate : '1981-02-23',
      "pageNo":1,
      "mainCode": this.state.riskCode
    },
    callback(data){
      that.setState({
        PaymentPeriodList:data,
      })
    }
  })
}

  /*  获取条款列表 */
  getProspectusaAditiona2=()=>{
    let that = this;
    this.props.dispatch({
      type: 'planEditor/getProspectusaAditional',
      payload: {
        "mainCode": this.state.mainRiskCode,
        "riskType": ""      //0:主险 ，1：附加险  ，''所有
      },
      callback(data){
        let termList = [];
        for (var i = 0; i < data.data.length; i++) {
          termList.push({
            key:0,
            configName:data.data[i].riskName,
            configCode:data.data[i].riskCode,
            clauseUrl:data.data[i].clauseUrl,
            cut:false,
          },)
        }
        that.setState({
          modal4:true,
          termList:termList,
        })
      }
    })
  }

  getMessage=()=>{
    let that = this;
    let  riskName= this.state.riskName;
    this.props.dispatch({
      type: 'planEditor/getMyPlanMessage',
      payload: {
        "seriNo": this.state.seriNo,
        // "seriNo": 319,
        "interestRate": "0.03"
      },
      callback(data){
        let microPlanInfo = data.microPlanInfo
        // let modal = [];
        let microPlanFJInfo = data.microPlanFJInfo
        let proposalInterest = data.proposalInterest
        let mainTable = [
          {
            key:0,
            0:microPlanInfo.riskName,
            1:Number(microPlanInfo.amnt)||'-',
            2:Number(microPlanInfo.prem)||'-',
            3:microPlanInfo.payTimeName||'-',
          }
        ]
        let allTime = [];
        for (var i = 0; i < proposalInterest.length; i++) {
          let age = i+ microPlanInfo.age;
          allTime.push({value:i,label:<p className={styles.moment} style={{backgroundColor:'white'}}>保单年度 <span >{i}</span> 年,被保人 <span >{age}</span>岁时 </p> ,cashValue:Math.round(proposalInterest[i].cashValue/100),age:age,})
          that.state.tableList.push({key:i,0:i,1:age,2:Math.round(proposalInterest[i].cashValue/100)})
        }
        let fjTable = [];
        let Amut=0;
        let Prem =Number(microPlanInfo.prem);
        let fjRiskCodeList = [];
        if(microPlanFJInfo.length>0){
          for (var i = 0; i < microPlanFJInfo.length; i++) {
            fjTable.push({
              key:i,
              0:microPlanFJInfo[i].riskName||'-',
              1:Number(microPlanFJInfo[i].amnt)||'-',
              2:Number(microPlanFJInfo[i].prem)||'-',
              3:Number(microPlanFJInfo[i].payTime)==0 ? "趸交" :  microPlanFJInfo[i].payTimeName||'-',
            })
            Amut += microPlanFJInfo[i].amnt
            Prem += Number(microPlanFJInfo[i].prem)
            fjRiskCodeList.push(microPlanFJInfo[i].riskCode)

            //附加险
            if(microPlanFJInfo[i].riskCode == '111703'){
              that.setState({
                ybtHealthCase:true ,  // 医保通医疗保障
                ybtElseCase:true ,  // 医保通其他保障
              })
            }
            if(microPlanFJInfo[i].riskCode == '121705'){
              that.setState({
                hxfHealthCase:true ,  // 华夏福医疗保障2014
                hxfAmut:microPlanFJInfo[i].amnt
              })

            }
            if(microPlanFJInfo[i].riskCode == '121513'){  //华夏福投保人豁免保费保险
              that.setState({
                hxfPremExempt:true,   // 华夏福保费豁免
              })

            }
          }
          that.setState({
            fjTable:fjTable,
            fjRiskCodeList:fjRiskCodeList,
            age:proposalInterest.length>0 ? proposalInterest[0].age : 0,
          })
        }
        
        let mainTotalPrem = Number(microPlanInfo.prem);//计算主险和其捆绑险种的保费和
        let lists = microPlanInfo.microPlanInfo2;
        if(lists && lists.length>0){
          for(let jj in lists){
            mainTotalPrem += Number(lists[jj].prem);
          }
        }
        //主险
        if(microPlanInfo.riskCode == '511403'){
          that.setState({
            flmGetMoney:true, //福临门-固定领取
            flmPremExempt:true,   // 福临门保费豁免
            flmDieSafeguard:true ,  // 福临门身故保障
            insAmnt:microPlanInfo.amnt,
            insPrem:microPlanInfo.prem,
            age:microPlanInfo.age,
            payTime:microPlanInfo.payTime,
          })
        }

        if(microPlanInfo.riskCode == '511501'){
          that.setState({
            cctHealth:true, // 常春藤-健康保障
            cctPremExempt:true,  //常春藤保费豁免
            cctDieSafeguard:true, //常春藤身故保障
            insAmnt:microPlanInfo.amnt,
            insPrem:microPlanInfo.prem,
            payTime:microPlanInfo.payTime,
            age:microPlanInfo.age,
          })

        }
        if(microPlanInfo.riskCode == '511404'){
          that.setState({
            zhenaiGetMoney:true, //珍爱宝贝-固定领取
            zhenaiPremExempt:true,   // 珍爱宝贝保费豁免
            zhenaiDieSafeguard:true ,  // 珍爱宝贝身故保障
            insAmnt:microPlanInfo.amnt,
            insPrem:microPlanInfo.prem,
            age:microPlanInfo.age,
            payTime:microPlanInfo.payTime,
          })
        }
        if(microPlanInfo.riskCode == '411204'){
          that.setState({
            hxfHealth:true,//华夏福-健康保障
            hxfGetMoney:true, //华夏福-固定领取
            hxfDieSafeguard:true ,  // 华夏福身故保障
            insAmnt:microPlanInfo.amnt,
            insPrem:microPlanInfo.prem,
            age:microPlanInfo.age,
            payTime:microPlanInfo.payTime,
          })
        }
        if(microPlanInfo.riskCode == '111505'){
          that.setState({
            cqsHealth:true,//常青树2015-健康保障
            cqsPremExempt:true,//常青树2015保费豁免
            cqsDieSafeguard:true ,  // 常青树2015身故保障
            insAmnt:microPlanInfo.amnt,
            insPrem:microPlanInfo.prem,
            age:microPlanInfo.age,
            payTime:microPlanInfo.payTime,
          })
        } 
        if(microPlanInfo.riskCode == '411405'){
          that.setState({
            hxhnjGetMoney:true, //华夏红年金-固定领取
            hxhnjPremExempt:true,//保费豁免
            hxhnjDieSafeguard:true,//身故保障
            insAmnt:microPlanInfo.amnt,
            insPrem:microPlanInfo.prem,
            age:microPlanInfo.age,
            payTime:microPlanInfo.payTime,
          })
        }
        that.setState({
          // modal:modal,
          mainRiskNmae:microPlanInfo.riskName,
          mainRiskCode:microPlanInfo.riskCode,
          insSex:microPlanInfo.insSex,
          insAge:microPlanInfo.age,
          insYear:microPlanInfo.year,
          // insAmnt:Number(Amut) ,
          totalPrem:Prem ,
          mainTable:mainTable,
          proposalInterest:proposalInterest,
          allTime:allTime,
          mainWithFJPrem:mainTotalPrem,
          mainList:microPlanInfo

        })
      }
    })
  }
  log = (name) => {
    return (value) => {
      this.setState({
        year:Number(value),
        age:this.state.tableList[value]['1'],
        cashValue:this.state.tableList[value]['2'],
      })
    };
  }

  changeValue=(year)=>{
    if(year>-1 && year < this.state.tableList.length){
      this.setState({
        year:year,
        age:this.state.tableList[year][1],
        cashValue:this.state.tableList[year][2],
        insuranceValue:this.state.tableList[year][0],
      })
    }



  }

  showModal = key => (e) => {
    e.preventDefault(); // 修复 Android 上点击穿透
    e.stopPropagation();
    setTimeout(()=>{
      this.setState({
        [key]: true,
      });
    },100)
  }
  showModalillness=(list,name)=>(e)=>{
     e.preventDefault();
     e.stopPropagation();
     setTimeout(()=>{
      this.setState({
        illnessData:list,
        modal3:true,
        illnessName:name
      })
    },100)
  }

  onClose = key => (e) => {
    e.preventDefault();
    this.setState({
      [key]: false,
    })
  }

  onChangeYear = key =>(e)=>{
    e.preventDefault();
    this.setState({
      [key]: false,
      initInsurance:false,
      year:Number(this.state.insuranceValue),
      age:this.state.insAge+this.state.insuranceValue,
      // insuranceValue:this.state.cashValue,
      cashValue:this.state.cashValue,
    });
  }


  cutButton = ()=>{
    this.setState({
      cutButton:!this.state.cutButton,
    })
  }

  onChange = (value,cashValue,label) => {
    this.setState({
     insuranceValue:value,     //年度
     cashValue:cashValue,

     });
  }
  go(){
    if(this.state.cover){
      this.setState({
        cover:false
      })
    }
  }
  render() {
    const params = urlGetParams(window.location.href);
    let recipientsSex = String(params.recipientsSex) == "0" ? true : false;
    let recipientsName = params.recipientsName;
    let recipients = recipientsName ? true : false;//有姓名默认有收件人
    const data = this.state.allTime;
    console.log("结果页面-------------------------》》》》",recipients,this.state.mainTable,this.state.fjTable,this.state.mainWithFJPrem,this.state.mainList,this.state.PaymentPeriodList,this.state.insAmnt);

    let show = this.state.ybtHealthCase ||this.state.hxfHealthCase;
    let showDieSafeguard = this.state.flmDieSafeguard ||this.state.cctDieSafeguard || this.state.zhenaiDieSafeguard || this.state.hxfDieSafeguard || this.state.cqsDieSafeguard || this.state.hxhnjDieSafeguard;//身故保障
    let PremExempt =  this.state.flmPremExempt || this.state.cctPremExempt || this.state.zhenaiPremExempt || this.state.hxfPremExempt || this.state.cqsPremExempt || this.state.hxhnjPremExempt;//保费豁免
    let GetMoney = this.state.flmGetMoney || this.state.zhenaiGetMoney || this.state.hxfGetMoney || this.state.hxhnjGetMoney;//固定领取
    let Health = this.state.cctHealth || this.state.hxfHealth || this.state.cqsHealth;//健康保障
    let {ybtHealthCase,hxfHealthCase}  = this.state;
    return (
      <div className={styles.all}>
        { this.state.cover &&
          <div className={styles.welcome}>
            <div></div>
            <p className={styles.btn} onClick={()=>this.go()}>
               { recipients === true && <span>{recipientsName.substring(0,1)}{ recipientsSex === true?'先生':'女士' }<br/>亲启</span>}
                { recipients === false && <span>敬呈<br/>亲启</span> }
            </p>
          </div>
        }

        {
          !this.state.cover &&
          <div className={styles.box}>
          <Iscroll  id="planResult" 
                    iscrollOptions={{
                      probeType:2
                    }}>
              <div className={styles.Bitmap}>
              {this.state.mainRiskCode == '511501'&& <img src={require('../../assets/image/cct.png')} className={styles.main} alt=""/>}
              {this.state.mainRiskCode == '511403'&& <img src={require('../../assets/image/flm.png')} className={styles.main}  alt=""/>}
              {this.state.mainRiskCode == '511404'&& <img src={require('../../assets/image/zhenai.png')} className={styles.main}  alt=""/>}
              {this.state.mainRiskCode == '411204'&& <img src={require('../../assets/image/huaxiafu.png')} className={styles.main}  alt=""/>}
              {this.state.mainRiskCode == '111505'&& <img src={require('../../assets/image/cqs.jpg')} className={styles.main}  alt=""/>}
              {this.state.mainRiskCode == '411405'&& <img src={require('../../assets/image/huaxiahong.png')} className={styles.main}  alt=""/>}

              {/*<img src={require('../../assets/image/share.png')} alt="" className={styles.share} />*/}
            </div>
            <div className={styles.content}>
              <div className={styles.people}>
                <div className={styles.life}>
                  <img src={require('../../assets/image/rectangle.png')} alt=""/>
                  <p>{this.state.PaymentPeriodList.length>0 ? this.state.PaymentPeriodList[0].protectTimeName :''}</p>

                  <div className={styles.insureMessage}>
                    <div className={styles.title}>
                      <span>被保人性别</span>
                      <span>被保人年龄</span>
                      <span>首年保费</span>
                    </div>
                    <div className={styles.message}>
                      <span>{this.state.insSex=='F'?'女':'男'}</span>
                      <span>{this.state.insAge}</span>
                      <span>{this.state.totalPrem+"元"}</span>
                    </div>


                    {
                      this.state.cutButton && <div>
                        <div className ={styles.mainInsurance}>
                          {this.state.mainRiskNmae}   <span style={{float:"right",marginRight:'0.2rem'}}>首年保费：{this.state.mainTable[0][2]+"元"}</span>
                        </div>
                        <Table listTitle={this.state.tableTitleInsurance}  listTable={this.state.mainTable}/>
                        {
                          this.state.fjTable.map((item,index)=>{
                            return(
                              <div key={index}>
                                <div className ={styles.mainInsurance}>
                                  {item['0']} <span style={{float:"right",marginRight:'0.2rem'}}>首年保费：{this.state.fjTable[index][2]+"元"}</span>
                                </div>
                                <Table listTitle={this.state.tableTitleInsurance}  listTable={[item]}/>
                              </div>
                            )
                          })
                        }
                      </div>
                    }
                    <div className={styles.button} onClick={this.cutButton}>
                      <img src={this.state.cutButton == true?require('../../assets/image/flod.png'):require('../../assets/image/unflod.png')} alt=""/>
                    </div>
                  </div>
                </div>
              </div>
              <div className={styles.modal}>
                <div className={styles.title}>
                  {GetMoney &&
                  <div>
                    <img src={require("../../assets/image/getMoney.png")} alt=""/>
                    <div>固定领取</div>
                  </div>}
                  {Health &&
                  <div>
                    <img src={require("../../assets/image/health.png")} alt=""/>
                    <div>健康保障</div>
                  </div>
                  }
                  {show &&
                  <div>
                    <img src={require("../../assets/image/medical.png")} alt=""/>
                    <div>医疗保障</div>
                  </div>
                  }
                  {showDieSafeguard &&
                  <div>
                    <img src={require("../../assets/image/safeguard.png")} alt=""/>
                    <div>身故保障</div>
                  </div>
                  }
                  {PremExempt &&
                  <div>
                    <img src={require("../../assets/image/exempt.png")} alt=""/>
                    <div>保费豁免</div>
                  </div>
                  }
                  {this.state.ybtElseCase &&
                  <div>
                    <img src={require("../../assets/image/else.png")} alt=""/>
                    <div>其他保障</div>
                  </div>
                  }
                </div>
              </div>
              {
                GetMoney && <div className={styles.health}>
                <div className={styles.panel}>固定领取</div>
                {
                  this.state.flmGetMoney &&<div  style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>福临门（智慧版）</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        {this.state.insAge + 5}岁起每年领取年金
                        <span className ={styles.monery}>
                          {this.state.insAmnt*0.3%10000 ==0? this.state.insAmnt*0.3/10000:(this.state.insAmnt*0.3).toFixed(0)}
                          {this.state.insAmnt*0.3%10000 ==0?'万元':'元'}
                        </span>
                      </div>
                    </div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        60岁至74岁每年领取关爱金
                        <span className ={styles.monery}>
                        {this.state.payTime == 0?(this.state.insPrem*0.06%10000 == 0?this.state.insPrem*0.06/10000:this.state.insPrem*0.06):this.state.payTime*this.state.insPrem*0.06%10000 == 0?this.state.payTime*this.state.insPrem*0.06/10000:this.state.payTime*this.state.insPrem*0.06}

                          {this.state.payTime == 0 ?this.state.insPrem*0.06%10000 == 0?'万元':'元':this.state.payTime*this.state.insPrem*0.06%10000 == 0?'万元':'元'}
                        </span>
                      </div>
                    </div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        75岁再领一笔养老金
                        <span className ={styles.monery}>
                        {this.state.payTime == 0?(this.state.insPrem*0.1%10000 == 0?this.state.insPrem*0.1/10000:this.state.insPrem*0.1):this.state.payTime*this.state.insPrem*0.1%10000 == 0?this.state.payTime*this.state.insPrem*0.1/10000:(this.state.payTime*this.state.insPrem*0.1).toFixed(0)}

                          {this.state.payTime == 0 ?this.state.insPrem*0.1%10000 == 0?'万元':'元':this.state.payTime*this.state.insPrem*0.1%10000 == 0?'万元':'元'}
                        </span>
                      </div>

                      <div className={styles.trivia} >
                  <span className={styles.dot}>
                     <img src={require('../../assets/image/dot.png')} alt=""/>
                   </span>
                        <span className={styles.detail}>收益稳，固定年金，领至终身</span>
                      </div>
                    </div>
                  </div>
                }
                {
                  this.state.zhenaiGetMoney &&<div  style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>珍爱宝贝</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        18岁至24岁，每年领取深造教育金
                        <span className ={styles.monery}>
                          {this.state.insAmnt*1%10000 ==0? this.state.insAmnt*1/10000 : (this.state.insAmnt*1).toFixed(0)}
                          {this.state.insAmnt*1%10000 ==0?'万元':'元'}
                        </span>
                      </div>

                      <div className={styles.trivia} >
                      <span className={styles.dot}>
                         <img src={require('../../assets/image/dot.png')} alt=""/>
                       </span>
                        <span className={styles.detail}>年年领取100%基本保障，领取7年</span>
                      </div>
                    </div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        30岁保险期满，一次性领取婚嫁金
                        <span className ={styles.monery}>
                          {this.state.payTime ? (this.state.payTime*1.2*this.state.insPrem%10000 == 0 ? this.state.payTime*1.2*this.state.insPrem/10000 : this.state.payTime*1.2*this.state.insPrem).toFixed(0) : 0}
                          {this.state.payTime ? (this.state.payTime*1.2*this.state.insPrem%10000 == 0 ? '万元' : '元') : '元'}
                        </span>
                      </div>

                      <div className={styles.trivia} >
                      <span className={styles.dot}>
                         <img src={require('../../assets/image/dot.png')} alt=""/>
                       </span>
                        <span className={styles.detail}>满足婚嫁费用，携手走向幸福人生</span>
                      </div>
                    </div>
                  </div>
                }
                {
                  this.state.hxfGetMoney &&<div  style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>华夏福两全保险</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        88周岁返还祝寿金
                        <span className ={styles.monery}>
                          {this.state.payTime==0 ? (this.state.mainWithFJPrem%10000 ==0 ? this.state.mainWithFJPrem.toFixed(0)/10000 : this.state.mainWithFJPrem.toFixed(0)) : (eval(this.state.mainWithFJPrem*this.state.mainList.payTime)%10000 ==0? eval(this.state.mainWithFJPrem*this.state.mainList.payTime)/10000:eval(this.state.mainWithFJPrem*this.state.mainList.payTime).toFixed(0))}
                          {eval(this.state.mainWithFJPrem*this.state.mainList.payTime)%10000 ==0?'万元':'元'}
                        </span>
                      </div>
                       <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>给付完毕合同继续有效，提供高品质晚年生活</span>
                      </div>
                    </div>
                  </div>
                }
                {
                  this.state.hxhnjGetMoney &&<div  style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>{this.state.riskName}</div>
                    <div className={styles.text}>
                      {eval(this.state.insAge + 10)<60 && (
                          <div className={styles.subtitle}>
                            {eval(this.state.insAge + 10) + "岁-59岁每年可领取年金"}
                            <span className ={styles.monery}>
                              {(this.state.insAmnt*0.2)%10000 == 0 ? (this.state.insAmnt*0.2)/10000 : (this.state.insAmnt*0.2).toFixed(0)}
                              {(this.state.insAmnt*0.2)%10000 == 0 ? '万元':'元'}
                            </span>
                          </div>
                       )}
                    </div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        {eval(this.state.insAge+10)>60 ? eval(this.state.insAge+10)+"岁后可领取年金" : "60岁后可领取年金"}
                        <span className ={styles.monery}>
                          {(this.state.insAmnt*0.4)%10000 == 0 ? (this.state.insAmnt*0.4)/10000 : (this.state.insAmnt*0.4).toFixed(0)}
                          {(this.state.insAmnt*0.4)%10000 == 0 ? '万元':'元'}
                        </span>
                      </div>
                    </div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        第5个保单周年日立即领取关爱金
                        <span className ={styles.monery}>
                          {this.state.payTime == 0 ? (this.state.insPrem*0.06)%10000 == 0 ? (this.state.insPrem*0.06)/10000 : (this.state.insPrem*0.06).toFixed(0) : (this.state.payTime*this.state.insPrem*0.06)%10000 == 0 ? (this.state.payTime*this.state.insPrem*0.06)/10000 : (this.state.payTime*this.state.insPrem*0.06).toFixed(0)}
                          {this.state.payTime == 0 ? (this.state.insPrem*0.06)%10000 == 0 ? "万元":"元" : (this.state.payTime*this.state.insPrem*0.06)%10000 == 0 ? "万元":"元"}
                        </span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>保单第5年开始领至第9年，年年享受关爱</span>
                      </div>
                    </div>
                  </div>
                }
                </div>
              }
              {
                Health &&<div className={styles.health}>
                <div className={styles.panel}>健康保障</div>
                {
                  this.state.cctHealth &&<div style={{paddingTop:'.11rem'}}>
                    <div className={styles.insurance}>常春藤（多倍版）</div>

                    <div className={styles.text}>

                      <div className={styles.subtitle}>
                        100种重疾保障最高可达    
                        <span className ={styles.monery}> 
                          {this.state.insAmnt*6%10000 ==0? this.state.insAmnt*6/10000:(this.state.insAmnt*6).toFixed(0)}   
                          {this.state.insAmnt*6%10000 ==0?'万元':'元'}
                        </span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>重疾分六组，每组最多赔付一次，每次至少100%保额
                        </span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>首次确诊重疾给付
                            {this.state.insAmnt%10000 ==0? this.state.insAmnt/10000:this.state.insAmnt} 
                            {this.state.insAmnt%10000 ==0?'万元':'元'}/已交保费/现价较大者
                        </span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>第二、三、四、五、六次各自给付 
                            {this.state.insAmnt%10000 ==0? this.state.insAmnt/10000:this.state.insAmnt}   
                            {this.state.insAmnt%10000 ==0?'万元':'元'}
                        </span>
                      </div>

                    </div>
                    <div className={styles.text}>

                      <div className={styles.subtitle}>
                        20种中症保障最高可达
                        <span className ={styles.monery}> {this.state.insAmnt%10000 ==0? this.state.insAmnt/10000:this.state.insAmnt}   
                        {this.state.insAmnt%10000 ==0?'万元':'元'}</span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>每次给付50%保额
                           {this.state.insAmnt*0.5%10000 ==0? this.state.insAmnt*0.5/10000:(this.state.insAmnt*0.5).toFixed(0)}   
                           {this.state.insAmnt*0.5%10000 ==0?'万元':'元'}
                        </span>，累计两次为限
                      </div>

                    </div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        35种轻症保障最高可达
                        <span className ={styles.monery}> 
                          {this.state.insAmnt*0.3*2%10000 ==0? this.state.insAmnt*0.3*2/10000:(this.state.insAmnt*0.3*2).toFixed(0)}   
                          {this.state.insAmnt*0.3*2%10000 ==0?'万元':'元'}
                        </span>

                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                          <span className={styles.detail}>每次给付30%保额
                            {this.state.insAmnt*0.3%10000 ==0? this.state.insAmnt*0.3/10000:(this.state.insAmnt*0.3).toFixed(0)}   
                            {this.state.insAmnt*0.3%10000 ==0?'万元':'元'}
                            ，累计两次为限
                          </span>
                      </div>

                    </div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        疾病终末期保障
                        <span className ={styles.monery}> 
                          {this.state.insAmnt%10000 ==0? this.state.insAmnt/10000:(this.state.insAmnt*1).toFixed(0)}   
                          {this.state.insAmnt%10000 ==0?'万元':'元'}
                        </span>
                        /已交保费/现价较大者
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>18岁前给付2倍已交保费，等待期90日内给付已交保费</span>
                      </div>
                    </div>
                    <div className={styles.disease}>
                      <span className={styles.illness} onClick={
                        this.showModalillness(this.state.illnessData3,'所保重疾')
                        }>所保重疾</span>
                      <span className={styles.illness} onClick={
                        this.showModalillness(this.state.illnessData1,'所保中症')
                        }>所保中症</span>
                      <span className={styles.illness} onClick={
                        this.showModalillness(this.state.illnessData2,'所保轻疾')
                        }>所保轻疾</span>
                    </div>
                  </div>
                }
                {
                  this.state.hxfHealth &&<div style={{paddingTop:'.11rem'}}>
                    <div className={styles.insurance}>华夏福两全保险</div>

                    <div className={styles.text}>

                      <div className={styles.subtitle}>
                        82种重疾保障至终身    
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>未满18周岁：给付2倍基本保额
                           {this.state.insAmnt*2%10000 ==0? this.state.insAmnt*2/10000:(this.state.insAmnt*2).toFixed(0)}   
                           {this.state.insAmnt*2%10000 ==0?'万元':'元'}
                        </span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>18周岁-59周岁：至少给付基本保额
                           {this.state.insAmnt%10000 ==0? this.state.insAmnt/10000:(this.state.insAmnt*1).toFixed(0)}   
                           {this.state.insAmnt%10000 ==0?'万元':'元'}
                        </span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>60周岁及以后：至少给付1.2倍基本保额
                           {this.state.insAmnt*1.2%10000 ==0? this.state.insAmnt*1.2/10000:(this.state.insAmnt*1.2).toFixed(0)}   
                           {this.state.insAmnt*1.2%10000 ==0?'万元':'元'}
                        </span>
                      </div>

                    </div>
                    <div className={styles.text}>

                      <div className={styles.subtitle}>
                        42种轻疾保障至终身
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>第一次给付
                           {this.state.insAmnt*0.25%10000 ==0? this.state.insAmnt*0.25/10000:(this.state.insAmnt*0.25).toFixed(0)}   
                           {this.state.insAmnt*0.25%10000 ==0?'万元':'元'}
                        </span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>第二次给付
                           {this.state.insAmnt*0.3%10000 ==0? this.state.insAmnt*0.3/10000:(this.state.insAmnt*0.3).toFixed(0)}   
                           {this.state.insAmnt*0.3%10000 ==0?'万元':'元'}
                        </span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>第三次给付
                           {this.state.insAmnt*0.35%10000 ==0? this.state.insAmnt*0.35/10000:(this.state.insAmnt*0.35).toFixed(0)}   
                           {this.state.insAmnt*0.35%10000 ==0?'万元':'元'}
                        </span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>每种轻症仅给付一次，给付后该轻症责任终止
                        </span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>轻症给付累计以三次为限，超过后轻症责任终止
                        </span>
                      </div>

                    </div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        疾病终末期、身故和全残保障至终身
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>18周岁前给付2倍已交保费</span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>18周岁后至少给付
                            {this.state.insAmnt%10000 ==0? this.state.insAmnt/10000 : (this.state.insAmnt*1).toFixed(0)}   
                            {this.state.insAmnt%10000 ==0?'万元':'元'}
                        </span>
                      </div>
                    </div>
                    <div className={styles.disease} style={{textAlign:'center'}}>
                      <span className={styles.illness_hxf} onClick={
                        this.showModalillness(this.state.hxfSeriousDisease,'所保重疾')
                        }>所保重疾</span>
                      <span className={styles.illness_hxf} onClick={
                        this.showModalillness(this.state.hxfGeneralDisease,'所保轻疾')
                        }>所保轻疾</span>
                    </div>
                  </div>
                }
                {
                  this.state.cqsHealth &&<div style={{paddingTop:'.11rem'}}>
                    <div className={styles.insurance}>{this.state.riskName}</div>

                    <div className={styles.text}>

                      <div className={styles.subtitle}>
                        61种重疾保障
                        <span className ={styles.monery}> 
                          {this.state.insPrem*this.state.payTime %10000 ==0? this.state.insPrem*this.state.payTime/10000:(this.state.insPrem*this.state.payTime).toFixed(0)}   
                          {this.state.insPrem*this.state.payTime%10000 ==0?'万元':'元'}
                        </span>  
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>行业领先，全面呵护更心安
                        </span>
                      </div>
                    </div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        15种轻症保障
                        <span className ={styles.monery}> 
                          {this.state.insAmnt*0.2%10000 ==0? this.state.insAmnt*0.2/10000:(this.state.insAmnt*0.2).toFixed(0)}   
                          {this.state.insAmnt*0.2%10000 ==0?'万元':'元'}
                        </span>  
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>每种疾病给付一次，累计三次为限
                        </span>
                      </div>
                    </div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        疾病终末期保障
                        <span className ={styles.monery}> 
                          {this.state.insPrem*this.state.payTime %10000 ==0? this.state.insPrem*this.state.payTime/10000:(this.state.insPrem*this.state.payTime).toFixed(0)}   
                          {this.state.insPrem*this.state.payTime%10000 ==0?'万元':'元'}
                        </span>  
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>确诊给付，疾病末期，更添关爱</span>
                      </div>
                    </div>
                    <div className={styles.disease} style={{textAlign:'center'}}>
                      <span className={styles.illness_hxf} onClick={
                        this.showModalillness(this.state.cqsSeriousDisease,'所保重疾')
                        }>所保重疾</span>
                      <span className={styles.illness_hxf} onClick={
                        this.showModalillness(this.state.cqsGeneralDisease,'所保轻疾')
                        }>所保轻疾</span>
                    </div>
                  </div>
                }
              </div>
              }
              {show  &&<div className={styles.health}>
                <div className={styles.panel}>医疗保障</div>
                {
                  this.state.hxfHealthCase &&<div style={{padding:'.11rem 0'}}>

                    <div className={styles.insurance}> 华夏附加住院费用补偿医疗保险（2014）</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        住院报销额度
                        <span className ={styles.monery}>  
                          {this.state.hxfAmut%10000 ==0? this.state.hxfAmut/10000:this.state.hxfAmut}   
                          {this.state.hxfAmut%10000 ==0?'万元':'元'}</span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>有社保社保报销之后95%赔付，无社保80%赔付；补偿住院费用，专注治疗。</span>
                      </div>

                    </div>
                  </div>
                }
                {
                  this.state.ybtHealthCase && <div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}> 医保通（普惠版）</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        一般医疗保险金
                        <span className ={styles.monery}>200万元 </span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>免赔额1万元，若不出险，每2年降低1000元免赔额</span>
                        <span className={styles.detail}>包含住院、特殊门诊、门诊手术、住院前后门急诊医疗保险金</span>
                      </div>

                    </div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        100种重疾医疗
                        <span className ={styles.monery}>200万元</span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>零免赔，100%报销，有无医保均可享</span>
                        <span className={styles.detail}>包含住重疾住院、特殊门诊、门诊手术、住院前后门急诊医疗保险金</span>
                      </div>
                    </div>

                    <span className={styles.illness1} onClick={
                      this.showModalillness(this.state.illnessData3,'所保重疾')
                      }>所保重疾</span>
                  </div>
                }
              </div>
              }
              {
                showDieSafeguard && <div className={styles.health}>
                <div className={styles.panel}>身故保障</div>
                {
                  this.state.flmDieSafeguard &&<div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>{this.state.riskName}</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        不幸身故或全残给付已交保费与现价较大者
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>彰显生命价值，给家人留一份责任</span>
                      </div>

                    </div>
                  </div>
                }
                {
                  this.state.cctDieSafeguard &&<div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>{this.state.riskName}</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        18岁后给付
                        <span className ={styles.monery}> 
                          {this.state.insAmnt%10000 ==0? this.state.insAmnt/10000:this.state.insAmnt}   
                          {this.state.insAmnt%10000 ==0?'万元':'元'}
                        </span>
                        /已交保费/现价较大者
                      </div>
                      <div className={styles.subtitle}>
                        18岁前给付已交保费的2倍
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>等待期90日内返还已交保费，合同终止</span>
                      </div>

                    </div>
                  </div>
                }
                {
                  this.state.zhenaiDieSafeguard &&<div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>{this.state.riskName}</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        不幸身故或全残给付已交保费与现价较大者
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>彰显大爱，给家人留一份责任</span>
                      </div>

                    </div>
                  </div>
                }
                {
                  this.state.hxfDieSafeguard &&<div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>{this.state.riskName}</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        疾病终末期、身故和全残保障至终身
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>18周岁前给付2倍已交保费</span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>18周岁后至少给付保额
                          {this.state.insAmnt%10000 ==0? this.state.insAmnt/10000:(this.state.insAmnt*1).toFixed(0)}   
                          {this.state.insAmnt%10000 ==0?'万元':'元'}
                        </span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>给付后华夏福重大疾病保险计划合同终止</span>
                      </div>

                    </div>
                  </div>
                }
                {
                  this.state.cqsDieSafeguard &&<div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>{this.state.riskName}</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        终身身故/全残保障
                         <span className ={styles.monery}> 
                          {this.state.insPrem*this.state.payTime%10000 ==0? this.state.insPrem*this.state.payTime/10000:(this.state.insPrem*this.state.payTime).toFixed(0)}   
                          {this.state.insPrem*this.state.payTime%10000 ==0?'万元':'元'}
                        </span>  
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>高额身价保障，给家人留一份爱与责任</span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>等待期内因非意外患重疾/身故/全残，给付累计保费，合同终止
                        </span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>被保险人身故/全残时未满18岁，给付累计保费，合同终止</span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>重疾金、身故/全残金与疾病终末期金，仅给付一项</span>
                      </div>

                    </div>
                  </div>
                }
                {
                  this.state.hxhnjDieSafeguard &&<div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>{this.state.riskName}</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        身故/全残金给付所交保费与现金价值较大者
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                        </span>
                        <span className={styles.detail}>彰显生命尊严，确保资金安全</span>
                      </div>
                    </div>
                  </div>
                }
              </div>
              }
              {
                PremExempt && <div className={styles.health}>
                <div className={styles.panel}>保费豁免</div>
                {
                  this.state.flmPremExempt &&<div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>{this.state.riskName}</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        投保人意外身故或全残，免交后期保费，保障不断
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>人性化设计，尽显关爱，免除后顾之忧</span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>交费期内出险，免交后期保费，保单继续有效</span>
                      </div>
                    </div>
                  </div>
                }
                {
                  this.state.cctPremExempt &&<div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>{this.state.riskName}</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        被保人确诊重疾/中症/轻症，免交后期保费
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>人性化设计，保障不断，尽显关爱</span>
                      </div>

                    </div>
                  </div>
                }
                {
                  this.state.zhenaiPremExempt &&<div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>{this.state.riskName}</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        投保人意外身故或全残，免交后期保费，保障不断
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>人性化设计，让父母无后顾之忧</span>
                      </div>
                    </div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        投保人全残或身故，豁免后期保费，保单继续有效
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>交费期内出险，免交后期保费，保单继续有效</span>
                      </div>
                    </div>
                  </div>
                }
                {
                  this.state.hxfPremExempt &&<div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>投保人豁免</div>
                    <div className={styles.text}>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>被保人确诊轻症，豁免主与附加险后期保费，人性关怀更显体贴</span>
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>投保人确诊重症/轻症/身故/全残，免交后期保费，保单继续有效</span>
                      </div>
                    </div>
                    <div className={styles.disease} style={{textAlign:'center'}}>
                      <span className={styles.illness_hxf} onClick={
                        this.showModalillness(this.state.hxfhmSeriousDisease,'所保重疾')
                        }>所保重疾</span>
                      <span className={styles.illness_hxf} onClick={
                        this.showModalillness(this.state.hxfhmGeneralDisease,'所保轻疾')
                        }>所保轻疾</span>
                    </div>
                  </div>
                }
                {
                  this.state.cqsPremExempt &&<div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>{this.state.riskName}</div>
                    <div className={styles.text}>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>被保人罹患轻症，免交后期保费，养病可安心</span>
                      </div>
                    </div>
                  </div>
                }
                {
                  this.state.hxhnjPremExempt &&<div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>{this.state.riskName}</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        投保人意外身故或全残，免交后期保费，保障不断
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>人性化设计，让父母无后顾之忧</span>
                      </div>
                    </div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        投保人全残或身故，豁免后期保费，保单继续有效
                      </div>
                      <div className={styles.trivia} >
                        <span className={styles.dot}>
                           <img src={require('../../assets/image/dot.png')} alt=""/>
                         </span>
                        <span className={styles.detail}>人性化设计，贴心显关爱</span>
                      </div>
                    </div>
                  </div>
                }
              </div>
              }
              {
                this.state.ybtElseCase && <div className={styles.health}>
                <div className={styles.panel}>其他保障</div>
                {
                  <div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}> 医保通（普惠版）</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        被保险人可凭医院处方，并且通过第三方合作机构的审核后，可到指定药房免费获得部分靶向类药品（或预约送药上门服务）
                      </div>
                      <div className={styles.subtitle}>
                        医保通不能单独购买，可搭配常青树系列、华夏福与福临门等系列产品
                      </div>
                    </div>
                  </div>
                }
              </div>
              }
              <div className={styles.health} onClick={this.getProspectusaAditiona2}>
                <div className={styles.panel} >查看条款</div>
              </div>

              { 
                this.state.proposalInterest.length>0 &&<div className={styles.health}>
                <div className={styles.panel}>保单利益</div>
                <div className={styles.insurance} style={{padding:'.11rem 0 .11rem .11rem'}}> {this.state.riskName}</div>
                <div className={styles.text} >
                  <p className={styles.exempt}>保单利益如下:</p>
                  <div>
                    <img src={require('../../assets/image/getMoneyBox.png')} alt="" className={styles.getMoneyBox}/>
                    <p  className={styles.moment}>保单年度 <span >{this.state.year}</span> 年,被保人 <span >{this.state.age}</span> 岁时
                      <img src={require('../../assets/image/dropColor.png')} alt=""  onClick={this.showModal('modal1')}/>
                    </p>
                    <p style={{fontSize:'.17rem',textAlign:'center',marginTop:'.11rem',height:'.7rem'}}>现金价值：
                      <span style={{color:'#FF9D5C',fontWeight:'bold'}}>{this.state.cashValue}</span> 元
                    </p>
                    <span className={styles.litter} onClick={() => this.changeValue(this.state.year-1,)}>
                      <img src={require("../../assets/image/little.png")} alt=""/>
                    </span>
                    <span className={styles.plus} onClick={() => this.changeValue(this.state.year+1,)}>
                      <img src={require("../../assets/image/plus.png")} alt=""/>
                    </span>
                  </div>

                  <div className="am-slider-example" style={{marginTop:'.rem' }}>
                    <WingBlank size="lg">

                      <Slider
                        style={{ marginLeft: 30, marginRight: 30,height:'.1rem',}}
                        defaultValue={0}
                        min={0}
                        max={this.state.tableList.length-1}
                        value={this.state.year}
                        onChange={this.log('change')
                        }
                        trackStyle={{
                          backgroundColor: '#FF9D5C',
                          height: '7px',
                          borderRadius: '7px',
                        }}
                        railStyle={{
                          backgroundColor: '#ddd',
                          height: '7px',
                          borderRadius: '7px',
                        }}
                        handleStyle={{
                          borderColor: '#FF9D5C',
                          height: '.15rem',
                          width: '.15rem',
                          marginLeft: '-7px',
                          marginTop: '-.04rem',
                          // backgroundColor: 'FF9D5C',
                          background:'#FF9D5C'
                        }}
                      />
                      <p className="sub-title" style={{color:'#999',fontSize:'.14rem',textAlign:'center',marginTop:'.2rem'}}>
                      拖动按钮查看不同年龄段保单利益</p>
                    </WingBlank>
                  </div>

                  <div className={styles.BenefitBox}>
                    <span className={styles.Benefit} onClick={this.showModal('modal2')}>查看利益演示表</span>
                  </div>

                </div>
              </div>
              }
              {
                this.state.riskCode != '411204' && (
                    <div className={styles.health}>
                      <div className={styles.panel}>风险提示</div>
                      <div className={styles.text} style={{padding:'0 .1rem .1rem'}}>
                        <div className={styles.trivia} >
                          <span className={styles.dot}>
                             <img src={require('../../assets/image/dot.png')} alt=""/>
                           </span>
                          <span className={styles.detail}>投保人在保单犹豫期后解除合同会遭受一定损失，具体保单利益请以保单合同为准。</span>
                        </div>
                        <div className={styles.trivia} >
                          <span className={styles.dot}>
                             <img src={require('../../assets/image/dot.png')} alt=""/>
                           </span>
                          <span className={styles.detail}>温馨提示：以上演示说明为本平台对上述产品的理解，便于保险从业人员学习、交流，演示数据仅供参考，请以实际为准。</span>
                        </div>
                      </div>
                    </div>
                  )
              }
              {
                this.state.riskCode == '411204' && (
                    <div className={styles.health}>
                      <div className={styles.panel}>风险提示</div>
                      <div className={styles.text} style={{padding:'0 .1rem .1rem'}}>
                        <div className={styles.trivia} >
                          <span className={styles.dot}>
                             <img src={require('../../assets/image/dot.png')} alt=""/>
                           </span>
                          <span className={styles.detail}>身故、全残、疾病终末期以及重大疾病保险金仅给付其中一项</span>
                        </div>
                        <div className={styles.trivia} >
                          <span className={styles.dot}>
                             <img src={require('../../assets/image/dot.png')} alt=""/>
                           </span>
                          <span className={styles.detail}>本材料仅供参考，具体保险责任、责任免除事项以我司相关保险产品条款及生效保险合同为准</span>
                        </div>
                        <div className={styles.trivia} >
                          <span className={styles.dot}>
                             <img src={require('../../assets/image/dot.png')} alt=""/>
                           </span>
                          <span className={styles.detail}>华夏福重大疾病保险计划由华夏福两全保险及附加华夏福重大疾病保险组成</span>
                        </div>
                        <div className={styles.trivia} >
                          <span className={styles.dot}>
                             <img src={require('../../assets/image/dot.png')} alt=""/>
                           </span>
                          <span className={styles.detail}>以上所述“已交保费”指华夏福两全保险及附加华夏福重大疾病保险合同的已交保险费之和</span>
                        </div>
                      </div>
                    </div>
                  )
              }
            </div>
          </Iscroll>

            <WingBlank>

              <Modal
                popup
                visible={this.state.modal1}
                onClose={this.onClose('modal1')}
                animationType="slide-up"
              >
                <List renderHeader={() => <div style={{fontSize:'.18rem'}}>保单利益 <span style={{float:'right',color:'green'}} onClick={this.onChangeYear('modal1')}>
                      完成</span></div>} className="popup-list">
                </List>
                <div style={{height:'60vh',overflowY:'scroll'}}>
                  <List>
                    {data.map(i => (
                    <RadioItem key={i.value} checked={this.state.insuranceValue == i.value} onChange={() => this.onChange(i.value,i.cashValue,i.age)}>
                    {i.label}
                    </RadioItem>
                    ))}
                  </List>
                </div>
              </Modal>
              
              <Modal
                popup
                visible={this.state.modal2}
                onClose={this.onClose('modal2')}
                animationType="slide-up"
                className={styles.modalCss1}
              >
                <List renderHeader={() => <div style={{fontSize:'.18rem'}}>利益演示表<span style={{float:'right',color:'green'}} onClick={this.onClose('modal2')}>
                      <img src={require('../../assets/image/close.png')} alt="" style={{width:'.2rem',height:'.2rem'}}/>
                      </span></div>} className="popup-list">
                </List>
               <div>
                 <Table listTitle={this.state.tableTitle} listTable={this.state.tableList} scroll={{x:0, y:400}}></Table>
               </div>
              </Modal>

              <Modal
                popup
                visible={this.state.modal3}
                onClose={()=>this.setState({'modal3':false})}
                animationType="slide-up"
              >
                <List renderHeader={() =>
                  <div style={{fontSize:'.18rem'}}>{this.state.illnessName} <span style={{float:'right',color:'green'}} onClick={this.onClose('modal3')}>
                      <img src={require('../../assets/image/close.png')} alt="" style={{width:'.2rem',height:'.2rem'}}/>
                      </span></div>} className="popup-list">
                </List>
                <div style={{height:'60vh',overflowY:'scroll',}}>
                  <List>
                    {this.state.illnessData.map(i => (
                      <div key={i.value}  className={styles.list}>
                        {i.label}
                      </div>
                    ))}

                  </List>
                </div>
              </Modal>

              <Modal
                popup
                visible={this.state.modal4}
                onClose={this.onClose('modal4')}
                animationType="slide-up"
                className={styles.modalCss1}
              >
                <List renderHeader={() => <div style={{fontSize:'.18rem'}}>条款列表<span style={{float:'right',}} onClick={this.closeInsurance}>
                      <img src={require('../../assets/image/close.png')} alt="" style={{width:'.2rem',height:'.2rem'}} onClick={this.onClose('modal4')}/>
                      </span></div>} className="popup-list">
                </List>
                <List>
                  <List.Item >
                    <div style={{color:'#999999',marginLeft:'.11rem'}}>{this.state.mainRiskNmae}</div>
                  </List.Item>
                  {this.state.termList.map((item,index)=>{
                    return(
                      <List.Item style={{left:'.1rem'}} key={index}>{item.configName}
                        <div style={{float:'right',position:'relative',right:'.1rem'}} >
                          <img src={item.cut != true?require('../../assets/image/open.png'):require('../../assets/image/off.png')} alt="" style={{width:'.14rem',height:'.08rem'}} 
                          onClick={()=>{
                            console.log(item);
                            let that = this;
                            let termList = this.state.termList;
                            termList[index].cut = !termList[index].cut
                            console.log(termList);
                            this.setState({
                              termList:termList,
                              // riskCode:item.configCode,
                            })
                            /* 条款列表详情接口 */
                            this.props.dispatch({
                              type:'planEditor/PlanClause',
                              payload:{
                                "riskCode":item.configCode,
                                "pageNo":1
                              },
                              callback(data){
                                console.log();

                                console.log(termList);
                                that.setState({
                                  clauseUrlList:data.data[0].clauseUrlList
                                })

                              }
                            })
                          }}/>
                        </div>
                        {
                          item.cut && <div>
                            <span style={{color:'#888',fontSize:'.14rem'}}>条款预览</span>
                            <span className={styles.deta} onClick={()=>{
                              if(item.clauseUrl){
                                window.location.href = item.clauseUrl
                              }
                            }}> 查看详情</span>
                            {this.state.clauseUrlList.map((item,index)=>{
                              return(
                                <div key={index}>
                                  <img src={item.configInfo} alt="" style={{height:'100%',width:'100%'}}/>
                                </div>
                              )
                            })
                            }
                          </div>
                        }
                      </List.Item>
                    )
                  })
                }
                </List>
              </Modal>
            </WingBlank>
          </div>
        }
      </div>

    )
  }
}

PlanResult.propsTypes = {}

export default connect()(PlanResult)