<template>
  <!-- 知会 -->
  <a-modal
    :destroy-on-close="true"
    :title="currentActionButton.buttonName"
    :body-style="{ overflow: 'auto' }"
    :width="600"
    :visible="showInformModal"
    @ok="handleOkInform"
    @cancel="handleCancelInform"
  >
    <a-form-model
      ref="informForm"
      layout="horizontal"
      :class="$style.inform"
      :model="informForm"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 18 }"
      :rules="informRules"
    >
      <a-form-model-item :label="`${currentActionButton.buttonName}人员`" prop="users" required>
        <sd-user-picker
          v-model="informForm.users"
          :single="false"
          :read-only="false"
          :hierarchical="hierarchical"
          :secret-level="webflow.getFieldValue('secretLevel')"
        />
      </a-form-model-item>
      <a-form-model-item :label="`${currentActionButton.buttonName}信息`">
        <sd-opinion-model
          ref="opinionModel"
          v-model="informForm.content"
          :group-id="informForm.groupId"
          :hand-write="false"
          :cyy-popup-container="cyyPopupContainer"
        />
      </a-form-model-item>
      <a-form-model-item label="高级设置">
        <a-checkbox v-model="informForm.requireFeedbackOpinion">反馈意见必填</a-checkbox>
        <a-tooltip>
          <template slot="title">
            被{{ currentActionButton.buttonName }}人必须填写反馈信息，待阅才能变为已阅
          </template>
          <a-icon type="exclamation-circle" :class="$style.exclamation" /> </a-tooltip
        ><br />
        <a-checkbox v-model="informForm.followFeedback">关注反馈</a-checkbox>
        <a-tooltip>
          <template slot="title">
            被{{ currentActionButton.buttonName }}人填写反馈信息后，{{
              currentActionButton.buttonName
            }}发起人会收到一条系统消息
          </template>
          <a-icon type="exclamation-circle" :class="$style.exclamation" />
        </a-tooltip>
      </a-form-model-item>
      <sd-notify-type v-model="notifyType" />
    </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-inform-import'
const duration = 1
export default {
  name: 'SdWorkflowInform',
  metaInfo: {
    title: 'SdWorkflowInform',
  },
  components,
  data() {
    // message不支持动态设置提示语，使用validator方式
    const informValidator = (rule, value, callback) => {
      if (!value.length) {
        callback(new Error(`请选择${this.currentActionButton.buttonName}人员`))
      } else {
        callback()
      }
    }
    return {
      currentActionButton: {},
      showInformModal: false,
      informForm: {
        users: [],
        content: '',
        requireFeedbackOpinion: false,
        followFeedback: false,
        groupId: '',
      },
      informRules: {
        users: [
          {
            validator: informValidator,
            trigger: 'change',
          },
        ],
      },
      hierarchical: false,
      notifyType: [],
    }
  },
  methods: {
    run({ button }) {
      this.currentActionButton = button
      this.showInformModal = true
      // 获取groupId
      FlowService.getGroupCode().then((res) => {
        if (res.status === 200) {
          if (res.data) {
            this.informForm.groupId = res.data.toString()
          } else {
            Message.error('获取groupId失败')
          }
        } else {
          Message.error(res.statusText)
        }
      })
      // 反馈意见必填默认选中(点击反馈变已阅)
      if (button.attrs?.informType === 'clickRead') {
        this.informForm.requireFeedbackOpinion = true
      }
      FlowService.getActionInfo(this.webflow.FlowData, button, this.webflow.getFormData()).then(
        (res) => {
          this.hierarchical = res?.hierarchical !== '0'
        }
      )
    },
    cyyPopupContainer() {
      return document.body
    },
    handleOkInform() {
      this.$refs.informForm.validate((valid) => {
        if (valid) {
          const informUsers = this.informForm.users.map((item) => ({
            userAccount: item.code,
            userName: item.name,
          }))
          this.showInformModal = false
          const opValue = {
            value: {
              signUserName: getUserInfo().name,
              signDeptName: this.webflow.FlowData?.attrs?.userFlowDeptName,
              signContent: this.informForm.content,
              signDate: new Date().getTime(),
              attrs: { attachment: this.informForm.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.inform(
              this.webflow.FlowData,
              informUsers,
              opinions,
              this.informForm.requireFeedbackOpinion,
              this.informForm.followFeedback,
              this.notifyType
            ).then(
              () => {
                this.webflow.updateFlow()
                Message.success({
                  content: `已${this.currentActionButton.buttonName}处理人`,
                  key,
                  duration,
                })
                this.informForm = {
                  users: [],
                  content: '',
                  requireFeedbackOpinion: false,
                  followFeedback: false,
                  groupId: '',
                }
              },
              (_) => {
                Message.error('处理失败')
              }
            )
          })
        }
      })
    },
    handleCancelInform() {
      this.showInformModal = false
      this.informForm.groupId = ''
    },
  },
}
</script>

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