<template>
  <!-- 反馈知会 -->
  <a-modal
    :destroy-on-close="true"
    :title="currentActionButton.buttonName"
    :body-style="{ overflow: 'auto' }"
    :width="600"
    :visible="showReplyInformModal"
    @ok="handleOkReplyInform"
    @cancel="() => (showReplyInformModal = false)"
  >
    <a-form-model
      ref="replyInformForm"
      layout="horizontal"
      :class="$style.inform"
      :model="replyInformForm"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 18 }"
      :rules="replyInformRules"
    >
      <a-form-model-item
        ref="opinionModelItem"
        label="反馈信息"
        :prop="webflow.FlowData.attrs.openRead ? '' : 'content'"
      >
        <sd-opinion-model
          ref="opinionModel"
          v-model="replyInformForm.content"
          :group-id="replyInformForm.groupId"
          :hand-write="false"
          :cyy-popup-container="cyyPopupContainer"
          @input="
            () => {
              $refs.opinionModelItem.onFieldBlur()
            }
          "
          @attachmentChange="
            () => {
              $refs.opinionModelItem.onFieldBlur()
            }
          "
        />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>

<script>
import { Message } from 'ant-design-vue'
import { getUserInfo } from '@/common/store-mixin'
import FlowService from '../flow-service'
import components from './_import-components/sd-workflow-feedback-to-read-import'
const duration = 1
export default {
  name: 'SdWorkflowFeedbackToRead',
  metaInfo: {
    title: 'SdWorkflowFeedbackToRead',
  },
  components,
  data() {
    return {
      currentActionButton: {},
      showReplyInformModal: false,
      replyInformForm: {
        content: '',
        groupId: '',
      },
      replyInformRules: {
        content: [
          {
            required: this.webflow.FlowData.attrs.feedbackOpinionRequired,
            message: '请输入反馈信息',
            trigger: ['change', 'blur'],
            validator: (rule, value, callback) =>
              this.$refs.opinionModel.validator(
                rule,
                value,
                callback
              )(this.webflow.FlowData.attrs.feedbackOpinionRequired),
          },
        ],
      },
    }
  },
  methods: {
    run({ button }) {
      this.currentActionButton = button
      // 获取groupId
      FlowService.getGroupCode()
        .then((res) => {
          if (res.status === 200) {
            if (res.data) {
              this.replyInformForm.groupId = res.data.toString()
            } else {
              Message.error('获取groupId失败')
            }
          } else {
            Message.error(res.statusText)
          }
        })
        .finally(() => {
          this.showReplyInformModal = true
        })
    },
    cyyPopupContainer() {
      return document.body
    },
    handleOkReplyInform() {
      this.$refs.replyInformForm.validate((valid) => {
        if (valid) {
          // 由于待阅打开后的返回信息里没有informId 所以从这里取
          const informId = this.$route.params.id
          const opValue = {
            value: {
              signUserName: getUserInfo().name,
              signDeptName: this.webflow.FlowData?.attrs?.userFlowDeptName,
              signContent: this.replyInformForm.content,
              signDate: new Date().getTime(),
              attrs: { attachment: this.replyInformForm.groupId },
            },
          }
          const opinions = [
            {
              name: 'opinion',
              value: JSON.stringify(opValue),
            },
          ]
          const key = Symbol.for()
          Message.loading({ content: '处理中...', key, duration })
          this.webflow.FlowData.inputs = this.webflow.getFormData()
          FlowService.feedbackToRead(this.webflow.FlowData, informId, opinions).then(
            (res) => {
              Message.success({ content: '回复成功', key, duration }).then(() => {
                this.webflow.close(true)
              })
            },
            () => {
              Message.error({ content: '回复失败', key, duration })
            }
          )
        }
      })
    },
  },
}
</script>

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