<template>
  <basic-container>
    <el-steps :active="step"
              finish-status="success"
              simple
              style="margin-bottom: 20px;">
      <el-step title="设计表单"
               icon="el-icon-edit"></el-step>
      <el-step title="设计流程"
               icon="el-icon-upload">
        <template #title>
          设计流程
          <el-tooltip v-show="step == '1'"
                      content="全屏">
            <i class="el-icon-full-screen"
               @click="handleFullScreen"></i>
          </el-tooltip>
        </template>
      </el-step>
      <el-step title="完成"
               icon="el-icon-circle-check"></el-step>
    </el-steps>

    <div v-show="step == 0">
      <avue-form ref="form1"
                 :option="step1.option"
                 v-model="step1.form">
        <template #tip>
          <el-link type="primary"
                   :underline="false"
                   @click="$router.push('/plugin/workflow/design/form')">没有想要的表单？点击去设计</el-link>
        </template>
        <template slot="form">
          <avue-form ref="form2"
                     v-model="step1.form"
                     :option="step1.option1"></avue-form>
        </template>
      </avue-form>
    </div>
    <div v-if="step == 1">
      <wf-design id="bpmn2"
                 ref="bpmn2"
                 style="height: calc(100vh - 290px); background: white;"
                 :options="step2.option"></wf-design>
    </div>
    <div v-if="step == 2">
      <wf-design ref="bpmn3"
                 style="height: calc(100vh - 290px)"
                 :options="step3.option"></wf-design>
    </div>

    <div class="foot-item"
         :style="{width: isCollapse? 'calc(100% - 80px)': 'calc(100% - 260px)' }">
      <el-button type="primary"
                 size="medium"
                 v-if="step > 0"
                 @click="step--">上一步</el-button>
      <el-button type="success"
                 size="medium"
                 v-if="step < 2"
                 @click="handleNextStep">下一步</el-button>
      <el-button type="success"
                 size="medium"
                 v-if="step == 2"
                 @click="handleSave">保存</el-button>
    </div>
  </basic-container>
</template>

<script>
import { getDetail as getFormByKey } from '@/api/plugin/workflow/form'
import { submit, getDetail } from '@/api/plugin/workflow/model'
import { getList as buttonList } from '@/api/plugin/workflow/button'
import { userList } from '@/api/plugin/workflow/process'

import { fullscreenToggel } from "@/util/util";

import { mapGetters } from 'vuex'

