var FormMixin = {
    linkState(attr) {
        var dots = attr.name.split('.'),
            state = this.state,
            name = dots[0];
        for(let i=1; i<dots.length; i++) {
            let r = /^(.+)\[(\d+)\]$/.exec(name);
            if(r) {
                name = r[1];
                if(state[name]===undefined) state[name] = [];
                state = state[name];
                name = Number(r[2]);
            }
            if(state[name]===undefined) state[name] = {};
            state = state[name];
            name = dots[i];
        }

        var getter = function() {
            return state[name];
        };
        var setter = function(value) {
            state[name] = value;
            this.forceUpdate();
        }.bind(this);

        switch(attr.type) {
        case 'checkbox':
        case 'radio':
            attr.checked = getter()===attr.value;
            break;
        case 'file':
            break;
        default:
            attr.value = getter();
        }

        attr.onChange = function(e) {
            var that = e.target;
            switch(that.type) {
            case 'checkbox':
                setter(that.checked ? that.value : undefined);
                break;
            case 'radio':
                that.checked && setter(that.value);
                break;
            case 'file':
                var file = that.files[0];
                var reader = new FileReader();
                switch(that.name){
                    case 'encodedSignedMark':
                        reader.onloadend = function(e) {
                            setter(e.target.result);
                        };
                        reader.readAsText(file);
                        break;
                    default:
                        var size = file && file.size/1024;
                        var types = ["image/png","image/jpeg","image/bmp"];
                        if(size < 5 || size > 5120 || types.indexOf(file.type)<0){
                            that.nextElementSibling.innerHTML = "上传的文件,大小或者类型不符合要求";
                            return;
                        }
                        that.nextElementSibling.innerHTML = "";
                        reader.onloadend = function(e) {
                            setter(e.target.result.split(',')[1]);
                        };
                        reader.readAsDataURL(file);
                        break;
                }
                break;
            default:
                setter(that.value);
            }
        };
        return attr;
    },
    onSetState(attr) {
        return e => this.setState(attr);
    }
};

var SelectYears = React.createClass({
    render() {
        return (
            <select {...this.props}>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
            </select>
        )
    }
});

var LaunchPhase = React.createClass({
    render() {
        return (
            <select {...this.props}>
            <option value="sunrise">sunrise</option>
            <option value="landrush">landrush</option>
            <option value="claims">claims</option>
            <option value="open">open</option>
            <option value="custom">custom</option>
            </select>
        )
    }
});

var SelectType = React.createClass({
    render() {
        return (
            <select {...this.props}>
            <option value="A">A</option>
            <option value="AAAA">AAAA</option>
            <option value="CNAME">CNAME</option>
            <option value="DNAME">DNAME</option>
            <option value="MX">MX</option>
            <option value="NS">NS</option>
            <option value="SPF">SPF</option>
            <option value="TXT">TXT</option>
            <option value="PTR">PTR</option>
            <option value="URL">URL</option>
            </select>
        )
    }
});

var SelectStatus = React.createClass({
    render() {
        return (
            <select {...this.props}>
            <option value="-1"></option>
            <option value="0">未通过</option>
            <option value="1">通过</option>
            </select>
        )
    }
});

var SelectOrgIdType = React.createClass({
    render() {
        return (
            <select {...this.props}>
            <option value="1">工商营业执照</option>
            <option value="2">组织机构代码证</option>
            <option value="4">统一社会信用代码证书</option>
            <option value="8">部队代号</option>
            <option value="9">军队单位对外有偿服务系可证</option>
            <option value="10">事业单位法人证书</option>
            <option value="11">外国企业常驻代表机构登记证</option>
            <option value="14">社会团体法人登记证书</option>
            <option value="15">宗教活动场所登记证</option>
            <option value="16">民办非企业单位登记证书</option>
            <option value="17">基金会法人登记证书</option>
            <option value="18">律师事务所执业许可证</option>
            <option value="19">外国在华文化中心登记证</option>
            <option value="20">外国政府旅游部门常驻代表机构批准登记证</option>
            <option value="21">司法鉴定许可证</option>
            <option value="22">境外机构证件</option>
            <option value="23">社会服务机构登记证书</option>
            <option value="24">民办学校办学许可证</option>
            <option value="25">医疗机构执业许可证</option>
            <option value="26">公证机构执业证</option>
            <option value="27">北京市外国驻华使馆人员子女学校办学许可证</option>
            <option value="30">其他(只允许填统一社会信用代码)</option>
            </select>
        )
    }
});
var DsData = React.createClass({
    render() {
        return (
            <div>
              keyTag:
              <input {...this.props.linkState({
                  type: 'text',
                  name: this.props.name+'.keyTag',
                  size: '5',
                  maxLength: '5'
              })}/>
              alg:
              <input {...this.props.linkState({
                  type: 'text',
                  name: this.props.name+'.alg',
                  size: '3',
                  maxLength: '3'
              })}/>
              digestType:
              <input {...this.props.linkState({
                  type: 'text',
                  name: this.props.name+'.digestType',
                  size: '3',
                  maxLength: '3'
              })}/>
              <br/>
              digest:
              <input {...this.props.linkState({
                  type: 'text',
                  name: this.props.name+'.digest',
                  size: '45',
                  maxLength: '256'
              })}/>
            </div>
        )
    }
});

var PostalInfo = React.createClass({
    render() {
        return (
            <table border="0">
            <tbody>
              <tr>
                <td>联系人姓名：</td>
                <td>
                  <input {...this.props.linkState({
                      type: 'text',
                      name: this.props.name+'.name',
                      size: '40',
                      maxLength: '64',
                      readOnly: this.props.readOnly
                  })}/>
                  <label>中英文均可，如中文填写不少于<strong className="red">2</strong>个汉字</label>
                </td>
              </tr>
              <tr>
                <td>所在组织：</td>
                <td>
                  <input {...this.props.linkState({
                      type: 'text',
                      name: this.props.name+'.org',
                      size: '40',
                      maxLength: '64',
                      readOnly: this.props.readOnly
                  })}/>
                  <label>中英文均可，如中文填写不少于<strong className="red">2</strong>个汉字</label>
                </td>
              </tr>
              <tr>
                <td>所在街道：</td>
                <td>
                  <input {...this.props.linkState({
                      type: 'text',
                      name: this.props.name+'.street1',
                      size: '40',
                      maxLength: '64'
                  })}/>
                  <label>中英文均可，需填写完整地址，不能只写某市、区之类，如中文填写，不得少于<strong className="red">8</strong>个汉字</label>
                </td>
              </tr>
              <tr>
                <td></td>
                <td>
                  <input {...this.props.linkState({
                      type: 'text',
                      name: this.props.name+'.street2',
                      size: '40',
                      maxLength: '64'
                  })}/>
                </td>
              </tr>
              <tr>
                <td></td>
                <td>
                  <input {...this.props.linkState({
                      type: 'text',
                      name: this.props.name+'.street3',
                      size: '40',
                      maxLength: '64'
                  })}/>
                </td>
              </tr>
              <tr>
                <td>所在城市：</td>
                <td>
                  <input {...this.props.linkState({
                      type: 'text',
                      name: this.props.name+'.city',
                      size: '40',
                      maxLength: '64'
                  })}/>
                  <label>中英文均可，如中文填写不少于<strong className="red">2</strong>个汉字</label>
                </td>
              </tr>
              <tr>
                <td>所在省份：</td>
                <td>
                  <input {...this.props.linkState({
                      type: 'text',
                      name: this.props.name+'.sp',
                      size: '40',
                      maxLength: '64'
                  })}/>
                  <label>中英文均可，如中文填写不少于<strong className="red">2</strong>个汉字</label>
                </td>
              </tr>
              <tr>
                <td>邮政编码：</td>
                <td>
                  <input {...this.props.linkState({
                      type: 'text',
                      name: this.props.name+'.pc',
                      size: '10',
                      maxLength: '10'
                  })}/>
                  <label>国内邮编均为<strong className="red">6</strong>位数字</label>
                </td>
              </tr>
              <tr>
                <td>国家代码：</td>
                <td>
                  <input {...this.props.linkState({
                      type: 'text',
                      name: this.props.name+'.cc',
                      readOnly: true,
                      size: '2',
                      maxLength: '2'
                  })}/>
                  <label>两个英文字符，中国为CN</label>
                </td>
              </tr>
            </tbody>
            </table>
        )
    }
});

var OpResult = React.createClass({
    render() {
        switch(typeof(this.props.content)) {
        case 'object':
            return (
                <table>
                <tbody>
                  {forJSON(this.props.content, (key, value) => (
                    <tr key={key}>
                      <td>{key}</td>
                      <td>{JSON.stringify(value)}</td>
                    </tr>
                  ))}
                </tbody>
                </table>
            )
        default:
            return (
                <pre style={{display: this.props.content ? "block" : "none"}}>{this.props.content}</pre>
            )
        }
    }
});

