<template>
  <div class="comp-content">
    <Dialog
      :loading="loadingInterface"
      v-model="dialogVisible"
      diaTitle="提交评审"
      :width="500"
      :height="500"
      @close="closeFun"
      show-footer
    >
      <el-form
        ref="approveFormRef"
        :rules="approveFormRules"
        :model="approveForm"
        label-width="auto"
      >
        <el-form-item label="审批模板：" prop="approve">
          <ApproveList v-model="approveForm.approve" />
        </el-form-item>
        <!-- <el-form-item label="更新模式：" v-if="operationType !== FLOW_OPERATION_TYPE.UPGRADE">
          <el-radio-group v-model="approveForm.updateMode">
            <el-radio value="update" size="large">更新草稿</el-radio>
            <el-radio value="upgrade" size="large">升版草稿</el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="升级方式：" v-if="approveForm.updateMode === 'upgrade'">
          <el-radio-group v-model="approveForm.versionType">
            <el-radio value="1" size="large">大版本</el-radio>
            <el-radio value="0" size="large">小版本</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="通过后版本：">
          {{ approveForm.updateMode === 'upgrade' ? upgradeToVersion : templateVersion }}
        </el-form-item>
      </el-form>
      <template #footer>
        <div>
          <el-button @click="closeFun">取消</el-button>
          <el-button type="primary" @click="confirmFun" :loading="loadingInterface">确定</el-button>
        </div>
      </template>
    </Dialog>
  </div>
</template>
<script lang="ts" setup>
import Dialog from '@/components/common/dialog/index.vue';
// import { ElMessage } from 'element-plus';
import { computed, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
import ApproveList from '@/components/common/approveList/index.vue';
import { releaseFlowTemplateApi, upgradeFlowTemplateDraftApi } from '@/api/capability/flow';
import { FLOW_OPERATION_TYPE } from '@/utils/enum/flow';

const props = defineProps<{
  showDialog: boolean;
  uuid?: string;
  // versionType:string;
  graph: any;
  nodeRelation: any[];
  flowDetail: any;
  operationType: string;
  templateVersion: string;
}>();

const loadingInterface = ref(false);

const dialogVisible = computed({
  get() {
    return props.showDialog;
  },
  set(val) {
    emits('update:showDialog', val);
  },
});
const emits = defineEmits(['update:showDialog', 'confirm', 'saveDraft']);

const approveForm = reactive<any>({
  approve: '',
  updateMode: props.operationType === FLOW_OPERATION_TYPE.UPGRADE ? 'upgrade' : 'update',
  versionType: '1',
});

const upgradeToVersion = computed(() => {
  try {
    const version = Number(props.templateVersion.split('V')[1]);
    // if (props.operationType === FLOW_OPERATION_TYPE.UPGRADE) {
    if (approveForm.versionType === '1') {
      return `V${Math.floor(version) + 1}`;
    } else {
      return `V${(version * 10 + 1) / 10}`;
    }
    // }
  } catch {}
  return 'V1.0';
});

const approveFormRef = ref();

const approveFormRules = reactive<any>({
  approve: [{ required: true, message: '请选择审批模板', trigger: 'change' }],
});

const confirmFun = async () => {
  approveFormRef.value.validate(async (valid: boolean) => {
    if (valid) {
      loadingInterface.value = true;
      if (approveForm.updateMode === 'update') {
        emits('saveDraft', async () => {
          await submitApproveFun();
        });
      } else {
        const upgradeRes: any = await upgradeDraftFun({
          templateName: props.flowDetail.templateName,
          templateContent: JSON.stringify(props.nodeRelation),
          viewContent: JSON.stringify(props.graph.toJSON()),
          templateType: props.flowDetail.templateType,
          comment: props.flowDetail.comment,
          versionType: approveForm.versionType,
          templateCode: props.flowDetail.templateCode,
        });
        await submitApproveFun(upgradeRes.data);
      }
      loadingInterface.value = false;
      emits('update:showDialog', false);
    }
  });
};

const upgradeDraftFun = async (params: any) => {
  const res: any = await upgradeFlowTemplateDraftApi(params);
  if (res.code === 200) {
    return res;
  } else {
    ElMessage.error(res.message);
  }
};

const submitApproveFun = async (uuid: string = props.uuid || '') => {
  const res: any = await releaseFlowTemplateApi({
    uuid: uuid,
    // versionType: props.versionType,
    approveTemplateId: approveForm.approve,
  });
  if (res.code === 200) {
    ElMessage.success('提交成功');
  } else {
    ElMessage.error(res.message);
  }
};

const closeFun = () => {
  emits('update:showDialog', false);
};

defineExpose({});
</script>
