'use strict';
import React from 'react';
import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
import EditProblemItem from '../../components/OtherQuestionComponent/EditProblemComponent'
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
import PopupComponent from '../../components/CommonComponent/PopupComponent/PopupComponent'
import ButtonComponent from '../../components/CommonComponent/ButtonComponent/ButtonComponent'
import TextArea from "../TextAreaContainer/TextAreaContainer";
import Qrcode from '../Qrcode/Qrcode'
require('./index.css');
export default class OtherQuestionContainer extends React.Component{
constructor(props){
super(props)
this.state = {
showTextArea:false,
tmpText:"",
currentProblemId:'',
showQr:false,
qrUrl:"",
taskTy:"OP",
showPop:false,
popupInfo:{},
}
}
componentWillMount() {
let {initStart,headerInfo,userInfo} = this.props;
// 请求 初始数据接口
let postData = {
employeeId:headerInfo.employeeId?headerInfo.employeeId:"20",
storeId:headerInfo.storeId?headerInfo.storeId:"17"
};
initStart(postData);
}
componentDidMount(){
}
componentDidUpdate() {
}
componentWillReceiveProps(nextProps){
/* let {state} = nextProps;
let {otherQuestion,refreshImg} = state;
let lastRefreshImg = this.props.state.refreshImg;
if(String(lastRefreshImg)!=String(refreshImg)){
//更新数据
let troubleId = ""
}
console.log(refreshImg);
console.log("============================willrecvie refreshImg")*/
}
componentWillUnmount(){
}
/*
* 输入故障备注信息部分
* */
// 1. 显示编辑备注组件
handleShowRemark(troubleId){
let {state} = this.props;
let {otherQuestion} = state;
let problemList = otherQuestion.data_allProblemList;
console.log(this.props);
let currentProblem = problemList[troubleId];
let tmpText = currentProblem.remark;
this.setState({
showTextArea : true,
tmpText: tmpText,
currentProblemId:troubleId
})
}
// 2. 在编辑备注页面组件 点击返回
handleEditGoBack(){
this.setState({
showTextArea:false
})
console.log("点击文本框页的返回键");
}
// 3. 在编辑备注组件页面 点击保存
handleSaveRemarkText(text){
let {editProblemItem} = this.props;
let data = {};
data.type = "remark";
data.troubelId = this.state.currentProblemId;
data.remarkText = text;
editProblemItem(data);
this.setState({
showTextArea:false
})
}
/*
* 点击录入更多 添加新故障
* */
handleAddNewTroble(){
let postData = {};
let {addNewProblem,headerInfo} = this.props;
postData.employeeId = headerInfo.employeeId?headerInfo.employeeId:"20";
postData.storeId = headerInfo.storeId?headerInfo.storeId:"17";
addNewProblem(postData);
}
/*
* 删除已经编辑的的问题
* */
handleDeleteProblem(troubleId){
let {deleteProblem,headerInfo} = this.props;
console.log(deleteProblem);
let postData = {};
postData.feedIds =String(troubleId);
postData.employeeId = headerInfo.employeeId?headerInfo.employeeId:"20";
postData.storeId = headerInfo.storeId?headerInfo.storeId:"17";
deleteProblem(postData);
}
handleSubmitProblemList(){
let {submitProblemList,state,headerInfo,changePages}=this.props;
let that = this;
let problemList = state.otherQuestion.data_allProblemList;
//编辑成想要的格式
let postData = {};
postData.problems = [];
for(let key in problemList){
let currentObj = problemList[key];
let tempObj = {};
tempObj.id = currentObj.id;
tempObj.problemType = currentObj.problemType;
tempObj.detailProblemType = currentObj.detailProblemType;
tempObj.remark = currentObj.remark;
let newImgIds = []
if(currentObj.files&¤tObj.files.length>0){
newImgIds = currentObj.files.map((item,index)=>{
return item.id
})
}
tempObj.imagesFileId = newImgIds.join(',');
postData.problems.push(tempObj);
}
postData.employeeId = headerInfo.employeeId?headerInfo.employeeId:"20";
postData.storeId = headerInfo.storeId?headerInfo.storeId:"17";
//检查 postData.problems
let problemsLength = postData.problems.length;
let needEdit = [];
postData.problems.map((item,index)=>{
if(item.problemType == undefined){
needEdit.push(item.id)
}
if(index+1 == postData.problems.length && needEdit.length==0){
submitProblemList(postData)
}
if(index+1 == postData.problems.length && needEdit.length>0){
console.log("================及Nlaile=========")
that.setState({
showPop:true,
popupInfo:{
"popupText":"提交前请输入相关信息，如果不想提交可以直接跳过(右上角)",
"showPopup":true,
"popupButtons": [<ButtonComponent key={"btn"} option={this.handleShowPopo.bind(this)} text={"确定"}/>]
}
})
}
})
/*changePages(CONFIG.showPage[8])*/
}
/*处理提示框*/;
handleShowPopo(){
this.setState({
showPop:false
})
}
/*
*添加照片
* */
handleAddImg(troubleId){
let {state} = this.props;
let {storeInfo} = state;
let tmpUrl = "";
tmpUrl = `${ENV.uploadImg}${troubleId}/${this.state.taskTy}`
this.setState({
"showQr":true,
"qrUrl":tmpUrl
},()=>{
console.log("=======================设置的二维码===========")
console.log(this.state.qrUrl)
})
console.log("添加照片")
}
/*
*刷新当前图片
* */
handleRefreshProbelmImg(troubleId,troubleType){
let {getRefreshImg} = this.props;
getRefreshImg(troubleId,troubleType)
}
/*
* 删除图片
* */
handleDeleteImg(errorId,taskType,fileId){
let {deleteImg} = this.props;
deleteImg(errorId,taskType,fileId)
}
handleOverPass(){
let {deleteProblem,headerInfo} = this.props;
let postData = {};
postData.feedIds ="";
postData.employeeId = headerInfo.employeeId?headerInfo.employeeId:"20";
postData.storeId = headerInfo.storeId?headerInfo.storeId:"17";
deleteProblem(postData);
}
//二维码返回
handleQrBack(){
this.setState({
showQr:false
})
}
render(){
//let 难道初始化的数据：
let {state,addNewProblem,editProblemItem,deleteProblem,getRefreshImg} = this.props;
let {otherQuestion,refreshImg,userInfo,storeInfo} = state;
let {problems} = otherQuestion;
let feeds = otherQuestion.feeds;
let problemList = otherQuestion.data_allProblemList;
let problemListLength = 0;
let editProblemItemUI = [];
//生成基本Ui
for (let key in problemList){
problemListLength++;
let item = problemList[key];
let troubleId = item.id;
let currentRemark = item.remark;
let currentItemUi = <EditProblemItem
editProblemItem = {editProblemItem}
trouleId = {troubleId}
imgList = {refreshImg}
clickEdit = {this.handleShowRemark.bind(this,troubleId)}
problemInfo = {problems}
baseInfo = {item}
remarkText = {currentRemark}
getRefreshImg = {()=>(this.handleRefreshProbelmImg.bind(this,troubleId,this.state.taskTy))}
deleteProblem = {()=>(this.handleDeleteProblem.bind(this,troubleId))}
addImg = {()=>(this.handleAddImg.bind(this,troubleId))}
deleteImg = {(errorId,type,fileId)=>(this.handleDeleteImg.bind(this,errorId,type,fileId))}
taskType = {this.state.taskTy}
key={key}/>
editProblemItemUI.push(currentItemUi);
}
let swiperCount = problemListLength;
let swiperOptions = {
width : 1396,
spaceBetween: 30,
freeMode:true,
// slidesPerView: 2.6,
};
let swiperContainer = CONFIG.swiperContainers.editProblemSwiperContainer;
//控制Ui显示
let elementUI = '';
if(this.state.showTextArea){
elementUI = <TextArea
text={this.state.tmpText}
goBack={this.handleEditGoBack.bind(this)}
saveText={this.handleSaveRemarkText.bind(this)}
></TextArea>
}else if(this.state.showQr){
elementUI = <Qrcode goBack={this.handleQrBack.bind(this)} url={this.state.taskTy}></Qrcode>
}else{
elementUI = <div className={"OtherQuestionContainer"}>
{this.state.showPop?(
<PopupComponent popupInfo = {this.state.popupInfo}></PopupComponent>
):""}
<HeaderComponent
showHeader={CONFIG.headerStatus[1]}
userinfo={userInfo}
storeInfo={storeInfo}
/>
<div className={"otherQuestionTitleContainer"}>你是否有其他问题希望反馈(<i>*</i>必填项)</div>
<div className={"editOtherQuestionContainer clearfix"}>
<SwiperComponent
swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
>
{editProblemItemUI}
</SwiperComponent>
</div>
<div className={"opeationContainer clearfix"}>
<button className={"addMoreBtn"} onClick={this.handleAddNewTroble.bind(this)}><span>+</span>录入更多</button>
<button className={"noMoreBtn"} onClick={this.handleSubmitProblemList.bind(this)}>没有更多</button>
</div>
<div className={"overPass"} onClick={this.handleOverPass.bind(this)}>跳过</div>
</div>
}
return (
<div>{elementUI}</div>
)
}
}