<template>
  <div class="form_base_setting">
    <a-form
      ref="formRef"
      :model="workflowStore.design"
      :rules="rules"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 19 }"
      layout="horizontal"
    >
      <a-form-item label="流程名称" prop="templateName">
        <a-input
          v-model="workflowStore.design.templateName"
          placeholder="请输入流程名称"
        />
      </a-form-item>
      <a-form-item label="标识" prop="templateKey">
        <a-input
          v-model="workflowStore.design.templateKey"
          :readonly="isEdit"
          :disabled="isEdit"
          placeholder="请输入标识"
        />
      </a-form-item>
      <a-form-item label="所属分组" prop="groupId">
        <a-select
          v-model="workflowStore.design.groupId"
          placeholder="请选择分组"
        >
          <a-select-option
            v-for="item in groupOptions"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="备注说明" prop="remark">
        <a-textarea
          v-model="workflowStore.design.remark"
          placeholder="备注说明..."
        />
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { getAction } from '@api/manage'

export default {
  name: 'FormBaseSetting',
  props: {
    groupId: {
      type: [String, Number],
      default: null
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      rules: {
        templateName: [
          { required: true, message: '流程名称不能为空', trigger: 'blur' }
        ],
        templateKey: [
          { required: true, message: '标识不能为空', trigger: 'blur' }
        ],
        groupId: [
          { required: true, message: '请选择分组', trigger: 'change' }
        ]
      },
      groupOptions: []
    };
  },
  computed: {
    ...mapState({
      workflowStore: state => state.workflow
    })
  },
  mounted() {
    getAction('/workflow/group/options').then(res => {
      this.groupOptions = res.result;
      this.workflowStore.design.groupId = this.groupId;
      if (!this.isEdit) {
        this.workflowStore.design.templateKey = this.getCode();
      }
    });
  },
  methods: {
    getRandom(min, max) {
      return Math.round(Math.random() * (max - min) + min);
    },
    getCode() {
      let code = '';
      for (let i = 0; i < 6; i++) {
        const type = this.getRandom(1, 3);
        switch (type) {
          case 1:
            code += String.fromCharCode(this.getRandom(48, 57));
            break;
          case 2:
            code += String.fromCharCode(this.getRandom(65, 90));
            break;
          case 3:
            code += String.fromCharCode(this.getRandom(97, 122));
            break;
        }
      }
      return code;
    },
    validate() {
      const err = [];
      const design = this.workflowStore.design;
      if (!design.templateName) {
        err.push('流程名称未设置');
      }
      if (!design.templateKey) {
        err.push('流程标识未设置');
      }
      if (!design.groupId) {
        err.push('表单分组未设置');
      }
      return err;
    }
  }
};
</script>

<style scoped>
.form_base_setting {
  width: 600px;
  height: calc(100vh - 220px);
}
</style>
