import React from 'react';
require('./index.css');
import ImgToolComponent from '../../components/CommonComponent/ImgToolComponent/CommonSmalContainer';
export default class EditProblemItem extends React.Component{
constructor(props){
super(props);
this.state = {
showCategoryElement:false,
showDetailElement:false,
currentFatherLiIndex:undefined,
currentChildLiIndex:undefined,
currentBigId:undefined,
currentSmallId:undefined,
problemList:{},
currentDetailProblem:[],
currentDetailTitle:"分类问题",
currentDetailSonTitle:"具体问题",
showRemark:""
}
}
componentWillMount(){
let props = this.props;
// console.log(state)
let Problems_format = {};
let {baseInfo,problemInfo} = props;
props.problemInfo.map((item,index)=>{
Problems_format[item.id] = {};
Problems_format[item.id].message = item.message;
Problems_format[item.id].type = item.type;
Problems_format[item.id].dicDetails = item.dicDetails;
});
let currentRemarkLength = baseInfo.remark.length;
let showRemark = baseInfo.remark;
if(currentRemarkLength>200){
showRemark = String(showRemark).substring(0,199)
console.log(showRemark.length)
}
this.setState({
problemList:Problems_format,
currentDetailProblem:props.problemInfo[0].dicDetails,
currentBigId:baseInfo.problemType,
currentSmallId:baseInfo.detailProblemType,
currentDetailTitle:baseInfo.message?baseInfo.message:"分类问题",
currentDetailSonTitle:baseInfo.smallMessage?baseInfo.smallMessage:"具体问题",
showRemark:showRemark
});
}
componentWillReceiveProps(nextProps){
let nextImgList = nextProps.imgList;
let {editProblemItem,trouleId} = this.props
let imgList = this.props.imgList;
//修改值
if(String(nextImgList.files)!=String(imgList.files) || String(imgList.errorId)!= String(nextImgList.errorId)){
if(trouleId == Number(nextImgList.errorId)){
let data={};
data.type = "imgFiles";
data.files = nextImgList.files;
data.troubelId = trouleId;
editProblemItem(data);
}
}
}
handleShowElement(value){
let that = this;
if(value == "showDetailElement"){
//点击了 小分类 检查如果大分类未选择则进行提示
if(!this.state.currentBigId){
console.log("请先选择大分类")
return;
}
}
if(value == "showCategoryElement"){
this.setState({"currentDetailTitle":"分类问题"})
}
if(value == "showDetailElement"){
this.setState({"currentDetailSonTitle":"具体问题"})
}
this.setState(
{
[value]:!this.state[value]
},()=>{
if(value == "showCategoryElement" && !this.state.showCategoryElement){
that.setState({
"showDetailElement":false
})
}
}
)
}
handleDetailProblem_Father(event){
let {editProblemItem,trouleId} = this.props;
let data = {};
//处理选中样式
this.setState({
currentFatherLiIndex: parseInt(event.currentTarget.getAttribute('date-index'))
});
//处理数据
let bigProblemId = event.currentTarget.getAttribute('data-id');
let title = event.currentTarget.getAttribute('data-value');
let childProblem = this.state.problemList[String(bigProblemId)].dicDetails;
this.setState({
currentDetailProblem:childProblem,
currentBigId:bigProblemId,
currentDetailTitle:title,
showCategoryElement:false,
currentDetailSonTitle:"具体问题"
});
data.type = "problemType";
data.message = title;
data.problemId = bigProblemId;
data.troubelId = trouleId;
editProblemItem(data)
}
handleDetailProblem_Child(event){
let {editProblemItem,trouleId} = this.props;
let title = event.currentTarget.getAttribute('data-value');
let data = {};
//处理选中样式
this.setState({
currentChildLiIndex: parseInt(event.currentTarget.getAttribute('date-index'))
});
//处理数据
let smallProblemId = event.currentTarget.getAttribute('date-id');
this.setState({
currentSmallId:smallProblemId,
currentDetailSonTitle:title,
showDetailElement:false
})
data.type = "detailProblemType";
data.smallMessage = title;
data.problemId = smallProblemId;
data.troubelId = trouleId;
editProblemItem(data)
}
handleClickEditRemark(){
console.log("点击编辑跳转到文本框")
}
showImg(imgSrc){
let {showPopup,hidePopup} = this.props;
let showImgDom = <div onClick={()=>hidePopup()} className={"showBigImg"}>
<img src={imgSrc} alt=""/>
</div>;
showPopup({
popupChild : showImgDom
});
}
render(){
let props = this.props;
let imgFiles = props.baseInfo.files?props.baseInfo.files:[];
let troubleId = props.trouleId;
let taskType = props.taskType;
// 方法
// 1. 删除问题
let deleteProblem = props.deleteProblem;
// 2. 刷新图片
let getRefreshImg = props.getRefreshImg;
// 3. 添加图片
let addImg = props.addImg;
// 4. 删除图片
let deleteImg = props.deleteImg;
//问题分类
let categoryProblemUi = props.problemInfo.map((item,index)=>{
return <li key={"bigProblem"+index}
date-index={index}
data-value={item.message}
data-id = {item.id}
className={this.state.currentBigId == item.id ? 'active_li':''}
onClick={(e)=>(this.handleDetailProblem_Father.bind(this,e))()}>{item.message}</li>
});
let detailCategoryProblemUi = this.state.currentDetailProblem.map((item,index)=>{
return <li key={'detailProblem'+index}
date-index={index}
data-value={item.message}
date-id = {item.messageId}
className={this.state.currentSmallId == item.messageId ? 'active_li':''}
onClick={(e)=>(this.handleDetailProblem_Child.bind(this,e))()}>{item.message}</li>
})
//图片部分
let imgListUi = imgFiles.map((item,index)=>{
return <ImgToolComponent
key={"troubelImg"+index}
noCloseBtn={false}
handleClikCloseFunc = {deleteImg(troubleId,taskType,item.id)}
handleClikImgFunc = {()=>{this.showImg(item.filePath)}}
type={"custom"}
imgSrc = {item.filePath}
></ImgToolComponent>
});
//备注部分
let remarkText = props.remarkText;
return (
<div className={"editUploadItem clearfix"}>
<span className={"closeBtn"} onClick={deleteProblem()}>×</span>
<div className={"newTroubleTitle"}>
新故障问题：故障 <span>{"OP0000"+troubleId}</span>
</div>
<div className={"newTroubleContent clearfix"}>
<span className={"startIcon"}>*</span>
<div className={"fakeSelect"}>
<div className={"problemCategoryTitle"} onClick={this.handleShowElement.bind(this,"showCategoryElement")} >{this.state.currentDetailTitle}</div>
{
this.state.showCategoryElement?(
<ul className={"problemCategory"} name="" id="">
{
categoryProblemUi
}
</ul>
):""
}
</div>
<div className={"fakeSelect"}>
<div className={"problemCategoryTitle detailTitle "+(this.state.currentBigId?"":"noActive")} onClick={this.handleShowElement.bind(this,"showDetailElement")}>{this.state.currentDetailSonTitle}</div>
{
this.state.showDetailElement?(
<ul className={"DetailProblem"} name="" id="">
{
detailCategoryProblemUi
}
</ul>
):""
}
</div>
</div>
<div className={"newTroubleRemark clearfix"}>
<span className={"startIcon"}>*</span>
<div className={"remarkContent"}>
<div className={"btnContaienr"}>
<button
className={"editIcon"}
onClick={props.clickEdit}
disabled={!this.state.currentSmallId || !this.state.currentBigId?true:false}
>编辑
</button>
</div>
<div
className={"defalutRemarkText "+(this.state.showRemark?"remarkText":"")}>
{this.state.showRemark?this.state.showRemark:("编辑检查结果")}
</div>
</div>
</div>
<div className={"damageImgs clearfix"}>
<div className={"uploadImgRight"}>
{imgListUi}
</div>
<div className={"operationLeft"}>
<ImgToolComponent
disabled = {this.state.currentBigId || this.state.currentSmallId?false:true}
type={"add"}
handleClikImgFunc = {addImg()}
noCloseBtn = {true}
></ImgToolComponent>
<ImgToolComponent
disabled = {this.state.currentBigId || this.state.currentSmallId?false:true}
handleClikImgFunc = {getRefreshImg()}
type={"refresh"}
noCloseBtn = {true}></ImgToolComponent>
</div>
</div>
</div>
)
}
}
/*
EditProblemItem.PropTypes = {
productItemList : React.PropTypes.array
}
EditProblemItem.defaultProps = {
productItemList : [
{
sku : {
imagePath : ''
}
}
]
}*/