var List = React.createClass({
    mixins: [FormMixin],
    shouldUpdate: false,
    getInitialState() {
        return {
            rows: [],
            page: 1,
            pages: 0,
            name: '',
            contactId: '',
            email: '',
            emailOk: '-1',
            uniIdOk: '-1'
        }
    },
    getParam(){
        var ret = {};
        switch(this.props.obj) {
        case 'domain': 
				if(TRIM(this.state.name)) ret.name = TRIM(this.state.name);
                ret.days = this.state.days;
                break;
        case 'contact':
                if(TRIM(this.state.contactId)) ret.contactId = TRIM(this.state.contactId);
                if(TRIM(this.state.email)) ret.email = TRIM(this.state.email);
                if(this.state.emailOk != '-1') ret.emailOk = this.state.emailOk;
                if(this.state.uniIdOk != '-1') ret.uniIdOk = this.state.uniIdOk;
                break;
        }
        return ret;
    },
    load(page) {
        api.list(this.props.obj, page, this.getParam(), function(code, data) {
            switch(code) {
            case '1000':
                var ret = this.getParam();
                for(var i in ret){
                    data[i] = ret[i];
                }
                this.shouldUpdate = true;
                this.replaceState(data, function() {
                    this.shouldUpdate = false;
                });
                break;
            default:
                logout();
            }
        }.bind(this));
    },
    shouldComponentUpdate(nextProps, nextState) {
        if(this.shouldUpdate) return true;
        this.load(nextState.page || this.state.page);
        return false;
    },
    onPrev() {
        this.load(this.state.page-1);
    },
    onNext() {
        this.load(this.state.page+1);
    },
    onSkip() {
        this.load(this.refs.page.value.trim());
    },
    onAuth(link, value) {
      if(value === null){
        return '认证中...';
      }else if(value){
        return '通过';
      }else{
        return link;
      }
    },
    render() {
        var searchBox;
        switch(this.props.obj){
            case 'domain':
                searchBox = (<ul>
                        <li><label for="name">域名：</label><input id="name" {...this.linkState({type:"text",name:"name"})} /></li>
                        <li><label for="days" className="lbl-ck"><input id="days" {...this.linkState({type:"checkbox",name: 'days',value: '30'})}/>30天内到期</label></li>
                        <li><input type="button" className="onRequest" onClick={ this.load.bind(this,1)} value="查 询"/></li>
                    </ul>
                );break;
            case 'contact':
                searchBox = (<ul>
                        <li><label for="contactId">ID：</label><input id="contactId" {...this.linkState({type:"text",name:"contactId"})} /></li>
                        <li><label for="email">邮箱：</label><input id="email" {...this.linkState({type:"text",name:"email"})}/></li>
                        <li><label for="emailOk">邮箱状态：</label><SelectStatus id="emailOk" {...this.linkState({name: 'emailOk'})}/></li>
                        <li><label for="uniIdOk">联系人状态：</label><SelectStatus id="uniIdOk" {...this.linkState({name: 'uniIdOk'})}/></li>
                        <li><input type="button" className="onRequest" onClick={ this.load.bind(this,1)} value="查 询"/></li>
                    </ul>                    
                );break;
            default: searchBox = ""; break;
        }               
        return (
            <div>
              {this.props.children}
              <div style={{display: searchBox? 'block':'none'}} className="search-box">{ searchBox }</div>
              <table className="datatable" width="100%">
              <tbody>
                <tr className="th">
                  {forJSON(this.props.head, (key, value) => <th key={key}>{value}</th>)}
                </tr>
                {this.state.rows.map(row =>
                    <tr key={row.id}>
                      {forJSON(this.props.head, key => {
                          switch(key) {
                          case 'op':
                              return (
                                  <td key={key}>{
                                    JOIN(forJSON(
                                        {
                                            onUpdate: '修改',
                                            onCancel: '取消',
                                            onApprove: '批准',
                                            onReject: '拒绝',
                                            onRestore: (row.rgp==='pendingRestore') ? '提交报告' : '申请赎回',
                                            onResolve: '解析'
                                        },
                                        (e, v) => this.props[e]
                                                ? <a key={e} onClick={this.props[e].bind(this, row.id, row.rgp)}>{v}</a>
                                                : undefined
                                    ), <b> | </b>)
                                  }</td>
                              );
                              break;
                          case 'emailOk':
                              return (
                                  <td key={key}>{
                                    this.onAuth(<a className="link" onClick={this.props['onEmailAuth'].bind(this, row.email)}>未通过</a>, row[key])                               
                                  }</td>
                                );
                              break;
                          case 'uniIdOk':
                              return (
                                  <td key={key}>{
                                    this.onAuth(<a className="link" onClick={this.props['onContactAuth'].bind(this, row.id, row.name, row.org)}>未通过</a>, row[key])                               
                                  }</td>
                                );
                              break;
                          default:
                              return (<td key={key}>{row[key]}</td>);
                              break;
                          }
                      })}
                    </tr>
                )}
              </tbody>
              </table>
              <table className="pagetable" width="100%">
              <tbody>
                <tr>
                  <td style={{display: this.state.pages>0 ? "block" : "none"}}>
                    页号：({this.state.page}/{this.state.pages})
                    <a style={{visibility: this.state.page>1 ? "visible" : "hidden"}}
                     onClick={this.onPrev}>上一页</a>
                    <a style={{visibility: this.state.page<this.state.pages ? "visible" : "hidden"}}
                     onClick={this.onNext}>下一页</a>
                    转到：
                    <input ref="page" type="text" size="4" name="page"/>
                    <input type="button" value="Go" className="btn-goto" onClick={this.onSkip}/>
                  </td>
                  <td>{
                    forJSON(
                        {
                            onCreate: '创建',
                            onRequest: '申请转入'
                        },
                        (e, v) => this.props[e]
                                ? <a key={e} onClick={this.props[e]} className={e}>{v}</a>
                                : undefined
                    )
                  }</td>
                </tr>
              </tbody>
              </table>
            </div>
        )
    }
});

var ChangePasswd = React.createClass({
    mixins: [FormMixin],
    shouldUpdate: false,
    getInitialState() {
        return {}
    },
    shouldComponentUpdate(nextProps, nextState) {
        if(this.shouldUpdate) return true;
        api.show('password', function(code, data) {
            this.shouldUpdate = true;
            this.replaceState({password: data}, function() {
                this.shouldUpdate = false;
            });
        }.bind(this));
        return false;
    },
    handleSubmit(e) {
        api.update('password', TRIM(this.state.password), function(code) {
            switch(code) {
            case '1000':
                this.state.message = "修改口令成功";
                break;
            case '2501':
                logout();
                return;
            default:
                this.state.message = "修改口令失败";
            }
            this.forceUpdate();
        }.bind(this));
    },
    render() {
        return (
            <div>
            <table align="center" border="0">
            <tbody>
              <tr>
                <td align="center" colSpan="2">{this.props.children}</td>
              </tr>
              <tr>
                <td>口令：</td>
                <td>
                  <input {...this.linkState({
                      name: 'password',
                      type: 'text',
                      size: 16,
                      maxLength: 16
                  })}/>
                </td>
              </tr>
              <tr>
                <td height="16" colSpan="2"></td>
              </tr>
              <tr>
                <td align="center" colSpan="2">
                  <input type="button" value="提交" onClick={this.handleSubmit}/>
                </td>
              </tr>
            </tbody>
            </table>
            <OpResult content={this.state.message} />
            </div>
        )
    }
});

