content: import React from 'react'
  import { Tabs } from 'antd'
  import ImgModal from './ImgModal'
  import './Case.less'
  
  const TabPane = Tabs.TabPane
  
  class Case extends React.Component {
    constructor (props) {
      super(props)
      this.state = {
        visible: false
      }
      this._imgs = this.getImgs()
    }
    handleChange = (e) => {
      console.log('handleChange')
    }
  
    getImgs () {
      let imgs = []
      for (let i = 0; i < 9; i++) {
        imgs.push(
          <img
            key={`brand-${i}`}
            className='case-img'
            src={require(`../../static/assets/brand${i + 1}.jpg`)}
            data-id={i + 1}
            onClick={this.handleClickImg}
          />
        )
      }
      return imgs
    }
  
    handleClickImg = (e) => {
      console.log('handleClickImg', e.target.dataset.id)
      // const id = e.target.dataset.id
      this.setState({
        visible: true
      })
    }
  
    render () {
      const { visible } = this.state
      return (
        <div>
          <Tabs defaultActiveKey='brand' onChange={this.handleChange}>
            <TabPane tab='品牌策划' key='brand'>
              {this._imgs}
            </TabPane>
            <TabPane tab='创意设计' key='creativity'>
              {this._imgs}
            </TabPane>
            <TabPane tab='LOGO设计' key='logo'>
              {this._imgs}
            </TabPane>
            <TabPane tab='动画设计' key='animation'>
              {this._imgs}
            </TabPane>
            <TabPane tab='空间设计' key='space'>
              {this._imgs}
            </TabPane>
          </Tabs>
          <ImgModal
            visible={visible}
          />
        </div>
      )
    }
  }
  
  export default Case
  