<template>
  <el-dialog v-model="visible" title="流程人员设置" :close-on-click-modal="false" draggable >
    <el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="120px" @keyup.enter="submitHandle()">
      <el-row>
        <el-col :span="8">
          <el-form-item prop="key" label="流程编码">
            <el-input v-model="dataForm.key" placeholder="" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="name" label="流程名称">
            <el-input v-model="dataForm.name" placeholder="流程名称" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="category" label="流程类型">
            <fast-select v-model="dataForm.category" dict-type="flowType" disabled clearable placeholder="流程类型"></fast-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="" prop="flowServerEnhance">
            <template #label>
              后端增强
              <el-popover
                  placement="top-start"
                  effect="dark"
                  :width="280"
                  trigger="hover"
                  content="按钮SQL增强(执行后再执行的SQL变量有:【主表ID】,【主表IDS】【租户】、【用户名】、【姓名】、【用户ID】,请求数据变量【请求参数key】,表格多选透传到表单固定变量【listIds】,请求数据变量要自行加单引号(后期处理),listIds除外,多语句用;分割)"
              >
                <template #reference>
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </template>
              </el-popover>
            </template>
            <el-input v-model="dataForm.flowServerEnhance" placeholder="发起时后端增强" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="" prop="startAfterSqlEnhance">
            <template #label>
              发起时按钮SQL增强
              <el-popover
                  placement="top-start"
                  effect="dark"
                  :width="280"
                  trigger="hover"
                  content="按钮SQL增强(执行后再执行的SQL变量有:【主表ID】,【主表IDS】【租户】、【用户名】、【姓名】、【用户ID】,请求数据变量【请求参数key】,表格多选透传到表单固定变量【listIds】,请求数据变量要自行加单引号(后期处理),listIds除外,多语句用;分割)"
              >
                <template #reference>
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </template>
              </el-popover>
            </template>
            <el-input v-model="dataForm.startAfterSqlEnhance" placeholder="发起时按钮SQL增强" type="textarea" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="" prop="finishAfterSqlEnhance">
            <template #label>
              审批完成时SQL增强
              <el-popover
                  placement="top-start"
                  effect="dark"
                  :width="280"
                  trigger="hover"
                  content="按钮SQL增强(执行后再执行的SQL变量有:【主表ID】,【主表IDS】【租户】、【用户名】、【姓名】、【用户ID】,请求数据变量【请求参数key】,表格多选透传到表单固定变量【listIds】,请求数据变量要自行加单引号(后期处理),listIds除外,多语句用;分割)"
              >
                <template #reference>
                  <el-icon>
                    <QuestionFilled />
                  </el-icon>
                </template>
              </el-popover>
            </template>
            <el-input v-model="dataForm.finishAfterSqlEnhance" placeholder="审批完成时SQL增强" type="textarea" clearable />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="dataForm.flowUserConfigList" border stripe :height="tableHeight">
            <el-table-column label="节点ID" align="left" prop="nodeId" show-overflow-tooltip width="90">
            </el-table-column>
            <el-table-column label="节点名称" align="left" prop="nodeName" show-overflow-tooltip width="160">
            </el-table-column>
            <!--<el-table-column label="节点条件" align="left" prop="nodeCondition" show-overflow-tooltip width="180">
              <template #default="scope">
                <el-input v-model="scope.row.nodeCondition" clearable size="small" placeholder="" style="width: 100%"></el-input>
              </template>
            </el-table-column> -->
            <el-table-column label="审批人" align="left" prop="userRealNames" show-overflow-tooltip width="220">
              <template #default="scope">
                <el-input v-model="scope.row.userRealNames" readonly clearable size="small" placeholder="" style="width: 100%" @click="handleSelectUsernames(scope.$index)">
                  <template #append>
                    <el-button size="small" @click="handleSelectUsernames(scope.$index)">
                      <el-icon><UserFilled /></el-icon>
                    </el-button>
                  </template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="角色审批" align="left" prop="userRoleNames" show-overflow-tooltip width="220">
              <template #default="scope">
                <el-input v-model="scope.row.userRoleNames" readonly clearable size="small" placeholder="" style="width: 100%" @click="handleSelectRoleCodes(scope.$index)">
                  <template #append>
                    <el-button size="small" @click="handleSelectRoleCodes(scope.$index)">
                      <SvgIcon icon="team"></SvgIcon>
                    </el-button>
                  </template>
                </el-input>
              </template>
            </el-table-column>
            <el-table-column label="岗位审批" align="left" prop="userPostNames" show-overflow-tooltip width="220">
              <template #default="scope">
                <el-input v-model="scope.row.userPostNames" readonly clearable size="small" placeholder="" style="width: 100%" @click="handleSelectPostCodes(scope.$index)">
                  <template #append>
                    <el-button size="small" @click="handleSelectPostCodes(scope.$index)">
                      <SvgIcon icon="solution"></SvgIcon>
                    </el-button>
                  </template>
                </el-input>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="submitHandle()">确定</el-button>
    </template>
    <FastTransferUser v-model="showFastTransferUserDialog" :selectList="flowUserConfigSelectList" @confirm="handleConfirmUser"></FastTransferUser>
    <FastTransferRole v-model="showFastTransferRoleDialog" :selectList="flowRoleConfigSelectList" @confirm="handleConfirmRole"></FastTransferRole>
    <FastTransferPost v-model="showFastTransferPostDialog" :selectList="flowPostConfigSelectList" @confirm="handleConfirmPost"></FastTransferPost>
  </el-dialog>
