import React from 'react';
import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
import TroubleItem from '../../components/TroubleComponent/TroubleItemComponent/TroubleItemComponent'
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import TextArea from "../../components/CommonComponent/TextAreaContainer/TextAreaContainer";
import Qrcode from '../../components/CommonComponent/Qrcode/Qrcode'
import FinishTrouble from '../../components/TroubleComponent/FinishTroubleComponent/FinishTroubleComponent'
import Button from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import PopModel from '../../components/CommonComponent/PopupComponent/PopupMiddleComponent'
import LeftContainer from '../LeftContainer/LeftContainer';
import RightContainer from '../RightContainer/RightContainer';
require('./index.css')
const showDom={
1:'default',
2:'textArea',
3:'qrcode'
};
export default class TroubleContainer extends React.Component{
constructor(props){
super(props);
this.state = {
showTrouble : true,
troubleList : {},
currentErrorCode : 0,
tmpText : '',
tmpUrl : '',
showStatus:showDom[1],
style : {},
initialSlide : 0,
tempinitialSlide : 0,
btnClock : false
};
this.setItem = this.setItem.bind(this);
this.showText = this.showText.bind(this);
this.goBack = this.goBack.bind(this);
this.saveText = this.saveText.bind(this);
this.getDefaultDom = this.getDefaultDom.bind(this);
this.getDefaultDoms = this.getDefaultDoms.bind(this);
this.getTextAreaDom = this.getTextAreaDom.bind(this);
this.dealTrouble = this.dealTrouble.bind(this);
this.setStyle = this.setStyle.bind(this);
this.abandonSaveText = this.abandonSaveText.bind(this);
}
componentWillMount(){
let {headerInfo} = this.props;
let {taskList={}} = headerInfo;
this.setState({
troubleList : taskList
})
}
componentWillUnmount(){
this.setState({
btnClock : false
})
}
componentWillReceiveProps(nextProps){
let {headerInfo} = this.props;
let {taskList={}} = headerInfo;
let nextHeaderInfo = nextProps.headerInfo;
let nextTaskList = nextHeaderInfo ? nextHeaderInfo.taskList : {};
let troubleErrorCodeList = Array.isArray(taskList.detailList) ? taskList.detailList.map(i=>i.errorCode) : [];
let nowtroubleErrorCodeList = Array.isArray(nextTaskList.detailList) ? nextTaskList.detailList.map(i=>i.errorCode) : [];
//上一次和这一次不一样
let troubleErrorCodeListStr = troubleErrorCodeList.join(",");
let nowtroubleErrorCodeListStr = nowtroubleErrorCodeList.join(",");
if(
troubleErrorCodeListStr !== nowtroubleErrorCodeListStr
){
this.setState({
troubleList : nextTaskList
})
}
}
showText(errcode){
let troubleList = this.state.troubleList;
let details = troubleList.detailList;
let indexInfo = details.find(d=>d.errorCode === errcode);
let index = details.findIndex(d=>d.errorCode === errcode);
if(indexInfo && indexInfo.id){
let text = indexInfo.explanation;
this.setState({
currentErrorCode : errcode,
showStatus : showDom[2],
tmpText: text,
tempinitialSlide : index
})
}
}
setItem(errcode,option,info,callback){
let troubleList = this.state.troubleList;
let details = troubleList.detailList;
let index = details.findIndex(d=>d.errorCode === errcode);
if(index > -1){
details[index][option] = info;
}
this.setState({
troubleList : troubleList,
},()=>{
if(callback && callback instanceof Function){
callback()
}else{
this.abandonSaveText()
}
})
}
saveText(text){
let errcode = this.state.currentErrorCode;
this.setItem(errcode,'explanation',text,()=>{
this.abandonSaveText()
});
}
abandonSaveText(){
let {showPopup,hidePopup} = this.props;
hidePopup();
this.setState({
currentErrorCode : 0,
showStatus : showDom[1],
tmpText: '',
tmpUrl : '',
style:{},
initialSlide : this.state.tempinitialSlide
})
}
goBack(hasChange){
let {showPopup,hidePopup} = this.props;
if(hasChange){
let btnWidth = UTILPATH.getRemByPx(260);
let btnMarginLeft = UTILPATH.getRemByPx(30);
let btnDom1 = <Button btnContainer={"btne5"} key={"textGoBackTrouble1"} style={{'width':btnWidth,'marginRight':btnMarginLeft}} text={"取消"} option={hidePopup}/>
let btnDom2 = <Button btnContainer={"btne5"} key={"textGoBackTrouble2"} style={{'width':btnWidth}} text={"放弃"} option={this.abandonSaveText}/>
let popDom = <PopModel popupText={"是否放弃更新编辑的内容?"} popupButtons={[btnDom1,btnDom2]}/>
showPopup({popupChild:popDom});
}else{
this.abandonSaveText();
}
}
dealTrouble(){
if(!this.state.btnClock){
this.setState({
btnClock : true
},()=>{
let {showPopup,hidePopup,updateTroubleList} = this.props;
let troubleList = this.state.troubleList;
let details = troubleList.detailList;
let arr = details.filter(d=>{
return !d.isExistProblem || ( d.isExistProblem === 1 && ! d.explanation)
});
let btnWidth = UTILPATH.getRemByPx(260);
let btnDom = <Button btnContainer={"btne5"} key={"dealTrouble1"} style={{'width':btnWidth}} text={"关闭"} option={hidePopup}/>
if(arr && arr.length > 0){
let popDom = <PopModel popupText={"请完成所有需要处理的故障的必填项"} popupButtons={[btnDom]}/>
showPopup({popupChild:popDom});
this.setState({
btnClock : false
})
}else{
this.setState({
showTrouble : false
},()=>{
updateTroubleList(details);
})
}
})
}
}
getDefaultDom(){
let {showPopup,hidePopup} = this.props;
let troubleList = this.state.troubleList;
let showTrouble = Array.isArray(troubleList.detailList) && troubleList.detailList.length > 0;
let details = Array.isArray(troubleList.detailList) ? troubleList.detailList : [];
let dom = details.map((i,k)=>{
return <TroubleItem key={k} item={i} num={k+1} setItem={this.setItem}
showText={this.showText}
showPopup={showPopup}
hidePopup={hidePopup}
/>;
});
let initialSlide = this.state.initialSlide;
let swiperCount = details.length;
let swiperOptions = {
// width : 1396,
slidesPerView: "auto",
spaceBetween: 30,
// freeMode:true,
// pagination: '.pagination',
// loop:false,
mode: 'horizontal',
touchRatio:0.5,
longSwipesRatio:0.1,
threshold:50,
followFinger:false,
observer: true,//修改swiper自己或子元素时，自动初始化swiper
observeParents: true,//修改swiper的父元素时，自动初始化swiper
lazyLoadingInPrevNextAmount: 1,
initialSlide : initialSlide
};
let swiperContainer = CONFIG.swiperContainers.troubleSwiperContainer;
return(
<div className={"toubleContainer " + (showTrouble ? '' : 'hide')}>
{
this.state.showTrouble ?
<div className={"troubleContent " + ( this.state.showTrouble ? '' : 'hide')}>
<div className={"troubleText font32"}><span className={"colff7860"}>* </span>必填项</div>
<div className={"troubleBox"}>
<SwiperComponent
swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
initialSlide={initialSlide} canMove={true}
>
{dom}
</SwiperComponent>
</div>
<div className={"troubleBtnBox"}>
<div className={"troubleBtn colfff font32"} onClick={()=>this.dealTrouble.bind(this)()}>
处理完毕
</div>
</div>
</div> : null
}
</div>
)
}
setStyle(style){
this.setState({
style : style
})
}
getTextAreaDom(){
return <TextArea
text={this.state.tmpText}
goBack={this.goBack}
saveText={this.saveText}
setStyle={this.setStyle}
/>
}
getDefaultDoms(){
let props = this.props;
let {headerInfo={}} = props;
return (
<div>
<HeaderComponent
showHeader={CONFIG.headerStatus[1]}
headerInfo={headerInfo}
showLogoutPopup={this.showLogoutPopup}
/>
<LeftContainer leftInfo={props.headerInfo} />
<RightContainer style={{background:'transparent'}}>
<div className={"troubleContainers"} style={this.state.style}>
{
this.getDefaultDom()
}
</div>
</RightContainer>
</div>
)
}
getDom(){
switch (this.state.showStatus){
case showDom[1]:
return this.getDefaultDoms();
case showDom[2]:
return this.getTextAreaDom();
default :
return null;
}
}
render(){
return (
<div>
{
this.getDom()
}
</div>
)
}
}