import React from 'react';
import {connect, routerRedux} from 'dva';
import {Button, Input, Select } from "antd";
import styles from './style.less';
import {ConnectState} from "@/models/connect";
import {router} from "umi";

class TosUserCreate extends React.Component {

  //构造
  constructor(props) {
    super(props);
    this.state = {
      name: '',
      model: '',
      id: '',
      keeper: '',
      phone: '',
      status: '',
      province: undefined,
      city: undefined,
      district: undefined,
      street: undefined,
      provinceList: [],
      cityList: [{name: "未选择省"}],
      districtList: [{name: "未选择市"}],
      streetList: [{name: "未选择区"}],
      deviceStatus: '',
      sn: '',
      phoneBlur: undefined,
    }
  }

  /*-----------------   方法集  --------------- ---*/
  //加载省
  provinceload = (code) => {
    this.props.dispatch({
      type: 'deviceModel/getRegion',
      payload: {code: code,},
      callback: (res) => {
        if (res) {
          this.setState({
            provinceList: res.data,
          });
        }
      }
    });
  };
  //省变更
  provinceChange = (e) => {
    if (e == undefined) {
      this.setState({
        cityList: [{name: "未选择省"}],
        districtList: [{name: "未选择市"}],
        streetList: [{name: "未选择区"}],
        province: undefined,
        city: undefined,
        district: undefined,
        street: undefined,
      })
    } else {
      this.setState({province: {label: e.label,}});
      this.props.dispatch({
        type: 'deviceModel/getRegion',
        payload: {code: e.key,},
        callback: (res) => {
          if (res) {
            this.setState({
              cityList: res.data,
              city: undefined,
              district: undefined,
              street: undefined,
            });
          }
        }
      });
    }
  };
  //市变更
  cityChange = (e) => {
    if (e == undefined) {
      this.setState({
        districtList: [{name: "未选择市"}],
        streetList: [{name: "未选择区"}],
        city: undefined,
        district: undefined,
        street: undefined,
      })
    } else {
      this.setState({city: {label: e.label,}});
      this.props.dispatch({
        type: 'deviceModel/getRegion',
        payload: {code: e.key,},
        callback: (res) => {
          if (res) {
            this.setState({
              districtList: res.data,
              district: undefined,
              street: undefined,
            });
          }
        }
      });
    }
  };
  //区变更
  districtChange = (e) => {
    if (e == undefined) {
      this.setState({
        streetList: [{name: "未选择区"}],
        district: undefined,
        street: undefined,
      })
    } else {
      this.setState({district: {label: e.label,}});
      this.props.dispatch({
        type: 'deviceModel/getRegion',
        payload: {code: e.key,},
        callback: (res) => {
          if (res) {
            this.setState({
              streetList: res.data,
              street: undefined,
            });
          }
        }
      });
    }
  };
  //街道变更
  streetChange = (e) => {
    if (e == undefined) {
      this.setState({
        street: undefined,
      })
    } else {
      this.setState({street: {label: e.label,} });
    }
  };
  //app版本变更
  appVersionChange = (e) => {
    this.setState({appVersion: e.target.value});
  };
  //app版本变更
  firmwareChange = (e) => {
    this.setState({firmware: e.target.value});
  };
  //设备名称变更
  nameChange = (e) => {
    this.setState({name: e.target.value});
  };
  //设备模板变更
  modelChange = (e) => {
    this.setState({model: e.target.value});
  };
  //设备ID变更
  idChange = (e) => {
    this.setState({id: e.target.value});
  };
  //设备sn变更
  snChange = (e) => {
    this.setState({sn: e.target.value});
  };
  //设备sn变更
  snChange1 = (e) => {
    this.setState({sn1: e.target.value});
  };
  //设备sn变更
  snChange2 = (e) => {
    this.setState({sn2: e.target.value});
  };
  //管理员变更
  keeperChange = (e) => {
    this.setState({keeper: e.target.value});
  };
  //联系电话正则
  phoneBlur = () => {

    const params = {
 /*     deviceAddress: (this.state.province == undefined ? '' : this.state.province.label) +
        (this.state.city == undefined ? '' :  '-'+this.state.city.label) +
        (this.state.district == undefined ? '' : '-'+this.state.district.label)  +
        (this.state.street == undefined ? '' : '-'+this.state.street.label),
      deviceName: this.state.name,
      deviceModel: this.state.model,
      deviceKeeper: this.state.keeper,
      deviceID: this.state.id,
      deviceSerialNumber: this.state.sn,
      devicePhone: this.state.phone,
      deviceWorking: this.state.status == '' ? 2 : this.state.status,
      deviceStatus: this.state.deviceStatus ? this.state.deviceStatus : 0,
      deviceCreate: this.props.currentUser.userid,*/

      owerName: this.state.sn,
      owerPhone:this.state.sn1,
      owerEmail:this.state.sn2,
      communityName:this.state.model,
      buildingNumber:this.state.name,
      floorNumber:this.state.keeper,
      roomNumber:this.state.phone1,
      addressAndpostalCode:this.state.phone


    };
    console.log("params",params);
    this.props.dispatch({
      type: 'tUModel/saveOwner',
      payload: params,
      callback: (res) => {
        if (res.error_code == "0000") {
          alert(res.error_msg);
          this.back();
        } else if (res.error_code == "0002") {
          alert(res.error_msg);
          this.back();
        } else if (res.error_code == "0001"){
          alert(res.error_msg);
        } else if (res.error_code == "0003"){
          alert(res.error_msg)
        } else if(res.error_code == "0008"){
          alert(res.error_msg);
          window.location.href = '/';
          router.replace('/');
        }else {
          alert("提交错误！未知原因！");
        }
      }
    });

    /*if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(this.state.phone))){
      this.setState({
        phoneBlur: false,
      })
    }else{
      this.setState({
        phoneBlur: true,
      },() => {
        if(this.state.phoneBlur==true) {
          const params = {
            deviceAddress: (this.state.province == undefined ? '' : this.state.province.label) +
              (this.state.city == undefined ? '' :  '-'+this.state.city.label) +
              (this.state.district == undefined ? '' : '-'+this.state.district.label)  +
              (this.state.street == undefined ? '' : '-'+this.state.street.label),
            deviceName: this.state.name,
            deviceModel: this.state.model,
            deviceKeeper: this.state.keeper,
            deviceID: this.state.id,
            deviceSerialNumber: this.state.sn,
            devicePhone: this.state.phone,
            deviceWorking: this.state.status == '' ? 2 : this.state.status,
            deviceStatus: this.state.deviceStatus ? this.state.deviceStatus : 0,
            deviceCreate: this.props.currentUser.userid,
          };
          console.log("params",params);
          this.props.dispatch({
            type: 'deviceModel/saveDevice',
            payload: params,
            callback: (res) => {
              if (res.error_code == "0000") {
                alert(res.error_msg);
                this.back();
              } else if (res.error_code == "0002") {
                alert(res.error_msg);
                this.back();
              } else if (res.error_code == "0001"){
                alert(res.error_msg);
              } else if (res.error_code == "0003"){
                alert(res.error_msg)
              } else if(res.error_code == "0008"){
                alert(res.error_msg);
                window.location.href = '/';
                router.replace('/');
              }else {
                alert("提交错误！未知原因！");
              }
            }
          });
        }
      });
    }*/
  };
  //联系电话变更
  phoneChange = (e) => {
    this.setState({phone: e.target.value});
  };
  //联系电话1变更
  phoneChange1 = (e) => {
    this.setState({phone1: e.target.value});
  };
  //提交
  onSubmit = () => {
    this.phoneBlur();
  };
  //跳转到设备页面
  back = () => {
    this.props.dispatch(routerRedux.push({
      pathname: '/UserManagement/tosUser',
    }))
  };
  //初始化
  componentDidMount() {
    if(this.props.location.query!=null) {
      const params = this.props.location.query;
      this.setState({
        name: params.deviceName,
        model: params.deviceModel,
        id: params.deviceID,
        sn: params.deviceSerialNumber,
        keeper: params.deviceKeeper,
        phone: params.devicePhone,
        phone1:params.devicePhone1,
        status: params.deviceWorking,
        deviceStatus: params.deviceStatus,
      });
      if(params.deviceAddress!=null){
        const strs = params.deviceAddress.split("-");
        if(strs[0]==''){
          return;
        }
        this.props.dispatch({
          type: 'deviceModel/getRegionList',
          payload: {
            address: params.deviceAddress
          },
          callback: (res) => {
            if (res) {
              this.setState({
                cityList: res.cityList?res.cityList:[{name: "未选择省"}],
                districtList: res.districtList?res.districtList:[{name: "未选择市"}],
                streetList: res.streetList?res.streetList:[{name: "未选择区"}],
                province: {label:strs[0]},
                city: strs[1]?{label:strs[1]}:undefined,
                district: strs[2]?{label:strs[2]}:undefined,
                street: strs[3]?{label:strs[3]}:undefined,
              });
            }
          }
        });
      }else{
        this.setState({
          province: undefined,
          city: undefined,
          district: undefined,
          street: undefined,
        });
      }
    }
    this.provinceload(0);
  }
  /*--------------------------------------*/
  //渲染
  render() {
    const { name, model, keeper, phone,phone1, province, city, district, street,
      provinceList, cityList, districtList, streetList, phoneBlur, sn,sn1,sn2 } = this.state;
    /* const provinceSelect = provinceList.map((item) => (
       <Select.Option value={item.code} label={item.name}>{item.name}</Select.Option>
     ));
     const citySelect = cityList.map((item) => (
       <Select.Option value={item.code} label={item.name}>{item.name}</Select.Option>
     ));
     const districtSelect = districtList.map((item) => (
       <Select.Option value={item.code} label={item.name}>{item.name}</Select.Option>
     ));
     const streetSelect = streetList.map((item) => (
       <Select.Option value={item.code} label={item.name}>{item.name}</Select.Option>
     ));*/
    return(
      <div className={styles.body}>
        <div style={{marginTop:48}}>
          <span className={styles.detailsTitle}>Create New Owner</span>
          <div className={styles.detailsBox}>
            <div>
              <span className={styles.detailsContent}>Owner's Name</span>
              <Input className={styles.input} value={sn} placeholder="OwnerName" onChange={(e) => this.snChange(e)}/>
              <Input className={styles.input} value={sn1} placeholder="Phone" onChange={(e) => this.snChange1(e)}/>
              <Input className={styles.input} value={sn2} placeholder="E-mail" onChange={(e) => this.snChange2(e)}/>
            </div>
            <div>
              <span className={styles.detailsContent}>Project / community</span>
              <Input className={styles.input} value={model}  placeholder="Project Name" onChange={(e) => this.modelChange(e)} />
              {/*<span className={styles.detailsContent}>设备名称</span>*/}
              <Input className={styles.input} value={name}   placeholder="Building No"  onChange={(e) => this.nameChange(e)}  />
              <Input className={styles.input} value={keeper} placeholder="Floor" onChange={(e) => this.keeperChange(e)}/>
              <Input className={styles.input}
                     value={phone1} placeholder="Room Number"
                     onChange={(e) => this.phoneChange1(e)}
              />
            </div>
            <div>
              {/*<span className={styles.detailsContent}>管理员</span>*/}
              {/*<Input className={styles.input} value={keeper} onChange={(e) => this.keeperChange(e)}/>*/}
              {/* <span className={styles.detailsContent}>联系电话</span>
              {phoneBlur != false?
                <Input className={styles.input}
                       value={phone}
                       onChange={(e) => this.phoneChange(e)}
                />:''}*/}
              {/*{phoneBlur == false?*/}
              <Input className={styles.input1}
                // style={{border:"1px solid red"}}
                     value={phone} placeholder="Address + postcode"
                     onChange={(e) => this.phoneChange(e)}
              />
              {/*  :''}*/}
              {/*  {phoneBlur == false?
                <span style={{color:"red"}}>请输入正确电话号码</span>:''}*/}
            </div>
            {/* <div>
              <span className={styles.detailsContent}>地址</span>
              <Select className={styles.downButton}
                      placeholder="省"
                      onChange={(e) => this.provinceChange(e)}
                      allowClear={true}
                      labelInValue={true}
                      value={province}>
                {provinceSelect}
              </Select>
              <Select className={styles.downButton}
                      placeholder="市"
                      onChange={(e) => this.cityChange(e)}
                      allowClear={true}
                      labelInValue={true}
                      value={city}>
                {citySelect}
              </Select>
              <Select className={styles.downButton}
                      placeholder="区"
                      onChange={(e) => this.districtChange(e)}
                      allowClear={true}
                      labelInValue={true}
                      value={district}>
                {districtSelect}
              </Select>
              <Select className={styles.downButton}
                      placeholder="街道"
                      onChange={(e) => this.streetChange(e)}
                      allowClear={true}
                      labelInValue={true}
                      value={street}>
                {streetSelect}
              </Select>
              <Input className={styles.input} placeholder="请输入详细位置"/>
            </div>*/}
            <div style={{marginTop:120}}>
              <Button className={styles.button2} onClick={() => this.onSubmit()}>Submit</Button>
              <Button className={styles.button1} onClick={() => this.back()}>Return</Button>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default connect(({user}:ConnectState) => ({
  currentUser: user.currentUser,
}))(TosUserCreate);