</template>

<script setup lang="ts">
import {reactive, ref} from 'vue'
import type { Ref } from 'vue';
import {ElMessage} from 'element-plus/es'
import {
  getInfoFlowUserConfigApi,
  saveInfoFlowUserConfigApi
} from "@/views/ebo/flow/api/flowmanager";

const emit = defineEmits(['refreshDataList'])

const visible = ref(false)
const dataFormRef = ref()
const tableHeight = ref(window.innerHeight - 500)
const dataForm = reactive({
  id: '',
  key: '',
  name: '',
  category: '',
  flowServerEnhance:'',
  startServerEnhance:'',
  finishServerEnhance:'',
  startAfterSqlEnhance:'',
  finishAfterSqlEnhance:'',
  flowUserConfigList:[] as any[]
})

const init = (id?: string) => {
  visible.value = true
  dataForm.id = ''
  dataForm.flowUserConfigList = []

  // 重置表单数据
  if (dataFormRef.value) {
    dataFormRef.value.resetFields()
  }

  // id 存在则为修改
  if (id) {
    getInfo(id)
  }

}

// 获取信息
const getInfo = (id: string) => {
  var dt={id:id}
  getInfoFlowUserConfigApi(dt).then(res => {
    Object.assign(dataForm, res.data)
  })
}

const dataRules = ref({
  key: [{required: true, message: '必填项不能为空', trigger: 'blur'}],
  name: [{required: true, message: '必填项不能为空', trigger: 'blur'}],
  category: [{required: true, message: '必填项不能为空', trigger: 'blur'}]
})

// 表单提交
const submitHandle = () => {
  dataFormRef.value.validate((valid: boolean) => {
    if (!valid) {
      return false
    }

    saveInfoFlowUserConfigApi(dataForm).then(() => {
      ElMessage.success({
        message: '操作成功',
        duration: 500,
        onClose: () => {
          visible.value = false
          emit('refreshDataList')
        }
      })
    })
  })
}
// 用户选择
const flowUserConfigIndex = ref() as Ref<number>;
const showFastTransferUserDialog = ref(false);
const flowUserConfigSelectList = ref([]);
const handleSelectUsernames = (index: number) => {
  flowUserConfigIndex.value = index;
  const usernamesList = dataForm.flowUserConfigList[index].usernames ? dataForm.flowUserConfigList[index].usernames.split(';') : [];
  const userRealNamesList = dataForm.flowUserConfigList[index].userRealNames ? dataForm.flowUserConfigList[index].userRealNames.split(';') : [];
  flowUserConfigSelectList.value = usernamesList.map((subItem: any,subIndex: number) => {
    return {
      username: subItem,
      realName: userRealNamesList[subIndex]
    }
  });
  showFastTransferUserDialog.value = true;
}
const handleConfirmUser = (list: any[]) => {
  dataForm.flowUserConfigList[flowUserConfigIndex.value].usernames = list.map(i => i.username).join(';');
  dataForm.flowUserConfigList[flowUserConfigIndex.value].userRealNames = list.map(i => i.realName).join(';');
}
// 角色选择
const showFastTransferRoleDialog = ref(false);
const flowRoleConfigSelectList = ref([]);
const handleSelectRoleCodes = (index: number) => {
  flowUserConfigIndex.value = index;
  const userRoleCodesList = dataForm.flowUserConfigList[index].userRoleCodes ? dataForm.flowUserConfigList[index].userRoleCodes.split(';') : [];
  const userRoleNamesList = dataForm.flowUserConfigList[index].userRoleNames ? dataForm.flowUserConfigList[index].userRoleNames.split(';') : [];
  flowRoleConfigSelectList.value = userRoleCodesList.map((subItem: any,subIndex: number) => {
    return {
      roleCode: subItem,
      name: userRoleNamesList[subIndex]
    }
  });
  showFastTransferRoleDialog.value = true;
}
const handleConfirmRole = (list: any[]) => {
  dataForm.flowUserConfigList[flowUserConfigIndex.value].userRoleCodes = list.map(i => i.roleCode).join(';');
  dataForm.flowUserConfigList[flowUserConfigIndex.value].userRoleNames = list.map(i => i.name).join(';');
}
// 岗位选择
const showFastTransferPostDialog = ref(false);
const flowPostConfigSelectList = ref([]);
const handleSelectPostCodes = (index: number) => {
  flowUserConfigIndex.value = index;
  const userPostCodesList = dataForm.flowUserConfigList[index].userPostCodes ? dataForm.flowUserConfigList[index].userPostCodes.split(';') : [];
  const userPostNamesList = dataForm.flowUserConfigList[index].userPostNames ? dataForm.flowUserConfigList[index].userPostNames.split(';') : [];
  flowPostConfigSelectList.value = userPostCodesList.map((subItem: any,subIndex: number) => {
    return {
      postCode: subItem,
      postName: userPostNamesList[subIndex]
    }
  });
  showFastTransferPostDialog.value = true;
}
const handleConfirmPost = (list: any[]) => {
  dataForm.flowUserConfigList[flowUserConfigIndex.value].userPostCodes = list.map(i => i.postCode).join(';');
  dataForm.flowUserConfigList[flowUserConfigIndex.value].userPostNames = list.map(i => i.postName).join(';');
}

defineExpose({
  init
})
</script>
