<!-- eslint-disable vue/no-side-effects-in-computed-properties -->
<!--
@ 作者: 秦东
@ 时间: 2026-01-19 13:21:15
@ 备注: 编辑状态下的添加
-->
<script lang='ts' setup>
import { conditionInfo, nodeFlow } from "@/api/DesignForm/type";
import { echoTableFormPage,realTimeUpdateFlow } from "@/api/taskapi/management";
import { judgeSubmitCancel,startRunFlow,gainAppPageInfo,getFieldRecord } from "@/api/DesignForm/requestapi";
import { string2json, stringToObj } from "@/utils/DesignForm/form";
import { appPageDataInit } from "@/api/date/type";
import {
  notAsA_BasisForJudgment,
  asAnApprovalActionControl,
  fixedValueControl,
  timeControl,
  timeEquation,
  submitButton,
  afreshSubmitButton,
} from "@/utils/workflow/const";
import { nodelPeoples, nodePoweInfo } from "@/api/taskapi/types";
import request from "@/utils/request";
import SvgIcon from "@/components/SvgIcon/index.vue";
import FlowStep from "@/views/sysworkflow/lowcodepage/pageFlow/flowStep.vue";
import AiPage from "@/views/sysworkflow/lowcodepage/pageFlow/aiPage.vue";
import { constAiEffect } from "@/api/DesignForm/utils";

const props = defineProps({
    show:{
        type: Boolean,
        default: true,
    },
    versionid: {
      type: String,
      default: "",
    },
    versiontitle: {
      type: String,
      default: "",
    },
    drawerwith: {
      type: Number,
      default: 0,
    },
    pickAppMenu: {
      type: Object,
      default() {
        return {};
      },
    },
})
const formType = ref(1)
const formBodyRef = ref()
const drawBodyWidth = ref(props.drawerwith)
const emits = defineEmits(["update:show", "searchquery"]);
const nodeKey = ref<string>("");
const currterNodePower = ref<nodePoweInfo[]>([])
const flowMap = ref<any[]>(); //工作流
const flowFactor = reactive<conditionInfo[]>([]); //表单组件
const pageType = ref<number>(1)
const aiConfigArea =ref(false)
const formLoading = ref(false); //loading
const flowLoading = ref(false); //loading
const drawLoading = ref(false)
const isFlowTable = ref(false); //判断是不是流程表单
const openOrClose =  computed({
    get: () => {
      drawBodyWidth.value = props.drawerwith;
      return props.show
    },
    set: (val) => {
      emits("update:show", val);
      drawBodyWidth.value = 0;
    },
});
const nextStep = ref<number>(0);
const currentProgress = ref<number>(1);
const pageBody = ref("")
const drawTitle = computed(() => props.versiontitle)



let qrCodeImgInside = "";
const appInitData = ref<appPageDataInit>();
const mastesformjson = ref(""); //
const versionId = ref<string>(""); //表单版本号
const versionTitle = ref<string>(""); //表单名称
const changeFlowPick = ref<string[]>([])
const purviewAry = ref<any[]>([]);
const qrCodeInsideDialogFlag = ref(false);
const nodelUserList = reactive<nodelPeoples[]>([]);
//获取工作流条件
const gainFlowChart = reactive<nodeFlow>({
  id: "0",
  conditionList: flowFactor,
  nodelPeople: nodelUserList,
  oldFlow: flowMap.value,
});

const state = reactive<any>({
  type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
  formData: {
    list: [],
    form: {},
    config: {},
    powerstr: {},
    aiConfig:[]
  },
  dict: {},
  formId: props.versionid,
  id: 0,
  loading: true,
});
//app表单
const stateForm = reactive<any>({
    type: 1, // 1新增；2修改；3查看（表单模式） ；4查看； 5设计
    formData: {
      list: [],
      form: {},
      config: {},
      powerstr: {},
      aiConfig:[]
    },
    dict: {},
    id: 0,
    formId: "1",
    versionId: 0,
    loading: true,
});
let gainAppPageInfoPromise: any[] = [];
let gainAppPageInfoData: any = {};
let getFieldRecordPromise: any[] = [];
let objMastesform: any;

