<template>
  <van-popup
    v-model="dialogVisible"
    class="ibps-fullscreen-popup"
    position="bottom"
    @opened="openedDialog"
  >
    <div v-if="!dialogLoading" class="ibps-fixed-top">
      <van-nav-bar
        :title="actionTitle"
        fixed
        @click-left="closeDialog"
      >
        <template #left>
          <van-icon name="cross" class="ibps-nav-bar__close-icon" />
        </template>
      </van-nav-bar>
      <van-form ref="form">
        <van-cell-group>
          <ibps-user-selector
            v-model="form.addSignTaskUserId"
            label="补签人员"
            type="user"
            store="id"
            multiple
            clearable
            required
            :rules="[{ required: true, message: '必填' }]"
          />

          <ibps-checkbox
            v-model="form.messageType"
            :options="messageTypes"
            label="提醒消息"
            placeholder="请选择"
            clearable
            required
          />
          <approval-opinion
            v-if="!hideOpinion"
            v-model="form.addReason"
            :action="action"
            label="补签原因"
            placeholder="请输入补签原因"
            :rules="[{ required: true, message: '必填' }]"
          />
        </van-cell-group>
      </van-form>
      <ibps-toolbar
        v-if="$utils.isNotEmpty(toolbars)"
        :actions="toolbars"
      />
    </div>
  </van-popup>
</template>

<script>
import { queryIncludeNull } from '@/api/platform/bpmn/bpmCommonStatment'
import ActionUtils from '@/utils/action'
import ApprovalOpinion from '@/business/platform/bpmn/components/approval-opinion'
import bpmnStatus from '@/mixins/bpmnStatus'
import IbpsUserSelector from '@/business/platform/org/selector'
import IbpsToolbar from '@/components/ibps-toolbar'
export default {
  components: {
    IbpsUserSelector,
    ApprovalOpinion,
    IbpsToolbar
  },
  mixins: [bpmnStatus],
  props: {
    className: String,
    visible: Boolean,
    action: String,
    title: String,
    taskId: String,
    data: [String, Object],
    hideOpinion: { // 隐藏意见
      type: Boolean,
      default: false
    },
    formOpinion: { // 表单意见
      type: String
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      dialogLoading: true,
      formName: 'form',
      formLabelWidth: '130px',
      messageTypes: [{
        value: 'inner',
        label: '内部消息'
      }, {
        value: 'mail',
        label: '内部消息'
      }, {
        value: 'sms',
        label: '短信'
      }],
      form: {
        addSignTaskUserId: '',
        messageType: 'inner,mail',
        opinion: ''
      }
    }
  },
  computed: {
    actionTitle() {
      if (this.title) {
        return this.title
      }
      return '补签'
    },
    toolbars() {
      if (!this.action) {
        return []
      }
      return [{
        'name': this.actionTitle,
        'type': 'primary',
        'callback': this.handleSave
      }]
    }
  },
  watch: {
    visible: {
      handler: function(val, oldVal) {
        this.dialogVisible = this.visible
      },
      immediate: true
    }
  },
  methods: {
    closeDialog() {
      this.$emit('close', false)
      this.dialogLoading = true
    },
    openedDialog() {
      this.dialogLoading = true
      if (this.$utils.isNotEmpty(this.formOpinion)) {
        this.form.opinion = this.formOpinion
      } else {
        queryIncludeNull(ActionUtils.formatParams(
          {
            'Q^ACTION_^S': this.action,
            'Q^CREATE_BY_^S': this.$store.getters.userId
          })).then(response => {
          this.dialogLoading = false
          const data = response.variables && response.variables.def ? response.variables.def.value || '' : ''
          if (this.$utils.isNotEmpty(data)) {
            this.form.opinion = data
          }
          this.formValidate()
        }).catch(() => {
          this.dialogLoading = false
        })
      }
    },
    /**
     * 表单验证
     */
    formValidate() {
      this.$nextTick(() => {
        this.$refs[this.formName].validate(() => {})
      })
    },
    handleSave() {
      this.$refs[this.formName].validate().then(() => {
        this.$emit('action-event', this.action, this.form)
      }).catch(() => {
        ActionUtils.saveErrorMessage()
      })
    }
  }
}
</script>
