<script setup>
import { ElMessage } from 'element-plus'
import { defineExpose, nextTick, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import useWorkFlowStore from '@/store/modules/workFlow'
import errorDialog from '@/components/dialog/errorDialog.vue'
import promoterDrawer from '@/components/drawer/promoterDrawer.vue'
import approverDrawer from '@/components/drawer/approverDrawer.vue'
import copyerDrawer from '@/components/drawer/copyerDrawer.vue'
import conditionDrawer from '@/components/drawer/conditionDrawer.vue'
import { addProcess, editProcess, getDirectorLevel, getProcessDetail, unloadProcess } from '@/api/system/process'
import userStore from '@/store/modules/user'
const props = defineProps({
  allowEditNode: {
    type: Boolean,
    default: true,
  },
  getRowData: {
    type: Object,
    default: () => {},
  },
  selectFormId: String,
  isAddProcess: {
    type: Boolean,
    default: false,
  },
})

const user = userStore()
const workFlowStore = useWorkFlowStore()
const router = useRouter()
const tipList = ref([])
const tipVisible = ref(false)
const nowVal = ref(100)
const processConfig = ref({})
const nodeConfig = ref({})
const workFlowDef = ref({})
const flowPermission = ref([])
const directorMaxLevel = ref(0)
const initDetail = async (formid) => {
  const res = await getProcessDetail(formid)
  return res.data
}
onMounted(async () => {
  let max = 0 // 审批主管最大层级

  // 获取此用户的审批主管的最大层级
  getDirectorLevel(user.id).then((res) => {
    max = res.data.level
  })
  const route = useRoute()
  nextTick(async () => {
    let data
    if (!props.isAddProcess) { // 非新建流程--调流程详情接口
      data = await initDetail(props.selectFormId)
    }
    else { // 新建流程
      data = {
        tableId: 1,
        workFlowDef: {
          name: '合同审批',
        },
        directorMaxLevel: max,
        flowPermission: [],
        nodeConfig: {
          nodeName: '发起人',
          type: 0,
          priorityLevel: '',
          settype: '',
          selectMode: '',
          selectRange: '',
          directorLevel: '',
          examineMode: '',
          noHanderAction: '',
          examineEndDirectorLevel: '',
          ccSelfSelectFlag: '',
          conditionList: [],
          nodeUserList: [],
          conditionNodes: [],
        },
      }
    }
    processConfig.value = data
    const {
      nodeConfig: nodes,
      flowPermission: flows,
      directorMaxLevel: directors,
      workFlowDef: works,
      tableId,
    } = data
    nodeConfig.value = nodes
    flowPermission.value = flows
    // directorMaxLevel.value = directors
    directorMaxLevel.value = max
    workFlowDef.value = works
    workFlowStore.setTableId(tableId)
  })
})
const toReturn = () => {
  // window.location.href = ""
}

const reErr = ({ childNode }) => {
  if (JSON.stringify(childNode) === '{}') {
    const { type, error, nodeName, conditionNodes } = childNode
    if (type == 1 || type == 2) {
      if (error) {
        tipList.value.push({
          name: nodeName,
          type: ['', '审核人', '抄送人'][type],
        })
      }
      reErr(childNode)
    }
    else if (type == 3) {
      reErr(childNode)
    }
    else if (type == 4) {
      reErr(childNode)
      for (let i = 0; i < conditionNodes.length; i++) {
        if (conditionNodes[i].error) {
          tipList.value.push({ name: conditionNodes[i].nodeName, type: '条件' })
        }
        reErr(conditionNodes[i])
      }
    }
  }
  else {
    console.log('childNode = null')
    childNode = null
  }
}
const saveSet = async () => {
  if (!props.isAddProcess) {
    processConfig.value.formId = props.getRowData.formId
    processConfig.value.formName = props.getRowData.formName
    processConfig.value.formDesc = props.getRowData.formDesc
    processConfig.value.formContent = props.getRowData.formDesc
    processConfig.value.workFlowDef.flowKey = props.getRowData.flowKey
    processConfig.value.workFlowDef.directorId = props.getRowData.directorId
    processConfig.value.workFlowDef.name = props.getRowData.name
  }
  else {
    processConfig.value.formId = props.getRowData.formID
    processConfig.value.formName = props.getRowData.business
    processConfig.value.formDesc = props.getRowData.desc
    processConfig.value.formContent = props.getRowData.desc
    processConfig.value.workFlowDef.directorId = user.id
    processConfig.value.workFlowDef.name = props.getRowData.name
  }

  workFlowStore.setIsTried(true)
  tipList.value = []
  reErr(nodeConfig.value)
  reErr(processConfig.value)
  if (tipList.value.length != 0) {
    tipVisible.value = true
    return
  }
  processConfig.value.flowPermission = flowPermission.value

  if (!props.isAddProcess) {
    const res = await editProcess(processConfig.value)
    if (res.code == 200) {
      ElMessage.success('编辑流程成功')
    }
  }
  else {
    const res = await addProcess(processConfig.value)
    if (res.code == 200) {
      ElMessage.success('创建流程成功')
    }
  }
}
defineExpose({
  saveSet, initDetail,
})

const zoomSize = (type) => {
  if (type == 1) {
    if (nowVal.value == 50) {
      return
    }
    nowVal.value -= 10
  }
  else {
    if (nowVal.value == 300) {
      return
    }
    nowVal.value += 10
  }
}
</script>

<template>
  <div class="workFlow-setting">
    <!-- <div class="fd-nav">
      <div class="fd-nav-left">
        <div class="fd-nav-back" @click="toReturn">
          <i class="anticon anticon-left" />
        </div>
        <div class="fd-nav-title">
          {{ workFlowDef.name }}
        </div>
      </div>
      <div class="fd-nav-right">
        <button type="button" class="ant-btn button-publish" @click="saveSet">
          <span>发 布</span>
        </button>
      </div>
    </div> -->
    <!-- <div class="close-button">
      <el-button type="primary" @click="closeSetting">
        关 闭
      </el-button>
    </div> -->
    <!-- <el-button>保存</el-button> -->
    <div class="fd-nav-content">
      <section class="dingflow-design">
        <!-- <div class="zoom">
          <div class="zoom-out" :class="nowVal === 50 && 'disabled'" @click="zoomSize(1)" />
          <span>{{ nowVal }}%</span>
          <div class="zoom-in" :class="nowVal === 300 && 'disabled'" @click="zoomSize(2)" />
        </div> -->
        <!-- 可编辑 -->
        <div v-if="allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
          <node-wrap v-if="props.allowEditNode" v-model:nodeConfig="nodeConfig" v-model:flowPermission="flowPermission" />
          <div class="end-node">
            <p>结束</p>
          </div>
        </div>
        <!-- 不可编辑 -->
        <div v-if="!allowEditNode" class="box-scale" :style="`transform: scale(${nowVal / 100});`">
          <node-wrap-ban :node-config="nodeConfig" :flow-permission="flowPermission" />
          <div class="end-node">
            <p>结束</p>
          </div>
        </div>
      </section>
    </div>
    <error-dialog v-model:visible="tipVisible" :list="tipList" />
    <promoter-drawer />
    <approver-drawer :director-max-level="directorMaxLevel" />
    <copyer-drawer />
    <condition-drawer />
  </div>
</template>

<style lang="scss" scoped>
.workFlow-setting {
  margin-top: 10px;

  .close-button {
    display: flex;
    justify-content: flex-end;
    margin: 20px;
  }

  .box-scale {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  // .end-node-circle {
  .end-node {
    justify-content: center;
    flex-direction: column;
    align-content: center;

    p {
      width: 280px;
      height: 40px;
      line-height: 40px;
      color: #fff;
      text-align: center;
      background-color: #8cafff;
      border-radius: 4px;
      font-size: 14px;
      margin: 0;
    }
  }
}

// }
</style>

<style>
@import "../css/workflow.css";

.error-modal-list {
  width: 455px;
}
</style>