<template>
  <el-dialog
    title="发起流程"
    :visible.sync="dialogStartProcessVisibleInChild"
    :fullscreen="false"
  >
    <div v-if="generateStartFormVisible">
      <form-parser :data="startFormJson" ref="generateStartForm"> </form-parser>
    </div>

    <el-form label-width="100px">
      <el-form-item label="业务主键Key:" v-if="showBusinessKey">
        <el-input v-model="businessKey" placeholder="请输入业务主键Key" />
      </el-form-item>
      <el-form-item label="抄送给:">
        <el-row align="left">
          <el-col :span="1" align="left">
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="doSelectCcTo"
            >
              添加用户
            </el-button>
          </el-col>
          <el-col :span="23" align="left">
            <el-tag
              v-for="tag in ccToVos"
              :key="tag.id"
              effect="plain"
              closable
              @close="handleCcToClose(tag)"
              style="margin-left: 5px"
              >{{ tag.name }}
            </el-tag>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>

    <select-user
      ref="selectUser"
      :visible.sync="selectUserVisible"
      :appendToBody="true"
      :multipleSelect="true"
      @selectUserFinished="selectUserFinished"
    ></select-user>
    <div slot="footer" class="dialog-footer">
      <el-button
        icon="el-icon-close"
        @click="dialogStartProcessVisibleInChild = false"
        >取消</el-button
      >
      <el-button icon="el-icon-close" @click="reset">重置</el-button>
      <el-button icon="el-icon-check" type="primary" @click="doStartInstance"
        >确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getAction, postAction } from '@/api/flowable/manage';
  import { Message } from 'element-ui';
  import SelectUser from '@/components/select/SelectUser';
  import FormParser from '@/views/flowable/form/FormParser';

  export default {
    name: 'StartProcess',
    components: { SelectUser, FormParser },
    props: {
      visible: {
        type: Boolean,
        default: function () {
          return false;
        }
      },
      processDefinition: {
        type: Object,
        default: function () {
          return {};
        }
      }
    },
    computed: {
      dialogStartProcessVisibleInChild: {
        get() {
          return this.visible;
        },
        set(val) {
          this.$emit('update:visible', val);
        }
      }
    },
    data() {
      return {
        // fullscreen: true,
        generateStartFormVisible: false,
        startFormJson: undefined,
        variables: undefined,
        showBusinessKey: false,
        businessKey: undefined,
        selectUserVisible: false,
        ccToVos: []
      };
    },
    created() {
      this.initData();
    },
    methods: {
      initData() {
        getAction('/flowable/processDefinition/renderedStartForm', {
          processDefinitionId: this.processDefinition.id
        }).then((res) => {
          const { data } = res;
          this.showBusinessKey = data.showBusinessKey;
          if (data.renderedStartForm) {
            this.startFormJson = JSON.parse(data.renderedStartForm);
            this.generateStartFormVisible = true;
          }
        });
      },
      doSelectCcTo() {
        this.selectUserVisible = true;
        // if (this.$refs.selectUser.treeData.length == 0) {
        //   this.$refs.selectUser.getTreeData();
        // }
      },
      selectUserFinished(selectData) {
        if (!selectData || selectData.length == 0) {
          Message.error('请先选择用户');
          return;
        }
        this.ccToVos = selectData;
      },
      handleCcToClose(tag) {
        this.ccToVos.splice(this.ccToVos.indexOf(tag), 1);
      },
      doStartInstance() {
        if (this.$refs.generateStartForm) {
          this.$refs.generateStartForm
            .getData()
            .then((values) => {
              if (values && values != undefined) {
                let processInstanceFormData = JSON.stringify(values);
                let realValues = Object.assign(
                  { processInstanceFormData },
                  values
                );
                return postAction('/flowable/processInstance/start', {
                  processDefinitionId: this.processDefinition.id,
                  businessKey: this.businessKey,
                  values: realValues,
                  ccToVos: this.ccToVos
                }).then(({ data }) => {
                  Message.success(data.message);
                  this.dialogStartProcessVisibleInChild = false;
                });
              }
            })
            .catch((e) => {});
        } else {
          postAction('/flowable/processInstance/start', {
            processDefinitionId: this.processDefinition.id,
            businessKey: this.businessKey,
            ccToVos: this.ccToVos
          }).then(({ data }) => {
            Message.success(data.message);
            this.dialogStartProcessVisibleInChild = false;
          });
        }
      },
      reset() {
        if (this.generateStartFormVisible) {
          this.$refs.generateStartForm.resetFields();
        }
        this.ccToVos = [];
      }
    }
  };
</script>
