<template>
  <div>
    <Modal v-model="opened" scrollable :mask-closable="layout.maskClosable" :draggable="layout.draggable" :sticky="true" :reset-drag-position="true" :width="width">
      <div slot="header">
        <!--
            @slot 页头
        -->
        <slot name="header">
          <span class="title">{{ name }}</span>
          <span class="description">{{ description }}</span>
        </slot>
      </div>
      <div class="ivu-ml-8 ivu-mr-8">
        <view-form v-if="!isCustom" ref="form" :readonly="readonly"></view-form>
        <component v-if="isCustom" ref="customComponent" :is="customComponent" :readonly="readonly" @on-ready="customComponentReady"></component>
      </div>
      <div slot="footer">
        <Button v-for="(item, index) in outcomes" :key="index" type="primary" custom-icon="fa fa-check-circle" @click="action(item)">
          {{ item.name == null ? $t('Front_Btn_Agree') : item.name }}
        </Button>
        <Button type="warning" v-if="isRejectable" custom-icon="fa fa-reply" @click="reject()">{{ $t('Front_Btn_Reject') }}</Button>
        <Button type="primary" v-if="isBackable" custom-icon="fa fa-share" @click="back()">{{ $t('Front_Btn_Back_Previous') }}</Button>
        <Button type="primary" v-if="isRedirectable" custom-icon="fa fa-share" @click="$refs.redirectTaskForm.open()">{{ $t('Front_Btn_Redirect') }}</Button>
        <Button type="primary" v-if="isMessageEnable" custom-icon="fa fa-comment-dots" @click="openMessage()">{{ $t('Front_Btn_Leave_Message') }}</Button>
        <Button type="info" custom-icon="fa fa-history" @click="$refs.approvalHistoryTable.open({ processInstID: task.processInstID })">{{ $t('Front_Btn_History') }}</Button>
        <Button type="default" custom-icon="fa fa-times" @click="opened = false">{{ $t('Front_Btn_Close') }}</Button>
      </div>
    </Modal>
    <modal-table ref="approvalHistoryTable" view-code="ApprovalHistoryModal"></modal-table>
    <modal-form ref="redirectTaskForm" view-code="RedirectTask">
      <template slot="footer">
        <Button type="primary" custom-icon="fa fa-check" @click="redirect()">{{ $t('Front_Btn_OK') }}</Button>
      </template>
    </modal-form>
    <Modal v-model="messageOpened" scrollable>
      <div slot="header">
        <span class="title">{{ $t('Front_Label_Leave_Message') }}</span>
        <span class="description">{{ $t('Front_Label_Leave_Message_Desc') }}</span>
      </div>
      <div class="ivu-ml-8 ivu-mr-8">
        <Form ref="messageForm" :model="messageData" label-position="top" label-colon="：" class="ivu-mt" @submit.native.prevent>
          <Row :gutter="24" type="flex">
            <Col v-bind="grid24">
              <FormItem
                :label="$t('Front_Label_Message_Content')"
                key="message"
                prop="message"
                :rules="{
                  required: true,
                  message: this.$t('Front_Msg_Please_Input'),
                  trigger: 'blur,change'
                }"
              >
                <Input type="textarea" :rows="6" v-model="messageData.message" />
              </FormItem>
            </Col>
          </Row>
        </Form>
      </div>
      <template slot="footer">
        <Button type="primary" custom-icon="fa fa-check" @click="submitMessage">{{ $t('Front_Btn_Submit') }}</Button>
        <Button type="default" custom-icon="fa fa-times" @click="messageOpened = false">{{ $t('Front_Btn_Close') }}</Button>
      </template>
    </Modal>
  </div>
