<template>
  <el-container class="panel-container">
    <el-tabs v-model="activeTab" style="height: 100%; overflow: hidden">
      <el-tab-pane :label="i18nt('designer.hint.widgetSetting')" name="1">
        <el-scrollbar class="setting-scrollbar" :style="{ height: scrollerHeight }">
          <template v-if="!!designer.selectedWidget && !designer.selectedWidget.category">
            <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form" @submit.native.prevent>
              <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
                <el-collapse-item name="1" v-if="showCollapse(commonProps)" :title="i18nt('designer.setting.commonSetting')">
                  <template v-for="(editorName, propName) in commonProps">
                    <component
                      v-if="hasPropEditor(propName, editorName)"
                      :is="getPropEditor(propName, editorName)"
                      :designer="designer"
                      :selected-widget="selectedWidget"
                      :option-model="optionModel"
                      :key="propName"
                    ></component>
                  </template>
                </el-collapse-item>
                <el-collapse-item name="4" v-if="showCollapse(wfProps)"
                                  :title="i18nt('流程属性')">
                  <template v-for="(editorName, propName) in wfProps">
                    <component
                      v-if="hasPropEditor(propName, editorName)"
                      :is="getPropEditor(propName, editorName)"
                      :designer="designer"
                      :selected-widget="selectedWidget"
                      :option-model="optionModel"
                      :key="propName"
                    ></component>
                  </template>
                </el-collapse-item>
                <el-collapse-item name="2" v-if="showCollapse(advProps)" :title="i18nt('designer.setting.advancedSetting')">
                  <template v-for="(editorName, propName) in advProps">
                    <component
                      v-if="hasPropEditor(propName, editorName)"
                      :is="getPropEditor(propName, editorName)"
                      :designer="designer"
                      :selected-widget="selectedWidget"
                      :option-model="optionModel"
                      :key="propName"
                    ></component>
                  </template>
                </el-collapse-item>

                <el-collapse-item name="3" v-if="showEventCollapse() && showCollapse(eventProps)" :title="i18nt('designer.setting.eventSetting')">
                  <template v-for="(editorName, propName) in eventProps">
                    <component
                      v-if="hasPropEditor(propName, editorName)"
                      :is="getPropEditor(propName, editorName)"
                      :designer="designer"
                      :selected-widget="selectedWidget"
                      :option-model="optionModel"
                      :key="propName"
                    ></component>
                  </template>
                </el-collapse-item>
              </el-collapse>
            </el-form>
          </template>

          <template v-if="!!designer.selectedWidget && !!designer.selectedWidget.category">
            <el-form :model="optionModel" size="mini" label-position="left" label-width="120px" class="setting-form" @submit.native.prevent>
              <el-collapse v-model="widgetActiveCollapseNames" class="setting-collapse">
                <el-collapse-item name="1" v-if="showCollapse(commonProps)" :title="i18nt('designer.setting.commonSetting')">
                  <template v-for="(editorName, propName) in commonProps">
                    <component
                      v-if="hasPropEditor(propName, editorName)"
                      :is="getPropEditor(propName, editorName)"
                      :designer="designer"
                      :selected-widget="selectedWidget"
                      :option-model="optionModel"
                      :key="propName"
                    ></component>
                  </template>
                </el-collapse-item>

                <el-collapse-item name="2" v-if="showCollapse(advProps)" :title="i18nt('designer.setting.advancedSetting')">
                  <template v-for="(editorName, propName) in advProps">
                    <component
                      v-if="hasPropEditor(propName, editorName)"
                      :is="getPropEditor(propName, editorName)"
                      :designer="designer"
                      :selected-widget="selectedWidget"
                      :option-model="optionModel"
                      :key="propName"
                    ></component>
                  </template>
                </el-collapse-item>
                <el-collapse-item name="3" v-if="showEventCollapse() && showCollapse(eventProps)" :title="i18nt('designer.setting.eventSetting')">
                  <template v-for="(editorName, propName) in eventProps">
                    <component
                      v-if="hasPropEditor(propName, editorName)"
                      :is="getPropEditor(propName, editorName)"
                      :designer="designer"
                      :selected-widget="selectedWidget"
                      :option-model="optionModel"
                      :key="propName"
                    ></component>
                  </template>
                </el-collapse-item>
              </el-collapse>
            </el-form>
          </template>
        </el-scrollbar>
      </el-tab-pane>
       <el-tab-pane v-if="!!designer" :label="i18nt('designer.hint.formSetting')" name="2">
        <el-scrollbar class="setting-scrollbar" :style="{ height: scrollerHeight }"><form-setting :designer="designer" :form-config="formConfig"></form-setting></el-scrollbar>
      </el-tab-pane>
      <!-- <el-tab-pane v-if="!!designer" label="数据源" name="3">
      	<el-scrollbar class="setting-scrollbar" :style="{ height: scrollerHeight }">
      		<dataSourceSetting :designer="designer" :form-config="formConfig"></dataSourceSetting>
      	</el-scrollbar>
      </el-tab-pane> -->
    </el-tabs>

    <el-dialog
      :title="i18nt('designer.setting.editWidgetEventHandler')"
      :visible.sync="showWidgetEventDialogFlag"
      v-if="showWidgetEventDialogFlag"
      :show-close="true"
      custom-class="dialog-style list-dialog"
      v-dialog-drag
      append-to-body=""
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true"
      top="7vh"
    >
      <div class="cont">
        <el-alert type="info" :closable="false" :title="eventHeader"></el-alert>
        <code-editor :mode="'javascript'" :readonly="false" v-model="eventHandlerCode" ref="ecEditor"></code-editor>
        <el-alert type="info" :closable="false" title="}"></el-alert>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showWidgetEventDialogFlag = false" class="button-sty" icon="el-icon-close">{{ i18nt('designer.hint.cancel') }}</el-button>
        <el-button type="primary" @click="saveEventHandler" class="button-sty" icon="el-icon-check">{{ i18nt('designer.hint.confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      v-for="dlg in widgetPropertyDialogs"
      :key="dlg.id"
      :title="dlg.title || i18nt('配置编辑')"
      :visible.sync="dlg.visible"
      :modal="false"
      :show-close="!0"
      custom-class="dialog-style list-dialog"
      :close-on-click-modal="!1"
      :close-on-press-escape="!1"
      :destroy-on-close="!0"
      append-to-body
      v-el-drag-dialog
      v-el-dialog-center
      :before-close="(done) => handleWidgetPropertyDialogBeforeClose(dlg, done)"
      @mousedown.native="setActivePropertyDialog(dlg.id)"
    >
      <div class="cont" style="height: auto;max-height: 500px;">
        <el-scrollbar class="setting-scrollbar">
          <el-form :model="dlg.columnSelectedWidget.options" size="mini" label-position="left" label-width="120px" class="setting-form"
                   @submit.native.prevent>
            <el-collapse v-model="dlg.widgetActiveCollapseName1s" class="setting-collapse">
              <el-collapse-item name="1" v-if="showCollapseForDialog(dlg, commonProps)"
                                :title="i18nt('designer.setting.commonSetting')">
                <template v-for="(editorName, propName) in commonProps">
                  <component
                    v-if="hasPropEditorForDialog(dlg, propName, editorName)"
                    :is="getPropEditorForDialog(dlg, propName, editorName)"
                    :designer="designer"
                    :selected-widget="dlg.columnSelectedWidget"
                    :option-model="dlg.columnSelectedWidget.options"
                    :tableColumns="dlg.tableColumns"
                    :key="dlg.id + '-common-' + propName"
                  ></component>
                </template>
              </el-collapse-item>

              <el-collapse-item name="2" v-if="showCollapseForDialog(dlg, advProps)"
                                :title="i18nt('designer.setting.advancedSetting')">
                <template v-for="(editorName, propName) in advProps">
                  <component
                    v-if="hasPropEditorForDialog(dlg, propName, editorName)"
                    :is="getPropEditorForDialog(dlg, propName, editorName)"
                    :designer="designer"
                    :selected-widget="dlg.columnSelectedWidget"
                    :option-model="dlg.columnSelectedWidget.options"
                    :tableColumns="dlg.tableColumns"
                    :key="dlg.id + '-adv-' + propName"
                  ></component>
                </template>
              </el-collapse-item>
              <el-collapse-item name="4" v-if="showCollapseForDialog(dlg, wfProps)"
                                :title="i18nt('流程属性')">
                <template v-for="(editorName, propName) in wfProps">
                  <component
                    v-if="hasPropEditorForDialog(dlg, propName, editorName)"
                    :is="getPropEditorForDialog(dlg, propName, editorName)"
                    :designer="designer"
                    :selected-widget="dlg.columnSelectedWidget"
                    :option-model="dlg.columnSelectedWidget.options"
                    :tableColumns="dlg.tableColumns"
                    :key="dlg.id + '-wf-' + propName"
                  ></component>
                </template>
              </el-collapse-item>

              <el-collapse-item name="3" v-if="showEventCollapse1() && showCollapseForDialog(dlg, eventProps)"
                                :title="i18nt('designer.setting.eventSetting')">
                <template v-for="(editorName, propName) in eventProps">
                  <component
                    v-if="hasPropEditorForDialog(dlg, propName, editorName)"
                    :is="getPropEditorForDialog(dlg, propName, editorName)"
                    :designer="designer"
                    :selected-widget="dlg.columnSelectedWidget"
                    :option-model="dlg.columnSelectedWidget.options"
                    :tableColumns="dlg.tableColumns"
                    :key="dlg.id + '-event-' + propName"
                  ></component>
                </template>
              </el-collapse-item>
            </el-collapse>
          </el-form>
        </el-scrollbar>
      </div>
      <div class="dialog-footer" slot="footer">
        <el-button @click="closeWidgetPropertyDialog(dlg.id)" class="button-sty" icon="el-icon-close">
          {{ i18nt('designer.hint.cancel') }}
        </el-button>
        <el-button type="primary" class="button-sty" @click="confirmWidgetPropertyDialog(dlg)">
          {{ i18nt('designer.hint.confirm') }}
        </el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import PropertyEditors from './property-editor/index';
import FormSetting from './form-setting';
import dataSourceSetting from './dataSource-setting';
import indexMixin from './indexMixin';
import widgetPropertyDialogMixin from './widgetPropertyDialogMixin';

export default {
  name: 'SettingPanel',
  components: {
    FormSetting,
    dataSourceSetting,
    ...PropertyEditors
  },
  mixins: [indexMixin, widgetPropertyDialogMixin],
};
</script>

<style lang="scss" scoped>
.panel-container {
  padding: 0 8px;
}

.setting-scrollbar {
  ::v-deep .el-scrollbar__wrap {
    overflow-x: hidden; /* IE浏览器隐藏水平滚动条箭头！！ */
  }
}

.setting-collapse {
  ::v-deep .el-collapse-item__content {
    padding-bottom: 6px;
  }

  ::v-deep .el-collapse-item__header {
    font-weight: bold;
  }
}

.setting-form {
  ::v-deep .el-form-item__label {
    font-size: 13px;
    //text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  ::v-deep .el-form-item--mini.el-form-item {
    margin-bottom: 6px;
  }
}

/* 隐藏Chrome浏览器中el-input数字输入框右侧的上下调整小箭头 */
::v-deep .hide-spin-button input::-webkit-outer-spin-button,
::v-deep .hide-spin-button input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

/* 隐藏Firefox浏览器中el-input数字输入框右侧的上下调整小箭头 */
::v-deep .hide-spin-button input[type='number'] {
  -moz-appearance: textfield;
}

::v-deep .custom-divider.el-divider--horizontal {
  margin: 10px 0;
}

::v-deep .custom-divider-margin-top.el-divider--horizontal {
  margin: 20px 0;
}

.small-padding-dialog {
  ::v-deep .el-dialog__body {
    padding: 6px 15px 12px 15px;
  }
}
</style>