/**
@ 作者: 秦东
@ 时间: 2026-01-19 15:30:44
@ 功能: 获取表单数据
*/
const getTaskFormData = () => {
  drawLoading.value = true
  echoTableFormPage({ id: props.versionid.toString() })
  .then(({ data }) => {
    console.log("表单数据",data)
      let extraW=0; 
      if (data.tableFormPage.flowIsOpen == 1 && data.tableFormPage.flowkeystr != "0") {
        isFlowTable.value = true;
        // drawbox.value = 800 + 350;
        console.error("存在流程----》",extraW)
      } else {
        isFlowTable.value = false;
        // drawbox.value = 800;
        console.error("不存在流程----》",extraW)
      }

      if(isFlowTable.value){
        extraW = 320
      }



      if(data.tableFormPage.powerAry && Array.isArray(data.tableFormPage.powerAry) && data.tableFormPage.powerAry.length > 0){
        currterNodePower.value = data.tableFormPage.powerAry
      }
      changeFlowPick.value = data.channerUpdate
      nodeKey.value = data.flowPage.nodeKey?data.flowPage.nodeKey:"";
      purviewAry.value = data.tableFormPage.powerAry;
      gainFlowChart.id = data.tableFormPage.flowkeystr;
      console.log("表单数据--->1", data.flowPage.flowList);
      flowMap.value = data.flowPage.flowList;
      state.id = props.versionid;
      state.formData = stringToObj(data.tableFormPage.mastesform);
      state.formData.config.hideField = []; //暂时的修复方法:接口返回的config中没有hideField属性,手动添加
      state.dict = string2json(data.tableFormPage.dict);
      state.formData.powerstr = string2json(data.tableFormPage.powerstr);
      judgeSubmitCancel({ name: data.tableFormPage.mastesformjson }).then(
        (datajud: any) => {
          console.error("不存在流程--1-datajud-》",datajud)
          if (datajud.code == 0) {
            if (datajud.data.buttonIsTrue == 3 || datajud.data.buttonIsTrue == 4) {
              state.formData.list.push(submitButton);
            }
          }
        }
      );
        console.log("表单数据--state.formData->1", state.formData);
      console.error("不存在流程--1--》",state.formData.aiConfig)

      if(state.formData&&state.formData.aiConfig&&state.formData.aiConfig.length>0){
        aiConfigArea.value=true
        state.formData.aiConfig?.forEach((item: { library: any; title: any; trigger: any; }) => {
          currentAgent.value.push({
            name: "test",
            model: false,
            rowdex:0,
            uuid: item.library,
            fields: item.title,
            trigger: item.trigger,
            params: {},
            subparams:[]
          });
        });
      }



      if(aiConfigArea.value){
        extraW = extraW + 320
      }
 console.error("不存在流程--extraW--》",extraW)
      if (aiConfigArea.value && isFlowTable.value){
        pageType.value  = 3
        pageBody.value = "treePage"
        drawBodyWidth.value = drawBodyWidth.value + extraW - 160
      }else if ((!aiConfigArea.value && isFlowTable.value) || (aiConfigArea.value && !isFlowTable.value)){
        pageType.value  = 2
        pageBody.value = "twoPage"
        drawBodyWidth.value = drawBodyWidth.value + extraW
      }else{
        pageType.value  = 1
        pageBody.value = ""
        drawBodyWidth.value = drawBodyWidth.value
      }

      drawLoading.value = false
      
      //  console.error("2---------------->",formBodyRef.value?.clientWidth)
  })
  .finally(()=>{})
}
/**
@ 作者: 秦东
@ 时间: 2026-01-19 15:38:53
@ 功能: 初始化数据
*/
const initData = () => {
  state.formData = {
    list: [],
    form: {},
    config: {},
  };
  state.dict = {};
  state.formId = 0;
  state.id = 0;
  state.loading = true;
  let aryLen = flowFactor.length;
  console.log("改变表单值--flowMap.value--1->", flowMap.value);
  flowMap.value = [];
  console.log("改变表单值--flowMap.value--->", flowMap.value);
  if (aryLen > 0) flowFactor.splice(0, aryLen);
}
/**
@ 作者: 秦东
@ 时间: 2026-01-19 15:38:13
@ 功能: 初始化表单
*/
const initLoadData = () => {
   console.log("获取初始化表单数据-------------->", props.pickAppMenu);
   if (props.pickAppMenu.type != 1) {
      gainAppPageInfoPromise.push(
        gainAppPageInfo({ id: props.pickAppMenu.id }).then((data:any) => {
            gainAppPageInfoData = data;
        })
      )

      Promise.all(gainAppPageInfoPromise).then(() => {
          objMastesform = stringToObj(gainAppPageInfoData.data.appForm.mastesform);
          for (const element of objMastesform.list) {
            if (element.type == "table") {
              //console.log(element);
              for (const item of element.list) {
                if (item.options) {
                  if (
                    item.type == "radio" ||
                    item.type == "select" ||
                    item.type == "checkbox"
                  ) {
                    console.log(item.config.optionsType);
                    if (item.config.optionsType == 3) {
                      let paramx: string = "" + item.control.optionsValue3Field;
                      getFieldRecordPromise.push(
                        getFieldRecord(paramx).then(({ data }) => {
                          //console.log(data)
                          item.options = data;
                        })
                      );
                    }
                  }
                }
              }
            }
          }
          Promise.all(getFieldRecordPromise).then(() => {
            console.log(gainAppPageInfoData);
            let objMastesformStr = JSON.stringify(objMastesform);
            gainAppPageInfoData.data.appForm.mastesform = objMastesform;
            gainAppPageInfoData.data.appForm.mastesformjson = objMastesformStr;

            appInitData.value = gainAppPageInfoData.data;
            // console.log("获取初始化表单数据---!",appInitData.value)
            mastesformjson.value = gainAppPageInfoData.data.appForm.mastesformjson;
            // isFlow.value = gainAppPageInfoData.data.appForm.flowIsOpen;

            versionId.value = gainAppPageInfoData.data.appForm.id.toString();
            versionTitle.value = gainAppPageInfoData.data.appForm.name;

            if (gainAppPageInfoData.data.page) {
              // console.log("data.data.mastesform", data.data)
              stateForm.id = gainAppPageInfoData.data.appForm.version.toString();
              stateForm.formId = gainAppPageInfoData.data.appForm.cfid.toString();
              stateForm.versionId = gainAppPageInfoData.data.appForm.id.toString();
              stateForm.formData = objMastesform;
              stateForm.formData.config.hideField = []; //暂时的修复方法:接口返回的config中没有hideField属性,手动添加
              stateForm.dict = string2json(gainAppPageInfoData.data.appForm.dict);
              stateForm.formData.powerstr = string2json(
                gainAppPageInfoData.data.appForm.powerstr
              );
              console.log("data.data.mastesform", stateForm.formData)

              judgeSubmitCancel({
                name: gainAppPageInfoData.data.appForm.mastesformjson,
              }).then((datajud: any) => {

                 console.log("datajud---------------->", datajud,datajud.data.buttonIsTrue)

                if (datajud.code == 0) {
                  if (datajud.data.buttonIsTrue == 3 || datajud.data.buttonIsTrue == 4) {
                    stateForm.formData.list.push(submitButton);
                  }
                }

                console.log("datajud------stateForm.formData.list---------->", stateForm.formData.list)
              });
            }
          });

      })

   }
   

}
/**
@ 作者: 秦东
@ 时间: 2026-01-19 15:34:26
@ 功能: 监听开关
*/
watch(() => openOrClose,(val) => {
  if(val){
    getTaskFormData()
    // initLoadData()
  }else{
    initData()
  }
},{
  deep:true
})
/**
@ 作者: 秦东
@ 时间: 2026-01-19 16:16:16
@ 功能: 扫码填单
*/
const showFillFormQrCode = () => {
  //查看二维码展示弹窗图片,图片带有分组,app,表单名称,和二维码图片
  //在此获取必要的参数并请求后台,获取二维码图片,当图片返回成功时,显示弹窗
  //必要的参数为cfid
  
}

