/**
 * 报修单
 */
import React from 'react';
import 'antd-mobile/dist/antd-mobile.css';
import { Toast,ListView, List, Icon, Button, WhiteSpace, WingBlank, Checkbox, Flex, Radio, SearchBar, Modal, Card, Tag } from 'antd-mobile';
import { Http } from '../../Utils/help';
import { BasePage } from '../common/basepage'
import './less/list.less';

const Item = List.Item;
const Brief = Item.Brief;
const RadioItem = Radio.RadioItem;
const CheckboxItem = Checkbox.CheckboxItem;
export default class repairs extends React.Component {
    constructor(props) {
        super(props);
        this.NUM_SECTIONS = 1;
        this.NUM_ROWS_PER_SECTION = 50;
        this.genData = this.genData.bind(this);
        this.onEndReached = this.onEndReached.bind(this);
        this.formatDate=this.formatDate.bind(this)
        this.onClose = this.onClose.bind(this)
        this.onChangeCheck = this.onChangeCheck.bind(this)
        this.goGetResult = this.goGetResult.bind(this)
        this.onModalSubmit = this.onModalSubmit.bind(this)
        this.clearCondition = this.clearCondition.bind(this)
        this.isEmpty=this.isEmpty.bind(this);
        this.diffTime = this.diffTime.bind(this)
        this.getNowFormatDate = this.getNowFormatDate.bind(this)
        // this.getBillno = this.getBillno.bind(this)
        // const loginid = localStorage['loginemployee']
        const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
        const getRowData = (dataBlob, sectionID, rowID) => dataBlob[rowID];

        const dataSource = new ListView.DataSource({
            getRowData,
            getSectionHeaderData: getSectionData,
            rowHasChanged: (row1, row2) => row1 !== row2,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
        });
        // localStorage.removeItem("newData")
        // localStorage.removeItem("datalength")
        this.state = {
            dataSource: dataSource,
            // func: func,
            isLoading: false,
            nodata: true,
            data: {},
            page: 1,
            pageSize: 10,
            //my: false,//我的那个按钮是否选择，默认不选中，显示所有人的维修单
            creator: '',
            maintaintype: [],
            radioval: null,
            height: document.documentElement.clientHeight * 1,
            serialno: '',
            login: {},
            modal:false,
            searchevalue:'',
            condition:new Map(),
            // tags: ['报修状态', '车间/部门', '时间', '报修人','影响程度'],//标签
            tags: ['报修状态', '时间', '报修人','影响程度'],//标签
            radiovalEx:'报修状态',
            //条件保存
            ifin:false,//是否已保存过一次
            i:{},//若有，保存的对象，取出进行条件刷新
        };
    }
   //计算两个日期之间的时间间隔，以小时为单位
   diffTime = (createtime) => {
      //  let stopTime = new Date('2017-08-12 23:00:00'.replace(/-/g, '/')).getTime();
      createtime = new Date(createtime.replace(/-/g, '/'));
      var endDate = new Date(this.getNowFormatDate().replace(/-/g, '/'));
      var diff = endDate.getTime() - createtime.getTime();//时间差的毫秒数 
      var days = Math.floor(diff / (24 * 3600 * 1000));          //计算出相差天数 
      //计算出小时数 
      var leave1 = diff % (24 * 3600 * 1000);    //计算天数后剩余的毫秒数 
      var hours = Math.floor(leave1 / (3600 * 1000));
      var hours_count = days * 24 + hours;//
      var returnStr = hours_count + "小时"
      return returnStr;
   }
     //获取当前时间
     getNowFormatDate = () => {
      var date = new Date();
      var seperator1 = "-";
      var seperator2 = ":";
      var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
      var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
         + " " + date.getHours() + seperator2 + date.getMinutes()
         + seperator2 + date.getSeconds();
      return currentdate;
   }
    //是否为空
    isEmpty = (obj) => {
        if (typeof obj === 'undefined' || obj == null || obj === '') {
            return true;
        } else {
            return false;
        }
    }
    onEndReached(event) {
        // load new data
        // hasMore: from backend data, indicates whether it is the last page, here is false
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        console.log('reach end', event);
        let that = this;
        let condition = that.state.condition
        let workshops = [];
        let types=[];
        let stacons=[];
        let time;
        let my;
        let page;
        condition.get('报修状态').map(item=>{
            if(item.checked){
                //stacon = item.id //单个
                stacons.push(item.id)//多个状态
            }
        })
      //   condition.get('车间/部门').map(item=>{
      //       if(item.checked){
      //           workshops.push(item.id)
      //       }
      //   })
        condition.get('影响程度').map(item=>{
            if(item.checked){
                types.push(item.id)
            }
        })
        condition.get('时间').map(item =>{
            if(item.checked){
                time = item.id
            }
        })
        condition.get('报修人').map(item =>{
            if(item.checked){
                my = item.id
            }
        })
        page = ++this.state.page
        //console.log(workshops.toString())
        Http.getJSON2("repairs/repairssearch", 
        {'page':page,
            'pageSize': this.state.pageSize,
            //'stacon': stacon,
            'stacon': stacons.toString(),
            'my':my,
            'workshop':workshops.toString(),
            'type':types.toString(),
            'time':time,
            'devicecode':this.state.searchevalue
        }).done((data) => {//this.dataAjax = Http.getJSON2("maintain", { "stacon": this.state.radioval, "userid": this.state.my ? this.state.login.Employeeid : null, "page": ++this.state.page, "pageSize": this.state.pageSize, "orderby": 'createtime desc' })
                console.log("onEndReached:", data)
                if (data && data.length > 0) {
                    try {
                        //var c=data.data.concat(that.state.data);
                        var c = that.state.data.concat(data)
                        that.genData(c);
                        that.setState({
                            dataSource: that.state.dataSource.cloneWithRowsAndSections(that.dataBlobs, that.sectionIDs, that.rowIDs),
                            data: c,
                            page: page,
                            nodata: !data || data.length == 0,
                        });
                    } catch (err) {
                        console.error(err.message);
                        console.error(err.stack);
                    }
                }
            });
    }
    componentWillMount() {
        //console.log(typeof(window.conditionarr)=="undefined")
        if(typeof(window.conditionarr)=="undefined"){window.conditionarr=[]}
        console.log("componentWillMount")
        console.log("条件数组",window.conditionarr)
        window.conditionarr.map((data=>{
            // keys.push()
            if(data['key']==='repairs'){
                this.state.ifin=true
                this.state.i=data
                this.setState({
                    ifin:true,
                    i:data,
                    searchevalue:data['value']['devicecode'],
                })
                return
            }
        }))
        
        Http.postJSON2("employee/getlogin", {}, data => {
            console.log(data)
            let arr = []
            data.map(item=>{
                arr.push({key:'报修人', id: item.Employeeid, name: '我的', checked: false})
            })
            arr.push({key:'bx人', id:'', name:'全部', checked:false})
            const map = this.state.condition;
            map.set("报修人", arr)
            this.setState({ login: data[0] },console.log(this.state.login))
            this.setState({ condition: map })
            //拿到报修状态数组
            Http.getJSON2("basetype/items", { parentid: '2019130037600000511' }, (data) => {
               console.log(data)
               let arr = []
            //    data.data.map(item=>{
            //          arr.push({key:'报修状态', id:item.id, name:item.name, checked:false})
            //    })
               data.data.map(item=>{
                if(this.state.ifin){
                    arr.push({key:'报修状态', id:item.id, name:item.name, checked:false})
                }
                if(!this.state.ifin){
                    if(item.name==='待接单'||item.name==='协助处理'){
                        arr.push({key:'报修状态', id:item.id, name:item.name, checked:true})
                    }
                    else{
                        arr.push({key:'报修状态', id:item.id, name:item.name, checked:false})
                    }
                }               
               })
               const map = this.state.condition;
               map.set("报修状态", arr)
               this.setState({ condition: map })
            //拿到影响程度数组
            Http.getJSON2("basetype/items", { parentid: '2019130036900000111' }, (data) => {
               let typearr=[]
               data.data.map(item=>{
                typearr.push({key:'影响程度', id:item.id, name:item.name, checked:false})
               })              
                const map = this.state.condition;
                map.set("影响程度", typearr)
                this.setState({ condition: map })
        //获取车间资料
      //   Http.getJSON2("workshop", { disabled: 'false' }, (data) => {
      //       console.log(data) //所有车间的车间信息
      //       let arr = []
      //       data.data.map(item=>{
      //           arr.push({key:'车间/部门', id:item.Workshopid, name:item.Name, checked:false})
      //       })
            //时间
            let times = []
            times.push({key:'时间', id:'day', name:'今天', checked:false})
            times.push({key:'时间', id:'week', name:'近一周', checked:false})
            times.push({key:'时间', id:'overweek', name:'一周之前', checked:false})
           
           // const map = this.state.condition;
           // map.set("车间/部门", arr)
            map.set("时间", times)
            this.setState({ condition: map })
            //反向勾选按钮
            console.log(this.state.ifin)
            console.log(this.state.i)
            if(this.state.ifin){
            //时间
            this.state.condition.get("时间").map(item=>{
                if(item.id==this.state.i['value']['time']){
                    item.checked=true
                    this.setState({condition:this.state.condition})
                }
            })
            //报修人
            this.state.condition.get("报修人").map(item=>{
                if(item.id==this.state.i['value']['my']){
                    item.checked=true
                    this.setState({condition:this.state.condition})
                }
            })  
            //车间
            // this.state.condition.get("车间/部门").map(item=>{
            //     this.state.i['value']['workshops'].map(i=>{
            //         if(item.id==i){
            //             item.checked=true
            //             this.setState({condition:this.state.condition})
            //         }
            //     })

            // }) 
            //报修状态
            // this.state.condition.get("报修状态").map(item=>{
            //     if(item.id==this.state.i['value']['stacon']){
            //         item.checked=true
            //         this.setState({condition:this.state.condition})
            //     }
            // }) 
            this.state.condition.get("报修状态").map(item=>{
                this.state.i['value']['stacons'].map(i=>{
                    if(item.id==i){
                        item.checked=true
                        this.setState({condition:this.state.condition})
                    }
                })

            })    
            //影响程度
            this.state.condition.get("影响程度").map(item=>{
                this.state.i['value']['types'].map(i=>{
                    if(item.id==i){
                        item.checked=true
                        this.setState({condition:this.state.condition})
                    }
                })

            })                        
            console.log(this.state.condition)
            //showCondition()
            }
        //})            
        })    
        })         
        }).done(data => {
            console.log(this.state)
        })

    }
    componentDidUpdate() {

    }
    componentDidMount() {
        console.log("componentDidMount")
        this.setState({ isLoading: true });
        //this.dataAjax = Http.getJSON2("maintain", { "page": this.state.page, "pageSize": this.state.pageSize, "orderby": 'createtime desc' })
        //按照存储的条件请求
        window.conditionarr.map((data=>{
            // keys.push()
            if(data['key']==='repairs'){
                this.state.ifin=true
                this.state.i=data
                this.setState({ifin:true,i:data},()=>{
                    if(this.state.ifin){
                    this.setState({page:1}, () =>{
                        console.log('vvv')
                        Http.getJSON2("repairs/repairssearch", 
                        {'page':this.state.page,
                            'pageSize': this.state.pageSize,
                            'stacon': this.state.i['value']['stacon'],
                            'my':this.state.i['value']['my'],
                            'workshop':this.state.i['value']['workshop'],
                            'time':this.state.i['value']['time'],
                            'devicecode':this.state.i['value']['devicecode'],
                            'type':this.state.i['value']['type']
                        }).done((data) =>{
                            try {
                                if(data.length==0){
                                    Toast.info('查无对应数据,请重新查询', 2);
                                }
                                this.genData(data);
                                this.setState({
                                    dataSource: this.state.dataSource.cloneWithRowsAndSections(this.dataBlobs, this.sectionIDs, this.rowIDs),
                                    data: data,
                                    nodata: !data || data.length == 0,
                                    isLoading: false,
                                });
                            } catch (err) {
                                console.error(err.message);
                                console.error(err.stack);
                            }
                        })
                    }) 
                }               
                })
                
            }
            }))
        if(!this.state.ifin){
        //预加载在待接单,和协助处理的单据
        Http.getJSON2("repairs/repairssearch", {"page":this.state.page, "pageSize":this.state.pageSize,"stacon":"5,2019149051490000111"})
            .done((data) => {
                try {
                    this.genData(data);
                    console.log(data, this.state)
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRowsAndSections(this.dataBlobs, this.sectionIDs, this.rowIDs),
                        data: data,
                        nodata: !data || data.length == 0,
                        isLoading: false,
                    });
                    console.log("this.state", this.state)
                } catch (err) {
                    console.error(err.message);
                    console.error(err.stack);
                }
            });}
        //isdone得处理一下
        Http.getJSON2("basetype/items", { "parentid": 1 }, data => {
            const array = data.data
            console.log(data.data)
            this.setState({ maintaintype: array })
        })


    }
    goGetResult = () =>{
        let condition = this.state.condition
        let stacon;
        let workshops = [];
        let types=[];//影响程度
        let stacons=[];//报修状态数组
        let time;
        let my;
        // condition.get('报修状态').map(item=>{
        //     if(item.checked){
        //         stacon = item.id
        //     }
        // })
      //   condition.get('车间/部门').map(item=>{
      //       if(item.checked){
      //           workshops.push(item.id)
      //       }
      //   })
      condition.get('报修状态').map(item=>{
        if(item.checked){
            stacons.push(item.id)
        }
     })
        condition.get('影响程度').map(item=>{
            if(item.checked){
                types.push(item.id)
            }
        })
        condition.get('时间').map(item =>{
            if(item.checked){
                time = item.id
            }
        })
        condition.get('报修人').map(item =>{
            if(item.checked){
                my = item.id
            }
        })
        //保存条件s
        //判断是否已存过一次
        window.conditionarr.map((data=>{
            // keys.push()
            if(data['key']==='repairs'){
                this.state.ifin=true
                this.state.i=data
                this.setState({ifin:true,i:data})
                return
            }
        }))
        if(this.state.ifin){
            this.state.i['value']['page']=this.state.page
            this.state.i['value']['pageSize']=this.state.pageSize
            // this.state.i['value']['stacon']=stacon
            this.state.i['value']['stacons']=stacons
            this.state.i['value']['stacon']=stacons.toString()
            this.state.i['value']['my']=my
            this.state.i['value']['workshops']=workshops
            this.state.i['value']['workshop']=workshops.toString()
            this.state.i['value']['time']=time
            this.state.i['value']['devicecode']=this.state.searchevalue
            this.state.i['value']['types']=types
            this.state.i['value']['type']=types.toString()
        }
        else{
            window.conditionarr.push({key:'repairs',value:{
                page:1,pageSize:this.state.pageSize,
                //stacon:stacon,
                stacon:stacons.toString(),
                stacons:stacons,
                my:my,workshop:workshops.toString(),
                workshops:workshops,
                devicecode:this.state.devicecode,
                type:types.toString(),
                types:types
            }})
            //保存条件S
            window.conditionarr.map((data=>{
            // keys.push()
            if(data['key']==='repairs'){
                this.state.ifin=true
                this.state.i=data
                this.setState({ifin:true,i:data})
                return
            }
            }))
        }
        //E
        this.setState({page:1}, () =>{
            Http.getJSON2("repairs/repairssearch", 
            {'page':this.state.page,
             'pageSize': this.state.pageSize,
            // 'stacon': stacon,
             'stacon':stacons.toString(),
             'my':my,
             'workshop':workshops.toString(),
             'type':types.toString(),
             'time':time,
             'devicecode':this.state.searchevalue
            }).done((data) =>{
                try {
                    if(data.length==0){
                        Toast.info('查无对应数据,请重新查询', 2);
                    }
                    this.genData(data);
                    this.setState({
                        dataSource: this.state.dataSource.cloneWithRowsAndSections(this.dataBlobs, this.sectionIDs, this.rowIDs),
                        data: data,
                        nodata: !data || data.length == 0,
                    });
                } catch (err) {
                    console.error(err.message);
                    console.error(err.stack);
                }
            })
        })
    }
    formatDate = (date_str) => {//时间格式处理
        if (date_str === null)
            return ''
        var date = new Date(Date.parse(date_str.replace(/-/g, "/")));
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
        var strDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
        var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours()
        var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()
        var currentdate = month + seperator1 + strDate
            + " " + hour + seperator2 + minute
        return currentdate;
    }


    genData = (datas) => {
        this.dataBlobs = {};
        this.sectionIDs = [];
        this.rowIDs = [];
        if (!datas)
            return;

        let pIndex = 0;
        this.NUM_ROWS_PER_SECTION = datas.length;
        for (let i = 0; i < this.NUM_SECTIONS; i++) {
            const ii = (pIndex * this.NUM_SECTIONS) + i;
            const sectionName = `Section ${ii}`;
            this.sectionIDs.push(sectionName);
            this.dataBlobs[sectionName] = sectionName;
            this.rowIDs[ii] = [];

            for (let jj = 0; jj < this.NUM_ROWS_PER_SECTION; jj++) {
                const rowName = `S${ii}, R${jj}`;
                this.rowIDs[ii].push(rowName);
                this.dataBlobs[rowName] = datas[jj];
            }
        }
        this.sectionIDs = [...this.sectionIDs];
        this.rowIDs = [...this.rowIDs];
    }

    onClose = () =>{
        this.setState({modal:false})
    }

    onModalSubmit = () =>{
        this.onClose()
        this.goGetResult()
    }

    clearCondition = () =>{
        let condition = this.state.condition
        for(let [key, value] of condition){
            value.map(item => item.checked = false)
        }
        this.setState({condition})
    }

    onRadioChange = (i) =>{
        this.setState({radiovalEx:i})
    }

    onChangeCheck = (i) =>{
        console.log("onChangeCheck:",i)
        let condition = this.state.condition
        // if(i.key === '报修状态'){
        //     condition.get(i.key).map(item => {
        //         if(item.id === i.id){
        //             item.checked = !i.checked
        //         }else{
        //             item.checked = false
        //         }
        //     })
        //     this.setState({condition})
        // }
      //   if(i.key === '车间/部门'){
      //       condition.get(i.key).map(item =>{
      //           if(item.id === i.id){
      //               item.checked = !i.checked
      //           }
      //       })
      //       this.setState({condition})
      //   }
      if(i.key === '报修状态'){
        condition.get(i.key).map(item =>{
            if(item.id === i.id){
                item.checked = !i.checked
            }
        })
        this.setState({condition})
    }
        if(i.key === '影响程度'){
            condition.get(i.key).map(item =>{
                if(item.id === i.id){
                    item.checked = !i.checked
                }
            })
            this.setState({condition})
        }
        if(i.key === '时间'){
            condition.get(i.key).map(item =>{
                if(item.id === i.id){
                    item.checked = !i.checked
                }else{
                    item.checked = false
                }
            })
            this.setState({condition})
        }
        if(i.key === '报修人'){
            condition.get(i.key).map(item =>{
                if(item.name === i.name){
                    item.checked = !i.checked
                }else{
                    item.checked = false
                }
            })
            this.setState({condition})
        }
    }
    handleTagChange = (item) =>{
        let condition = this.state.condition
        condition.get(item.key).map(i=>{
            if(i.id === item.id){
                i.checked = !item.checked
            }
        })
        this.setState({condition}, this.onModalSubmit)
    }
    

    render() {
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    backgroundColor: '#F5F5F9',
                    height: 4,
                    borderTop: '1px solid #ECECED',
                    borderBottom: '1px solid #ECECED',
                }}
            />
        );


        const row = (rowData, sectionID, rowID) => {
            return (
                <div key={rowID} >
                <List className="am-list-content">
                <Item multipleLine onClick={() => { 
                    console.log("rowData", rowData)
                    if (null != rowID && '' != rowID) {
                        const { history } = this.props;
                        history.push({
                            pathname: '/devrepairsdetail',
                            state: {
                                func: this.state.func,//没有这段代码，页面不能跳转
                                rowData: rowData,
                            }
                        });
                    }
                }} 
                // extra={ rowData.isdone }
                >
                {/* {rowData.ExtraDatas.devicecode}:{rowData.ExtraDatas.devicename} */}
                
                <Flex>
                <Flex.Item>机台:{rowData.ExtraDatas.devicecode}</Flex.Item>
                {rowData.ExtraDatas.repstatusname=='待接单'?<Flex.Item><Brief>等待时间:{this.diffTime(rowData.createtime)}</Brief></Flex.Item>:null}
                </Flex>
                
                
                <Flex>
                <Flex.Item><Brief>影响程度:{rowData.ExtraDatas.impactdegreename}</Brief></Flex.Item>
                <Flex.Item><Brief>状态:{ rowData.ExtraDatas.repstatusname}</Brief></Flex.Item>
                </Flex>
                <Flex>
                <Flex.Item><Brief>报修日期:{this.formatDate(rowData.createtime)}</Brief></Flex.Item>
                <Flex.Item><Brief>报修人:{rowData.ExtraDatas.repairsname}</Brief></Flex.Item>
                {/* <InputItem editable={false} value={!this.isEmpty(rowData.maintenancer)?'有保养人':"没有指定保养人"}>保养人员有无:</InputItem> */}
                </Flex>
                <Flex>
                  <Flex.Item>
                     <Brief><Item wrap style={{ paddingLeft: 0 }}><div style={{ color: "#8E8E8E", fontSize: '14px' }}>问题描述:{rowData.trouble}</div></Item></Brief>
                  </Flex.Item>
                </Flex>
                
                </Item>
                </List>
                </div>
            );
        };
        const showMap = () =>{
            let arr = []
            for(let [key, value] of this.state.condition){
                if(key === this.state.radiovalEx){
                   value.map(i =>arr.push(
                        <CheckboxItem
                            key={i.id}
                            style={{ height: '40px' }}
                            defaultChecked={i.checked}
                            checked = { i.checked }
                            onChange={() => this.onChangeCheck(i)}
                        >
                            {i.name}
                        </CheckboxItem>
                        ))
                }
            }
            return arr;
        }
        const showCondition = () =>{
            var arr = []
            for(let [key, value] of this.state.condition){
                value.map(i=>{
                    if(i.checked){
                        arr.push(<Tag
                            closable
                            onClose={this.handleTagChange.bind(this, i)}
                        >
                        {i.name}
                    </Tag>)
                    }
                })
            }
            return arr;
        }
        return (
                   

            <div>
                    <div>
                        <Flex>
                            <Flex.Item style={{flex:0.8}}>
                                <SearchBar
                                    placeholder='可输入机台号/报修人搜索'
                                    value={this.state.searchevalue}
                                    onSubmit={this.onModalSubmit}
                                    onChange={(searchevalue)=>{
                                        this.setState({searchevalue})
                                    }}
                                />
                            </Flex.Item>
                            <Flex.Item style={{flex:0.2}}>
                                    <Button size="small" type="primary" onClick={()=>this.setState({modal:true})} >筛选</Button>
                            </Flex.Item>
                        </Flex>
                    </div>
                <div style={{ backgroundColor: '#FFFFFF' }}>
                    <WingBlank>
                        <div>
                            {
                                 showCondition()
                            }
                        </div>
                    </WingBlank>
                </div>
                <WhiteSpace size="sm" />
                <ListView className="am-list-header"
                    ref={el => this.lv = el}
                    dataSource={this.state.dataSource}
                    //renderHeader={() => <span><h3>品质警报</h3><div >信息总数：{this.state.datalength} 未读信息数：{this.state.arraylength}</div></span>}
                    renderRow={row}
                    renderSeparator={separator}
                    className="am-list"
                    initialListSize={40}
                    // useBodyScroll
                    onScroll={() => { console.log('scroll'); }}
                    scrollRenderAheadDistance={500}
                    onEndReached={this.onEndReached}
                    onEndReachedThreshold={10}
                    style={{
                        height: this.state.height,
                        overflow: 'auto',
                    }}
                />
                {/* <div id='add' style={{ width: '40px', height: '40xp', position: 'fixed', right: '5%', top: '90%' }}
                onClick={()=>{this.getBillno()}}>
                <img src={require('../../images/add.png')} style={{ width: '100%', height: '100%' }} />
                </div> */}

                {//筛选modal
                    <Modal
                    popup
                    visible={this.state.modal}
                    maskClosable
                    onClose={this.onClose}
                    animationType="up"
                    afterClose={() => { console.log('afterClose'); }}
                  >
                    <List renderHeader={() => <div>条件</div>} className="popup-list">
                        <Flex>
                            <Flex.Item style={{flex:0.5}}>
                            <Card style={{ width: '100%', height: '300px', margin: '5px 2px 0 5px' }}>
                                <Card.Body style={{ height: '100%', overflowY: 'auto' }}>
                                    <List>
                                        {this.state.tags.map(i => (
                                            <RadioItem key={i} style={{ height: '40px' }} checked={this.state.radiovalEx === i} onClick={() => this.onRadioChange(i)}>
                                                {i}
                                            </RadioItem>
                                        ))}
                                    </List>
                                </Card.Body>
                            </Card>
                            </Flex.Item>
                            <Flex.Item style={{flex:0.8}}>
                            <Flex.Item>
                                    <Card style={{ width: '95%', height: '300px', margin: '5px 5px 0 2px' }}>
                                        <Card.Body style={{ height: '100%', overflowY: 'auto' }}>
                                            <List>
                                                {
                                                    showMap()
                                                }
                                            </List>
                                        </Card.Body>
                                    </Card>
                                </Flex.Item>
                            </Flex.Item>
                        </Flex>
                      {/* <List.Item> */}
                      <WingBlank>
                        <WhiteSpace />
                        <Button type="warning" onClick={this.clearCondition}>清空条件</Button><WhiteSpace />
                        <Button type="primary" onClick={this.onModalSubmit}>确定</Button><WhiteSpace />
                      </WingBlank>
                      {/* </List.Item> */}
                    </List>
                  </Modal>
                }
            </div>
        );
    }
}