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 React from "react";
import share from "../../utils/share";

// import '../../utils/pdf'
// import '../../utils/pdf.worker'
  moment.locale('zh-cn');

const RadioItem = Radio.RadioItem;



const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let moneyKeyboardWrapProps;
if (isIPhone) {
  moneyKeyboardWrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}


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={
      // list:[
      //   {
      //     title:'健康保障',
      //     obj:[
      //       {
      //         title:'82种重疾保障，守护您的健康',
      //         obj:[
      //           {title:'18岁至60岁付10万元/已交保费/现价最大者'},
      //           {title:'18岁至60岁付10万元/已交保费/现价最大者'}
      //         ]
      //       },
      //       {
      //         title:'42种轻症保障，更添一种关爱',
      //         obj:[
      //           {title:'18岁至60岁付10万元/已交保费/现价最大者'},
      //           {title:'18岁至60岁付10万元/已交保费/现价最大者'},
      //           {title:'18岁至60岁付10万元/已交保费/现价最大者'},
      //           {title:'18岁至60岁付10万元/已交保费/现价最大者'},
      //           {title:'18岁至60岁付10万元/已交保费/现价最大者'},
      //           {title:'18岁至60岁付10万元/已交保费/现价最大者'}
      //         ]
      //       }
      //     ]
      //
      //   },
      //   {
      //     title:'固定领取',
      //     obj:[
      //       {
      //         title:'88岁返还祝寿金10000元',
      //         obj:[{title:'给付完毕合同继续有效，提供高品质晚年生活'}
      //         ]
      //       }
      //     ]
      //   },
      //   {
      //     title:'保费豁免',
      //     obj:[{title:'被保人确诊轻症，豁免主、附加险后期保费'}]
      //   },
      //   {
      //     title:'身故保障',
      //     obj:[
      //       {
      //         title:'8岁后给付 10000 万元/已交保费/现金价值最大',
      //         obj:[
      //           {
      //             title:'等待期90日内因非意外原因导致重疾/全残/身故,返还已缴纳保费,主险和附加险合同终止'
      //           },
      //           {
      //             title:'重疾保障金、疾病终末期保障金、身故/全残保险金，只赔付其中一项'
      //           }
      //         ]
      //       },
      //     ]
      //
      //   },
      //   {
      //     title:'保单利益',
      //
      //   },
      //   {
      //     title:'查看条款',
      //   },
      //   {
      //     title:'风险提示',
      //     obj:[{title:'被保人确诊轻症，豁免主、附加险后期保费',obj:[
      //       {
      //         title:'*等待期90日内因非意外原因导致重疾/全残/身故,返还已缴纳保费,主险和附加险合同终止'
      //       },
      //       {
      //         title:'*重疾保障金、疾病终末期保障金、身故/全残保险金，只赔付其中一项'
      //       }
      //     ]},
      //     ]
      //   },
      // ],

      termList:[],
      clauseUrlList:[],
      modal:[
        {
          img:require('../../assets/image/getMoney.png'),
          text:'固定领取'
        },
        {
          img:require('../../assets/image/health.png'),
          text:'健康保障'
        },
        {
          img:require('../../assets/image/medical.png'),
          text:'医疗保障'
        },
        {
          img:require('../../assets/image/safeguard.png'),
          text:'身故保障'
        },
        {
          img:require('../../assets/image/exempt.png'),
          text:'保费豁免'
        },
        {
          img:require('../../assets/image/else.png'),
          text:'其他保障'
        },
      ],

      year:0,
      age:0,
      money:15236,

      modal1: false,
      modal2: false,
      modal3: false,
      modal4: false,
      modal5: 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, // 常春藤-健康保障
      flmGetMoney:false, //福临门-固定领取
      cctPremExempt:false,  //常春藤保费豁免
      flmPremExempt:false,   // 福临门保费豁免
      cctDieSafeguard:false ,  // 福临门身故保障
      flmDieSafeguard:false ,  // 福临门身故保障
      ybtHealthCase:false ,  // 医保通医疗保障
      hxfHealthCase:false ,  // 华夏福医疗保障
      ybtElseCase:false ,  // 医保通其他保障
      cashValue:'0',
      payTime:0,  //几年交

      illnessData:[],
      illnessData3:[
        { value: 0, label: '1、恶性肿瘤' },
        { value: 1, label: '2、急性心肌梗塞' },
        { value: 2, label: '3、脑中风后遗症' },
        { value: 3, label: '4、重大器官移植术或造血干细胞移植术' },
        { value: 4, label: '5、冠状动脉搭桥术' },
        { value: 5, label: '6、终末期肾病' },
        { value: 6, label: '7、多个肢体缺失' },
        { value: 7, label: '8、急性或亚急性重症肝炎' },
        { value: 8, label: '9、良性脑肿瘤' },
        { value: 9, label: '10、慢性肝功能衰竭失代偿期' },
        { value: 10, label: '11、脑炎后遗症或脑膜炎后遗症' },
        { value: 11, label: '12、深度昏迷' },
        { value: 12, label: '13、双耳失聪－三周岁始理赔' },
        { value: 13, label: '14、双目失明－三周岁始理赔' },
        { value: 14, label: '15、瘫痪' },
        { value: 15, label: '16、心脏瓣膜手术' },
        { value: 16, label: '17、严重阿尔茨海默病' },
        { value: 17, label: '18、严重脑损伤' },
        { value: 18, label: '19、严重帕金森病' },
        { value: 19, label: '20、严重III度烧伤' },
        { value: 20, label: '21、严重原发性肺动脉高压' },
        { value: 21, label: '22、严重运动神经元病' },
        { value: 22, label: '23、语言能力丧失－三岁始理赔' },
        { value: 23, label: '24、重型再生障碍性贫血' },
        { value: 24, label: '25、主动脉手术' },
        { value: 25, label: '26、慢性呼吸功能衰竭' },
        { value: 26, label: '27、严重多发性硬化' },
        { value: 27, label: '28、脊髓灰质炎' },
        { value: 28, label: '29、全身性重症肌无力' },
        { value: 29, label: '30、严重冠心病' },
        { value: 30, label: '31、严重心肌病' },
        { value: 31, label: '32、系统性红斑狼疮III型或以上狼疮性肾炎' },
        { value: 32, label: '33、因职业关系导致的人类免疫缺陷病毒HIV感染' },
        { value: 33, label: '34、经输血导致的人类免疫缺陷病毒HIV感染' },
        { value: 34, label: '35、严重克隆病' },
        { value: 35, label: '36、严重溃疡性结肠炎' },
        { value: 36, label: '37、1型糖尿病' },
        { value: 37, label: '38、肺源性心脏病' },
        { value: 38, label: '39、植物人状态' },
        { value: 39, label: '40、严重类风湿性关节炎' },
        { value: 40, label: '41、非阿尔茨海默病所致严重痴呆' },
        { value: 41, label: '42、多处臂丛神经根性撕脱' },
        { value: 42, label: '43、严重川崎病' },
        { value: 43, label: '44、严重的系统性硬皮病' },
        { value: 44, label: '45、丝虫病所致象皮肿' },
        { value: 45, label: '46、胰腺移植' },
        { value: 46, label: '47、急性坏死胰腺炎开腹手术' },
        { value: 47, label: '48、慢性复发性胰腺炎' },
        { value: 48, label: '49、疯牛病' },
        { value: 49, label: '50、肾髓质囊性病' },
        { value: 50, label: '51、肾髓质囊性病' },
        { value: 51, label: '52、严重的原发性硬化性胆管炎' },
        { value: 52, label: '53、特发性慢性肾上腺皮质功能减退' },
        { value: 53, label: '54、溶血性链球菌引起的坏疽' },
        { value: 54, label: '55、颅脑手术' },
        { value: 55, label: '56、严重肌营养不良症' },
        { value: 56, label: '57、严重心肌炎' },
        { value: 57, label: '58、肝豆状核变性' },
        { value: 58, label: '59、侵蚀性葡萄胎' },
        { value: 59, label: '60、破裂脑动脉瘤夹闭手术' },
        { value: 60, label: '61、需手术切除的嗜铬细胞瘤' },
        { value: 61, label: '62、进行性核上性麻痹' },
        { value: 62, label: '63、严重幼年型类风湿性关节炎' },
        { value: 63, label: '64、严重肠道疾病并发症' },
        { value: 64, label: '65、严重瑞氏综合症' },
        { value: 65, label: '66、严重自身免疫性肝炎' },
        { value: 66, label: '67、严重的III度房室传导阻滞' },
        { value: 67, label: '68、细菌性脑脊髓膜炎' },
        { value: 68, label: '69、严重感染性心内膜炎' },
        { value: 69, label: '70、严重的骨髓增生异常综合征' },
        { value: 70, label: '71、严重癫痫' },
        { value: 71, label: '72、自体造血干细胞移植' },
        { value: 72, label: '73、肺淋巴管肌瘤病' },
        { value: 73, label: '74、肺泡蛋白质沉积症' },
        { value: 74, label: '75、小肠移植' },
        { value: 75, label: '76、疾病或外伤所致智力障碍' },
        { value: 76, label: '77、骨生长不全症' },
        { value: 77, label: '78、严重面部烧伤' },
        { value: 78, label: '79、亚急性硬化性全脑炎' },
        { value: 79, label: '80、脊髓小脑变性症' },
        { value: 80, label: '81、进行性多灶性白质脑病' },
        { value: 81, label: '82、弥漫性血管内凝血' },
        { value: 82, label: '83、失去一肢及一眼' },
        { value: 83, label: '84、独立能力丧失' },
        { value: 84, label: '85、器官移植导致的HIV感染' },
        { value: 85, label: '86、婴儿进行性脊肌萎缩症' },
        { value: 86, label: '87、进行性风疹全脑炎' },
        { value: 87, label: '88、埃博拉病毒感染' },
        { value: 88, label: '89、主动脉夹层血肿' },
        { value: 89, label: '90、重症急性坏死性筋膜炎' },
        { value: 90, label: '91、骨髓纤维化' },
        { value: 91, label: '92、严重慢性缩窄性心包炎' },
        { value: 92, label: '93、主动脉夹层瘤' },
        { value: 93, label: '94、肌萎缩脊髓侧索硬化后遗症' },
        { value: 94, label: '95、严重结核性脑膜炎' },
        { value: 95, label: '96、重症手足口病' },
        { value: 96, label: '97、严重甲型及乙型血友病' },
        { value: 97, label: '98、艾森门格综合征' },
        { value: 98, label: '99、湿性年龄相关性黄斑变性' },
        { value: 99, label: '100、脊柱裂' },
      ],
      illnessData1:[
        { value: 0, label: '1、中度帕金森氏病' },
        { value: 1, label: '2、中度严重溃疡性结肠炎' },
        { value: 2, label: '3、中度瘫痪' },
        { value: 3, label: '4、中度重症肌无力' },
        { value: 4, label: '5、中度进行性核上神经麻痹症' },
        { value: 5, label: '6、中度严重脊髓灰质炎' },
        { value: 6, label: '7、中度严重克雅氏病' },
        { value: 7, label: '8、视力严重受损-3周岁起理赔' },
        { value: 8, label: '9、慢性肾功能损害–肾功能衰竭期' },
        { value: 9, label: '10、重症头部外伤' },
        { value: 10, label: '11、较小面积Ⅲ度烧伤（10%）' },
        { value: 11, label: '12、慢性肝功能衰竭' },
        { value: 12, label: '13、植入腔静脉滤器' },
        { value: 13, label: '14、系统性红斑狼疮' },
        { value: 14, label: '15、早期运动神经性疾病' },
        { value: 15, label: '16、中度类风湿性关节炎' },
        { value: 16, label: '17、中度脑风后遗症' },
        { value: 17, label: '18、中度强直性脊柱炎' },
        { value: 18, label: '19、中度脑炎或中度脑膜炎后遗症' },
        { value: 19, label: '20、中度克隆病' },
      ],
      illnessData2:[
        { value: 0, label: '1、非危及生命的（极早期的）恶性病变' },
        { value: 1, label: '2、冠状动脉介入手术' },
        { value: 2, label: '3、轻微脑中风' },
        { value: 3, label: '4、心脏瓣膜介入手术' },
        { value: 4, label: '5、脑垂体瘤、脑囊肿、脑动脉瘤及脑血管瘤' },
        { value: 5, label: '6、主动脉内介入手术' },
        { value: 6, label: '7、单个肢体缺失' },
        { value: 7, label: '8、单侧肺脏切除' },
        { value: 8, label: '9、肝脏手术' },
        { value: 9, label: '10、人工耳蜗植入术' },
        { value: 10, label: '11、胆道重建手术' },
        { value: 11, label: '12、双侧卵巢或睾丸切除术' },
        { value: 12, label: '13、单侧肾脏切除' },
        { value: 13, label: '14、糖尿病导致脚趾截除' },
        { value: 14, label: '15、单耳失聪' },
        { value: 15, label: '16、微创颅脑手术' },
        { value: 16, label: '17、Ⅲ度房室传导阻滞-已放置心脏起搏器' },
        { value: 17, label: '18、于颈动脉进行血管成形术或内膜切除术' },
        { value: 18, label: '19、心包膜切除术' },
        { value: 19, label: '20、脑炎或脑膜炎' },
        { value: 20, label: '21、硬脑膜下血肿手术' },
        { value: 21, label: '22、严重阻塞性睡眠窒息症' },
        { value: 22, label: '23、因意外毁容而施行的面部整形手术' },
        { value: 23, label: '24、角膜移植' },
        { value: 24, label: '25、可逆性再生障碍性贫血' },
        { value: 25, label: '26、特定周围动脉疾病的血管介入治疗' },
        { value: 26, label: '27、脑室腹腔分流术' },
        { value: 27, label: '28、轻度面部烧伤' },
        { value: 28, label: '29、肾上腺切除术' },
        { value: 29, label: '30、早期象皮病' },
        { value: 30, label: '31、出血性登革热' },
        { value: 31, label: '32、面部重建手术' },
        { value: 32, label: '33、不典型的急性心肌梗塞' },
        { value: 33, label: '34、严重的骨质疏松' },
        { value: 34, label: '35、单眼失明' },
      ],
      illnessName:'所保重疾',
      seriNo:'',
      riskName:'',
      riskCode:'',
      cover:true,
      totalPrem:'',
    }
  }

  componentWillMount(){
    // alert( '屏幕的高度'+ document.body.clientHeight ,'正文的高的'+ document.body.scrollHeight )
    let url = window.location.href;
    const matchs = decodeURI(url).match(/seriNo=(.*)&riskName=(.*)&riskCode=(.*)&thumbnail=(.*)/i)
    if(matchs){
      let seriNo = matchs[1];
      let riskName = matchs[2];
      let riskCode = matchs[3];
      let thumbnail = matchs[4];
      share({
        decodeUrl: window.location.href.split('#')[0],
        title: riskName,
        desc: '您的专属保险计划书，请您查收！',
        shareUrl: window.location.href,
        thumbnail: thumbnail
      });

      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"),
      })
    }

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

    this.getMessage()
  }