/**
@ 作者: 秦东
@ 时间: 2024-04-09 16:49:09
@ 功能: 表单前置数据
*/
const beforeSubmit = (params: any) => {
  params.formId = props.versionid;
  params.id = "";
  // emits("update:isopen", false);
  return params;
};
/**
@ 作者: 秦东
@ 时间: 2024-04-09 16:41:20
@ 功能: 提交成功回调 
*/
const afterSubmit = (type: string, val?: any) => {
  // console.log("表单提交成功------------------>",type,val)
  // console.log("流程------------------>",flowMap)
  if (type === "success") {
    emits("searchquery");
    if (isFlowTable.value) {
      if (val.code == 0) {
        if (val.data) {
          let sendInfo = {
            id: val.data.uuid,
            flowList: flowMap.value,
            state: 3,
          };
          startRunFlow(sendInfo).then((data: any) => {
            console.log("流程提交成功--------1---------->",data)
          });
        }
      }
    }
  }
  closeAppSubmit();
};
/**
@ 作者: 秦东
@ 时间: 2024-04-09 16:50:37
@ 功能: 保存草稿
*/
const saveDraftPage = (type: string, val?: any) => {
  if (type === "success") {
    emits("searchquery");
    if (isFlowTable.value) {
      if (val.code == 0) {
        let sendInfo = {
          id: val.data.uuid,
          flowList: flowMap.value,
          state: 1,
        };
        startRunFlow(sendInfo).then((data: any) => {
          // console.log("流程提交成功--------1---------->",data)
        });
      }
    }
  }
  closeAppSubmit();
};
/**
@ 作者: 秦东
@ 时间: 2024-04-09 16:50:01
@ 功能: 关闭操作
*/
const closeAppSubmit = () => {
  emits("update:show", false);
  flowMap.value = [];
  emits("searchquery");
  
};
//组件解析
const changeKeyVal = (key: any, val: any, type: any, attribute: any) => {
  // console.log("改变表单值--key--->",key)
  // console.log("改变表单值--val--->",val,Array.isArray(val))
  // console.log("改变表单值--type--->",type)
  // console.log("改变表单值--attribute--->",attribute)

  let isUpdateFlowChart = false;
  console.log("改变表单值--notAsA_BasisForJudgment--->",notAsA_BasisForJudgment.indexOf(type))
  if (notAsA_BasisForJudgment.indexOf(type) === -1) {
    //不是判断字段,则更新流程图表
    let isWrite = true;
    //遍历表单组件
    flowFactor.forEach((item: any) => {
      if (item.factorid == key) {
        isWrite = false;

        item.type = 3;
        if (type == "checkbox") {
          item.isCheckbox = true;
          item.answers = val.map(String);
        } else {
          item.isCheckbox = false;
          item.oneanswer = val.toString();
        }
        if (notAsA_BasisForJudgment.indexOf(type) === -1) {
          isUpdateFlowChart = true;
        }
      }
    });
    if (isWrite) {
      if (type == "checkbox") {
        flowFactor.push({
          factorid: key,
          type: 3,
          isCheckbox: true,
          answers: val.map(String),
        });
      } else {
        flowFactor.push({
          factorid: key,
          type: 3,
          isCheckbox: false,
          oneanswer: val.toString(),
        });
      }
      isUpdateFlowChart = true;
    }
  }
  //时间类空间附加判断条件
   if (
    timeControl.indexOf(type) > -1 ||
    fixedValueControl.indexOf(type) > -1 ||
    type == "input"
  ) {
    let addNewTime = true; //判断是否新增
    flowFactor.forEach((item: any) => { 
      if (item.type == 2) {
        addNewTime = false;
         if (item.customFields && item.customFields.length > 0) {
          let sunNewAdd = true;
          item.customFields.forEach((sunItem: any) => {
            // console.log("改变表单值--flowFactor-4->",sunItem.wordfield , key,sunItem.wordfield == key)
            if (sunItem.wordfield == key) {
              sunNewAdd = false;
              isUpdateFlowChart = true;
              if (timeEquation.indexOf(attribute) === -1) {
                //非区间性时间
                sunItem.leftval = val.toString();
              } else {
                //区间性时间
                if (Array.isArray(val)) {
                  if (val.length >= 2) {
                    sunItem.leftval = val[0].toString();
                    sunItem.rightval = val[val.length - 1].toString();
                  }
                }
              }
            }
          });
          if (sunNewAdd) {
            isUpdateFlowChart = true;
            if (timeEquation.indexOf(attribute) === -1) {
              //非区间性时间
              let customFieldInfo = {
                wordfield: key,
                optType: "1",
                leftval: val.toString(),
              };
              item.customFields.push(customFieldInfo);
            } else {
              //区间性时间
              if (Array.isArray(val)) {
                if (val.length >= 2) {
                  let customFieldInfo = {
                    wordfield: key,
                    optType: "6",
                    leftval: val[0].toString(),
                    leftoptType: "3",
                    rightoptType: "3",
                    rightval: val[val.length - 1].toString(),
                  };
                  item.customFields.push(customFieldInfo);
                }
              }
            }
          }
         }
      }
      
    });
    if (addNewTime) {
      //新增自定义类数据判断
      isUpdateFlowChart = true;
      if (timeEquation.indexOf(attribute) === -1) {
        //非区间性时间
        let customFieldInfo = {
          wordfield: key,
          optType: "1",
          leftval: val.toString(),
        };
        let condInfo = {
          factorid: "customFields",
          type: 2,
          isCheckbox: false,
          customFields: [customFieldInfo],
        };
        flowFactor.push(condInfo);
      } else {
        //区间性时间
        if (Array.isArray(val)) {
          if (val.length >= 2) {
            let customFieldInfo = {
              wordfield: key,
              optType: "6",
              leftval: val[0].toString(),
              leftoptType: "3",
              rightoptType: "3",
              rightval: val[val.length - 1].toString(),
            };
            let condInfo = {
              factorid: "customFields",
              type: 2,
              isCheckbox: false,
              customFields: [customFieldInfo],
            };
            flowFactor.push(condInfo);
          }
        }
      }
    }
  }
  //操作人
  if (asAnApprovalActionControl.indexOf(type) > -1) {
    isUpdateFlowChart = true;
    let isWriteUs = true;
    nodelUserList.forEach((item: any) => {
      if (item.factorid == key) {
        isWriteUs = false;
        item.userList = val;
      }
    });
    if (isWriteUs) {
      nodelUserList.push({
        factorid: key,
        userList: val,
      });
    }
  }
  let isTrue = false
  if(changeFlowPick.value && Array.isArray(changeFlowPick.value) && changeFlowPick.value.includes(key)){
    isTrue = true
  }
  //更新工作流图
  if (isUpdateFlowChart && isTrue) {
    flowLoading.value = true;
    //获取工作流不进图
    gainFlowChart.conditionList = flowFactor;
    gainFlowChart.nodelPeople = nodelUserList;
    gainFlowChart.oldFlow = flowMap;
    // console.log("获取工作流不进图--gainFlowChart--->",gainFlowChart)
    realTimeUpdateFlow(gainFlowChart).then((data: any) => {
      // console.log("获取工作流不进图-new-->",data)
      flowMap.value = data.data.flowList;
      nextStep.value = data.data.nextStep;
      currentProgress.value = data.data.Step;
      nodeKey.value = data.data.nodeKey;
      // // console.log("获取工作流不进图-1-->",flowMap.value)
      flowLoading.value = false;
    });
  }

}


