<template>
  <ele-modal
    :width="500"
    :visible="visible"
    :title="`编辑工单`"
    :body-style="{ paddingBottom: '28px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      ref="formRef"
      :model="form"
      :label-col="{ md: { span: 4 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 18 }, sm: { span: 18 }, xs: { span: 24 } }"
    >
      <a-form-item label="工单类型" name="taskType">
        <a-select
          optionFilterProp="label"
          placeholder="请选择工单类型"
          :options="taskType"
          allow-clear
          v-model:value="form.taskType"
        />
      </a-form-item>
      <a-form-item label="工单标题" name="name">
        <a-input
          allow-clear
          placeholder="请输入工单标题"
          v-model:value="form.name"
        />
      </a-form-item>
      <a-form-item label="关联项目">
        <SelectApp v-model:value="form.appName" @done="chooseApp" />
      </a-form-item>
      <a-form-item label="联系方式" name="phone">
        <a-input
          allow-clear
          :maxlength="11"
          placeholder="请输入手机号码"
          v-model:value="form.phone"
        />
      </a-form-item>
      <a-form-item label="逾期天数" name="overdueDays">
        <a-input
          allow-clear
          placeholder="请输入逾期天数"
          v-model:value="form.overdueDays"
        />
      </a-form-item>
    </a-form>
  </ele-modal>
</template>
<script lang="ts" setup>
  import { watch } from 'vue';
  import useFormData from '@/utils/use-form-data';
  import { Task } from '@/api/oa/task/model';
  import { getDictionaryOptions } from '@/utils/common';
  import { App } from '@/api/oa/app/model';
  import { updateTask } from '@/api/oa/task';
  import { message } from 'ant-design-vue';

  const props = defineProps<{
    // 弹窗是否打开
    visible: boolean;
    data: Task;
  }>();

  const emit = defineEmits<{
    (e: 'done'): void;
    (e: 'update:visible', visible: boolean): void;
  }>();

  /* 更新visible */
  const updateVisible = (value: boolean) => {
    emit('update:visible', value);
  };
  const taskType = getDictionaryOptions('taskType');

  // 应用信息
  const { form, resetFields, assignFields } = useFormData<Task>({
    taskId: undefined,
    taskType: '',
    phone: '',
    overdueDays: undefined,
    appId: undefined,
    appName: '',
    name: ''
  });

  const chooseApp = (item: App) => {
    console.log(item);
    form.appId = item.appId;
    form.appName = item.appName;
  };

  const save = () => {
    const { taskId, taskType, phone, appId, name, overdueDays } = form;
    updateTask({ taskId, taskType, phone, appId, name, overdueDays }).then(
      (msg) => {
        message.success(msg);
        updateVisible(false);
        emit('done');
      }
    );
  };

  watch(
    () => props.visible,
    (visible) => {
      if (visible) {
        if (props.data) {
          assignFields(props.data);
        }
      } else {
        resetFields();
      }
    }
  );
</script>
<style scoped lang="less">
  .upload-image {
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
  }
</style>
