// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Search, LayoutCard, TableTransfer, IFComponent } from '@woowalker/feui'
import { Row, Col, Radio, message, Icon, Button } from 'antd'
import MoreXYChart from '../../Chart/MoreXYChart'
import FMVarCruveConfigModel from './FMVarCruveConfigModel'
// 工具库
import { initFilter, addRuleAndGroups } from "../../../utils/common"
import { gradientColors } from '../../../utils/gradientColors'
import { cloneDeep } from 'lodash'
// 样式
import styles from './index.css'

const { GradientCard } = LayoutCard

class FMVariablePage extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectVar: [],
      chartData: {},
      chartSnapXIndex: {},
      chartSnapData: {},
      is_SnapshotExits: false,
      searchTime: '',
      activeKey: '',
      searchRules: {},
      is_Snapshot: '1',
      isAbled: false,
    }
    this.columns = [{ title: '变量', dataIndex: 'title', key: 'title' }]
  }
  componentDidMount() {
    this.getTableData();
  }

  onModalRef = (ref) => {
    this.modalChild = ref
  }

  showModal = () => {
    this.modalChild.showModal()
  }

  handleSearch = (value) => {
    var selectGroup = value.rules.find(i => i.field == "Parameter2");
    var sTime = value.rules.find(i => i.field == "Parameter1");
    var sTimeSpan = "";
    if (sTime)
      sTimeSpan = sTime.value;
    this.setState({
      searchTime: sTimeSpan,
      is_Snapshot: '1'
    }, () => {
      var selectKey = "";
      if (selectGroup) {
        selectKey = selectGroup.value;
      }
      this.getTableData(selectKey);
    })
  }

  handle = () => {
    this.setState({
      is_Snapshot: '2',
      is_SnapshotExits: true,
    }, () => {
      this.getTableData();
    })
  }

  showModalClick = (activeKey) => {
    this.setState({
      activeKey: activeKey
    }, () => {
      this.backClick();
    })
  }

  backClick = () => {
    this.setState({
      is_Snapshot: '1',
      chartSnapXIndex: {},
      chartSnapData: {},
      is_SnapshotExits: false,
    }, () => {
      this.getTableData();
    })
  }



  getTableData = (key) => {
    const { is_Snapshot, searchTime, activeKey } = this.state
    var searchKey = key || activeKey;
    const json = initFilter(this.props.login.OrgId, is_Snapshot, '', '', 1, searchTime, searchKey)
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'FM/FMVarCurve/GetChartData',
      payload: json
    }).then(res => {
      if (res && res.chartData) {
        const { chartData } = res
        //快照
        if (res.is_Snapshot) {
          if (chartData.XAxis.length > 1 && chartData.Data.length > 0) {
            this.setState({
              chartSnapXIndex: chartData.XAxis[1],
              chartSnapData: chartData.Data,
            });
          }
        } else {

          if (res.curve == this.state.activeKey) {
            //快照内容加入到数据中
            var arr = Object.keys(this.state.chartSnapXIndex);
            if (arr.length > 0) {
              chartData.XAxis.push(this.state.chartSnapXIndex);
              if (this.state.chartSnapData && this.state.chartSnapData.length > 0) {
                this.state.chartSnapData.forEach(element => {
                  chartData.Data.push(element);
                });
              }
            }
          } else {
            //清空之前的快照
            this.setState({
              chartSnapXIndex: {},
              chartSnapData: {},
              is_SnapshotExits: false,
              activeKey: res.curve,
            })
          }
          //是否显示快照按钮
          if (chartData.XAxis.length > 0 && chartData.XAxis[0].Data.length) {
            this.setState({
              isAbled: true
            })
          } else {
            this.setState({
              isAbled: false
            })
          }
        }
        this.setState({
          chartData: {
            xAxis: chartData.XAxis,
            yAxis: chartData.YAxis,
            data: chartData.Data
          }
        })
      }
    })

  }

  render() {
    const { login, dispatch } = this.props
    const { isAbled, chartData, is_SnapshotExits } = this.state
    return (
      <div className='scroll_page'>
        <Search
          formId={this.props.formId}
          formCode={this.props.formCode}
          onSearch={this.handleSearch}
          iconEle={
            <>
              <span
                style={{ cursor: "pointer", textAlign: 'right' }}
                onClick={this.showModal}>
                <Icon type='setting' /> 配置
            </span>
            </>
          }
        />
        <LayoutCard title={"变量曲线图"} style={{ marginTop: 16, textAlign: 'center' }}>
          <IFComponent IF={isAbled}>
            <Button size='small' onClick={this.handle}>快照</Button>
          </IFComponent>
          <IFComponent IF={is_SnapshotExits}>
            <Button size='small' onClick={this.backClick}>取消</Button>
          </IFComponent>
          <MoreXYChart
            chartId='FMVariablePage'
            {...chartData}
            saveImgName='变量曲线'
            style={{ height: 700 }}
          />
        </LayoutCard>
        <FMVarCruveConfigModel
          onRef={this.onModalRef}
          getTableData={this.showModalClick}
          login={login}
          dispatch={dispatch}
        />
      </div>
    )
  }
}

export default connect(({ login, app }) => ({ login, app }))(FMVariablePage)