const appTableForm = ref({
  name:""
})


//-----------------------AI setting--------------------------
//当前AI智能体，根据form表单的配置来初始化
//params 主表字段参数   subparams子表字段参数，子表触发时需要清空  ; rowdex:表示子表的第几条数据，没有的话说明不是子表数据
const currentAgent = ref<
  {
    model: boolean;
    name: string;
    rowdex:number,
    uuid: string[];
    fields: string[];
    trigger: number;
    params: { [key: string]: any };
    subparams:{[key: string]: any}[];
  }[]
>([]);
const aiassistRef = ref();
//触发AI查询事件
provide(constAiEffect, ({ key, value, field,rowdex}: any) => {
  //新建ai_envents 是为了解决前端并发问题
  const ai_events: Array<{ uuids: string[]; params: { [key: string]: any } }> = [];
  currentAgent.value.forEach(ag=>{
    if(ag.fields.includes(key)){ //trigger: 1:任一  2：半数 3：全部
      if (rowdex!=null){//子表操作
        ag.rowdex=rowdex //更新智能体的rowdex
        if(rowdex>=ag.subparams.length){
          ag.subparams.push({[field]:value})
        }else{
          ag.subparams[rowdex][field]=value
        }
      }else{ //主表操作, 直接加入params种
        ag.params[field]=value;  //这个地方把key换成fieldName
      }
      let mergedObj;
      if(ag.subparams.length>0){        
         mergedObj = Object.assign({}, ag.params, ag.subparams[ag.rowdex]); //合并子表和主表
      }else{
        mergedObj = ag.params
      }
      switch(ag.trigger){
        case 2:
          if(Object.keys(mergedObj).length>=ag.fields.length/2){
            ai_events.push({uuids:ag.uuid,params:mergedObj })
          }
          break;
        case 3:
          if(Object.keys(mergedObj).length==ag.fields.length){
            ai_events.push({uuids:ag.uuid,params:mergedObj})
          }
          break;
        default:
          ai_events.push({uuids:ag.uuid,params:mergedObj})
      }
    }
  }) 
  if(ai_events.length>0){
    aiassistRef.value.onSendParamToAI(ai_events)
  }  
})