</template>
<script>
  import mixinPage from '../../mixins/page';
  import customModelApi from '../../api/customModel';
  import processInstApi from '../../api/processInst';
  import modelApi from '../../api/model';
  import taskApi from '../../api/task';

  export default {
    mixins: [mixinPage],
    components: {},
    data() {
      return {
        task: null,
        model: null,
        comment: null,
        outcomes: [],
        readonly: true,
        isRejectable: false,
        isBackable: false,
        isRedirectable: false,
        isMessageEnable: false,
        messageData: {
          message: null
        },
        messageOpened: false,
        opened: false,
        isCustom: false,
        width: 800,
        name: null,
        description: null,
        customComponent: null,
        form: null
      };
    },
    async created() {},
    computed: {},
    methods: {
      // 打开
      async open(row) {
        let applicationType = row.processInst.applicationType;
        this.outcomes = [];
        this.task = row;
        this.isRejectable = this.task.activityInst.activity.isRejectable;
        this.isBackable = this.task.activityInst.activity.isBackable;
        this.isRedirectable = this.task.activityInst.activity.isRedirectable;
        this.isMessageEnable = this.task.processInst.isMessageEnable;
        this.isCustom = false;

        setTimeout(async () => {
          if (this.task.activityInst.activity.pageMode == 'Page') {
            // 路由跳转
            this.$router.push({ path: this.task.activityInst.activity.routerPath, query: { taskID: row.id } });
            return;
          } else if (this.task.activityInst.activity.pageMode == 'Component') {
            // 动态组件
            this.customComponent = this.$pages[this.task.activityInst.activity.templateUrl]; // 动态组件
            this.isCustom = true;

            setTimeout(async () => {
              if (applicationType.isCustom) {
                this.model = await customModelApi.get(applicationType.model, row.processInst.modelID);
              } else {
                this.model = await modelApi.get(applicationType.model, row.processInst.modelID);
              }

              this.customComponentReady();

              this.opened = true;
            });
          } else if (this.task.activityInst.activity.pageMode == 'Form') {
            this.form = this.$refs.form;
            this.form.init(this.task.activityInst.activity.formViewCode, async view => {
              if (view.dataView.isCustom) {
                this.model = await customModelApi.get(applicationType.model, row.processInst.modelID);
              } else {
                this.model = await modelApi.get(applicationType.model, row.processInst.modelID);
              }

              this.readonly = !this.task.activityInst.activity.isEditable;
              this.width = this.form.formView.width || '800';
              this.name = this.form.formView.name;
              this.description = this.form.formView.description;
              this.form.data = this.model;

              setTimeout(async () => {
                this.form.onDataChange();
                this.form.clearValidate();
                this.opened = true;
              });
            });
          } else if (applicationType.pageMode == 'Page') {
            this.$router.push({ path: applicationType.routerPath, query: { taskID: row.id } });
            return;
          } else if (applicationType.pageMode == 'Component') {
            // 动态组件
            this.customComponent = this.$pages[applicationType.templateUrl]; // 动态组件
            this.isCustom = true;

            setTimeout(async () => {
              if (applicationType.isCustom) {
                this.model = await customModelApi.get(applicationType.model, row.processInst.modelID);
              } else {
                this.model = await modelApi.get(applicationType.model, row.processInst.modelID);
              }

              this.customComponentReady();

              this.opened = true;
            });
          } else if (applicationType.pageMode == 'Form') {
            this.form = this.$refs.form;
            this.form.init(applicationType.formViewCode, async view => {
              if (view.dataView.isCustom) {
                this.model = await customModelApi.get(applicationType.model, row.processInst.modelID);
              } else {
                this.model = await modelApi.get(applicationType.model, row.processInst.modelID);
              }

              this.readonly = !this.task.activityInst.activity.isEditable;
              this.width = this.form.formView.width || '800';
              this.name = this.form.formView.name;
              this.description = this.form.formView.description;
              this.form.data = this.model;

              setTimeout(() => {
                this.form.onDataChange();
                this.form.clearValidate();
                this.opened = true;
              });
            });
          } else {
            this.error('Front_Msg_Setting_Error');
            return;
          }

          let res = await modelApi.query('Outcome', { activityFromID: row.activityInst.activityID });
          this.outcomes = res.data;
        });
      },
      // 自定义组件就绪
      customComponentReady() {
        if (this.$refs.customComponent.form) {
          this.form = this.$refs.customComponent.form;
          this.form.data = this.model;
          this.form.onDataChange();
          this.form.clearValidate();
          this.readonly = !this.task.activityInst.activity.isEditable;

          this.width = this.form.formView.width || '800';
          this.name = this.form.formView.name;
          this.description = this.form.formView.description;
        }
      },
      // 执行结果
      async action(outcome) {
        let isOK = await this.form.validate();

        if (!isOK) {
          this.error('Front_Msg_Form_Validate_Fail');
        } else {
          this.confirmInput(
            'Front_Msg_Sure_To_Application' + '|' + (outcome.name == null ? this.$t('Front_Label_Agree') : outcome.name),
            this.$t('Front_Label_Comment'),
            async () => {
              let data = null;
              if (!this.readonly) {
                data = this.form.getFullData();

                if (!data) {
                  // 表格验证失败
                  return;
                }
              }

              await taskApi.do(this.task.id, outcome.id, data, this.comment);
              this.success('Front_Msg_Success');
              this.resetNotice();
              this.$emit('on-after-action');
              this.opened = false;
            },
            comment => {
              this.comment = comment;
              return true;
            }
          );
        }
      },
      // 拒绝
      async reject() {
        this.confirmInput(
          'Front_Msg_Sure_To_Reject_Application',
          this.$t('Front_Label_Comment'),
          async () => {
            await taskApi.reject(this.task.id, this.comment);
            this.success('Front_Msg_Success');
            this.resetNotice();
            this.$emit('on-after-action');
            this.opened = false;
          },
          comment => {
            if (!(comment || '').trim()) {
              this.warning('Front_Msg_Please_Input_Reject_Reason');
              return false;
            } else {
              this.comment = comment;
              return true;
            }
          }
        );
      },
      // 退回上一步
      async back() {
        this.confirmInput(
          'Front_Msg_Sure_To_Back_Application',
          this.$t('Front_Label_Comment'),
          async () => {
            await taskApi.back(this.task.id, this.comment);
            this.success('Front_Msg_Success');
            this.resetNotice();
            this.$emit('on-after-action');
            this.opened = false;
          },
          comment => {
            if (!(comment || '').trim()) {
              this.warning('Front_Msg_Please_Input_Back_Reason');
              return false;
            } else {
              this.comment = comment;
              return true;
            }
          }
        );
      },
      // 转办
      async redirect() {
        let isOK = await this.$refs.redirectTaskForm.validate();

        if (!isOK) {
          this.error('Front_Msg_Form_Validate_Fail');
        } else {
          let model = this.$refs.redirectTaskForm.data;

          this.confirm('Front_Msg_Sure_To_Redirect_Application' + '|' + model.target.name, async () => {
            await taskApi.redirect(this.task.id, model.targetID, model.comment);
            this.success('Front_Msg_Success');
            this.resetNotice();
            this.$emit('on-after-action');
            this.$refs.redirectTaskForm.close();
            this.opened = false;
          });
        }
      },
      // 打开意见输入
      openMessage() {
        this.messageData.message = null;
        this.messageOpened = true;
      },
      // 提交意见
      async submitMessage() {
        let isOK = await this.$refs.messageForm.validate();

        if (!isOK) {
          this.error('Front_Msg_Form_Validate_Fail');
        } else {
          this.confirm('Front_Msg_Sure_To_Message_Application', async () => {
            await processInstApi.addMessage(this.task.processInstID, this.messageData.message);

            this.success('Front_Msg_Success', () => {
              this.messageData.message = null;
              this.messageOpened = false;
            });
          });
        }
      }
    }
  };
</script>
