import PropTypes from "prop-types";
import React from "react";
import style from "./index.less";
import DesItem from './DesItem';
import arrow_icon from './img/arrow.png';
import arrow_down_icon from './img/arrow-down.png';
import del_icon from './img/delete.png';
import del_hover_icon from './img/delete_blue.png';
import edit_icon from './img/edit_grey.png';
import editing_icon from './img/edit_blue.png';
import check_circle from './img/check-circle.png';
import check_right from './img/check-right.png';
import store from '@store'
import {checkItems} from '@store/actions/tabTemplate';
import $ from 'jquery';

class TemplateItem extends React.Component {
    constructor() {
        super();
        this.content = null;
        this.state = {
            delHover: false,
            editHover: false,
            checkBox:false,
            bgColor:false,
        };
        this.isConfirmClick = false;
        this.timer = null;
        this.handleTitleClick = this.handleTitleClick.bind(this)
    }

    getArrow() {
        return this.state.isOpen ? arrow_down_icon : arrow_icon;
    }

    handleContentClick(e,sex) {
        e.stopPropagation();
        this.props.handleContentClick(this.props.id,sex);
    }

    handleCheckboxClick(e,id){          //点击复选框
        e.stopPropagation();
        let tempCheck = this.state.checkBox;
        this.setState({
            checkBox:!tempCheck
        })
        store.dispatch(checkItems(id))
    }

    getCheckIcon() {
        let tempCheckItems = this.props.checkItems;
        if(tempCheckItems.indexOf(this.props.id) != -1){
            return [check_right,'title-wrapper-bg']
        }else{
            return [check_circle,'']
        }
    }
    getBgcColor() {
        let tempCheckItems = this.props.checkItems;
        if(tempCheckItems.indexOf(this.props.id) != -1){
            return 'title-wrapper-bg'
        }else{
            return ''
        }
    }
    getDelIcon() {
        return this.state.delHover ? del_hover_icon : del_icon;
    }

    handleDelIconMouseEnter() {
        this.setState({
            delHover: true
        });
    }

    handleDelIconMouseLeave() {
        this.setState({
            delHover: false
        });
    }

    handleTemplateDel(e) {
        e.stopPropagation();
        this.props.handleTemplateDel(this.props.id);
    }

    getEditIcon() {
        return this.state.editHover ? editing_icon : edit_icon;
    }

    handleEditIconMouseEnter() {
        this.setState({
            editHover: true
        });
    }

    handleEditIconMouseLeave() {
        this.setState({
            editHover: false
        });
    }

    handleEditIconClick(e,name) {
        e.stopPropagation();
        let currId = this.props.id
        this.props.handleTitleChange(currId,name);
    }

    handleTitleClick(e) {
      if(e.target.tagName == 'I'){
        let tmpDomLis = $(e.target).parent().parent().siblings()
        $(e.target).parent().next().slideToggle()
        if($(e.target).parent().next().height() == 0){
          $(e.target).next().attr('src',arrow_down_icon)
        }else{
          $(e.target).next().attr('src',arrow_icon)
        }
        for(let i = 0;i < tmpDomLis.length;i++){
          let tmpDiv = tmpDomLis[i]
          $(tmpDiv).children().eq(1).slideUp()
          $(tmpDiv).children().eq(0).children('img').eq(0).attr('src',arrow_icon)
        }
      }else if($(e.target).attr('src')){
        let tmpDomLis = $(e.target).parent().parent().siblings()
        $(e.target).parent().next().slideToggle()
        if($(e.target).parent().next().height() == 0){
          $(e.target).attr('src',arrow_down_icon)
        }else{
          $(e.target).attr('src',arrow_icon)
        }
        for(let i = 0;i < tmpDomLis.length;i++){
          let tmpDiv = tmpDomLis[i]
          $(tmpDiv).children().eq(1).slideUp()
          $(tmpDiv).children().eq(0).children('img').eq(0).attr('src',arrow_icon)
        }
      }else{
        let tmpDomLis = $(e.target).parent().siblings()
        $(e.target).next().slideToggle()
        if($(e.target).next().height() == 0){
          $(e.target).children('img').eq(0).attr('src',arrow_down_icon)
        }else{
          $(e.target).children('img').eq(0).attr('src',arrow_icon)
        }
        for(let i = 0;i < tmpDomLis.length;i++){
          let tmpDiv = tmpDomLis[i]
          $(tmpDiv).children().eq(1).slideUp()
          $(tmpDiv).children().eq(0).children('img').eq(0).attr('src',arrow_icon)
        }
      }
    }

    render() {
        const { allCheckShow,id,name,preview,sex } = this.props;
        let previewJson = JSON.parse(preview);
        let sexStr = sex==2?' (女)':sex==1?' (男)':' (通用)';
        return (
            <div className={style.wrapper}>
                <div className={ 
                    allCheckShow?
                    `${style["title-wrapper"]} ${style["clearfix"]} ${style[this.getCheckIcon()[1]]}`:
                    `${style["title-wrapper"]} ${style["clearfix"]}`}
                    onClick={this.handleTitleClick}
                >
                    {
                        allCheckShow?<div className={style['check-wrap']} onClick={(e)=>{this.handleCheckboxClick(e,id)}}>
                            <img className={`${style['fl-element']} ${style['check-box']}`} 
                            src={this.getCheckIcon()[0]}
                        /></div>:null
                    }
                    <i
                        className={style['title']}
                        title={name+sexStr}
                    >
                        {name+sexStr}
                    </i>
                    <img className={style.arrow} src={arrow_icon} />
                    <img title={'删除模板'} 
                        className={style.del}
                        style={{display:allCheckShow?'none':'block'}}
                        src={this.getDelIcon()} 
                        onMouseEnter={() => this.handleDelIconMouseEnter()}
                        onMouseLeave={() => this.handleDelIconMouseLeave()}
                        onClick={(e) => this.handleTemplateDel(e)} 
                    />
                    <span className={style.quote} onClick={(e) => this.handleContentClick(e,sex)}>引用</span>
                    <img title={'修改模板标题'}
                        className={style.edit}
                        src={this.getEditIcon()}
                        onMouseEnter={() => this.handleEditIconMouseEnter()}
                        onMouseLeave={() => this.handleEditIconMouseLeave()}
                        onClick={(e) => this.handleEditIconClick(e,name)}
                    />
                </div>
                <div
                    ref={(content) => this.content = content}
                    className={style.content}
                    title={this.title}
                >
                    {
                        previewJson?<DesItem preview={previewJson}></DesItem>:<p>暂无数据</p>
                    }
                </div>
            </div>
        )
    }

    componentWillUnmount() {
        clearTimeout(this.timer);
    }
}

export default TemplateItem;
TemplateItem.propTypes = {
    id: PropTypes.string,
    title: PropTypes.string,
    content: PropTypes.arrayOf(PropTypes.string),
    handleContentClick: PropTypes.func,
    handleTemplateDel: PropTypes.func,
    handleTitleChange: PropTypes.func
};