componentWillUnmount(){
  document.title = ''
}


  /*  获取条款列表 */
  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: 'home/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: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 ,  // 华夏福医疗保障
                hxfAmut:microPlanFJInfo[i].amnt
              })

            }
          }


          that.setState({
            fjTable:fjTable,
            fjRiskCodeList:fjRiskCodeList,
            age:proposalInterest.age,
          })


        }


        if(microPlanInfo.riskCode == '511403'){
          that.setState({
            flmGetMoney:true, //福临门-固定领取
            flmPremExempt:true,   // 福临门保费豁免
            flmDieSafeguard:true ,  // 福临门身故保障
            insAmnt:microPlanInfo.amnt,
            insPrem:microPlanInfo.prem,
            age:proposalInterest[0].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,
          })

        }
        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,

        })
      }
    })
  }
  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],
      })
    }



  }

  showModal = key => (e) => {
    e.preventDefault(); // 修复 Android 上点击穿透
    this.setState({
      [key]: true,
    });
  }

  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,

     });
  };
  render() {

    let recipientsSex =localStorage.getItem("recipientsSex")
    let recipientsName =localStorage.getItem("recipientsName")
    let recipients =localStorage.getItem("recipients")
    const data = this.state.allTime;


    console.log(this.state.fjTable);


    let show = this.state.ybtHealthCase ||this.state.hxfHealthCase
    let showDieSafeguard = this.state.flmDieSafeguard ||this.state.cctDieSafeguard
    let PremExempt =  this.state.flmPremExempt || this.state.cctPremExempt
    let {ybtHealthCase,hxfHealthCase}  = this.state;
    return (
      <div className={styles.all}>
        { this.state.cover &&
          <div className={styles.welcome}  onClick={this.go}> <div/>
            { recipients === 'true' &&  <p className={styles.p}>{recipientsName.substring(0,1)}{recipientsSex ==='true'?'先生':'女士'}<br/>亲启</p> }
            { recipients !== 'true' && <p className={styles.p}>敬呈<br/>亲启</p> }
          </div>
        }

        {
          !this.state.cover &&
          <div className={styles.box}>
            <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=""/>}

              {/*<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 onClick={()=>{
                  }}>保终身</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>首年保费：{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>首年保费：{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}>
                  {/*{this.state.modal.map((item,index)=>{
                    return(<div key={index}>
                      {this.state.flmPremExempt || }
                      <div>
                      <img src={item.img} alt=""/>
                      <div>{item.text}</div>
                    </div>
                    </div>)
                  })}*/}

                  {this.state.flmGetMoney &&
                  <div>
                    <img src={require("../../assets/image/getMoney.png")} alt=""/>
                    <div>固定领取</div>
                  </div>}
                  {this.state.cctHealth &&
                  <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>
              {this.state.flmGetMoney && <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 className={styles.trivia} >
                       <span className={styles.dot}>
                       <img src={require('../../assets/image/dot.png')} alt=""/>
                       </span>
                       <span className={styles.detail}>自第5个保单周年日起，若被保险人在任一保单周年日零时仍生存，我们将于该保单周年日按本合同基本保险金额的30%给付一次年金。</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 className={styles.trivia} >
                       <span className={styles.dot}>
                       <img src={require('../../assets/image/dot.png')} alt=""/>
                       </span>
                       <span className={styles.detail}>自被保险人年满60周岁后的首个保单周年日起至被保险人年满74周岁后的首个保单周年日，若被保险人在任一保单周年日零时仍生存，我们将于该保单周年日按总保险费的6%给付一次关爱金；

                       </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>
                        {/*{this.state.payTime == 0?this.state.insPrem*0.1:this.state.payTime*this.state.insPrem*0.1}元*/}
                      </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.cctHealth &&<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%保额
首次确诊重疾给付    {this.state.insAmnt%10000 ==0? this.state.insAmnt/10000:this.state.insAmnt}   {this.state.insAmnt%10000 ==0?'万元':'元'}/已交保费/现价较大者
第二、三、四、五、六次各自给付 {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).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.setState({
                    illnessData:this.state.illnessData3,
                    modal3:true,
                    illnessName:'所保重疾'
                  })
                }}>所保重疾</span>
                      <span className={styles.illness} onClick={
                        ()=>{
                          this.setState({
                            illnessData:this.state.illnessData1,
                            modal3:true,
                            illnessName:'所保中症'
                          })
                        }}>所保中症</span>
                      <span className={styles.illness} onClick={
                        ()=>{
                          this.setState({
                            illnessData:this.state.illnessData2,
                            modal3:true,
                            illnessName:'所保轻疾'
                          })
                        }}>所保轻疾</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.setState({
                          illnessData:this.state.illnessData3,
                          modal3:true,
                          illnessName:'所保重疾'
                        })
                      }}>所保重疾</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}>福临门（智慧版）</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}>常春藤（多倍版）</div>
                    <div className={styles.text}>
                      <div className={styles.subtitle}>
                        18岁后给付
                        {/*{this.state.insAmnt/10000}*/}
                        <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>
                }
              </div>}
              {PremExempt && <div className={styles.health}>
                <div className={styles.panel}>保费豁免</div>
                {
                  this.state.flmPremExempt &&<div style={{padding:'.11rem 0'}}>
                    <div className={styles.insurance}>福临门（智慧版）</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}>常春藤（多倍版）</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>
                {
                  this.state.ybtElseCase &&<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'}}> 福临门（智慧版）</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>}
              <div className={styles.health}>
                <div className={styles.panel}>风险保障</div>
                <div className={styles.text} style={{padding:'0 .1rem .1rem'}}>
                  <div className={styles.subtitle}>
                    被保人确诊轻症，豁免主、附加险后期保费
                  </div>
                  <div>
                    <span className={styles.detail}>*等待期90日内因非意外原因导致重疾/全残/身故,返还已缴纳保费,主险和附加险合同终止</span>
                  </div>
                  <div>
                    <span className={styles.detail}>*重疾保障金、疾病终末期保障金、身故/全残保险金，只赔付其中一项</span>
                  </div>
                </div>
              </div>
            </div>

            <WingBlank>
              <WhiteSpace />


              <Modal
                popup
                visible={this.state.modal1}
                onClose={this.onClose('modal1')}
                animationType="slide-up"
                // afterClose={() => { alert('afterClose'); }}

                // style={{
                //   marginLeft: '-2.07rem',
                //   left: '50%',
                //   width: '4.14rem',
                //   maxWidth: '680px',
                //   maxHeight:'6rem',
                //   // overflowY:'scroll'
                // }}
              >
                <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"
                // afterClose={() => { alert('afterClose'); }}

                style={{position: 'fixed',
                  marginLeft: '-2.07rem',
                  left: '50%',
                  width: '4.14rem',
                  maxWidth: '680px',
                  maxHeight:'6rem',
                  overflowY:'hidden'
                }}
              >
                <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"
                // afterClose={() => { alert('afterClose'); }}

                //  style={{position: 'fixed',
                // //   marginLeft: '-2.07rem',
                // //   left: '50%',
                // //   width: '4.14rem',
                // //   maxWidth: '680px',
                // //   maxHeight:'60vh',
                // //   // overflowY:'scroll'
                //  }}
              >
                <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"
                // afterClose={() => { alert('afterClose'); }}

                style={{position: 'fixed',
                  marginLeft: '-2.07rem',
                  left: '50%',
                  width: '4.14rem',
                  maxWidth: '680px',
                  maxHeight:'6rem',
                  overflowY:'scroll'
                }}
              >
                <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={()=>{
                              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>


              <Modal
                popup
                visible={this.state.modal5}
                onClose={this.onClose('modal5')}
                animationType="slide-up"
                // afterClose={() => { alert('afterClose'); }}

                style={{position: 'fixed',
                  marginLeft: '-2.07rem',
                  left: '50%',
                  width: '4.14rem',
                  maxWidth: '680px',
                  height:'100%',
                  // maxHeight:'6rem',
                  overflowY:'scroll'
                }}
              >
                {/* <List renderHeader={() =>  <div>

                 </div>} >

                 </List>*/}
                {/*<List.Item style={{width:'100%',height:'100%'}}>*/}
                <div style={{height:'100%'}}>
                  <iframe  width="100%" height="100%" scrolling="no" src={this.state.pdf} >
                  </iframe>
                </div>
                {/*<div style={{width:'100%',height:'100%'}}>55555555555</div>*/}

                {/*</List.Item>*/}

              </Modal>

            </WingBlank>
          </div>
        }
      </div>

    )
  }
}

PlanResult.propsTypes = {}

export default connect()(PlanResult)