<template>
  <span @click.stop="handleUrge">
    <slot></slot>
    <a-modal
      v-model:visible="visibleRef"
      :title="t('催办确认')"
      width="400px"
      @ok="handleSubmit"
      @cancel="close"
      :okText="t('确认')"
      :cancelText="t('取消')"
      @click.stop=""
      :style="{ top: '30%' }"
      :bodyStyle="{ padding: '20px 0' }"
    >
      <a-row>
        <a-col :offset="2">催办方式：</a-col>
        <a-col>
          <a-checkbox-group v-model:value="checkedList" :options="options" />
        </a-col>
      </a-row>
    </a-modal>
  </span>
</template>
<script lang="ts" setup>
  import { ref, onMounted } from 'vue';
  import { message } from 'ant-design-vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { processUrge } from '/@/api/workflow/task';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const props = withDefaults(
    defineProps<{
      processId: string;
      taskId: string;
      status: string;
      visible?: boolean;
    }>(),
    {
      processId: '',
      taskId: '',
      status: '',
      visible: false,
    },
  );

  const options = [
    {
      label: '系统消息',
      value: 0,
    },
    {
      label: '短信',
      value: 1,
    },
  ];

  const { notification } = useMessage();
  const visibleRef = ref(false);
  const checkedList = ref([0]);
  const emits = defineEmits(['close']);

  onMounted(() => {
    if (props.visible) {
      handleUrge();
    }
  });

  const close = () => {
    visibleRef.value = false;
    emits('close');
  };

  const handleUrge = () => {
    let type: any = '';
    let description = '';
    if (props.status === '审批结束') {
      type = 'warning';
      description = t('当前流程已经审批结束，无法进行催办。');
    } else if (props.status.indexOf('已催办') !== -1) {
      type = 'warning';
      description = t('当前流程已催办，请耐心等待。');
    } else {
      visibleRef.value = true;
      return;
    }
    notification.open({
      type,
      message: t('催办'),
      description,
    });
    close();
  };

  const handleSubmit = async () => {
    if (!checkedList.value.length) {
      message.error('请选择催办方式');
      return;
    }
    const params = {
      urgeType: checkedList.value.toString(),
      processId: props.processId!,
      taskId: props.taskId!,
    };
    await processUrge(params);
    close();
    checkedList.value = [0];
    notification.success({
      message: t('提示'),
      description: '已成功催办',
    });
  };
</script>
