import React from 'react';
import {Button,Modal,Table, Icon} from 'antd';
import { observer } from 'mobx-react'
import Api from '@/service/api'
import { observable } from 'mobx'
import { Notification } from '@/components/Common-Library'

@observer
export default class ButtonModal extends React.Component{
    constructor(){
        super();
    }
    @observable 
    visible=false

    @observable 
    dataSource=[]

    @observable
    loading=false

    @observable
    selectRowKeys=[]

    componentDidMount(){
		this.props.childEvevnt && this.props.childEvevnt(this);
	}

    async handleClick(){ 
        // 请求后台的信息（利用传入的url地址请求）
        let url = this.props.url;
        let flg = this.props.flg;
        let extkey=this.props.extkey;
        console.log(extkey)
        //执行查询之前，extkey必须输入至少6位方便后台模糊查询，以免数据量过大导致崩溃
        if(extkey && extkey.length >= 6){
          this.visible=true
          this.loading=true
          const rtnmsg = await Api.post(url, { params: {flg,extkey},data: {} })
          if (rtnmsg.retcod == SUCCESS) {
              // 给table的dataSource赋值，重新渲染table
              this.dataSource = rtnmsg.data[this.props.dataKey];
              console.log(this.dataSource);
          }else{
              Notification.error({ message: url+'服务端请求失败!' })
          }
          this.loading=false
        }else{
          Notification.error({ message: '请输入编号的至少6位!' })
        }
    }
    handleCancel(){
        this.visible=false;
    }
    onSelect(row)
    {
        const {model,prefix} = this.props;
        if(model && prefix)   //默认赋值
        {
            model[`${prefix}_extkey`] = row.extkey || ""
            let adrblk=''
            let nam =row.nam
            let adr=row.adr
			let nam1=row.nam1|| ""
			let nam2=row.nam2|| ""
			let str1=row.str1|| ""
      let str2=row.str2|| ""
      let ptyinr=row.ptyinr|| ""
			if (nam1)
				adrblk=nam1
			if (nam2)
				adrblk=adrblk+"\r\n"+nam2
			if (str1)
				adrblk=adrblk+"\r\n"+str1
			if (str2)
				adrblk=adrblk+"\r\n"+str2
            model[`${prefix}_adrblk`] = adrblk;   
            model[`${prefix}_namcn`] = nam; 
            model[`${prefix}_adrcn`] = adr; 
            model[`${prefix}_ptyinr`] = ptyinr; 
            //model[`${prefix}_adrblk`] = (row.nam1 || "") + "\r\n" + (row.nam2 || "")+ "\r\n" + (row.str1 || "")+ "\r\n" + (row.str2 || "");
        }
        this.props.onSelect && this.props.onSelect(row)
        this.visible=false
    
    }
    render(){
        const pagination={
            pageSize:5,
            hideOnSinglePage:true
        }

        const columns=[
            // {
            //     title: '选择',
               
            //     key: 'select',
            //     width: 100,
            //     render:(val,row)=>
            //     {
            //         return <Icon type="search"  onClick={()=>this.onSelect(row)} />
            //     }
            // },
            {
                title: '客户号',
                dataIndex: 'extkey',
                key: 'extkey',
                width: 80,
            },
            {
                title: '中文名称',
                dataIndex: 'nam',
                key: 'nam',
                width: 230,
            },
            {
                title: '中文地址',
                dataIndex: 'adr',
                key: 'adr',
                width: 270,
            },
			{
                title: '英文名称1',
                dataIndex: 'nam1',
                key: 'nam1',
                width: 120,
            },
			{
                title: '英文名称2',
                dataIndex: 'nam2',
                key: 'nam2',
                width: 120,
            },
			// {
            //     title: '客户信息3',
            //     dataIndex: 'str1',
            //     key: 'str1',
            //     width: 120,
            // },
			// {
            //     title: '客户信息4',
            //     dataIndex: 'str2',
            //     key: 'str2',
            //     width: 120,
            // },
            {
                title: '电话',
                dataIndex: 'tel',
                key: 'tel',
                width: 100,
            },
            // {
            //     title: '传真',
            //     dataIndex: 'fax',
            //     key: 'fax',
            //     width: 100,
            // },
        ] 

        return (
          <div>
            <Button type="primary" icon="search" size="small" {...this.props} onClick={()=>this.handleClick()}/>
            <div style={{width: 1000}}>
              <Modal
                  visible={this.visible}
                  onCancel={() => this.handleCancel()}
                  footer={<Button onClick={() => this.handleCancel()}>取消</Button>}
                  width={1200}
              >
                <Table rowKey='inr'
                  columns={columns}
                  dataSource={this.dataSource}
                  onRow={record=>({
                      onDoubleClick:()=>this.onSelect(record)
                  })}
                  pagination={ pagination }
                  rowClassName={(row,index)=>
                    index%2===0 ? "tableOddStyle" : "tableEvenStyle"
                  }
                />
              </Modal>
          </div>
          </div>
        );
    }
}