<template>
  <admin-modal
    title="催办"
    width="600px"
    :visible.sync="visible"
    :loading="loading"
    @on-cancel="handleCancel"
    @on-confirm="handleSubmit"
  >
    <a-form-model ref="ruleForm" :model="form" :rules="rules" class="form-descriptions-word">
      <a-descriptions bordered size="small" class="descriptions-width">
        <a-descriptions-item label="催办方式" :span="3">
          <AdminRequiredSign required />
          <a-form-model-item prop="urgeTypeList">
            <HDictCheckbox v-model="form.urgeTypeList" dict-code="urge_type" />
          </a-form-model-item>
        </a-descriptions-item>
      </a-descriptions>
    </a-form-model>
  </admin-modal>
</template>

<script>
import { approvalTicketTaskUrge } from '@/components/hrhx/approval/api/services/approve.js'
import HDictCheckbox from '@/components/hrhx/form/HDictCheckbox'

export default {
  name: 'ApprovalUrgeModal',
  components: { HDictCheckbox },
  data() {
    return {
      visible: false,
      loading: false,
      form: {
        urgeTypeList: ''
      },
      urgeOptions: [],
      prevParams: {},
      rules: {
        urgeTypeList: [{ required: true, message: '请选择催办方式！', trigger: 'change' }]
      }
    }
  },
  methods: {
    openModal(record) {
      this.visible = true
      this.prevParams = record
    },

    handleCancel() {
      this.$refs.ruleForm.resetFields()
      this.visible = false
    },

    handleSubmit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          const params = {
            ...this.prevParams,
            ...this.form
          }
          this.loading = true
          approvalTicketTaskUrge(params)
            .then(() => {
              this.$message.success('操作成功！')
              this.handleCancel()
              this.$emit('on-ok')
            })
            .finally(() => (this.loading = false))
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/assets/css/descriptios-reset.css';

::v-deep .descriptions-width {
  .ant-descriptions-item-label.ant-descriptions-item-colon {
    width: 100px;
  }
}
</style>
