<template>
  <div class="app-container">
    <el-button
      v-if="scrmParams.showBack"
      style="margin-bottom: 16px"
      type="primary"
      @click="goBack"
    >
      重新选择模板
    </el-button>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>公共信息</span>
      </div>
      <div class="text item">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item label="标题:" prop="title" style="margin-bottom: 13px">
            <el-input v-model="ruleForm.title" size="small" />
          </el-form-item>
          <el-form-item
            label="优先级:"
            prop="priority"
            style="margin-bottom: 0"
          >
            <el-radio-group v-model="ruleForm.priority" size="small">
              <el-radio :label="1">一般</el-radio>
              <el-radio :label="2">紧急</el-radio>
              <el-radio :label="3">非常紧急</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-card class="box-card" style="margin-top: 10px">
      <div slot="header" class="clearfix">
        <span>表单信息</span>
      </div>
      <div class="text item">
        <template v-for="(tplItem, tplIndex) in processStructureValue.tpls">
          <fm-generate-form
            v-show="
              currentNode.hideTpls === undefined ||
                currentNode.hideTpls === null ||
                currentNode.hideTpls.indexOf(tplItem.id) === -1
            "
            :key="tplIndex"
            :ref="'generateForm-' + tplItem.id"
            :preview="
              currentNode.hideTpls === undefined ||
                currentNode.hideTpls === null ||
                currentNode.hideTpls.indexOf(tplItem.id) === -1
                ? false
                : true
            "
            :remote="remoteFunc"
            :data="tplItem.form_structure"
            :disabled="
              currentNode.readonlyTpls === undefined ||
                currentNode.readonlyTpls === null ||
                currentNode.readonlyTpls.indexOf(tplItem.id) === -1
                ? null
                : true
            "
          />
        </template>
      </div>
      <hr style="background-color: #d9d9d9; border: 0; height: 1px">
      <div class="text item" style="text-align: center; margin-top: 18px">
        <el-button
          v-for="(item, index) in processStructureValue.edges"
          v-show="item.source === processStructureValue.nodes[active].id"
          :key="index"
          type="primary"
          :disabled="submitDisabled"
          @click="submitAction(item)"
        >
          {{ item.label }}
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import Vue from 'vue'
import { GenerateForm } from '@/components/VueFormMaking'
import 'form-making/dist/FormMaking.css'
Vue.component(GenerateForm.name, GenerateForm)