</script>
<template>
  <div v-if="openOrClose" class="drawerClass">
  <el-drawer
    v-model="openOrClose"
    :title="drawTitle"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :size="drawBodyWidth"
    :close="closeAppSubmit"
  >
      <template #header>
        <div class="drawHeader">
          <el-text size="large">{{ drawTitle }}</el-text>
          <el-button v-if="stateForm.formData.form.qrCodeFlag == true &&  stateForm.formData.form.qrCodeInside == true" size="small"  @click="showFillFormQrCode">扫码填单</el-button>
        </div>
      </template>
      <div v-loading="drawLoading" :class="aiConfigArea&&isFlowTable?'drawBody treePage':(aiConfigArea&&!isFlowTable)?'drawBody twoPageAi':(!aiConfigArea&&isFlowTable)?'drawBody twoPageFlow':'drawBody'">
          <AiPage 
            v-if="state.type != 5 && aiConfigArea" 
            ref="aiassistRef"
            :agent="currentAgent"
          />  

          <AppForm
              ref="formEl"
              :drawTitle="drawTitle"
              :numrun="formType"
              :form-data="state.formData"
              :type="formType"
              :dict="state.dict"
              request-url="getFormContent"
              add-url="saveFormContent"
              edit-url="editFormContent"
              :before-submit="beforeSubmit"
              :after-submit="afterSubmit"
              :close-app-submit="closeAppSubmit"
              :change-key-val="changeKeyVal"
              :save-draft-page="saveDraftPage"
              :node-key="nodeKey"
              :purview="purviewAry"
          />
          
          <FlowStep 
            v-if="isFlowTable" 
            v-model:flow-map="flowMap"
            :next-step="nextStep"
            :current-progress="currentProgress"
            :node-key="nodeKey"
          />
      </div>
  </el-drawer>
  </div>
