<script setup>
import { ElMessage } from 'element-plus'
import { 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'
const props = defineProps({
  allowEditNode: {
    type: Boolean,
    default: true,
  },
})
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 }) => {
  if (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 {
    childNode = null
  }
}
const saveSet = async () => {
  workFlowStore.setIsTried(true)
  tipList.value = []
  reErr(nodeConfig)
  if (tipList.value.length != 0) {
    tipVisible.value = true
    return
  }
  processConfig.value.flowPermission = flowPermission.value

  console.log(JSON.stringify(processConfig))
  const res = await setWorkFlowData(processConfig)
  if (res.code == 200) {
    ElMessage.success('设置成功')
    setTimeout(() => {
      window.location.href = ''
    }, 200)
  }
}
const zoomSize = (type) => {
  if (type == 1) {
    if (nowVal.value == 50) {
      return
    }
    nowVal.value -= 10
  }
  else {
    if (nowVal.value == 300) {
      return
    }
    nowVal.value += 10
  }
}
// 退出流程编辑,退回上一页
const closeSetting = () => {
  router.go(-1)
}
</script>

<template>
  <div>
    <!-- <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>
.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>