import { processStructure, createWorkOrder } from '@/api/process/work-order'
import { listUser } from '@/api/system/sysuser'
import { getDeptList } from '@/api/system/dept'
export default {
  name: 'Create',
  data() {
    return {
      submitDisabled: false,
      active: 0,
      processStructureValue: {},
      ruleForm: {
        title: '',
        priority: 1,
        process: '',
        classify: '',
        state: [],
        source: '',
        source_state: '',
        process_method: '',
        tpls: {
          form_structure: [],
          form_data: []
        },
        tasks: []
      },
      rules: {
        title: [{ required: true, message: '请输入工单标题', trigger: 'blur' }],
        priority: [
          { required: true, message: '请选择工单优先级', trigger: 'blur' }
        ]
      },
      remoteFunc: {
        // 获取用户列表
        async userList(resolve) {
          const res = await listUser({
            pageSize: 999999
          })
          const options = res.data.list
          resolve(options)
        },
        async deptTreeList(resolve) {
          const res = await getDeptList()
          resolve(res.data)
        }
      }
    }
  },
  computed: {
    scrmParams() {
      return this.$store.state.user.scrmParams
    }
  },
  created() {
    this.getProcessNodeList()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    getProcessNodeList() {
      processStructure({
        processId: this.$route.query.processId
      }).then((response) => {
        this.processStructureValue = response.data
        this.currentNode = this.processStructureValue.nodes[0]

        // 检查是否有 readonlyTpls 包含 5，如果有则设置默认值
        if (
          this.currentNode.readonlyTpls &&
          this.currentNode.readonlyTpls.includes(5)
        ) {
          this.setDefaultValues(this.scrmParams, 5)
        }
      })
    },
    submitAction(item) {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.submitDisabled = true
          var stateMap = {}
          this.ruleForm.process = parseInt(this.$route.query.processId)
          this.ruleForm.classify = this.processStructureValue.process.classify
          stateMap['id'] = item.target
          this.ruleForm.source_state =
            this.processStructureValue.nodes[this.active].label
          for (var v of this.processStructureValue.nodes) {
            if (v.id === item.target) {
              if (v.assignType !== undefined) {
                stateMap['process_method'] = v.assignType
              }
              if (v.assignValue !== undefined) {
                stateMap['processor'] = Array.from(new Set(v.assignValue))
              }
              stateMap['label'] = v.label
              break
            }
          }
          this.ruleForm.state = [stateMap]

          this.ruleForm.tpls = {
            form_structure: [],
            form_data: []
          }
          // 绑定流程任务
          this.ruleForm.tasks =
            this.processStructureValue.process.task === undefined
              ? []
              : this.processStructureValue.process.task
          // 追加节点任务
          if (
            this.processStructureValue.nodes[this.active].task !== undefined &&
            this.processStructureValue.nodes[this.active].task.length > 0
          ) {
            for (var task of this.processStructureValue.nodes[this.active]
              .task) {
              if (this.ruleForm.tasks.indexOf(task) === -1) {
                this.ruleForm.tasks.push(task)
              }
            }
          }

          var promiseList = []
          for (var tpl of this.processStructureValue.tpls) {
            tpl.form_structure.id = tpl.id
            this.ruleForm.tpls.form_structure.push(tpl.form_structure)
            promiseList.push(this.$refs['generateForm-' + tpl.id][0].getData())
          }
          Promise.all(promiseList)
            .then((values) => {
              this.ruleForm.source =
                this.processStructureValue.nodes[this.active].id
              this.ruleForm.tpls.form_data = values
              this.ruleForm.is_exec_task = item.isExecuteTask
              createWorkOrder(this.ruleForm)
                .then((response) => {
                  if (response.code === 200) {
                    // this.$router.push({ path: '/process/upcoming' })
                    if (window.parent) {
                      const returnTarget =
                        (this.scrmParams && this.scrmParams.returnTarget) ||
                        '/process/upcoming'

                      // 发送消息给父窗口
                      window.parent.postMessage(
                        {
                          type: 'redirect',
                          path: returnTarget
                          // 可以附加其他数据，如新创建的工单ID
                          // workOrderId: response.data.id
                        },
                        this.scrmParams && this.scrmParams.baseUrl
                      )
                    } else {
                      // 备用方案
                      this.$router.push('/process/upcoming')
                    }
                  }
                })
                .catch(() => {
                  this.submitDisabled = false
                })
            })
            .catch(() => {
              this.submitDisabled = false
            })
        }
      })
    },
    setDefaultValues(defaultVal, id) {
      // 找到 id 为 5 的模板
      const tpl5 = this.processStructureValue.tpls.find((tpl) => tpl.id === id)
      if (tpl5) {
        // 遍历模板中的字段
        tpl5.form_structure.list.forEach((field) => {
          // 如果是 grid 类型，需要遍历 columns
          if (field.type === 'grid') {
            field.columns.forEach((column) => {
              column.list.forEach((item) => {
                if (item.model === 'customerId' && defaultVal.customerId) {
                  item.options.defaultValue = Number(defaultVal.customerId)
                } else if (item.model === 'orderId' && defaultVal.orderId) {
                  item.options.defaultValue = defaultVal.orderId
                }
              })
            })
          } else if (field.model === 'customerId' && defaultVal.customerId) {
            field.options.defaultValue = Number(defaultVal.customerId)
          } else if (field.model === 'orderId' && defaultVal.orderId) {
            field.options.defaultValue = defaultVal.orderId
          }
        })
      }
    }
  }
}
</script>
