'use strict';
import React from 'react';
import SwiperComponent from '../../components/CommonComponent/SwiperComponent/SwiperComponent'
import HeaderComponent from '../../components/CommonComponent/HeaderComponent/HeaderComponent'
require('./index.css');
import DamageItem from '../../components/ReportDamageListComponent/DamageItemComponent/DamageItem'

export default class ReportDamagesListContainer extends React.Component{
    constructor(props){
        super(props)
    }
    componentWillMount(){
        let {getReportDamageList,state,headerInfo} = this.props;
        let{taskInfo={},storeInfo={}} = headerInfo;
        let postData = {};
        postData.taskId=taskInfo.taskId?taskInfo.taskId:"";
        postData.storeId = storeInfo.id;
        getReportDamageList(postData)
    }
    hanldeDeleteDamageItem(data){
        let postData = {};
        let {deleteDamageItem,state} = this.props;
        let {commonInfo={}} = state;
        let {userInfo={},storeInfo={},taskInfo={}} = commonInfo;
        let taskId = taskInfo.taskId?taskInfo.taskId:"";
        let storeId = storeInfo.id?storeInfo.id:"";
        postData.inventoryLossId = data;
        postData.storeId = storeId;
        postData.taskId = taskId;
        deleteDamageItem(postData)
    }
    hanleAddMoreClick(){
        let {changePages} = this.props;
        changePages(CONFIG.showPage[2])
    }
    handleNoMoreClick(){
        let {changePages} = this.props;
        changePages(CONFIG.showPage[4])
    }

    render(){
        let {reportDamageList,commonInfo} = this.props.state;
        let {showPopup,hidePopup} = this.props;
        let reportDamageListUi =[];
        if(reportDamageList && reportDamageList.length>0){
            reportDamageListUi = reportDamageList.map((i,k)=>{
                return <DamageItem
                    key={k}
                    itemInfo = {i}
                    deleteItem = {this.hanldeDeleteDamageItem.bind(this)}
                    showPopup = {showPopup}
                    hidePopup = {hidePopup}
                />;
            });
        }
        let swiperOptions = {
            // width : 1044,
            spaceBetween: 30,
            slidesPerView: "auto",
            freeMode:true
        };
        let swiperContainer = CONFIG.swiperContainers.damageSwiperContainer;
        let swiperCount = reportDamageListUi.length;
        return (
            <div className={"ReportDamagesListContainer"}>
                <HeaderComponent
                    showHeader={CONFIG.headerStatus[1]}
                    headerInfo={commonInfo}
                />
                <div className={"damageTitleContainer"}>故障相关报损商品(非货架区)</div>
                <div className={"damageProductList"}>
                    {
                        reportDamageList && reportDamageList.length>0?(
                            <SwiperComponent
                                swiperContainer={swiperContainer} swiperOptions={swiperOptions} swiperCount={swiperCount}
                            >
                                {reportDamageListUi}
                            </SwiperComponent>
                        ):("请点击录入更多添加报损商品")
                    }

                </div>
                <div className={"opeationContainer clearfix"}>
                    <button onClick={this.hanleAddMoreClick.bind(this)} className={"addMoreBtn"}><span>+</span>录入更多</button>
                    <button onClick={this.handleNoMoreClick.bind(this)} className={"noMoreBtn"}>没有更多</button>
                </div>
            </div>


        )
    }
}