export default {
  name: 'design',
  computed: {
    ...mapGetters(['tag', 'isCollapse', 'language']),
  },
  watch: {
    '$route.params.id': {
      handler(val) {
        if (!val || val == 0) return
        getDetail(val).then(res => {
          this.process = res.data.data
          const { formKey, xml, exForm } = this.process
          this.$set(this.step2.option, 'xml', xml)
          this.$set(this.step2.option, 'process', this.process)
          if (formKey.startsWith('wf_ex_')) { // 外置表单
            const column = []
            exForm.forEach(ex => {
              column.push({
                label: ex.name,
                prop: ex.id,
                readable: true,
                writable: true
              })
            })
            this.$set(this.step1.form, 'column', column)
            this.$set(this.step1.form, 'formType', 2)
            this.$set(this.step1.form, 'exFormKey', formKey.substring(6))
          } else {
            this.$set(this.step1.form, 'formKey', formKey)
          }
        })
      },
      immediate: true
    },
    language(val) {
      const option = {
        lang: val
      }
      if (this.$refs.bpmn2) {
        this.$refs.bpmn2.getData('xml', false, false).then(data => {
          option.xml = data
          this.$set(this.step2, 'option', {
            ...this.step2.option,
            ...option
          })
        })
      } else this.$set(this.step2, 'option', {
        ...this.step2.option,
        ...option
      })
    }
  },
  data() {
    const _this = this
    return {
      step: 0,
      step1: {
        form: {},
        option: {
          menuBtn: false,
          group: [{
            labelPosition: 'left',
            label: '选择表单',
            icon: 'el-icon-warning-outline',
            arrow: false,
            column: [{
              label: '表单类型',
              prop: 'formType',
              type: 'radio',
              dicData: [{
                label: '内置表单',
                value: 1
              }, {
                label: '外置表单',
                value: 2
              }],
              span: 24,
              value: 1,
              event: {
                change: (val) => {
                  if (!val) return
                  if (val == 1) {
                    this.findObject(this.step1.option.group[0].column, 'exFormKey').display = false
                    this.findObject(this.step1.option.group[1].column, 'column').display = false
                    this.findObject(this.step1.option.group[0].column, 'formKey').display = true
                    this.findObject(this.step1.option.group[0].column, 'tip').display = true
                    this.findObject(this.step1.option.group[1].column, 'form').display = true
                  } else {
                    this.findObject(this.step1.option.group[0].column, 'exFormKey').display = true
                    this.findObject(this.step1.option.group[1].column, 'column').display = true
                    this.findObject(this.step1.option.group[0].column, 'formKey').display = false
                    this.findObject(this.step1.option.group[0].column, 'tip').display = false
                    this.findObject(this.step1.option.group[1].column, 'form').display = false
                    this.step1.option.group[1].display = true
                  }
                }
              }
            }, {
              label: '表单key',
              prop: 'exFormKey',
              display: false,
              rules: [{ required: true, message: '请输入外置表单key' }]
            }, {
              label: '表单',
              prop: 'formKey',
              type: 'select',
              dicUrl: '/api/blade-workflow/design/form/list?current=1&size=99',
              dicFormatter: (data) => {
                return data.data.records
              },
              props: {
                label: 'name',
                value: 'key'
              },
              event: {
                change: (val) => {
                  this.step1.option1 = {}
                  if (val) {
                    getFormByKey({ key: val }).then(res => {
                      _this.step1.option1 = { ...eval('(' + res.data.data.content + ')'), menuBtn: false, readonly: true }
                      _this.step1.option.group[1].display = true
                      setTimeout(() => {
                        _this.$refs.form2.clearValidate()
                      })
                    }).catch(() => {
                      _this.step1.option.group[1].display = false
                    })
                  } else {
                    _this.step1.option.group[1].display = false
                  }
                }
              },
              rules: [{ required: true, message: '请选择表单' }]
            }, {
              labelWidth: 0,
              prop: 'tip',
              formslot: true
            }]
          }, {
            label: '表单预览',
            icon: 'el-icon-view',
            display: false,
            arrow: false,
            column: [{
              prop: 'form',
              labelWidth: 0,
              span: 24,
              formslot: true
            }, {
              prop: 'column',
              labelWidth: '0',
              tip: '可用于控制外置表单字段的显隐配置，如果希望自己控制请忽略此字段',
              tipPlacement: 'top',
              span: 24,
              type: 'dynamic',
              children: {
                align: 'center',
                column: [{
                  label: '字段',
                  prop: 'label',
                  rules: [{ required: true, message: '请输入字段名' }]
                }, {
                  label: '属性',
                  prop: 'prop',
                  rules: [{ required: true, message: '请输入属性名' }]
                }, {
                  label: '默认可读',
                  prop: 'readable',
                  type: 'switch',
                  disabled: true,
                  value: true
                }, {
                  label: '默认可写',
                  prop: 'writable',
                  type: 'switch',
                  disabled: true,
                  value: true
                }]
              },
              display: false
            }]
          }]
        },
        option1: {}
      },
      step2: {
        option: {
          config: false,
          mode: 'edit',
          engine: 'flowable',
          toolbar: ['open', 'create', 'fit', 'zoom-in', 'zoom-out', 'undo', 'redo', 'import', 'preview'],
        }
      },
      step3: {
        option: {
          config: false,
          mode: 'view',
          simulation: true,
          minimap: true,
          engine: 'flowable'
        }
      },
      process: {},
      fullscreen: false
    }
  },
  mounted() {
    this.getButtonList()
    // this.getUserList()
    this.getUserListV2()
  },
  methods: {
    handleNextStep() {
      switch (this.step) {
        case 0:
          this.$refs.form1.validate((valid, done) => {
            if (valid) {
              const { formType, formKey, exFormKey, column } = this.step1.form
              if (formType == 1) { // 内置表单
                this.process.formKey = formKey
                this.$set(this.step2.option, 'form', this.step1.option1)
              } else { // 外置表单
                this.process.formKey = "wf_ex_" + exFormKey
                this.$set(this.step2.option, 'exForm', {
                  exFormKey, column
                })
              }
              this.step++
              done()
            }
          })
          break;
        case 1:
          this.$refs.bpmn2.getData('xml').then(data => {
            this.$set(this.step2.option, 'xml', data)
            this.$set(this.step3.option, 'xml', data)
            this.process.xml = data
            this.step++
          })
          break;
      }
    },
    handleSave() {
      const { businessObject } = this.$refs.bpmn3.getElementRegistry().getAll()[0]
      const { id, name, documentation } = businessObject
      const description = (documentation && documentation.length > 0) ? documentation[0].text : null

      const params = {
        ...this.process,
        modelKey: id,
        name,
        description
      }

      if (this.process.id) {
        this.$confirm('是否将此模型保存为新版本？这意味着可以返回到以前的版本。', '提示', {
          distinguishCancelAndClose: true,
          confirmButtonText: '否',
          cancelButtonText: '是',
          type: 'warning'
        }).then(() => {
          params.newVersion = false

          submit(params).then(() => {
            this.$message.success("操作成功")
            this.$store.commit('DEL_TAG', this.tag)
            this.$router.push("/plugin/workflow/design/model")
          })
        }).catch(action => {
          if (action == 'cancel') {
            params.newVersion = true

            submit(params).then(() => {
              this.$message.success("操作成功")
              this.$store.commit('DEL_TAG', this.tag)
              this.$router.push("/plugin/workflow/design/model")
            })
          }
        })
      } else {
        submit(params).then(() => {
          this.$message.success("操作成功")
          this.$store.commit('DEL_TAG', this.tag)
          this.$router.push("/plugin/workflow/design/model")
        })
      }
    },
    getButtonList() {
      buttonList(1, 99, { status: 1 }).then(res => {
        const list = res.data.data.records.map(l => {
          return {
            label: l.name,
            prop: l.key,
            display: true
          }
        })
        this.$set(this.step2.option, 'button', list)
      })
    },
    getUserList() {
      const userConfig = {
        leftColumns: [{
          title: '姓名',
          dataIndex: 'realName',
          align: 'center'
        }, {
          title: '部门',
          dataIndex: 'deptName',
          align: 'center'
        }, {
          title: '职位',
          dataIndex: 'postName',
          align: 'center'
        }],
        rightColumns: [{
          title: '姓名',
          dataIndex: 'realName',
          align: 'center'
        },],
        filterKey: 'realName',
      }
      userList(1, 99, {}).then(res => {
        userConfig.data = res.data.data.records.map(r => {
          return {
            key: r.id,
            realName: r.realName,
            deptName: r.deptName
          }
        })
        this.$set(this.step2.option, 'user', userConfig)
      })
    },
    getUserListV2() {
      this.$set(this.step2.option, 'user', {
        version: 'v2',
        userUrl: '/api/blade-user/search/user',
        roleUrl: '/api/blade-system/search/role',
        deptUrl: '/api/blade-system/search/dept',
        postUrl: '/api/blade-system/search/post',
        customUrl: '/api/blade-workflow/design/condition/list'
      })
    },
    handleFullScreen() {
      fullscreenToggel()
      this.$store.commit('SET_COLLAPSE')
    },
  }
}
</script>

<style scoped lang="scss">
.foot-item {
  position: fixed;
  bottom: 0;
  margin-left: -20px;
  // right: 0;
  z-index: 101;
  height: 66px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>