</template>
<style  lang='scss' scoped>
.drawerClass{
  :deep .el-drawer__header{
    border-bottom: 1px solid #ECECEC;
  }
}
.drawHeader {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.drawBody{
  width: 100%;
  height: 100%;
  padding: 10px 10px;
  :deep .el-card{
    border-radius: 15px;
  }
  :deep .el-card__header{
    padding: 15px 15px;
  }
  :deep .el-card__body{
    padding: 0;
  }
  :deep .el-card__footer{
    padding: 10px 10px;
  }
}
.twoPageAi{
  display: grid;
  grid-template-columns: minmax(150px, 250px) 1fr; /* 左右最小150px，最大250px，中间自适应 */
  grid-template-rows: auto;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
}
.twoPageFlow{
  display: grid;
  grid-template-columns:  1fr minmax(150px, 250px); /* 左右最小150px，最大250px，中间自适应 */
  grid-template-rows: auto;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
}
.treePage{
  display: grid;
  grid-template-columns: minmax(150px, 250px) 1fr minmax(150px, 250px); /* 左右最小150px，最大250px，中间自适应 */
  grid-template-rows: auto;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
}
.svgBox{
  background: linear-gradient(135deg, #0020C2, #4d6cff);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}
.card-header{
  font-size: 1.4rem;
  font-weight: 700;
  color: #0020C2;
  display: flex;
  align-items: center;
  gap: 10px;
}
.scroBox{
  padding: 10px 15px;
  height: calc(100vh - 200px);
}
.formBody{
  width: 100%;
  overflow-x: auto;
}
.flowBody{
  padding: 10px 15px;
  height: calc(100vh - 260px);
}

.bootemWorkFlow{
  width: 100%;
  text-align: center;
  .bootemWorkFlowBut{
    width: 100%;
    padding: 10px 0;
    text-align: center;
  }
}

.btn {
  padding: 14px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s;
  border: none;
}
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 32, 194, 0.15);
}
.approve-btn {
  background: linear-gradient(135deg, #00cc66, #33dd88);
  color: white;
}
.reject-btn {
  background: linear-gradient(135deg, #ff3366, #ff5588);
  color: white;
}

.bootemAi{
  display: grid;
  grid-template-columns:  1fr 50px; /* 左右最小150px，最大250px，中间自适应 */
  grid-template-rows: auto;
  gap: 10px;
  max-width: 100%;
  margin: 0 auto;
  :deep .el-input__wrapper{
    border-radius: 10px;
  }
}

.ai-send-btn {
    background: linear-gradient(135deg, #0020C2, #4d6cff);
    color: white;
    border: none;
    width: 46px;
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}
        
.ai-send-btn:hover {
  background: linear-gradient(135deg, #0019a0, #3a5aff);
  transform: translateY(-2px);
}
.ai-conversation {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}
.message {
  padding: 12px 16px;
  border-radius: 12px;
  max-width: 90%;
  line-height: 1.5;
}
        
.user-message {
  background: #eef2ff;
  align-self: flex-end;
  border-top-right-radius: 4px;
  border: 1px solid rgba(0, 32, 194, 0.2);
}
        
.ai-message {
  background: linear-gradient(to right, #f0f5ff, #ffffff);
  align-self: flex-start;
  border-top-left-radius: 4px;
  border: 1px solid rgba(0, 32, 194, 0.1);
}
</style>
