import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {Layout } from 'amos-framework';
import {Input,Table, Button } from 'amos-antd';
import './../../../../styles/view/biz/detail/detail.scss';
import JsonData from './data';
import RiskAssessment from './riskDetail';

const { Header, Content } = Layout;
const riskData = JsonData.riskData;
const dangerWeekCensusData=JsonData.dangerWeekCensusData;
const sevenDaysRiskCensusData=JsonData.sevenDaysRiskCensusData;
const pageSize=13;

class CentralInfoView extends Component {
  constructor(props) {
    super(props);
    this.updateParent= this.updateParent.bind(this);
    this.state = {
      title: '',  //modal标题
      divVisable: 'none',
      riskVisable: 'none',
      buttonVisable:'block',
      type:'', //当前表格类型
      detailTitle:''
    };
  }

  /**
   * 安全指数详情
   */
  kpsi = () => {
    this.setState({
      title: "安全指数",
      divVisable: 'block',
      buttonVisable:'none',
      type: 'kpsi'
    })
  }

  /**
   * 安全风险失效详情
   */
  safetyRiskFailure = () => {
    this.setState({
      title: "安全风险失效",
      divVisable: 'block',
      buttonVisable:'none',
      type: 'safetyRiskFailure'
    })
  }

  /**
   * 告警隐患周增幅统计详情
   */
  dangerWeekCensus = () => {
    this.setState({
      title: "告警隐患周增幅统计",
      divVisable: 'block',
      buttonVisable:'none',
      type: 'dangerWeekCensus'
    })
  }

  /**
   * 七日风险统计详情
   */
  sevenDaysRiskCensus = () => {
    this.setState({
      title: "七日风险统计",
      divVisable: 'block',
      buttonVisable:'none',
      type: 'sevenDaysRiskCensus'
    })
  }

  /**
   * 弹窗关闭  
   */
  closeDiv = () => {
    this.setState({
      divVisable: 'none',
      buttonVisable:'block',
      title:'',
      type:''
    })
  }

  /**
   * 根据类型切换列
   */
  columns= (type)=>{
    if(type==="kpsi"){
      return (
        [
          {
            title: '换流站',
            dataIndex: 'ka',
            width: 100,
            render : (text, record) => {
              return(<div style={{color:'yellow'}}>{text}</div>)
            }
          },
          {
            title: ' 极1高端阀厅',
            dataIndex: 'kb',
            width: 100
          },     
          {
            title: '极1低端阀厅',
            dataIndex: 'kc',

            width: 100
          },
          {
            title: '极2高端阀厅',
            dataIndex: 'kd',
            width: 100
          },
          {
            title: '极2低端阀厅',
            dataIndex: 'ke',
            width: 100
          },
          {
            title: '交流场',
            dataIndex: 'kf',
            width: 80
          },
          {
            title: '直流场',
            dataIndex: 'kg',
            width: 80
          },
          {
            title: '主控楼',
            dataIndex: 'kh',
            width: 80
          },
          {
            title: '极1辅控楼',
            dataIndex: 'ki',
            width: 100
          },
          {
            title: '极2辅控楼',
            dataIndex: 'kj',
            width: 100
          },
          {
            title: '其他（剩余区域）',
            dataIndex: 'kk',
            width: 120
          },
          {
            title: <div><span>总安全指数</span>&nbsp;<span style={{color:'#B8C10B',height:8,width:11}}>↓</span></div>,
            dataIndex: 'kl',
            width: 120
          },
        ]
      )
    }else if(type==="safetyRiskFailure"){
      return (
        [
          {
            title: '换流站',
            dataIndex: 'ka',
            width: 100,
            render : (text, record) => {
              return(<div style={{color:'yellow'}}>{text}</div>)
            }
          },
          {
            title: ' 极1高端阀厅',
            dataIndex: 'kb',
            width: 100
          }, 
          {
            title: '极1低端阀厅',
            dataIndex: 'kc',
            width: 100
          },
          {
            title: '极2高端阀厅',
            dataIndex: 'kd',
            width: 100
          },
          {
            title: '极2低端阀厅',
            dataIndex: 'ke',
            width: 100
          },
          {
            title: '交流场',
            dataIndex: 'kf',
            width: 80
          },
          {
            title: '直流场',
            dataIndex: 'kg',
            width: 80
          },
          {
            title: '主控楼',
            dataIndex: 'kh',
            width:80
          },
          {
            title: '极1辅控楼',
            dataIndex: 'ki',
            width: 100
          },
          {
            title: '极2辅控楼',
            dataIndex: 'kj',
            width: 100
          },
          {
            title: '其他（剩余区域）',
            dataIndex: 'kk',
            width: 120
          },
          {
            title: <div><span>总安全指数</span>&nbsp;<span style={{color:'#B8C10B',height:8,width:11}}>↓</span></div>,
            dataIndex: 'kl',
            width: 120
          }
        ]
      )
    }
    else if(type==="dangerWeekCensus"){
      return (
        [
          {
            title: '换流站',
            dataIndex: 'da',
            width: 120
          },
          {
            title: '告警',
            dataIndex: 'db',
            width: 120
          }, 
          {
            title: '隐患',
            dataIndex: 'dc',
            width: 120
          },
        ]
      )
    }
    else if(type==="sevenDaysRiskCensus"){
      return (
        [
          {
            title: '换流站',
            dataIndex: 'sa',
            width: 100
          },
          {
            title: '类型',
            dataIndex: 'sb',
            width: 100
          }, 
          {
            title: '类别',
            dataIndex: 'sc',
            width: 100
          }, 
          {
            title: '今天',
            dataIndex: 'sd',
            width: 100
          },
          {
            title: '05-01',
            dataIndex: 'se',
            width: 100
          },
          {
            title: '04-30',
            dataIndex: 'sf',
            width: 100
          }, 
          {
            title: '04-29',
            dataIndex: 'sg',
            width: 100
          },   
          {
            title: '04-28',
            dataIndex: 'sh',
            width: 100
          },
          {
            title: '04-27',
            dataIndex: 'si',
            width: 100
          }, 
          {
            title: '04-26',
            dataIndex: 'sj',
            width: 100
          }, 
        ]
      )
    }else{
      return (
        []
      )
    }   
  }

