text: 
  import React,{ Component } from 'react'
  
  import { connect } from 'dva';
  import * as actions from "../../actions/wechat/material";
  import { View } from "@/components/flexView";
  import { Row, Col, Card, Form, Input, Button, Upload, Icon, message, Checkbox, Popover } from "antd";
  import RouterBreadcrumb from "@/components/wechat/public/routerBreadcrumb";
  import InputFile from "@/components/inputFile";
  import styles from "@/styles/wechat/addMaterial.css";
  import Editor from "react-umeditor";
  import { Fetch } from '@/utils'
  
  const FormItem = Form.Item;
  const { TextArea } = Input;
  @connect(
      ({view:{material:{ wechatMaterialInfo }}}) => ({
          wechatMaterialInfo
      }),
  
  )
  export default class AddMaterial extends Component {
      current:{
          title: string,
          thumb_media_id: string,
          thumb_url: string,
          show_cover_pic: number,
          author: string,
          digest: string,
          content: string,
          content_source_url: string
      }
      state = {
          media:[
              {
                  title: '我是标题',
                  thumb_media_id: '',
                  thumb_url: '',
                  show_cover_pic: 0,
                  author: '我是作者',
                  digest: '我是摘要',
                  content: '我是正文',
                  content_source_url: ''
              }
          ],
          active:0,
      }
      getIcons(){
  		var icons = [
  			"source | undo redo | bold italic underline strikethrough fontborder emphasis | ",
  			"paragraph fontfamily fontsize | superscript subscript | ",
  			"forecolor backcolor | removeformat | insertorderedlist insertunorderedlist | selectall | ",
  			"cleardoc  | indent outdent | justifyleft justifycenter justifyright | touppercase tolowercase | ",
  			"horizontal date time  | image emotion spechars | inserttable"
  		]
  		return icons;
  	}
  	getPlugins(){
  		return {
  			"image": {
  				"uploader": {
  					"name":"file",
  					"url": "/api/upload"
  				}
  			}
  		}
  	}
      render() {
          const { history, pathSearch } = this.props
          const { media, active } = this.state
          let current = media[active]
          let icons = this.getIcons();
          let plugins = this.getPlugins();
          return (
              <View>
                  <RouterBreadcrumb
                      pushFunc={()=>{
                          history.replace({
                              search:`?menu=6`
                          })
                      }}
                      oneLevel='图文消息'
                      twoLevel='新建微信图文'
                  />
                  <Row
                      gutter={24}
                      className={styles.row}
                  >
                      <Col span={9}>
                          <View className={styles.leftTop}>
                              <img
                                  alt=''
                                  src={(require('../../assets/images/wechat/diyPhone.png'))}
                              />
                          </View>
                          <View className={styles.leftContent}>
                              {
                                  pathSearch.num==='single' ?
                                  <LeftContentSingle
                                      {...this.props}
                                      media={media[0]}
                                      changeMedia={({media})=>{
                                          this.setState({
                                              media
                                          })
                                      }}
                                  /> :
                                  <LeftContentMany
                                      {...this.props}
                                      media={media}
                                      active={active}
                                      changeMedia={({media})=>{
                                          this.setState({
                                              media
                                          })
                                      }}
                                      changeActive={({active})=>{
                                          this.setState({
                                              active
                                          })
                                      }}
                                  />
                              }
                          </View>
                      </Col>
                      <Col span={15}>
                          <Card
                              title={pathSearch.num==='single' ? '单条图文' : '多条图文'}
                              style={{ width: '100%' }}
                              className={styles.rightCard}
                          >
                              <View>
                                  <CardContent
                                      {...this.props}
                                      media={media}
                                      active={active}
                                      changeMedia={({media})=>{
                                          this.setState({
                                              media
                                          })
                                      }}
                                      changeActive={({active})=>{
                                          this.setState({
                                              active
                                          })
                                      }}
                                  />
                                  <Editor
                                      icons={icons}
                                      plugins={plugins}
                                      value={current.content}
                                      onChange={(content)=>{
                                          let newMedia = [...media]
                                          let newCurrent = {...current}
                                          newCurrent.content=content
                                          newMedia.splice(active, 1, newCurrent)
                                          this.setState({
                                              media:newMedia
                                          })
                                      }}
                                  />
                              </View>
                          </Card>
                      </Col>
                  </Row>
              </View>
          )
      }
  }
  
  class LeftContentSingle extends Component<
      {
          media:{
              title: string,
              thumb_media_id: string,
              thumb_url: string,
              show_cover_pic: number,
              author: string,
              digest: string,
              content: string,
              content_source_url: string
          },
          changeMedia:Function
      },{}>{
      render(){
          const { media } = this.props
          return(
              <View className={styles.singleView}>
                  <View className={styles.singleTop}>
                      <img
                          alt=''
                          src={media.thumb_url}
                      />
                  </View>
                  <View className={styles.singleBot}>
                      <p style={{margin:0}}>{media.title}</p>
                      {
                          media.digest&&media.digest.length ?
                          <span>{media.digest}</span> : null
                      }
                  </View>
                  <a>
                      编辑
                  </a>
                  <View className={styles.cover}/>
              </View>
          )
      }
  }
  
  class LeftContentMany extends Component<
      {
          media:Array<{
              title: string,
              thumb_media_id: string,
              thumb_url: string,
              show_cover_pic: number,
              author: string,
              digest: string,
              content: string,
              content_source_url: string
          }>,
          active:number,
          changeMedia:Function,
          changeActive:Function,
      },{}>{
      componentDidMount(){
          const { changeMedia, media } = this.props
          changeMedia({
              media:[...media, {
                  title: '标题',
                  thumb_media_id: '',
                  thumb_url: '',
                  show_cover_pic: 0,
                  author: '作者',
                  digest: '摘要',
                  content: '正文',
                  content_source_url: ''
              }]
          })
      }
      render(){
          const { media, active, changeMedia, changeActive } = this.props
          return(
              <Popover
                  visible={true}
                  placement='bottom'
                  content={(
                      <View
                          className={styles.popoverContent}
                          onClick={()=>{
                              media.length===8 ?
                              message.warning('内容最多 8 个',1) :
                              changeMedia({
                                  media:[...media,{
                                      title: '标题',
                                      thumb_media_id: '',
                                      thumb_url: '',
                                      show_cover_pic: 1,
                                      author: '作者',
                                      digest: '摘要',
                                      content: '正文',
                                      content_source_url: ''
                                  }]
                              })
                          }}
                      >
                          <Icon type="plus" />
                      </View>
                  )}
              >
                  <View className={styles.listView}>
                      {
                          media.map((mediaItem,index)=>
                              index===0 ?
                              <View
                                  className={`${styles.listItem} ${styles.itemOne} ${active===index ? styles.activeItem : ''}`}
                                  key={index}
                                  onClick={()=>{
                                      changeActive({
                                          active:index
                                      })
                                  }}
                              >
                                  <View>
                                      <img
                                          alt=''
                                          src={mediaItem.thumb_url}
                                      />
                                  </View>
                                  <p style={{margin:0}}>{mediaItem.title}</p>
                                  <View className={styles.cover}/>
                              </View> :
                              <View
                                  className={`${styles.listItem} ${styles.item} ${active===index ? styles.activeItem : ''}`}
                                  key={index}
                                  onClick={()=>{
                                      changeActive({
                                          active:index
                                      })
                                  }}
                              >
                                  <View>
                                      <p>{mediaItem.title}</p>
                                  </View>
                                  <View>
                                      <img
                                          alt=''
                                          src={mediaItem.thumb_url}
                                      />
                                  </View>
                                  <View className={styles.cover}/>
                              </View>
                          )
                      }
                  </View>
              </Popover>
          )
      }
  }
  
  class CardContent extends Component<
      {
          media:Array<{
              title: string,
              thumb_media_id: string,
              thumb_url: string,
              show_cover_pic: number,
              author: string,
              digest: string,
              content: string,
              content_source_url: string
          }>,
          active:number,
          pathSearch:{
              num:string
          },
          addMaterial:Function,
          changeMedia:Function,
          changeActive:Function
      },{}>{
      current:{
          title: string,
          thumb_media_id: string,
          thumb_url: string,
          show_cover_pic: number,
          author: string,
          digest: string,
          content: string,
          content_source_url: string
      }
      render(){
          const { media, active, pathSearch, changeMedia, addMaterial } = this.props
          const formItemLayout = {
              labelCol: {
                  xs: { span: 24 },
                  sm: { span: 3 },
              },
              wrapperCol: {
                  xs: { span: 24 },
                  sm: { span: 19 },
              },
          }
          const formTailLayout = {
              labelCol: { span: 3 },
              wrapperCol: { span: 19, offset: 3 },
          }
          const tailFormItemLayout = {
              wrapperCol: {
                  xs: {
                      span: 24,
                      offset: 0,
                  },
                  sm: {
                      span: 16,
                      offset: 8,
                  },
              },
          }
          const uploadButton = (
              <View className={styles.uploadBtnView}>
                  <Icon type='plus' />
                  <p>上传</p>
              </View>
          )
          let current = media[active]
          return(
              <Form>
                  <FormItem
                      {...formItemLayout}
                      label="标题"
                      required
                      help={current.title&&current.title.length ? '' : '正文必填！'}
                      hasFeedback={current.title&&current.title.length ? false : true}
                      validateStatus={current.title&&current.title.length ? '' : 'error'}
                  >
                      <Input
                          placeholder="输入标题"
                          value={current.title}
                          onChange={(e)=>{
                              let newMedia = [...media]
                              let newCurrent = {...current}
                              newCurrent.title=e.target.value
                              newMedia.splice(active, 1, newCurrent)
                              changeMedia({
                                  media:newMedia
                              })
                          }}
                      />
                  </FormItem>
                  <FormItem
                      {...formItemLayout}
                      label="作者"
                  >
                      <Input
                          placeholder="输入作者"
                          value={current.author}
                          onChange={(e)=>{
                              let newMedia = [...media]
                              let newCurrent = {...current}
                              newCurrent.author=e.target.value
                              newMedia.splice(active, 1, newCurrent)
                              changeMedia({
                                  media:newMedia
                              })
                          }}
                      />
                  </FormItem>
                  <FormItem
                      {...formItemLayout}
                      label="封面"
                      extra='建议尺寸：900*500 像素 图片格式png、jpg'
                  >
                      <Upload
                          listType="picture-card"
                          showUploadList={false}
                          beforeUpload={beforeUpload}
                          customRequest={({file})=>{
                              let formData = new FormData()
                              formData.append('media',file)
                              let url = `${env.domain}/admin/wechat/materialUploadThumb`
                              Fetch.formData(url,formData)
                              .then((e)=>{
                                  if(e.code===0){
                                      // message.success('上传成功！')
                                      let newMedia = [...media]
                                      let newCurrent = {...current}
                                      newCurrent.thumb_media_id = e.result.media_id
                                      newCurrent.thumb_url = e.result.url
                                      newMedia.splice(active, 1, newCurrent)
                                      changeMedia({
                                          media:newMedia
                                      })
                                  }
                              })
                          }}
                      >
                          {
                              current.thumb_url.length ?
                              <img
                                  src={current.thumb_url}
                                  alt=''
                                  style={{
                                      width:102,
                                      height:102,
                                  }}
                              /> :
                              uploadButton
                          }
                      </Upload>
                  </FormItem>
                  <FormItem {...formTailLayout}>
                      <Checkbox
                          checked={current.show_cover_pic ? true : false}
                          onChange={(e)=>{
                              let newMedia = [...media]
                              let newCurrent = {...current}
                              newCurrent.show_cover_pic=e.target.checked ? 1 : 0
                              newMedia.splice(active, 1, newCurrent)
                              changeMedia({
                                  media:newMedia
                              })
                          }}
                      >
                          封面图显示在正文中
                      </Checkbox>
                  </FormItem>
                  {
                      pathSearch.num==='single' ?
                      <FormItem
                          {...formItemLayout}
                          label="摘要"
                      >
                          <TextArea
                              placeholder="请输入摘要"
                              autosize={{ minRows: 3, maxRows: 6 }}
                              value={current.digest}
                              onChange={(e)=>{
                                  let newMedia = [...media]
                                  let newCurrent = {...current}
                                  newCurrent.digest=e.target.value
                                  newMedia.splice(active, 1, newCurrent)
                                  changeMedia({
                                      media:newMedia
                                  })
                              }}
                          />
                      </FormItem> : null
                  }
                  <FormItem
                      {...formItemLayout}
                      label="正文"
                      required
                      help={current.content&&current.content.length ? '' : '正文必填！'}
                      hasFeedback={current.content&&current.content.length ? false : true}
                      validateStatus={current.content&&current.content.length ? '' : 'error'}
                  />
                  <FormItem
                      // {...tailFormItemLayout}
                      style={{
                          position: 'absolute',
                          top:540,
                          left: '-200px',
                      }}
                  >
                      <Button
                          type="primary"
                          // htmlType="submit"
                          style={{
                              marginRight:20
                          }}
                          onClick={()=>{
                              addMaterial({
                                  params:{
                                      media
                                  }
                              })
                          }}
                      >
                          保存
                      </Button>
                      <Button>预览</Button>
                  </FormItem>
              </Form>
          )
      }
  }
  
  function beforeUpload(file) {
      const isImage = file.type.includes('image')!==-1;
      if (!isImage) {
          message.error('你只能上传图片!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
          message.error('图片不能超过2MB!');
      }
      return isImage && isLt2M;
  }
  