/*
 * Creator:     ML
 * CreatDate:   2020-05-08
 * descripts：  中医健康指导内容维护
 * */
import React from 'react';
import { Form, Row, Col, Button,  Icon, message,} from 'antd';
import { $http } from 'containers/config/https';
import store from 'store';
import E from 'wangeditor';
const TCMHealthGuidance = Form.create()(
    class TCMHealthGuidance extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                editorContent: "<div></div>",
                activeKey: "01",
                arr:[]
            }
        }
        componentDidMount() {
            const elem = this.refs.editorElem
            const editor = new E(elem)
            editor.customConfig.onchange = html => {
                this.setState({
                    editorContent: html
                },()=>{
                })
            }
            editor.customConfig.menus = [
                'head',  // 标题
                'bold',  // 粗体
                'fontSize',  // 字号
                'fontName',  // 字体
                'italic',  // 斜体
                'underline',  // 下划线
                'foreColor',  // 文字颜色
                'list',  // 列表
                'justify',  // 对齐方式
                'quote',  // 引用
                'emoticon',  // 表情
                'undo',  // 撤销
                'redo'  // 重复
            ]
            editor.create()
            this.editor = editor
            this.getFindDate()
        }
        //设置富文本内容
        setCont=()=>{
            // console.log("this.state.editorContent",this.state.editorContent)
            this.editor.txt.html(this.state.editorContent)
            if(document.querySelector('.w-e-text-container')){
                document.querySelector('.w-e-text-container').style.height=store.getState().tableHeight.y + 136 + 'px'
                document.querySelector('.w-e-text-container').style.zIndex=998
            }
            if(document.querySelector('.w-e-menu')){
                let a = document.querySelectorAll('.w-e-menu')
                for(var i=0;i<a.length;i++){
                    a[i].style.zIndex=999
                }
            }
        }
        //保存
        handleSave = () => {
            let data = {}
            data = {
                params: [{
                  code:this.state.activeKey||"",
                  textContent:this.state.editorContent||"<div></div>"
                }],
            }
            $http.post('urlS', this, {
                code: '03070120',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0 &&res.result) {
                        message.success(res.errorMessage)
                        this.getFindDate(this.state.activeKey)
                        // this.setCont()
                    } else {
                      
                    }
                
                },
                error: function () {
                  
                }
            })
            
        }
        //获取下拉数据 以及 当前内容
        getFindDate = (c) => {
            let data = {}
            data = {
                params: [{
                  code:c||""
                }],
            }
            $http.post('urlS', this, {
                code: '03070119',
                data: data,
                success: function (res) {
                    if (+res.errorCode === 0 &&res.result) {
                        // console.log("res.result[0].textContent",res.result[0].textContent)
                       if(c){
                        this.setState({
                            activeKey:c,
                            editorContent:res.result[0].textContent
                        },()=>{
                            this.setCont()
                        }) 
                       }else{
                        this.setState({
                            arr:res.result,
                            activeKey:res.result[0].code,
                            editorContent:res.result[0].textContent
                        },()=>{
                            this.setCont()
                        }) 
                       }
                    } else {
                      
                    }
                
                },
                error: function () {
                  
                }
            })
        }

        handleBlock = (item) => {
            this.setState({ activeKey: item.code },()=>{
                this.getFindDate(item.code)
            })
        }

        render() {
            const { arr } = this.state;
            //体质分类
            let blockOp = []
            arr && arr.map(item => {
                blockOp.push(<span style={{
                    display: "inline-block",
                    textAlign: "center",
                    marginRight: "10px",
                    borderRadius: "4px",
                    padding: "9px 15px",
                    cursor:"pointer",
                    color:(this.state.activeKey == item.code ? "#fff" : "#333"),
                    border: "1px solid #e8e8e8",
                    background: (this.state.activeKey == item.code ? "#40a9ff" : "")
                }}
                    onClick={() => this.handleBlock(item)} key={item.code} value={item.ID} title={item.descripts}>{item.descripts}</span>)
            })
            blockOp.push(  
                <Button onClick={this.handleSave} style={{ background: 'rgba(66,185,131,1)', color: '#fff' ,marginLeft:"12px"}}>保存</Button>
            )

            return (
                <div style={{ padding: '4px 12px' }} className="w-Dom">
                    <div className="department-header">
                        <Form>
                            <Row gutter={60} style={{ margin: '12px 0 0 -30px',}}>
                                <Col span={22}>
                                    {blockOp}
                                </Col>
                                
                            </Row>
                        </Form>
                    </div>
                    <div>
                        {/* 生成编辑器 */}
                        <div ref="editorElem" style={{ textAlign: 'left', margin: '12px 0px 0px 0px' }}>
                        </div>
                    </div>
                </div>
            )
        }
    })
export default TCMHealthGuidance    