import React, { Component } from 'react'
import { Modal, Spin, Button } from 'antd'
import { connect } from 'dva'

// less
import styles from './index.less'

@connect(({ posterList, loading }) => {
  const { configDetail = [] } = posterList
  return {
    configDetail,
    loading: loading.effects['posterList/getConfigDetail']
  }
}, null, null, { withRef: true })

class ConfigModal extends Component {
  constructor (props) {
    super(props)
    this.state = {
      modalVisible: false
    }
  }

  // modal弹窗出现
  showConfigModal = (id) => {
    this.setState({
      modalVisible: true
    }, () => {
      this.props.dispatch({
        type: 'posterList/getConfigDetail',
        payload: { id }
      })
    })
  }

  // modal弹窗消失
  hideConfigModal = () => {
    this.setState({
      modalVisible: false
    })
  }

  // render弹窗内容分
  renderConfigContent = () => {
    const { configDetail } = this.props
    return configDetail.map((item, index) => {
      return <p key={index}>{item}</p>
    })
  }

  render () {
    const { modalVisible } = this.state
    const { loading } = this.props
    return (
      <div className={styles.configModal}>
        <Modal
          title="全部配置"
          visible={modalVisible}
          onOk={this.hideConfigModal}
          onCancel={this.hideConfigModal}
          footer={
            <Button onClick={this.hideConfigModal}>
              关闭
            </Button>
          }
        >
          <Spin spinning={loading}>
            {this.renderConfigContent()}
          </Spin>
        </Modal>
      </div>
    )
  }
}

export default ConfigModal