<script setup>
import { ElMessage } from 'element-plus'
import { defineExpose, 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 { getWorkFlowData, setWorkFlowData } from '@/plugins/api.js'
import { efitProcess, unloadProcess } from '@/api/system/process'

const props = defineProps({
  allowEditNode: {
    type: Boolean,
    default: true,
  },
  getRowData: {
    type: Object,
    default: () => {},
  },
})
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)
onMounted(async () => {
  const route = useRoute()
  const { data } = await getWorkFlowData({ workFlowDefId: route.query.workFlowDefId })
  processConfig.value = data
  const {
    nodeConfig: nodes,
    flowPermission: flows,
    directorMaxLevel: directors,
    workFlowDef: works,
    tableId,
  } = data
  nodeConfig.value = nodes
  flowPermission.value = flows
  directorMaxLevel.value = directors
  workFlowDef.value = works
  workFlowStore.setTableId(tableId)
})
const toReturn = () => {
  // window.location.href = ""
}
const reErr = ({ childNode }) => {
  console.log('999999999999999', childNode)
  if (JSON.stringify(childNode) === '{}') {
    console.log('1111')
    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 () => {
  console.log('---------点击保存')
  console.log(processConfig.value)
  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
  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

  const res = await efitProcess(processConfig.value)
  // if (res.code == 200) {
  //   ElMessage.success('设置成功')
  //   setTimeout(() => {
  //     window.location.href = ''
  //   }, 200)
  // }
}
defineExpose({
  saveSet,
})

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>