<template>
  <div class="bpmn-settings" @click.stop>
    <div class="toggle-button" @click="modelVisible = !modelVisible">
      <lucide-icon name="Settings" :size="40" color="#ffffff" />
    </div>
    <el-drawer :visible.sync="modelVisible" :size="600" title="偏好设置" append-to-body>
      <div class="settings-form">
        <el-form :model="editorSettings" size="mini" label-width="128px" label-suffix="：">
          <el-form-item label="流程名称">
            <el-input v-model="editorSettings.processName" clearable />
          </el-form-item>
          <el-form-item label="流程ID">
            <el-input v-model="editorSettings.processId" clearable />
          </el-form-item>
          <el-form-item label="工具栏">
            <el-switch v-model="editorSettings.toolbar" />
          </el-form-item>
          <el-form-item label="小地图">
            <el-switch v-model="editorSettings.useMinimap" />
          </el-form-item>
          <el-form-item label="流程校验">
            <el-switch v-model="editorSettings.useLint" />
          </el-form-item>
          <el-form-item label="流程模拟">
            <el-switch v-model="editorSettings.useMock" />
          </el-form-item>
          <el-form-item label="模板选项扩展">
            <el-switch v-model="editorSettings.templateChooser" />
          </el-form-item>
          <el-form-item label="右键增强">
            <el-switch v-model="editorSettings.contextmenu" />
          </el-form-item>
          <el-form-item label="自定义右键菜单">
            <el-switch v-model="editorSettings.customContextmenu" />
          </el-form-item>
          <el-form-item label="流程引擎">
            <el-radio-group v-model="editorSettings.processEngine">
              <el-radio label="camunda">Camunda</el-radio>
              <el-radio label="activiti">Activiti</el-radio>
              <el-radio label="flowable">Flowable</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="背景设置">
            <el-radio-group v-model="editorSettings.bg">
              <el-radio label="grid-image">自定义网格</el-radio>
              <el-radio label="grid">默认网点</el-radio>
              <el-radio label="image">图片</el-radio>
              <el-radio label="none">空</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Penal模式">
            <el-radio-group v-model="editorSettings.penalMode">
              <el-radio label="default" disabled>默认</el-radio>
              <el-radio label="rewrite" disabled>重写版</el-radio>
              <el-radio label="custom">自定义</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Palette模式">
            <el-radio-group v-model="editorSettings.paletteMode">
              <el-radio label="default">默认</el-radio>
              <el-radio label="rewrite">重写版</el-radio>
              <el-radio label="enhancement">扩展版</el-radio>
              <el-radio label="custom">自定义</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="ContextPad模式">
            <el-radio-group v-model="editorSettings.contextPadMode">
              <el-radio label="default">默认</el-radio>
              <el-radio label="rewrite">重写版</el-radio>
              <el-radio label="enhancement">扩展版</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="Renderer模式">
            <el-radio-group v-model="editorSettings.rendererMode">
              <el-radio label="default">默认</el-radio>
              <el-radio label="rewrite">重写版</el-radio>
              <el-radio label="enhancement">扩展版</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="其他示例扩展">
            <el-switch v-model="editorSettings.otherModule" />
          </el-form-item>
          <el-form-item label="自定义主题" class="theme-list" v-if="editorSettings.rendererMode === 'rewrite'">
            <div class="theme-item">
              <div class="theme-item_label">
                <el-tooltip content="该功能只修改了显示部分，路径调整依然沿用折线计算方式，慎用！！！">
                  <span slot="">路径曲线 <i class="el-icon-question" />：</span>
                </el-tooltip>
              </div>
              <div>
                <el-switch v-model="editorSettings.useCurve" />
              </div>
            </div>
            <div class="theme-item" v-for="keyItem in themeColorKeys" :key="keyItem">
              <div class="theme-item_label">{{ keyItem }}：</div>
              <el-color-picker color-format="hex" v-model="editorSettings.customTheme[keyItem]" />
            </div>
            <div class="theme-item" v-for="keyItem in themeOpacityKeys" :key="keyItem">
              <div class="theme-item_label">{{ keyItem }}：</div>
              <el-input-number v-model="editorSettings.customTheme[keyItem]" :step="0.1" />
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { defaultSettings } from '../../preset-configuration/editor.config'
import { debounce } from 'min-dash'
import LucideIcon from '../common/LucideIcon'

export default {
  name: 'BpmnSettings',
  components: {
    LucideIcon
  },
  props: {
    settings: {
      type: Object,
      default: () => defaultSettings
    }
  },
  data() {
    return {
      modelVisible: false,
      themeColorKeys: [
        'defaultFillColor',
        'defaultStartEventColor',
        'defaultEndEventColor',
        'defaultIntermediateEventColor',
        'defaultIntermediateThrowEventColor',
        'defaultIntermediateCatchEventColor',
        'defaultTaskColor',
        'defaultLabelColor',
        'defaultGatewayColor',
        'defaultSequenceColor'
      ],
      themeOpacityKeys: [
        'defaultStartEventOpacity',
        'defaultEndEventOpacity',
        'defaultIntermediateThrowEventOpacity',
        'defaultIntermediateCatchEventOpacity',
        'defaultTaskOpacity',
        'defaultLabelOpacity',
        'defaultGatewayOpacity',
        'defaultSequenceOpacity'
      ],
      editorSettings: this.settings
    }
  },
  computed: {
    ...mapGetters(['getEditor'])
  },
  watch: {
    editorSettings: {
      deep: true,
      handler() {
        if (this.editorSettings.penalMode !== 'custom') {
          this.editorSettings.processEngine = 'camunda'
        }
        this.updateEditorState()
      }
    }
  },
  methods: {
    changeModelVisible(event) {
      event.stopPropagation()
      this.modelVisible = !this.modelVisible
    },
    updateEditorState: debounce(function() {
      this.editorSettings && this.$store.commit('setConfiguration', { ...this.editorSettings })
    }, 100)
  }
}
</script>
