import {WidgetType, Vertical, MultiSelectItem, TextAreaEditor, Editor, Button, TextValueCombo} from '@ui/index';
import {LinkType} from '@ui/type';
import charset from './right.edit.constant';
import Model from '../../link-set.model';
import FormItem from '@shared/components/form.item.component';
import Title from '@shared/components/title.component';
import {getDrivers} from './right.edit.service';
const className = 'fr.component.right.edit';
const Widget: WidgetType = {
  _store() {
    return BI.Models.getModel(Model);
  },
  render() {
    const linkSelected: LinkType = this.model.linkSelected;
    const that = this;
    
    return {
      type: Vertical,
      cls: 'right-show',
      items: [
        {
          type: FormItem,
          text: '数据连接名',
          hint: '*修改数据连接名会影响相关数据表和仪表板',
          form:{
            type: Editor,
            cls: 'bi-border',
            width: 300,
            value: linkSelected.connectionName,
            listeners: [{
              eventName: BI.Editor.EVENT_CHANGE,
              action() {
                that.store.setLinkUpdate({
                  ...that.model.linkUpdate,
                  connectionName: this.getValue(),
                });
              },
            }],
          },
        },
        {
          type: FormItem,
          text: '第一步',
          height: 400,
          form:{
            type: Vertical,
            cls: 'right-form',
            items:[
              {
                type: FormItem,
                text: '驱动器',
                form:{
                  type: TextValueCombo,
                  cls: 'bi-border',
                  width: 300,
                  text: linkSelected.driver,
                  items: getDrivers(linkSelected),
                  listeners: [{
                    eventName: BI.TextValueCombo.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        driver: this.getValue()[0],
                      });
                    },
                  }],
                },
              },
              {
                type: FormItem,
                text: 'URL',
                form:{
                  type: Editor,
                  cls: 'bi-border',
                  watermark:'请输入',
                  width: 300,
                  value: linkSelected.url,
                  listeners: [{
                    eventName: BI.Editor.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        url: this.getValue(),
                      });
                    },
                  }],
                },
              },
              {
                type: FormItem,
                text: '编码',
                form:{
                  type: TextValueCombo,
                  cls: 'bi-border',
                  width: 300,
                  text: linkSelected.originalCharsetName === '' ? '自动' : linkSelected.originalCharsetName,
                  items: BI.Constants.getConstant(charset),
                  listeners: [{
                    eventName: BI.TextValueCombo.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        originalCharsetName: this.getValue()[0],
                      });
                    },
                  }],
                },
              },
              {
                type: FormItem,
                text: '用户名',
                form:{
                  type: Editor,
                  cls: 'bi-border',
                  allowBlank:true,
                  watermark:'请输入',
                  width: 300,
                  value: linkSelected.user,
                  listeners: [{
                    eventName: BI.Editor.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        user: this.getValue(),
                      });
                    },
                  }],
                },
              },
              {
                type: FormItem,
                text: '密码',
                form:{
                  type: Editor,
                  cls: 'bi-border',
                  inputType:'password',
                  allowBlank:true,
                  watermark:'请输入',
                  width: 300,
                  value: linkSelected.password,
                  listeners: [{
                    eventName: BI.Editor.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        password: this.getValue(),
                      });
                    },
                  }],
                },
              },
              {
                type: Title,
                text: '连接池属性',
              },
              {
                type: FormItem,
                text: 'SQL验证查询',
                height: 100,
                form:{
                  type: TextAreaEditor,
                  cls: 'bi-border',
                  allowBlank:true,
                  watermark:'请输入',
                  width: 300,
                  height:100,
                  value: linkSelected.validationQuery,
                  listeners: [{
                    eventName: BI.Editor.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        validationQuery: this.getValue(),
                      });
                    },
                  }],
                },
              },
              {
                type: FormItem,
                text: '获取连接前校验',
                form:{
                  type: MultiSelectItem,
                  text: '是',
                  selected: linkSelected.testOnBorrow,
                  width: 60,
                  listeners: [{
                    eventName: BI.Editor.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        testOnBorrow: this.isSelected(),
                      });
                    },
                  }],
                },
              },
              {
                type: FormItem,
                text: '最大活动连接数',
                form:{
                  type: Editor,
                  cls: 'bi-border',
                  allowBlank:true,
                  watermark:'请输入',
                  width: 60,
                  value: linkSelected.maxActive,
                  errorText: '请输入有效的正整数',
                  validationChecker (v: string) {
                    if (/^\+?[1-9][0-9]*$/.test(v)) {
                      return true;
                    }
                    
                    return false;
                  },
                  listeners: [{
                    eventName: BI.Editor.EVENT_CHANGE,
                    action() {
                      that.store.setLinkUpdate({
                        ...that.model.linkUpdate,
                        maxActive: this.getValue(),
                      });
                    },
                  }],
                },
              },
            ],
          },
        },
        {
          type: FormItem,
          text: '第二步',
          form: {
            type: Button,
            text: '测试连接',
            level: 'ignore',
          },
        },
        {
          type: FormItem,
          text: '第三步',
          form: {
            type: FormItem,
            text: '模式',
            form: {
              type: Editor,
              cls: 'bi-border',
              width: 300,
              disabled: true,
            },
          },
        },
      ],
    };
  },
};
BI.shortcut(className, BI.inherit(BI.Widget, Widget));
export default className;