var Check = React.createClass({
    mixins: [FormMixin],
    getInitialState() {
        return {
            name: '',
            phase: 'open',
            type: 'avail',
            value: ''
        }
    },
    getName() {
        return this.props.obj==='launch'
             ? {
                   name: SPLIT(this.state.name),
                   phase: this.state.phase,
                   type: this.state.type
               }
             : SPLIT(this.state.name);
    },
    handleSubmit(e) {
        api.check(this.props.obj==='launch' ? 'domain' : this.props.obj, this.getName(), function(code, data) {
            switch(code) {
            case '2501':
                logout();
                break;
            default:
                this.setState({value: data});
            }
        }.bind(this));
    },
    render() {
        switch(this.props.obj) {
        case 'domain':
        case 'host':
        case 'contact':
            return (
                <div>
                <table align="center" border="0">
                <tbody>
                  <tr>
                    <td align="center">{this.props.children}</td>
                  </tr>
                  <tr>
                    <td align="center">
                      <textarea {...this.linkState({
                          name: 'name',
                          rows: '4',
                          cols: '40',
                          onFocus: this.onSetState({name:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td height="16"></td>
                  </tr>
                  <tr>
                    <td align="center">
                      <input type="button" value="提交" onClick={this.handleSubmit}/>
                    </td>
                  </tr>
                </tbody>
                </table>
                <OpResult content={this.state.value} />
                </div>
            );
        case 'launch':
            return (
                <div>
                <table align="center" border="0">
                <tbody>
                  <tr>
                    <td colSpan="2" align="center">{this.props.children}</td>
                  </tr>
                  <tr>
                    <td>
                      <textarea {...this.linkState({
                          name: 'name',
                          rows: '4',
                          cols: '40',
                          onFocus: this.onSetState({name:'', value:''})
                      })}/>
                    </td>
                    <td>
                      <LaunchPhase {...this.linkState({name: 'phase'})}/><br/>
                      <input {...this.linkState({
                          name: 'type',
                          type: 'radio',
                          value: 'claims'
                      })}/>claims<br/>
                      <input {...this.linkState({
                          name: 'type',
                          type: 'radio',
                          value: 'avail'
                      })}/>avail<br/>
                    </td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr>
                    <td colSpan="2" align="center">
                      <input type="button" value="提交" onClick={this.handleSubmit}/>
                    </td>
                  </tr>
                </tbody>
                </table>
                <OpResult content={this.state.value} />
                </div>
            );
        }
    }
});

var Info = React.createClass({
    mixins: [FormMixin],
    getInitialState() {
        return {
            name: '',
            phase: 'open',
            applicationID: '',
            value: ''
        }
    },
    getName() {
        return this.props.obj==='launch'
             ? {
                   name: TRIM(this.state.name),
                   phase: this.state.phase,
                   applicationID: TRIM(this.state.applicationID)
               }
             : TRIM(this.state.name);
    },
    handleSubmit(e) {
        api.info(this.props.obj==='launch' ? 'domain' : this.props.obj, this.getName(), function(code, data) {
            switch(code) {
            case '2501':
                logout();
                break;
            default:
                this.setState({value: data});
            }
        }.bind(this));
    },
    render() {
        switch(this.props.obj) {
        case 'domain':
        case 'host':
        case 'contact':
            return (
                <div>
                <table align="center" border="0" className="formtable">
                <tbody>
                  <tr>
                    <td align="center">{this.props.children}</td>
                  </tr>
                  <tr>
                    <td>
                      <input {...this.linkState({
                          name: 'name',
                          type: 'text',
                          size: '40',
                          onFocus: this.onSetState({name:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td align="center">
                      <input type="button" value="提交" onClick={this.handleSubmit}/>
                    </td>
                  </tr>
                </tbody>
                </table>
                <OpResult content={this.state.value} />
                </div>
            );
        case 'launch':
            return (
                <div>
                <table className="formtable" border="0" align="center">
                <tbody>
                  <tr>
                    <td align="center" colSpan="2">{this.props.children}</td>
                  </tr>
                  <tr>
                    <td>域名:</td>
                    <td>
                      <input {...this.linkState({
                          name: 'name',
                          type: 'text',
                          size: '40',
                          onFocus: this.onSetState({name:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>phase:</td>
                    <td><LaunchPhase {...this.linkState({name: 'phase'})}/></td>
                  </tr>
                  <tr>
                    <td>applicationID:</td>
                    <td>
                      <input {...this.linkState({
                          name: 'applicationID',
                          type: 'text',
                          size: '21',
                          onFocus: this.onSetState({applicationID:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td align="center" colSpan="2">
                      <input type="button" value="提交" onClick={this.handleSubmit}/>
                    </td>
                  </tr>
                </tbody>
                </table>
                <OpResult content={this.state.value} />
                </div>
            );
        }
    }
});

var Delete = React.createClass({
    mixins: [FormMixin],
    getInitialState() {
        return {
            name: '',
            phase: 'open',
            applicationID: '',
            value: ''
        }
    },
    getName() {
        return this.props.obj==='launch'
             ? {
                   name: TRIM(this.state.name),
                   phase: this.state.phase,
                   applicationID: TRIM(this.state.applicationID)
               }
             : TRIM(this.state.name);
    },
    handleSubmit(e) {
        api.delete(this.props.obj==='launch' ? 'domain' : this.props.obj, this.getName(), function(code, data) {
            switch(code) {
            case '2501':
                logout();
                break;
            default:
                this.setState({value: data});
            }
        }.bind(this));
    },
    render() {
        switch(this.props.obj) {
        case 'domain':
        case 'host':
        case 'contact':
            return (
                <div>
                <table align="center" border="0" className="formtable">
                <tbody>
                  <tr>
                    <td align="center">{this.props.children}</td>
                  </tr>
                  <tr>
                    <td>
                      <input {...this.linkState({
                          name: 'name',
                          type: 'text',
                          size: '40',
                          onFocus: this.onSetState({name:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td align="center">
                      <input type="button" value="提交" onClick={this.handleSubmit}/>
                    </td>
                  </tr>
                </tbody>
                </table>
                <OpResult content={this.state.value} />
                </div>
            );
        case 'launch':
            return (
                <div>
                <table className="formtable" border="0" align="center">
                <tbody>
                  <tr>
                    <td align="center" colSpan="2">{this.props.children}</td>
                  </tr>
                  <tr>
                    <td>域名:</td>
                    <td>
                      <input {...this.linkState({
                          name: 'name',
                          type: 'text',
                          size: '40',
                          onFocus: this.onSetState({name:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>phase:</td>
                    <td><LaunchPhase {...this.linkState({name: 'phase'})}/></td>
                  </tr>
                  <tr>
                    <td>applicationID:</td>
                    <td>
                      <input {...this.linkState({
                          name: 'applicationID',
                          type: 'text',
                          size: '21',
                          onFocus: this.onSetState({applicationID:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td align="center" colSpan="2">
                      <input type="button" value="提交" onClick={this.handleSubmit}/>
                    </td>
                  </tr>
                </tbody>
                </table>
                <OpResult content={this.state.value} />
                </div>
            );
        }
    }
});

var initData = {
  name: '',
  has_loc: 'none',
  voice: '86.53186920439',
  fax: '86.53186920439',
  email: '88997766554@qq.com',
  int: {
    'name': '张三丰',
    'org': '趵突泉旅游文化有限公司',
    'street1': '历下区趵突泉南路1号',
    'street2': '',
    'street3': '',
    'city': '济南市',
    'sp': '山东省',
    'pc': '250000',
    'cc': 'CN'
  },
  value: ''
};

var Create = React.createClass({
    mixins: [FormMixin],
    getInitialState() {
        switch(this.props.obj) {
        case 'domain':
            return {name:'', y:'1', value:''};
        case 'host':
            return {name:'', value:''};
        case 'contact':
            return initData;
        case 'launch':
            return {name:'', y:'1', phase:'open', value:''};
        }
    },
    getPostal(info) {
        return {
            name: info.name,
            org: info.org,
            addr: {
                street: [info.street1, info.street2, info.street3],
                city: info.city,
                sp: info.sp,
                pc: info.pc,
                cc: info.cc
            }
        }
    },
    getParam() {
        switch(this.props.obj) {
        case 'domain':
            return {
                name: TRIM(this.state.name),
                y: this.state.y,
                ns: SPLIT(this.state.ns),
                registrant: TRIM(this.state.registrant),
                admin: TRIM(this.state.admin),
                tech: TRIM(this.state.tech),
                billing: TRIM(this.state.billing),
                pw: randomPWD(8),
                dsData: this.state.dsData
            };
        case 'host':
            return {
                name: TRIM(this.state.name),
                ip: SPLIT(this.state.ip)
            };
        case 'contact':
            var r = {
                name: TRIM(this.state.name),
                int: this.getPostal(this.state.int),
                loc: this.state.has_loc!=='none'
                   ? this.getPostal(this.state.loc)
                   : undefined
            };
            if(TRIM(this.state.voice)){
				if(/^86\.[0-9]{1,14}/.test(TRIM(this.state.voice))){
					r.voice = '+'+TRIM(this.state.voice)+TRIM(this.state.xv);
				}else if(!/^86\.$/.test(TRIM(this.state.voice))){
					r.voice = '+86.'+TRIM(this.state.voice)+TRIM(this.state.xv);
				}else{
                    r.voice = '+86.01012345678';
                }
            }else{
                r.voice = '+86.01012345678';
            }
            if(TRIM(this.state.fax)){
				if(/^86\.[0-9]{1,14}/.test(TRIM(this.state.fax))){
					r.fax = '+'+TRIM(this.state.fax) + TRIM(this.state.xf);
				}else if(!/^86\.$/.test(TRIM(this.state.fax))){
					r.fax ='+86.'+TRIM(this.state.fax) + TRIM(this.state.xf);
				}else{
                    r.fax = '+86.01012345678';
                }
            }else {
                r.fax = '+86.01012345678';
            }
            r.email = TRIM(this.state.email);
            r.pw = randomPWD(8);
			return r;	
        case 'launch':
            return {
                name: TRIM(this.state.name),
                y: this.state.y,
                ns: SPLIT(this.state.ns),
                registrant: TRIM(this.state.registrant),
                admin: TRIM(this.state.admin),
                tech: TRIM(this.state.tech),
                billing: TRIM(this.state.billing),
                pw: randomPWD(8),
                dsData: this.state.dsData,
                phase: this.state.phase,
                encodedSignedMark: this.state.encodedSignedMark
            };
        }
    },
    handleSubmit(e) {
        api.create(this.props.obj==='launch' ? 'domain' : this.props.obj, this.getParam(), function(code, data) {
            switch(code) {
            case '1000':
                this.props.onFinish();
                break;
            case '2501':
                logout();
                break;
            default:
                this.setState({value: data});
            }
        }.bind(this));
    },
    render() {
        switch(this.props.obj) {
        case 'domain':
            return (
                <div>
                <table border="0" align="center">
                <tbody>
                  <tr align="center">
                    <td colSpan="2">{this.props.children}</td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr>
                    <td>域名：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'name',
                          type: 'text',
                          size: '40',
                          maxLength: '255',
                          onFocus: this.onSetState({name:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>交费：</td>
                    <td><SelectYears {...this.linkState({name: 'y'})}/>年</td>
                  </tr>
                  <tr>
                    <td>NS主机：</td>
                    <td>
                      <textarea {...this.linkState({
                          name: 'ns',
                          rows: '6',
                          cols: '40',
                          onFocus: this.onSetState({ns:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>登记人：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'registrant',
                          type: 'text',
                          size: '16',
                          maxLength: '16',
                          onFocus: this.onSetState({registrant:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>管理联系人：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'admin',
                          type: 'text',
                          size: '16',
                          maxLength: '16',
                          onFocus: this.onSetState({admin:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>交费联系人：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'billing',
                          type: 'text',
                          size: '16',
                          maxLength: '16',
                          onFocus: this.onSetState({billing:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>技术联系人：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'tech',
                          type: 'text',
                          size: '16',
                          maxLength: '16',
                          onFocus: this.onSetState({tech:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr>
                    <td>secDNS：</td>
                    <td><DsData name="dsData" linkState={this.linkState}/></td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr align="center">
                    <td colSpan="2">
                      <input type="button" value="提交" onClick={this.handleSubmit}/>
                    </td>
                  </tr>
                </tbody>
                </table>
                <OpResult content={this.state.value} />
                </div>
            );
        case 'host':
            return (
                <div>
                <table>
                <tbody>
                  <tr>
                    <td colSpan="2">{this.props.children}</td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr>
                    <td>主机名：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'name',
                          type: 'text',
                          size: '40',
                          maxLength: '255',
                          onFocus: this.onSetState({name:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>IP地址：</td>
                    <td>
                      <textarea {...this.linkState({
                          name: 'ip',
                          rows: '6',
                          cols: '40',
                          onFocus: this.onSetState({ip:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr align="center">
                    <td colSpan="2"><input type="button" value="提交" onClick={this.handleSubmit} /></td>
                  </tr>
                </tbody>
                </table>
                <OpResult content={this.state.value} />
                </div>
            );
        case 'contact':
            return (
                <div>
                <table border="0" align="center">
                <tbody>
                  <tr align="center">
                    <td colSpan="2"><b>填写联系人信息</b></td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr>
                    <td style={{"vertical-align": 'top'}}>联系人ID：</td>
                    <td>
                      <input style={{width: '286px'}} {...this.linkState({
                          name: 'name',
                          type: 'text',
                          size: '16',
                          maxLength: '16',
                          onFocus: this.onSetState({name:'', value:''})
                      })}/>
                      <label style={{display: 'block', "padding-top":'0.3em'}}>注册人是个人，请填写身份证号码，并去除出生年份的前两位，共计16位，此号码系统将自动引用为实名审核时的身份证号码且不能修改，请认真填写 示例：如果您的身份证号码是：110110196401021234，联系人ID请填写：1101106401021234</label>
                      <label style={{display: 'block', "padding-bottom": '0.3em'}}>注册人非个人，仍按原有规则填写，即：由英文字母、数字和“-”组成的字符串，长度<em className="red">4－16</em>，不能重复，必须是唯一的</label>
                    </td>
                  </tr>
                  <tr>
                    <td colSpan="2"><PostalInfo name="int" linkState={this.linkState} readOnly={false}/></td>
                  </tr>
                  <tr>
                    <td colSpan="2">
                      <input {...this.linkState({
                          name: 'has_loc',
                          type: 'radio',
                          value: 'none'
                      })}/>没有本地语言联系方式
                      <input {...this.linkState({
                          name: 'has_loc',
                          type: 'radio',
                          value: 'table-row'
                      })}/>有本地语言联系方式
                    </td>
                  </tr>
                  <tr style={{display: this.state.has_loc}}>
                    <td colSpan="2"><PostalInfo name="loc" linkState={this.linkState} readOnly={false}/></td>
                  </tr>
                  <tr>
                    <td>电话：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'voice',
                          type: 'text',
                          size: '17',
                          maxLength: '17',
                          onFocus: this.onSetState({voice:'86.', value:''})
                      })}/>
                      转
                      <input {...this.linkState({
                          name: 'xv',
                          type: 'text',
                          size: '5',
                          maxLength: '5',
                          onFocus: this.onSetState({xv:'', value:''})
                      })}/>
                    <label>格式为国别(<strong className="red">86</strong>).区号(<strong className="red">531</strong>)座机号，如：86.53186920439或国别.手机号,如：86.13425668204，电话号码不得是1111111，1234567,00000等无意义的号码</label>
                    </td>
                  </tr>
                  <tr>
                    <td>传真：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'fax',
                          type: 'text',
                          size: '17',
                          maxLength: '17',
                          onFocus: this.onSetState({fax:'86.', value:''})
                      })}/>
                      转
                      <input {...this.linkState({
                          name: 'xf',
                          type: 'text',
                          size: '5',
                          maxLength: '5',
                          onFocus: this.onSetState({xf:'', value:''})
                      })}/>
                    <label>格式为国别(<strong className="red">86</strong>).区号(<strong className="red">531</strong>)座机号，如：86.53186920439或国别.手机号,如：86.13425668204，电话号码不得是1111111，1234567,00000等无意义的号码</label>
                    </td>
                  </tr>
                  <tr>
                    <td>电子邮件：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'email',
                          type: 'text',
                          size: '40',
                          maxLength: '255'
                      })}/>
                    <label>必须真实有效，用于接收有关所注册域名的重要通知，<strong className="red">不可用中文邮箱</strong></label>
                    </td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr align="center">
                    <td colSpan="2"><input type="button" value="提交" onClick={this.handleSubmit} /></td>
                  </tr>
                </tbody>
                </table>
                <OpResult content={this.state.value} />
                </div>
            );
        case 'launch':
            return (
                <div>
                <table border="0" align="center">
                <tbody>
                  <tr align="center">
                    <td colSpan="2">{this.props.children}</td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr>
                    <td>域名：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'name',
                          type: 'text',
                          size: '40',
                          maxLength: '255',
                          onFocus: this.onSetState({name:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>phase:</td>
                    <td><LaunchPhase {...this.linkState({name: 'phase'})}/></td>
                  </tr>
                  <tr>
                    <td>交费：</td>
                    <td><SelectYears {...this.linkState({name: 'y'})}/>年</td>
                  </tr>
                  <tr>
                    <td>NS主机：</td>
                    <td>
                      <textarea {...this.linkState({
                          name: 'ns',
                          rows: '6',
                          cols: '40',
                          onFocus: this.onSetState({ns:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>登记人：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'registrant',
                          type: 'text',
                          size: '16',
                          maxLength: '16',
                          onFocus: this.onSetState({registrant:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>管理联系人：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'admin',
                          type: 'text',
                          size: '16',
                          maxLength: '16',
                          onFocus: this.onSetState({admin:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>交费联系人：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'billing',
                          type: 'text',
                          size: '16',
                          maxLength: '16',
                          onFocus: this.onSetState({billing:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>技术联系人：</td>
                    <td>
                      <input {...this.linkState({
                          name: 'tech',
                          type: 'text',
                          size: '16',
                          maxLength: '16',
                          onFocus: this.onSetState({tech:'', value:''})
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr>
                    <td>secDNS：</td>
                    <td><DsData name="dsData" linkState={this.linkState}/></td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr>
                    <td>SMD：</td>
                    <td>
                      <input {...this.linkState({
                          name: "encodedSignedMark",
                          type: "file"
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr align="center">
                    <td colSpan="2">
                      <input type="button" value="提交" onClick={this.handleSubmit}/>
                    </td>
                  </tr>
                </tbody>
                </table>
                <OpResult content={this.state.value} />
                </div>
            );
        }
    }
});

var RenewDomain = React.createClass({
    mixins: [FormMixin],
    getInitialState() {
        return {name:'', y:'1', value:''}
    },
    handleSubmit(e) {
        api.renew(TRIM(this.state.name), this.state.y, function(code, data) {
            switch(code) {
            case '2501':
                logout();
                break;
            default:
                this.setState({value: data});
            }
        }.bind(this));
    },
    render() {
        return (
            <div>
              {this.props.children}
              <div style={{"lineHeight":"36px"}}>
                <strong>域名续费</strong><span className="help"></span><br/>
                域名
                <input {...this.linkState({
                    name: 'name',
                    type: 'text',
                    size: '30',
                    onFocus: this.onSetState({name:'', value:''})
                })}/>
                续费
                <SelectYears {...this.linkState({name: 'y'})}/>年<br/>
                <input type="button" value="提交" onClick={this.handleSubmit}/>
              </div>
              <OpResult content={this.state.value} />
            </div>
        )
    }
});

var Update = React.createClass({
    mixins: [FormMixin],
    shouldUpdate: false,
    getInitialState() {
        return {}
    },
    checked(a) {
        var s = {};
        a && a.forEach(v => s[v] = 'checked');
        return s;
    },
    getPostal(info) {
        return {
            name: info.name,
            org: info.org,
            addr: {
                street: [info.street1, info.street2, info.street3],
                city: info.city,
                sp: info.sp,
                pc: info.pc,
                cc: info.cc
            }
        }
    },
    getSecDNS(info){
      return {
        dsData: [{
          keyTag: info.keyTag,
          alg: info.alg,
          digestType: info.digestType,
          digest: info.digest
        }]
      }
    },
    setPostal(info) {
        return {
            name: info.name,
            org: info.org,
            street1: info.addr.street[0],
            street2: info.addr.street[1],
            street3: info.addr.street[2],
            city: info.addr.city,
            sp: info.addr.sp,
            pc: info.addr.pc,
            cc: info.addr.cc
        }
    },
    setSecDNS(info){
      return {
          keyTag: info.dsData[0].keyTag,
          alg: info.dsData[0].alg,
          digestType: info.dsData[0].digestType,
          digest: info.dsData[0].digest
      }
    },
    shouldComponentUpdate(nextProps, nextState) {
        if(this.shouldUpdate) return true;
        api.show(this.props.obj, nextState.id, function(code, data) {
            if(code !== '1000') {
                logout();
                return;
            }
            data.id = nextState.id;
            data.s = this.checked(data.s);
            switch(this.props.obj) {
            case 'domain':
            case 'launch':
                data.ns = data.ns ? data.ns.join('\n') : '';
                if(data.secDNS)
                    data.secDNS = this.setSecDNS(data.secDNS);
                break;
            case 'host':
                data.ip = data.ip ? data.ip.join('\n') : '';
                data.new_name = data.name;
                break;
            case 'contact':
                data.int = this.setPostal(data.int);
                if(data.loc) {
                    data.loc = this.setPostal(data.loc);
                    data.has_loc = 'block';
                }
                else {
                    data.has_loc = 'none';
                }
                [data.xv, data.voice] = (data.voice || '+').split('+');
                [data.xf, data.fax] = (data.fax || '+').split('+');
                break;
            }
            this.shouldUpdate = true;
            this.replaceState(data, function() {
                this.shouldUpdate = false;
            });
        }.bind(this));
        return false;
    },
    getParam() {
        switch(this.props.obj) {
        case 'domain':
            return {
                name: this.state.id,
                ns: SPLIT(this.state.ns),
                registrant: TRIM(this.state.registrant),
                admin: TRIM(this.state.admin),
                tech: TRIM(this.state.tech),
                billing: TRIM(this.state.billing),
                pw: this.state.pw,
                secDNS: this.getSecDNS(this.state.secDNS),
                s: forJSON(this.state.s, (key, value) => value ? key : undefined)
            };
        case 'host':
            return {
                name: this.state.id,
                new_name: this.state.new_name,
                ip: SPLIT(this.state.ip),
                s: forJSON(this.state.s, (key, value) => value ? key : undefined)
            };
        case 'contact':
            var r = {
                name: this.state.id,
                int: this.getPostal(this.state.int),
                loc: this.state.has_loc!=='none'
                   ? this.getPostal(this.state.loc)
                   : undefined
            };
            if(TRIM(this.state.voice)){
                if(/^86\.[0-9]{1,14}/.test(TRIM(this.state.voice))){
                    r.voice = '+'+TRIM(this.state.voice) + TRIM(this.state.xv);
                }else if(!/^86\.$/.test(TRIM(this.state.voice))){
                    r.voice = '+86.'+TRIM(this.state.voice) + TRIM(this.state.xv);
                }else{
                    r.voice = '+86.01012345678';
                }
            }else{ 
                r.voice = '+86.01012345678';
            }
            if(TRIM(this.state.fax)){
                if(/^86\.[0-9]{1,14}/.test(TRIM(this.state.fax))){
                    r.fax = '+'+TRIM(this.state.fax) + TRIM(this.state.xf);
                }else if(!/^86\.$/.test(TRIM(this.state.fax))){
                    r.fax = '+86.'+TRIM(this.state.fax) + TRIM(this.state.xf);
                }else { 
                    r.fax = '+86.01012345678';
                }
            }else { 
                r.fax = '+86.01012345678';
            }
            r.email = TRIM(this.state.email);
            r.pw = this.state.pw;
			r.s = forJSON(this.state.s, (key, value) => value ? key : undefined);
            return r;
        case 'launch':
            return {
                name: this.state.name,
                ns: SPLIT(this.state.ns),
                registrant: TRIM(this.state.registrant),
                admin: TRIM(this.state.admin),
                tech: TRIM(this.state.tech),
                billing: TRIM(this.state.billing),
                pw: this.state.pw,
                dsData: this.state.dsData,
                phase: this.state.phase,
                applicationID: this.state.id,
                s: forJSON(this.state.s, (key, value) => value ? key : undefined)
            };
        }
    },
    handleSubmit(e) {
        api.update(this.props.obj==='launch' ? 'domain' : this.props.obj, this.getParam(), function(code, data) {
            switch(code) {
            case '1000':
                this.props.onFinish();
                break;
            case '2501':
                logout();
                break;
            default:
                this.state.value = data;
                this.forceUpdate();
            }
        }.bind(this));
    },
    render() {
        switch(this.props.obj) {
        case 'domain':
        case 'launch':
            return (
                <div>
                <table border="0" align="center">
                <tbody>
                  <tr align="center">
                    <td colSpan="2">{this.props.children}</td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr>
                    <td>域名：{this.state.name || this.state.id}</td>
                    <td>
                      <input {...this.linkState({
                          name:"s.clientTransferProhibited",
                          type:"checkbox",
                          value:"checked"
                      })} />禁转
                      <input {...this.linkState({
                          name:"s.clientDeleteProhibited",
                          type:"checkbox",
                          value:"checked"
                      })} />禁删
                      <input {...this.linkState({
                          name:"s.clientUpdateProhibited",
                          type:"checkbox",
                          value:"checked"
                      })} />禁改
                      <input {...this.linkState({
                          name:"s.clientRenewProhibited",
                          type:"checkbox",
                          value:"checked"
                      })} />禁续
                      <input {...this.linkState({
                          name:"s.clientHold",
                          type:"checkbox",
                          value:"checked"
                      })} />HOLD
                    </td>
                  </tr>
                  <tr>
                    <td>NS主机：</td>
                    <td>
                      <textarea {...this.linkState({
                          name:"ns",
                          rows:"6",
                          cols:"40"
                      })}></textarea>
                    </td>
                  </tr>
                  <tr>
                    <td>登记人：</td>
                    <td>
                      <input {...this.linkState({
                          name:"registrant",
                          type:"text",
                          size:"16",
                          maxLength:"16"
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>管理联系人：</td>
                    <td>
                      <input {...this.linkState({
                          name:"admin",
                          type:"text",
                          size:"16",
                          maxLength:"16"
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>交费联系人：</td>
                    <td>
                      <input {...this.linkState({
                          name:"billing",
                          type:"text",
                          size:"16",
                          maxLength:"16"
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>技术联系人：</td>
                    <td>
                      <input {...this.linkState({
                          name:"tech",
                          type:"text",
                          size:"16",
                          maxLength:"16"
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td>口令：</td>
                    <td>
                      <input {...this.linkState({
                          name:"pw",
                          type:"text",
                          size:"16",
                          maxLength:"16"
                      })}/>
                    </td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr>
                    <td>secDNS：</td>
                    <td><DsData name="secDNS" linkState={this.linkState}/></td>
                  </tr>
                  <tr>
                    <td colSpan="2" height="16"></td>
                  </tr>
                  <tr align="center">
                    <td colSpan="2">
                      <input type="button" value="提交" onClick={this.handleSubmit}/>
                    </td>
                  </tr>
                </tbody>
                </table>
                <OpResult content={this.state.value} />
                </div>
            );
        case 'host':
            return (
                <div>
                  <table>
                  <tbody>
                    <tr>
                      <td colSpan="2">{this.props.children}</td>
                    </tr>
                    <tr>
                      <td colSpan="2" height="16"></td>
                    </tr>
                    <tr>
                      <td>主机名：</td>
                      <td>
                        <input {...this.linkState({
                              readOnly:true,
                              name:"new_name",
                              type:"text",
                              size:"40",
                              maxLength:"255"
                        })} />
                        <input {...this.linkState({
                            name:"s.clientDeleteProhibited",
                            type:"checkbox",
                            value:"checked"
                        })} />禁删
                        <input {...this.linkState({
                            name:"s.clientUpdateProhibited",
                            type:"checkbox",
                            value:"checked"
                        })} />禁改
                      </td>
                    </tr>
                    <tr>
                      <td>IP地址：</td>
                      <td><textarea {...this.linkState({
                              name:"ip",
                              rows:"6",
                              cols:"40"
                          })} />
                      </td>
                    </tr>
                    <tr>
                      <td colSpan="2" height="16"></td>
                    </tr>
                    <tr align="center">
                      <td colSpan="2"><input type="button" value="提交" onClick={this.handleSubmit} /></td>
                    </tr>
                  </tbody>
                  </table>
                  <OpResult content={this.state.value} />
                </div>
            );
        case 'contact':
            return (
                <div>
                  <table border="0" align="center">
                  <tbody>
                    <tr align="center">
                        <td colSpan="2"><b>修改联系人信息</b><span className="help"></span></td>
                    </tr>
                    <tr>
                      <td colSpan="2" height="16"></td>
                    </tr>
                    <tr>
                      <td>联系人ID：</td>
                      <td>{this.state.id}</td>
                    </tr>
                    <tr>
                      <td>状态：</td>
                      <td>
                        <input {...this.linkState({
                            name:"s.clientTransferProhibited",
                            type:"checkbox",
                            value:"checked"
                        })} />禁转
                        <input {...this.linkState({
                            name:"s.clientDeleteProhibited",
                            type:"checkbox",
                            value:"checked"
                        })} />禁删
                        <input {...this.linkState({
                            name:"s.clientUpdateProhibited",
                            type:"checkbox",
                            value:"checked"
                        })} />禁改
                      </td>
                    </tr>
                    <tr>
                      <td colSpan="2"><PostalInfo name="int" linkState={this.linkState} readOnly={true}/></td>
                    </tr>
                    <tr>
                      <td colSpan="2">
                        <input {...this.linkState({
                            name: 'has_loc',
                            type: 'radio',
                            value: 'none'
                        })}/>没有本地语言联系方式
                        <input {...this.linkState({
                            name: 'has_loc',
                            type: 'radio',
                            value: 'table-row'
                        })}/>有本地语言联系方式
                      </td>
                    </tr>
                    <tr style={{display: this.state.has_loc}}>
                      <td colSpan="2"><PostalInfo name="loc" linkState={this.linkState} readOnly={true}/></td>
                    </tr>
                    <tr>
                      <td>电话：</td>
                      <td>
                        <input {...this.linkState({
                            name: 'voice',
                            type: 'text',
                            size: '17',
                            maxLength: '17'
                        })}/>
                        转
                        <input {...this.linkState({
                            name: 'xv',
                            type: 'text',
                            size: '5',
                            maxLength: '5'
                        })}/>
                      <label>格式为国别(<strong className="red">86</strong>).区号(<strong className="red">531</strong>)座机号，如：86.53186920439或国别.手机号,如：86.13425668204，电话号码不得是1111111，1234567,00000等无意义的号码</label>
                      </td>
                    </tr>
                    <tr>
                      <td>传真：</td>
                      <td>
                        <input {...this.linkState({
                            name: 'fax',
                            type: 'text',
                            size: '17',
                            maxLength: '17'
                        })}/>
                        转
                        <input {...this.linkState({
                            name: 'xf',
                            type: 'text',
                            size: '5',
                            maxLength: '5'
                        })}/>
                      <label>格式为国别(<strong className="red">86</strong>).区号(<strong className="red">531</strong>)座机号，如：86.53186920439或国别.手机号,如：86.13425668204，电话号码不得是1111111，1234567,00000等无意义的号码</label>
                      </td>
                    </tr>
                    <tr>
                      <td>电子邮件：</td>
                      <td>
                        <input {...this.linkState({
                            name: 'email',
                            type: 'text',
                            size: '40',
                            maxLength: '255'
                        })}/>
                      <label>必须真实有效，用于接收有关所注册域名的重要通知，<strong className="red">不可用中文邮箱</strong></label>
                      </td>
                    </tr>
                    <tr>
                      <td>口令：</td>
                      <td>
                        <input {...this.linkState({
                            name:"pw",
                            type:"text",
                            size:"16",
                            maxLength:"16"
                        })}/>
                      </td>
                    </tr>
                    <tr>
                      <td colSpan="2" height="16"></td>
                    </tr>
                    <tr align="center">
                      <td colSpan="2"><input type="button" value="提交" onClick={this.handleSubmit} /></td>
                    </tr>
                  </tbody>
                  </table>
                  <OpResult content={this.state.value} />
                </div>
            );
        }
    }
});

var Transfer = React.createClass({
    mixins: [FormMixin],
    getInitialState() {
        return {name:'', value:''}
    },
    getParam() {
        return {
            obj: this.props.obj,
            name: TRIM(this.state.name),
            pw: TRIM(this.state.pw)
        }
    },
    handleSubmit(e) {
        api.transfer('request', this.getParam(), function(code, data) {
            switch(code) {
            case '1000':
                this.props.onFinish();
                break;
            case '2501':
                logout();
                break;
            default:
                this.setState({value: data});
            }
        }.bind(this));
    },
    render() {
        return (
            <div>
            <table className="formtable" border="0" align="center">
            <tbody>
              <tr>
                <td align="center" colSpan="2"><strong>申请转入</strong></td>
              </tr>
              <tr>
                <td>转入{{domain:'域名', contact:'联系人'}[this.props.obj]}:</td>
                <td>
                  <input {...this.linkState({
                      name: 'name',
                      type: 'text',
                      size: '40',
                      onFocus: this.onSetState({name:'', value:''})
                  })}/>
                </td>
              </tr>
              <tr>
                <td>转移密码:</td>
                <td>
                  <input {...this.linkState({
                      name: 'pw',
                      type: 'text',
                      size: '16',
                      onFocus: this.onSetState({pw:'', value:''})
                  })}/>
                </td>
              </tr>
              <tr>
                <td colSpan="2" align="center">
                  <input type="button" value="提交" onClick={this.handleSubmit}/>
                </td>
              </tr>
            </tbody>
            </table>
            <OpResult content={this.state.value} />
            </div>
        )
    }
});

var ShowRestoreDomainReport = React.createClass({
    mixins: [FormMixin],
    shouldUpdate: false,
    getInitialState() {
        return {}
    },
    shouldComponentUpdate(nextProps, nextState) {
        if(this.shouldUpdate) return true;
        api.show('report', nextState.id, function(code, data) {
            if(code !== '1000') {
                logout();
                return;
            }
            this.shouldUpdate = true;
            this.replaceState(data, function() {
                this.shouldUpdate = false;
            });
        }.bind(this));
        return false;
    },
    getReport() {
        return {
            name: this.state.name,
            preData: this.state.preData,
            postData: this.state.postData,
            delTime: this.state.rm_date,
            resTime: this.state.rs_date,
            resReason: this.state.resReason,
            statement: [this.state.statement1, this.state.statement2],
            other: this.state.other
        }
    },
    handleSubmit(e) {
        api.restore('report', this.getReport(), function(code, data) {
            switch(code) {
            case '1001':
                this.props.onFinish();
                break;
            case '2501':
                logout();
                break;
            default:
                this.state.value = data;
                this.forceUpdate();
            }
        }.bind(this));
    },
    render() {
        return (
            <div>
            <table border="0" align="center">
            <tbody>
              <tr align="center">
                <td colSpan="2">{this.props.children}</td>
              </tr>
              <tr>
                <td colSpan="2" height="16"></td>
              </tr>
              <tr>
                <td>域名：</td>
                <td>{this.state.name}</td>
              </tr>
              <tr>
                <td>preData：</td>
                <td>
                  <input {...this.linkState({
                      name:"preData",
                      type:"text",
                      size:"40",
                      maxLength:"255"
                  })} />
                </td>
              </tr>
              <tr>
                <td>postData：</td>
                <td>
                  <input {...this.linkState({
                      name:"postData",
                      type:"text",
                      size:"40",
                      maxLength:"255"
                  })} />
                </td>
              </tr>
              <tr>
                <td>delTime：</td>
                <td>
                  <input {...this.linkState({
                      name:"rm_date",
                      type:"text",
                      size:"40",
                      maxLength:"255",
                      readOnly:true
                  })} />
                </td>
              </tr>
              <tr>
                <td>resTime：</td>
                <td>
                  <input {...this.linkState({
                      name:"rs_date",
                      type:"text",
                      size:"40",
                      maxLength:"255",
                      readOnly:true
                  })} />
                </td>
              </tr>
              <tr>
                <td>resReason：</td>
                <td>
                  <input {...this.linkState({
                      name:"resReason",
                      type:"text",
                      size:"40",
                      maxLength:"255"
                  })} />
                </td>
              </tr>
              <tr>
                <td>statement：</td>
                <td>
                  <input {...this.linkState({
                      name:"statement1",
                      type:"text",
                      size:"40",
                      maxLength:"255"
                  })} />
                </td>
              </tr>
              <tr>
                <td></td>
                <td>
                  <input {...this.linkState({
                      name:"statement2",
                      type:"text",
                      size:"40",
                      maxLength:"255"
                  })} />
                </td>
              </tr>
              <tr>
                <td>other：</td>
                <td>
                  <input {...this.linkState({
                      name:"other",
                      type:"text",
                      size:"40",
                      maxLength:"255"
                  })} />
                </td>
              </tr>
              <tr>
                <td colSpan="2" height="16"></td>
              </tr>
              <tr align="center">
                <td colSpan="2">
                  <input type="button" value="提交" onClick={this.handleSubmit}/>
                </td>
              </tr>
            </tbody>
            </table>
            <OpResult content={this.state.value} />
            </div>
        )
    }
});

var ShowDomainResolve = React.createClass({
    mixins: [FormMixin],
    getInitialState() {
        return {name:'', value:''}
    },
    handleSubmit(e) {
        api.show('resolve', TRIM(this.state.name), function(code, data) {
            this.setState({value: data});
        }.bind(this));
    },
    render() {
        return (
            <div>
            <table align="center" border="0" className="formtable">
            <tbody>
              <tr>
                <td align="center">{this.props.children}</td>
              </tr>
              <tr>
                <td>
                  <input {...this.linkState({
                      name: 'name',
                      type: 'text',
                      size: '40',
                      onFocus: this.onSetState({name:'', value:''})
                  })}/>
                </td>
              </tr>
              <tr>
                <td align="center">
                  <input type="button" value="提交" onClick={this.handleSubmit}/>
                </td>
              </tr>
            </tbody>
            </table>
            <OpResult content={this.state.value} />
            </div>
        );
    }
});

var Load = React.createClass({
    mixins: [FormMixin],
    getInitialState() {
        return {name:'', value:''}
    },
    handleSubmit(e) {
        var line = this.state.name.split(/\r?\n/);
        var name = [];
        var value = '';
        for(var i in line) {
            var word = line[i].trim().split(/\s+/);
            if(word.length===2) name.push({name:word[1], user:word[0]});
            else value+= 'Line '+i+': '+line[i]+' Error\n';
        }
        this.setState({value: value});
        if(!name.length) return;
        api.load(this.props.obj, name, function(code, data) {
            switch(code) {
            case '2501':
                logout();
                break;
            default:
                this.setState({value: value+data});
            }
        }.bind(this));
    },
    render() {
        return (
            <div>
            <table align="center" border="0">
            <tbody>
              <tr>
                <td align="center">{this.props.children}</td>
              </tr>
              <tr>
                <td align="center">
                  <textarea {...this.linkState({
                      name: 'name',
                      rows: '10',
                      cols: '80',
                      onFocus: this.onSetState({name:'', value:''})
                  })}/>
                </td>
              </tr>
              <tr>
                <td height="16"></td>
              </tr>
              <tr>
                <td align="center">
                  <input type="button" value="提交" onClick={this.handleSubmit}/>
                </td>
              </tr>
            </tbody>
            </table>
            <OpResult content={this.state.value} />
            </div>
        );
    }
});

var SelectPort = React.createClass({
    getInitialState() {
        return {
            selected: '',
            port: []
        }
    },
    selectPort(e) {
        this.setState({selected: e.target.value}, function() {
            _login_(this.state.selected, display.account.user, display.account.pass, _ok_, logout);
        });
    },
    render() {
        return (
            <select value={this.state.selected} onChange={this.selectPort}>
              {this.state.port.map(port =>
                  <option key={port} value={port}>{port}</option>
              )}
            </select>
        );
    }
});

var ResolveDomain = React.createClass({
    mixins: [FormMixin],
    shouldUpdate: false,
    getInitialState() {
        return {
            domain: '',
            record: [],
            value: ''
        }
    },
    shouldComponentUpdate(nextProps, nextState) {
        if(this.shouldUpdate) return true;
        api.pdns('list', nextState.id, {}, function(code, data) {
            switch(code) {
            case '1000':
                this.shouldUpdate = true;
                data.push({
                    name: '',
                    type: 'A',
                    content: '',
                    ttl: '',
                    prio: ''
                });
                this.setState({domain:nextState.id, record:data, value:''}, function() {
                    this.shouldUpdate = false;
                });
                break;
            case '2004':
                this.shouldUpdate = true;
                this.setState({domain:nextState.id, record:[], value:'域名解析服务器需要设置为：'+data.join(' ')}, function() {
                    this.shouldUpdate = false;
                });
                break;
            default:
                logout();
            }
        }.bind(this));
        return false;
    },
    handler(action, record) {
        api.pdns(action, this.state.domain, record, function(code, data) {
            switch(code) {
            case '1000':
                this.setState({value: '操作成功！'});
                break;
            case '2501':
                logout();
                break;
            default:
                alert(data);
            }
        }.bind(this));
    },
    render() {
        return (
            <div>
              <table className="datatable" width="100%">
              <tbody>
                <tr>
                  <td colSpan="6">{this.props.children}</td>
                </tr>
                <tr>
                  <td colSpan="6">{this.state.domain}</td>
                </tr>
                <tr>
                  <td>NAME</td>
                  <td>TYPE</td>
                  <td>CONTENT</td>
                  <td>TTL</td>
                  <td>PRIO</td>
                  <td>操作</td>
                </tr>
                {this.state.record.map(function(record, i) {
                    switch(record.type) {
                    case 'SOA':
                        return (
                            <tr key={record.id}>
                              <td>{record.name}</td>
                              <td>{record.type}</td>
                              <td>{record.content}</td>
                              <td>{record.ttl}</td>
                              <td></td>
                              <td></td>
                            </tr>
                        );
                    default:
                        return record.id ? (
                            <tr key={record.id}>
                              <td><input {...this.linkState({
                                  name: 'record['+i+'].name',
                                  type: 'text',
                                  size: 5
                              })}/></td>
                              <td><SelectType {...this.linkState({name: 'record['+i+'].type'})}/></td>
                              <td><input {...this.linkState({
                                  name: 'record['+i+'].content',
                                  type: 'text',
                                  size: 40
                              })}/></td>
                              <td><input {...this.linkState({
                                  name: 'record['+i+'].ttl',
                                  type: 'text',
                                  size: 6
                              })}/></td>
                              <td>{record.type==='MX' ? <input {...this.linkState({
                                  name: 'record['+i+'].prio',
                                  type: 'text',
                                  size: 2
                              })}/> : ''}</td>
                              <td><a onClick={this.handler.bind(this, 'add', record)}>修改</a> |
                                  <a onClick={this.handler.bind(this, 'remove', record)}>删除</a></td>
                            </tr>
                        ) : (
                            <tr key={0}>
                              <td><input {...this.linkState({
                                  name: 'record['+i+'].name',
                                  type: 'text',
                                  size: 5
                              })}/></td>
                              <td><SelectType {...this.linkState({name: 'record['+i+'].type'})}/></td>
                              <td><input {...this.linkState({
                                  name: 'record['+i+'].content',
                                  type: 'text',
                                  size: 40
                              })}/></td>
                              <td><input {...this.linkState({
                                  name: 'record['+i+'].ttl',
                                  type: 'text',
                                  size: 6
                              })}/></td>
                              <td>{record.type==='MX' ? <input {...this.linkState({
                                  name: 'record['+i+'].prio',
                                  type: 'text',
                                  size: 2
                              })}/> : ''}</td>
                              <td><a onClick={this.handler.bind(this, 'add', record)}>添加</a></td>
                            </tr>
                        );
                    }
                }.bind(this))}
              </tbody>
              </table>
              <OpResult content={this.state.value} />
            </div>
        );
    }
});

var AuthEmail = React.createClass({
    mixins: [FormMixin],
    shouldUpdate: false,
    getInitialState() {
        return {}
    },
    handleSubmit(e) {
        api.compVerifyCode(this.state.email, TRIM(this.state.verifyCode), function(code) {
            switch(code) {
            case '1000':
                this.state.message = "邮箱认证成功";
                this.props.onFinish();
                break;
            case '2501':
                logout();
                return;
                break;
            default:
                this.state.message = "邮箱认证失败";
            }
            this.forceUpdate();
        }.bind(this));
    },
    render() {
        return (
            <div>
            <table align="center" border="0">
            <tbody>
              <tr>
                <td align="center" colSpan="2">{this.props.children}</td>
              </tr>
              <tr>
                <td>请输入验证码：</td>
                <td>
                  <input {...this.linkState({
                      name: 'verifyCode',
                      type: 'text',
                      size: 16,
                      maxLength: 16
                  })}/>
                </td>
              </tr>
              <tr>
                <td height="16" colSpan="2"></td>
              </tr>
              <tr>
                <td align="center" colSpan="2">
                  <input type="button" value="提交" onClick={this.handleSubmit}/>
                </td>
              </tr>
            </tbody>
            </table>
            <OpResult content={this.state.message} />
            </div>
        )
    }
});


var AuthContact = React.createClass({
    mixins: [FormMixin],
    shouldUpdate: false,
    getInitialState() {
        return {
          registrantType: 'none',
          idType: '1',
          idCode: '',
          idImg: '',
          userRegion: '1',
          orgIdType: '1',
          orgIdCode: '',
          orgIdImg: '',
          posting: 'none' 
        }
    },
    handleId(id){
        if(!id) return id;
        var y = (id.slice(6,8)|0)  >= 35? '19':'20';
        var ret = id.slice(0,6) + y +id.slice(6);
        return ret; 
    },
    getParam() {
      let ret = {
          registrantType: {'none':1,'block':2}[this.state.registrantType],
          idType: this.state.idType,
          idCode: (this.state.registrantType === 'none' &&  this.state.idType === '1')? this.handleId(this.state.id) :  this.state.idCode,
          idImg: this.state.idImg,
          userRegion: this.state.userRegion
      };
      if(this.state.registrantType==='block'){
        ret.orgType = this.state.orgType,
        ret.orgIdType = this.state.orgIdType,
        ret.orgIdCode = this.state.orgIdCode,
        ret.orgIdImg = this.state.orgIdImg
      }
      return ret;
    },
    handleSubmit(e) {
        this.state.posting = 'block';
        this.forceUpdate();
        api.uploadRegistrant(this.state.id, this.getParam(), function(code, data) {
            switch(code) {
            case '1000':
                this.props.onFinish();
                break;
            case '2501':
                logout();
                break;
            default:
                this.state.value = data;
                this.forceUpdate();
            }
        }.bind(this));
    },
    render() {      
            
            return (
                <div>
                    <div style={{display: (this.state.status || this.state.description)? 'block':'none'}} className="status-content">
                      <p style={{display: this.state.status? 'block':'none'}}><label>状态：</label>{this.state.status}</p>
                      <p style={{display: this.state.description? 'block':'none'}}><label>原因：</label>{this.state.description}</p>
                    </div>
                    <table className="formtable" border="0">
                        <tbody>
                        <tr align="center">
                          <td colSpan="2">{this.props.children}</td>
                        </tr>
                        <tr>
                          <td colSpan="2" height="16"></td>
                        </tr>
                        <tr>
                          <td>认证方式：</td>
                          <td>
                            <label><input {...this.linkState({
                                name: 'registrantType',
                                type: 'radio',
                                value: 'none'
                            })}/>个人认证</label>
                            <label><input {...this.linkState({
                                name: 'registrantType',
                                type: 'radio',
                                value: 'block'
                            })}/>企业认证</label>
                          </td>
                        </tr>
                        <tr>
                          <td>注册人姓名：</td>
                          <td>{this.state.name}</td>
                        </tr>
                        <tr>
                          <td>证件类型：</td>
                          <td>
                            <label><input {...this.linkState({
                                name: 'idType',
                                type: 'radio',
                                value: '1'
                            })}/>身份证</label>
                            <label><input {...this.linkState({
                                name: 'idType',
                                type: 'radio',
                                value: '3'
                            })}/>护照</label>
                            <label><input {...this.linkState({
                                name: 'idType',
                                type: 'radio',
                                value: '6'
                            })}/>港澳居民来往内地通行证</label>
                            <label><input {...this.linkState({
                                name: 'idType',
                                type: 'radio',
                                value: '12'
                            })}/>台湾居民来往大陆通行证</label>
                            <label><input {...this.linkState({
                                name: 'idType',
                                type: 'radio',
                                value: '13'
                            })}/>外国人永久居留身份证</label>
                            <label><input {...this.linkState({
                                name: 'idType',
                                type: 'radio',
                                value: '28'
                            })}/>港澳居民居住证</label>
                            <label><input {...this.linkState({
                                name: 'idType',
                                type: 'radio',
                                value: '29'
                            })}/>台湾居民居住证</label>
                          </td>
                        </tr>
                        <tr>
                          <td>证件号码：</td>
                          <td>
                            <label style={{display: (this.state.registrantType === 'none' &&  this.state.idType === '1')? 'block':'none'}}>{this.handleId(this.state.id)}</label>
                            <input style={{display: (this.state.registrantType === 'block' || this.state.idType != '1')? 'block':'none'}} {...this.linkState({
                                type: 'text',
                                name: 'idCode',
                                size: '32',
                                maxLength: '18'
                            })}/>
                          </td>
                        </tr>
                        <tr style={{display: this.state.registrantType}}>
                          <td>企业名称：</td>
                          <td>{this.state.org}</td>
                        </tr>
                        <tr style={{display: this.state.registrantType}}>
                          <td>企业类型：</td>
                          <td>
                            <label><input {...this.linkState({
                                name: 'orgType',
                                type: 'radio',
                                value: '1'
                            })}/>个体</label>
                            <label><input {...this.linkState({
                                name: 'orgType',
                                type: 'radio',
                                value: '2'
                            })}/>工商</label>
                          </td>
                        </tr>
                        <tr style={{display: this.state.registrantType}}>
                          <td>组织证明证件类型：</td>
                          <td>
                            <SelectOrgIdType className="sel" {...this.linkState({name: 'orgIdType'})} />&nbsp;&nbsp;请选择合适的证件类型
                          </td>
                        </tr>
                        <tr style={{display: this.state.registrantType}}>
                          <td>组织证明证件号码：</td>
                          <td>
                            <input {...this.linkState({
                                type: 'text',
                                name: 'orgIdCode',
                                size: '32',
                                maxLength: '32'
                            })}/>
                          </td>
                        </tr>
                        <tr>
                          <td>用户类型：</td>
                          <td>
                            <label><input {...this.linkState({
                                name: 'userRegion',
                                type: 'radio',
                                checked: 'checked',
                                value: '1'
                            })}/>国内用户</label>
                            <label><input {...this.linkState({
                                name: 'userRegion',
                                type: 'radio',
                                value: '2'
                            })}/>国外用户</label>
                          </td>
                        </tr>
                        <tr>
                          <td>联系人证件图片：</td>
                          <td>
                            <input {...this.linkState({
                                name: "idImg",
                                type: "file",
                                accept: "image/png,image/jpeg,image/bmp"
                            })}/><em className="red block"></em>
                          <label className="block">要求原始图片大小介于5k-5m之间，格式为jpg、bmp或png</label>
                          </td>
                        </tr>
                        <tr style={{display: this.state.registrantType}}>
                          <td>组织证件图片：</td>
                          <td>
                            <input {...this.linkState({
                                name: "orgIdImg",
                                type: "file",
                                accept: "image/png,image/jpeg,image/bmp"
                            })}/><em className="red block"></em>
                          <label className="block">要求原始图片大小介于5k-5m之间，格式为jpg、bmp或png</label>
                          </td>
                        </tr>
                        <tr>
                          <td colSpan="2" height="16"></td>
                        </tr>
                        <tr align="center">
                          <td colSpan="2"><input type="button" value="提交" onClick={this.handleSubmit} /></td>
                        </tr>
                        </tbody>
                    </table>      
                  <OpResult content={this.state.value} />
                </div>
            );
    }
});