<script setup lang="ts">
import { ref, computed, reactive } from "vue";
import { useAsync } from "/@/hooks";
import { ElForm } from "element-plus";
import { actionTypes, operactionTypes, rules } from "./../config/configs";
import {
  httpDetail,
  httpAdd,
  httpList,
  httpUpdate
} from "/@/api/parameter/setActionProcess";
const emit = defineEmits(["reload"]);
const props = defineProps<{
  currentProcess: Record<string, string>;
}>();

const id = ref("");
const readonly = ref(false);

const visible = ref(false);
const formRef = ref<InstanceType<typeof ElForm>>(null);
const isCreate = computed(() => !id.value);

const formData = ref<Record<string, string>>({
  action_type: "",
  operation_type: "",
  status_name: "",
  order_process: "",
  next_action_ids: []
});

const onBeforeAction = () => {
  visible.value = false;
  emit("reload");
};

const showNextNode = computed(
  () => formData.value.action_type === "1" || formData.value.action_type === "2"
);

const {
  run: listRun,
  data: list,
  listLoading
} = useAsync<Array<Record<string, string>>>({
  initalData: [],
  isList: []
});

const {
  run: detailRun,
  data: detail,
  loading: detailLoading
} = useAsync<Record<string, string>>({
  initalData: {},
  success: () => {
    const {
      order_process,
      status_name,
      operation_type,
      action_type,
      next_action_ids
    } = detail.value;

    console.log(next_action_ids);

    formData.value = {
      order_process,
      status_name,
      operation_type,
      action_type,
      next_action_ids: next_action_ids.filter(val => val)
    };
  }
});

const { run: createRun, loading: createLoading } = useAsync<
  Record<string, string>
>({
  success: () => onBeforeAction()
});

const { run: updateRun, loading: updateLoading } = useAsync<
  Record<string, string>
>({
  success: () => onBeforeAction()
});

function create() {
  const { currentProcess } = props;
  createRun(
    httpAdd({
      process_id: currentProcess.id,
      ...formData.value
    })
  );
}

function update() {
  const { currentProcess } = props;
  updateRun(
    httpUpdate({
      id: id.value,
      process_id: currentProcess.id,
      ...formData.value
    })
  );
}

function handleConfirm() {
  formRef.value.validate(isValid => {
    if (!isValid) return;

    if (isCreate.value) return create();

    update();
  });
}

const title = computed(() => {
  if (readonly.value) return "流程节点详情";
  return isCreate.value ? "创建流程节点" : "编辑流程节点";
});

defineExpose({
  onDisplay(_id?: string, _readonly = false) {
    console.log(_id);
    visible.value = true;
    id.value = _id;
    readonly.value = _readonly;

    listRun(httpList({ process_id: props.currentProcess.id }));

    if (id.value) return detailRun(httpDetail({ id: id.value }));
  }
});
</script>

<template>
  <el-dialog
    v-model="visible"
    :title="title"
    center
    @close="() => (formData = { ...initalData })"
    :rules="rules"
    :close-on-click-modal="false"
  >
    <el-form
      label-width="100px"
      :model="formData"
      :disabled="readonly"
      v-loading="detailLoading || listLoading"
      ref="formRef"
    >
      <el-form-item label="节点类型" prop="action_type">
        <el-select w-full v-model="formData.action_type">
          <el-option
            v-for="action in actionTypes"
            :key="action.value"
            :value="action.value"
            :label="action.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="操作类型" prop="operation_type">
        <el-select w-full v-model="formData.operation_type">
          <el-option
            v-for="operation in operactionTypes"
            :key="operation.value"
            :value="operation.value"
            :label="operation.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="节点名称" prop="status_name">
        <el-input v-model="formData.status_name" />
      </el-form-item>
      <el-form-item label="节点值" prop="order_process">
        <el-input v-model="formData.order_process" />
      </el-form-item>

      <el-form-item label="下一节点" v-if="showNextNode" prop="next_action_ids">
        <el-checkbox-group v-model="formData.next_action_ids">
          <el-checkbox
            v-for="item in list"
            :label="item.id"
            :key="item.id"
            :disabled="item.id === id"
          >
            {{ item.status_name }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>

      <el-form-item>
        <div flex w-full justify-end>
          <el-button
            :loading="updateLoading || createLoading"
            type="primary"
            @click="() => handleConfirm()"
            >保存
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
