<template>
  <a-modal
    :destroy-on-close="true"
    :title="currentActionButton.buttonName"
    :body-style="{ overflow: 'auto' }"
    :width="600"
    :visible="showInformModal"
    @ok="handleOkInform"
    @cancel="() => (showInformModal = false)"
  >
    <a-form-model
      ref="feedBackForm"
      layout="horizontal"
      :class="$style.inform"
      :model="feedBackForm"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      :rules="informRules"
    >
      <a-form-model-item :label="`意见信息`" prop="content" required>
        <a-textarea
          v-model="feedBackForm.content"
          :placeholder="`请输入${currentActionButton.buttonName}信息`"
          :rows="2"
        />
        <sd-attachment
          v-if="feedBackForm.groupId"
          ref="attachment"
          list-type="text"
          :group-id="feedBackForm.groupId"
          :cat-num="-5"
        >
          <a>上传附件</a>
        </sd-attachment>
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { Message } from 'ant-design-vue'
import storeMixin from '@/common/store-mixin'
import FlowService from '../flow-service'
import components from './_import-components/sd-workflow-feedback-comm-import'
const duration = 1

export default {
  name: 'SdWorkflowFeedbackComm',
  components,
  mixins: [storeMixin],
  data() {
    const commValidator = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error(`请输入${this.currentActionButton.buttonName}信息`))
      } else {
        callback()
      }
    }
    return {
      currentActionButton: {},
      showInformModal: false,
      feedBackForm: {
        content: '',
        groupId: '',
      },
      informRules: {
        content: [
          {
            validator: commValidator,
            trigger: 'change',
          },
        ],
      },
    }
  },
  methods: {
    run({ button }) {
      this.currentActionButton = button
      this.showInformModal = true
      FlowService.getGroupCode().then((res) => {
        if (res.status === 200) {
          if (res.data) {
            this.feedBackForm.groupId = res.data.toString()
          } else {
            Message.error('获取groupId失败')
          }
        } else {
          Message.error(res.statusText)
        }
      })
    },
    handleOkInform() {
      this.$refs.feedBackForm.validate((valid) => {
        if (valid) {
          const opValue = {
            value: {
              signUserName: this.userInfo.name,
              signDeptName: this.webflow.FlowData?.attrs?.userFlowDeptName,
              signContent: this.feedBackForm.content,
              signDate: new Date().getTime(),
              attrs: { attachment: this.feedBackForm.groupId },
            },
          }
          const opinions = [
            {
              name: 'opinion',
              value: JSON.stringify(opValue),
            },
          ]
          const key = Symbol.for()
          Message.loading({ content: '处理中...', key })
          this.webflow.FlowData.inputs = this.webflow.getFormData()
          this.webflow.checkLock().then(() => {
            FlowService.connectReply(this.webflow.FlowData, opinions).then(
              () => {
                this.showInformModal = false
                Message.success({
                  content: `您已经完成沟通反馈`,
                  key,
                  duration,
                }).then(() => {
                  this.webflow.close(true)
                })
                this.feedBackForm = {
                  content: '',
                }
              },
              (_) => {
                Message.error('处理失败')
              }
            )
          })
        }
      })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.inform {
  :global(.ant-form-item) {
    margin-bottom: 1px;
  }
}
.zhihui {
  padding-left: 90px;
}
.uploadbtn {
  :global(.ant-list) {
    width: 510px;
    padding-left: 90px;
  }
}
</style>
