// 核心库
import React from 'react'
import { connect } from 'dva'
// 组件库
import { Modal, Form, Input, InputNumber, message, Tabs, Button, Row, Col } from 'antd'
import { LayoutCard, AlarmNotice } from '@woowalker/feui'
// eslint-disable-next-line no-unused-vars
import FormPage from '../FormPage'
import ListPage from '../Table/ListPage'
// eslint-disable-next-line no-unused-vars
import editPage from '../../models/editPage'
import { Socket } from '@woowalker/feui'
import config from '../../config'
// 样式
import styles from './edit.css'

const { TabPane } = Tabs

class AlarmEditModal extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      visible: false,
      id: "",
      logId: "",
      remark: "",
      describe: "",
      alarmName: "",
      enumItem: "",
      lever: "",
      alarmTaskId: "",
      appId: "",
      hour: "",
    }
    this.socketIns = new Socket({ url: config.webSocketHost })
  }

  componentDidMount () {
    this.props.onRef instanceof Function && this.props.onRef(this)
  }

  showModal = (keyId) => { // 显示弹窗
    this.setState({
      visible: true,
      id: keyId
    }, () => {
      const json = {
        OrgId: this.props.login.OrgId,
        Parameter1: this.state.id,
      }
      this.props.dispatch({
        type: 'app/getDataByPost',
        url: 'KR/KRAlarmLog/NewGet',
        payload: json,
        onlyData: false,
        onComplete: (re) => {
          if (re && re.IsSuccessful && re.Data) {
            this.setState({
              describe: re.Data.DESCRIBE,
              alarmName: re.Data.Nav_AlarmTask.NAME,
              enumItem: re.Data.Nav_AlarmTask.Nav_AlarmEnumItem.NAME,
              lever: re.Data.Nav_AlarmTask.LEVEL === 0 ? "低" : (re.Data.Nav_AlarmTask.LEVEL === 1 ? "中" : (re.Data.Nav_AlarmTask.LEVEL === 2 ? "高" : "")),
              alarmTaskId: re.Data.ALARM_TASK_ID,
              appId: re.Data.APPLIANCE_ID,
              logId: re.Data.ID
            })
          }
        }
      })
    })
  }

  handleCancel = (callback) => { // 退出弹窗
    this.setState({
      visible: false,
      remark: ''
    }, () => {
      callback instanceof Function && callback()
    })
  }

  handleClose = () => {
    this.props.dispatch({
      type: 'app/save',
      payload: { alarmId: '' }
    })
  }

  handleSave = (value) => {
    const { alarmTaskId, remark, logId, describe, appId, hour } = this.state
    const json = {
      ORG_ID: this.props.login.OrgId,
      ALARM_TASK_ID: alarmTaskId,
      REMARK: remark,
      ID: logId,
      DESCRIBE: describe,
      APPLIANCE_ID: appId,
      NEXT_ALARM_HOUR: hour,
      IS_ONEKEY_HANDLE: value
    }
    this.props.dispatch({
      type: 'app/getDataByPost',
      url: 'KR/KRAlarmLog/FullUpdate',
      payload: json,
      onlyData: false,
      onComplete: (re) => {
        if (re && re.IsSuccessful) {
          if (re.Data === true) {
            this.handleCancel(() => {
              message.success("执行成功")
              const { userId: UserId, OrgId, Tenant } = this.props.login
              const { alarmId: AlarmId } = this.props.app
              const payload = { TypeCode: 'M0003', Tenant, Data: JSON.stringify({ UserId, OrgId, AlarmId }) }
              this.socketIns && this.socketIns.send(JSON.stringify(payload))
            })
          } else {
            message.error("处理详情为空，请确定！")
          }
        }
      }
    })
  }

  onChange = (value) => {
    this.setState({
      remark: value
    })
  }

  onNumberChange = (value) => {
    this.setState({
      hour: value
    })
  }

  onRef = (ref) => {
    this.child = ref
  }

  render () {
    const { visible, alarmName, enumItem, lever, describe, remark, hour } = this.state
    const searchRules = {
      rules: [{ field: 'IS_HANDLE', operator: 1, value: false }],
      Order: 1,
      Sort: 'CREAT_TIME',
    }
    return (
      <React.Fragment>
        <Modal
          width='70%'
          style={{ maxWidth: 1200, minWidth: 600 }}
          visible={visible}
          footer={null}
          onCancel={this.handleCancel}
          afterClose={this.handleClose}
        >
          <Tabs defaultActiveKey="1">
            <TabPane tab="报警信息" key="1">
              <LayoutCard>
                <div className={styles.topBar}>
                  <div className={styles.btnBar}>
                    <Button type={'primary'} icon={'save'} onClick={() => this.handleSave(false)}>处理</Button>
                    <Button type={'primary'} icon={'save'} onClick={() => this.handleSave(true)}>一键处理</Button>
                  </div>
                </div>
                <div className={styles.controlBlock}>
                  <Form>
                    <Row gutter={16}>
                      <Col span={8}>
                        <Form.Item label="报警名称: ">
                          <Input disabled value={alarmName} />
                        </Form.Item>
                      </Col>
                      <Col span={8}>
                        <Form.Item label="报警类别: ">
                          <Input disabled value={enumItem} />
                        </Form.Item>
                      </Col>
                      <Col span={8}>
                        <Form.Item label="报警等级: ">
                          <Input disabled value={lever} />
                        </Form.Item>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={12}>
                        <Form.Item label="情况描述: ">
                          <Input.TextArea disabled rows={4} value={describe} />
                        </Form.Item>
                      </Col>
                      <Col span={12}>
                        <Form.Item label="处理详情">
                          <Input.TextArea rows={4} value={remark} onChange={(evt) => this.onChange(evt.target.value)} />
                        </Form.Item>
                      </Col>
                    </Row>
                    <Row gutter={16}>
                      <Col span={12}>
                        <Form.Item label="多长时间内不在报警(小时)">
                          <InputNumber value={hour} onChange={this.onNumberChange} />
                        </Form.Item>
                      </Col>
                    </Row>
                  </Form>
                </div>
              </LayoutCard>
            </TabPane>
            <TabPane tab="全部记录" key="2">
              <ListPage formCode='KR017' onRef={this.onRef} data={searchRules} />
            </TabPane>
          </Tabs>
        </Modal>
        <AlarmNotice
          webSocketHost={config.webSocketHost}
          onItemClick={this.showModal}
        />
      </React.Fragment>
    )
  }
}
export default connect(({ app, login }) => ({ app, login }))(AlarmEditModal)
