text: /*
   * Copyright 1999-2018 Alibaba Group Holding Ltd.
   * Licensed under the Apache License, Version 2.0 (the "License");
   * you may not use this file except in compliance with the License.
   * You may obtain a copy of the License at
   *      http://www.apache.org/licenses/LICENSE-2.0
   * Unless required by applicable law or agreed to in writing, software
   * distributed under the License is distributed on an "AS IS" BASIS,
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   * See the License for the specific language governing permissions and
   * limitations under the License.
   */
  
  import React from 'react';
  import './index.scss';
  import { getParams, request } from '../../globalLib';
  import { Button, ConfigProvider, Dialog, Field, Form, Select } from '@alifd/next';
  
  const FormItem = Form.Item;
  const { AutoComplete: Combobox } = Select;
  
  /**
   * @deprecated
   */
  @ConfigProvider.config
  class CloneDialog extends React.Component {
    static displayName = 'CloneDialog';
  
    constructor(props) {
      super(props);
      this.defaultPolicy = 'abort';
      this.state = {
        visible: false,
        serverId: '',
        tenantFrom: {},
        tenantTo: '',
        dataId: '',
        group: '',
        appName: '',
        configTags: '',
        records: [],
        namespaces: [],
        policy: this.defaultPolicy,
        policyLabel: '',
        total: 0,
        allPolicy: [],
      };
      this.field = new Field(this);
      this.formItemLayout = {
        labelCol: {
          fixedSpan: 6,
        },
        wrapperCol: {
          span: 18,
        },
      };
    }
  
    componentDidMount() {
      const { locale = {} } = this.props;
      this.setState({
        policyLabel: locale.terminate,
        allPolicy: [
          { value: 'abort', label: locale.terminate },
          { value: 'skip', label: locale.skip },
          { value: 'overwrite', label: locale.cover },
        ],
      });
    }
  
    openDialog(payload, callback) {
      const { locale = {} } = this.props;
      const serverId = getParams('serverId') || 'center';
      this.checkData = payload.checkData;
      this.callback = callback;
      request({
        type: 'get',
        url: `/diamond-ops/service/serverId/${serverId}/namespaceInfo`,
        success: res => {
          if (res.code === 200) {
            const dataSource = [];
            res.data.forEach(value => {
              if (value.namespace !== payload.tenantFrom.id) {
                dataSource.push({
                  value: value.namespace,
                  label: `${value.namespaceShowName} | ${value.namespace}`,
                });
              }
            });
            this.setState({
              visible: true,
              serverId: payload.serverId,
              tenantFrom: payload.tenantFrom,
              tenantTo: '',
              dataId: payload.dataId,
              group: payload.group,
              appName: payload.appName,
              configTags: payload.configTags,
              records: payload.records,
              namespaces: dataSource,
              total: payload.total,
            });
            this.field.setValue('select', '');
          } else {
            Dialog.alert({
              title: locale.getNamespaceFailed,
              content: res.message,
            });
          }
        },
      });
    }
  
    closeDialog() {
      this.setState({ visible: false });
    }
  
    setTenantTo(value) {
      this.field.setValue(value);
      this.setState({ tenantTo: value });
    }
  
    setPolicy(...value) {
      this.setState({
        policyLabel: value[1].label,
        policy: value[0],
      });
    }
  
    getQuery() {
      const { locale = {} } = this.props;
      if (this.state.records.length > 0) return locale.selectedEntry;
      if (
        this.state.dataId === '' &&
        this.state.group === '' &&
        this.state.appName === '' &&
        this.state.configTags.length === 0
      ) {
        return '';
      }
      let query = ' |';
      if (this.state.dataId !== '') {
        query += ` DataId: ${this.state.dataId},`;
      }
      if (this.state.group !== '') {
        query += ` Group: ${this.state.group},`;
      }
      if (this.state.appName !== '') {
        query += `${locale.homeApplication + this.state.appName},`;
      }
      if (this.state.configTags.length !== 0) {
        query += `${locale.tags + this.state.configTags},`;
      }
      return query.substr(0, query.length - 1);
    }
  
    doClone() {
      this.field.validate((errors, values) => {
        if (errors) {
          return;
        }
        this.closeDialog();
        this.checkData.tenantTo = this.state.tenantTo;
        this.checkData.policy = this.state.policy;
        this.callback(this.checkData, this.state.policyLabel);
      });
    }
  
    render() {
      const { locale = {} } = this.props;
      const { init } = this.field;
      const footer = (
        <div>
          <Button
            type="primary"
            onClick={this.doClone.bind(this)}
            {...{ disabled: this.state.total <= 0 }}
          >
            {locale.startCloning}
          </Button>
        </div>
      );
  
      return (
        <div>
          <Dialog
            visible={this.state.visible}
            footer={footer}
            footerAlign="center"
            style={{ width: 555 }}
            onCancel={this.closeDialog.bind(this)}
            onClose={this.closeDialog.bind(this)}
            title={`${locale.configurationCloning + this.state.serverId}）`}
          >
            <Form field={this.field}>
              <FormItem label={locale.source} {...this.formItemLayout}>
                <p>
                  <span style={{ color: '#33cde5' }}>{this.state.tenantFrom.name}</span>
                  {` | ${this.state.tenantFrom.id}`}
                </p>
              </FormItem>
              <FormItem label={locale.configurationNumber} {...this.formItemLayout}>
                <p>
                  <span style={{ color: '#33cde5' }}>{this.state.total}</span> {this.getQuery()}{' '}
                </p>
              </FormItem>
              <FormItem label={locale.target} {...this.formItemLayout}>
                <Combobox
                  style={{ width: '80%' }}
                  size="medium"
                  hasArrow
                  placeholder={locale.selectNamespace}
                  dataSource={this.state.namespaces}
                  {...init('select', {
                    props: { onChange: this.setTenantTo.bind(this) },
                    rules: [{ required: true, message: locale.selectNamespace }],
                  })}
                />
              </FormItem>
              <FormItem label={locale.conflict} {...this.formItemLayout}>
                <Select
                  size="medium"
                  hasArrow
                  defaultValue={this.defaultPolicy}
                  dataSource={this.state.allPolicy}
                  onChange={this.setPolicy.bind(this)}
                />
              </FormItem>
            </Form>
          </Dialog>
        </div>
      );
    }
  }
  
  export default CloneDialog;
  