  /**
   * 根据类型切换数据
   */
  getDataSource =(type)=>{
    if(type==="kpsi"||type==="safetyRiskFailure"){
      return riskData;
    }
    else if(type==="dangerWeekCensus"){
      return dangerWeekCensusData;
    }
    else if(type==="sevenDaysRiskCensus"){
      return sevenDaysRiskCensusData;
    }
  }

  /**
   * 自定义总页数
   */
  showTotalPage = (total) =>{
    let pages=Math.ceil(total/pageSize);
   return `共 ${pages} 页`;
  }

  /**
   * 设定间隔行样式
   */
  rowClassChange=(record,index) => {
    let className = 'light-row';
    if (index % 2 === 0) className = 'dark-row';
    return className;
  }

  /**
   * 当前行点击事件
   */
   onRowClick=(record)=>{
      if(this.state.type==="kpsi"){
        this.setState({
          divVisable:'none',
          riskVisable:'block',
          buttonVisable:'none',
          detailTitle:record.ka
        })
      }
   }

   /**
    * 子组件返回当前列表
    */
   updateParent(values){
    if(values!=null){
      this.setState({
        divVisable:values.divVisable,
        riskVisable:values.riskVisable,
      })
    }
   }

  render() {
    const {title,divVisable,type,detailTitle,riskVisable,buttonVisable} = this.state;
    const _pageNation={pageSize:pageSize,size:'small',showTotal:this.showTotalPage};
    return (
      <div>
        <div style={{display:buttonVisable}}>
          <Button onClick={this.kpsi}>安全指数</Button>
          <Button onClick={this.safetyRiskFailure}>安全风险失效</Button>
          <Button onClick={this.dangerWeekCensus}>告警隐患周增幅统计</Button>
          <Button onClick={this.sevenDaysRiskCensus}>七日风险统计</Button>
        </div>

        <div className="mainContent" style={{display:divVisable}} >
          <Layout>
            <Header className="contentHeader">
            
              <div className="headerLeft" style={{display:'inline'}}>{title}</div>
              <div className="headerRight" style={{display:'inline'}}>
               <img src="/src/assets/detail/close.png" onClick={this.closeDiv} width="36px"/>
              </div>
            </Header>
            <Content className="content">
              <div className="contentInfo">
                  <div className="infoHeader">
                  <Input className="titleInput" addonAfter={<img src="/src/assets/detail/search.png" style={{width:20}}/>} />
                  </div>
                  <div className="infoContent">
                     <Table className="tableDetail"    
                       dataSource={this.getDataSource(type)}
                       style={{background:'linear-gradient(180deg,rgba(0,0,0,0.57) 0%,rgba(12,181,213,0.1) 100%)'}}
                       columns={this.columns(type)}
                       rowClassName={this.rowClassChange}
                       onRowClick={this.onRowClick}
                       pagination={_pageNation}>
                     </Table>
                  </div>
                  
              </div>
            </Content>
          </Layout>
        </div>
        <RiskAssessment detailTitle={detailTitle} riskVisable={riskVisable} updateParents={this.updateParent}></RiskAssessment>
     </div>
    );
  }
}

CentralInfoView.propTypes = {

};
CentralInfoView.defaultProps={
  pages:5
}
export default CentralInfoView;