<!--
 * @Date: 2022-07-18 10:22:22
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-02-13 10:32:51
 * @FilePath: /data-table/src/views/index.vue
 * @Description: 首页
-->
<template>
  <van-notice-bar v-if="formSetting.sjsj_is_count_down" left-icon="volume-o" :text="notice_text" scrollable
    mode="closeable" />
  <div v-if="!show_loading" class="table-box">
    <template v-if="PHeader.visible && (page_type === 'add' || model === 'preview')">
      <van-image v-if="PHeader.type === 'image' && PHeader.cover" width="100%" :src="PHeader.cover + '?imageView2/0/w/2000'" fit="cover" />
      <template v-if="PHeader.type === 'carousel'">
        <van-swipe class="my-swipe" lazy-render indicator-color="white">
          <van-swipe-item v-for="image in PHeader.cover" :key="index"><img :src="image"
              style="height: 12rem; width: 100%; object-fit: cover" /></van-swipe-item>
        </van-swipe>
      </template>
      <div v-if="PHeader.type === 'text'" class="PHeader-Text" v-html="PHeader.banner" />
    </template>
    <div v-if="PHeader.label" class="table-title" v-html="PHeader.label" />
    <div v-if="PHeader.flow_node_name" style="text-align: center;">({{ PHeader.flow_node_name }})</div>
    <div v-if="PHeader.description" class="table-desc" v-html="PHeader.description" />
    <van-config-provider :theme-vars="themeVars">
      <van-form ref="myForm" @submit="onSubmit" @failed="onFailed" :scroll-to-error="true">
        <van-cell-group :border="false">
          <component v-for="(item, index) in formData" :id="item.key" :ref="(el) => setRefMap(el, item)" :key="index"
            :is="item.component" :item="item" @active="onActive" @remove="onRemove" />
        </van-cell-group>
        <!-- 非流程版表单 -->
        <div v-if="formData.length && PCommit.visible && !formSetting.is_flow" style="margin: 16px">
          <van-button round block type="primary" native-type="submit" :disabled="submitStatus">
            {{ PCommit.text ? PCommit.text : '提交' }}
          </van-button>
        </div>
        <!-- 流程表单 -->
        <div v-if="formSetting.is_flow" style="margin: 16px; padding-top: 1rem;">
          <div v-if="formSetting.is_flow_content">
            <p style="margin-bottom: 1rem; font-size: 0.85rem; font-weight: bold;">审批意见</p>
            <div style="margin-bottom: 1rem; border: 1px solid #eee;">
              <van-field
                v-model="approval_note"
                rows="3"
                autosize
                label=""
                type="textarea"
                placeholder=""
              />
            </div>
          </div>
          <van-button round block type="primary" @click="approval_show=true" style="margin-bottom: 1rem;">
            流程操作
          </van-button>
        </div>
        <!-- 显示审批意见 -->
        <div v-if="page_type === 'info' && form_flow_process_list.length" style="margin: 16px;">
          <div>
            <p style="margin-bottom: 1rem; font-size: 0.85rem; font-weight: bold;">审批结果</p>
            <div style="margin-bottom: 1rem; border-left: 1px solid #eee; border-right: 1px solid #eee;">
              <van-collapse ref="collapseRef" v-model="active_flow_process">
                <van-collapse-item v-for="(item, index) in form_flow_process_list" :value="item.node_action_id === 'commit' ? '提交' : '驳回'" :name="item.created_time">
                  <template #title>
                    <div style="display: flex; align-items: center;">
                      <van-icon
                        :name="item.node_action_id === 'commit' ? 'passed' : 'close'"
                        :color="item.node_action_id === 'commit' ? '#05ae33' : 'red'" size="1rem"
                      />&nbsp;
                      <span v-if="item.node_action_id === 'commit'" class="van-ellipsis" style="color: #05ae33; width: 45vw; display: inline-block; line-height: 1rem;">
                        {{ item.node_name }}
                      </span>
                      <span v-else class="van-ellipsis" style="color: red; width: 45vw; display: inline-block; line-height: 1rem;">
                        {{ item.node_name }}
                      </span>
                    </div>
                  </template>
                  <div>
                    <!-- <van-row gutter="" align="center" style="margin-bottom: 0.25rem;">
                      <van-col span="8">审批操作</van-col>
                      <van-col span="16" style="text-align: right;">commit=提交，reject=驳回</van-col>
                    </van-row> -->
                    <van-row v-if="item.note" gutter="" align="center" style="margin-bottom: 0.25rem;">
                      <van-col span="8">审批意见</van-col>
                      <van-col span="16" style="text-align: right;">{{ item.note }}</van-col>
                    </van-row>
                    <van-row gutter="" align="center" style="margin-bottom: 0.25rem;">
                      <van-col span="8">节点名称</van-col>
                      <van-col span="16" style="text-align: right;">{{ item.node_name }}</van-col>
                    </van-row>
                    <van-row gutter="" align="center" style="margin-bottom: 0.25rem;">
                      <van-col span="8">审批人名称</van-col>
                      <van-col span="16" style="text-align: right;">{{ item.created_by_name }}</van-col>
                    </van-row>
                    <van-row gutter="" align="center" style="margin-bottom: 0.25rem;">
                      <van-col span="8">审批时间</van-col>
                      <van-col span="16" style="text-align: right;">{{ formatDate(item.created_time) }}</van-col>
                    </van-row>
                  </div>
                </van-collapse-item>
              </van-collapse>
            </div>
          </div>
        </div>
        <!-- <van-cell-group :border="false">
          <component
            v-for="(item, index) in mockData"
            :id="item.key"
            :ref="(el) => setRefMap(el, item)"
            :key="index"
            :is="item.component"
            :item="item"
            @active="onActive"
                />
        </van-cell-group>
        <div v-if="mockData.length && PCommit.visible" style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            {{ PCommit.text ? PCommit.text : '提交' }}
          </van-button>
        </div> -->
      </van-form>
      <!-- <van-floating-bubble
        axis="xy"
        icon="records-o"
        magnetic="x"
        @click="onClickFloatingBubble"
      /> -->
    </van-config-provider>
  </div>
  <div v-if="page_type === 'add'" style="text-align: center; color: #545454; font-size: 0.85rem; padding-bottom: 2rem">
    提交即授权该表单收集你的填写信息
  </div>
  <div>
    <!-- TODO: 签到二维码，待用 -->
    <!-- <van-image width="50" height="50" src="https://oa-dev.onwall.cn/admin/?a=get_qrcode&m=srv&key=123'"></van-image> -->
  </div>
  <van-overlay :show="show_qrcode">
    <div class="wrapper">
      <div class="block">
        <div style="text-align: center; margin-top: 0.5rem;">请先关注公众号</div>
        <van-image @touchstart="onTap" width="100%" fit="cover" :src="qr_url" />
        <div style="text-align: center; margin-bottom: 0.5rem; font-size: 0.85rem;">长按识别二维码</div>
      </div>
    </div>
  </van-overlay>
  <van-overlay :show="pwd_show">
    <div class="pwd-wrapper">
      <div class="block">
        <div style="text-align: center; margin-top: 0.5rem;">请输入密码填写表单</div>
        <van-config-provider :theme-vars="themeVars">
          <van-form>
            <van-field v-model="mmtx_password" type="password" autocomplete label="密码"
              style="border: 1px solid #dfdfdf; margin: 1rem 0; border-radius: 5px;" />
            <van-button @click="onSubmitPwd" type="primary" round block>验证并填写表单</van-button>
          </van-form>
        </van-config-provider>
      </div>
    </div>
  </van-overlay>
  <van-action-sheet
    v-model:show="approval_show"
    :actions="approval_actions"
    @select="onApprovalSelect"
    cancel-text="取消"
    close-on-click-action
    @cancel="onApprovalCancel"
  />

  <van-overlay :show="bind_tel_show" z-index="100">
    <div class="bind-tel-wrapper">
      <div class="block">
        <div style="text-align: center; padding: 1rem; padding-top: 0; font-weight: bold;">手机号绑定</div>
        <login-box ref="bindForm" @on-submit="onBindSubmit"></login-box>
        <div style="padding: 1rem; padding-bottom: 0;">
          <van-button round block type="primary" :color="styleColor.baseColor" @click="bindSubmit">
            绑&nbsp;定
          </van-button>
        </div>
      </div>
    </div>
  </van-overlay>

  <van-dialog v-model:show="show_reject" title="选择驳回节点" show-cancel-button :confirm-button-color="themeVars.buttonPrimaryBackground" @confirm="onConfirmDialog" @cancel="onCancelDialog">
    <div style="padding: 1rem 0;">
      <van-checkbox-group v-model="checked_reject" shape="square" :checked-color="themeVars.buttonPrimaryBackground">
        <van-checkbox v-for="(node, index) in reject_nodes" :key="index" :name="node.code" style="margin: 0 0 8px 20px;">{{ node.name }}</van-checkbox>
      </van-checkbox-group>
    </div>
  </van-dialog>

  <van-loading v-if="show_loading" size="24px" vertical style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 5rem;">加载中...</van-loading>
</template>

<script setup>
import "@vant/touch-emulator"; // PC上引入时使得表格组件按钮插件出问题，移动端使用没问题
import { createComponentType } from "@/hooks/useComponentType";
import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle, } from "@/utils/generatePackage.js";
import { useRoute } from "vue-router";
import { queryFormAPI, postVerifyPasswordAPI } from "@/api/form.js";
import { addFormDataAPI, queryFormDataAPI, modiFormDataAPI, flowFormDataAPI } from "@/api/data.js";
import { showSuccessToast, showFailToast, showConfirmDialog, showToast } from "vant";
import { wxInfo, getUrlParams, formatDate, prettyLog } from "@/utils/tools";
import { styleColor } from "@/constant.js";
import { sharePage } from '@/composables/useShare.js'
import wx from 'weixin-js-sdk'
import LoginBox from '@/components/LoginBox/index.vue';

const $route = useRoute();
const $router = useRouter();

// 获取表单设置
const store = mainStore();
const { formSetting, formInfo, successInfo } = storeToRefs(store);

// // web端判断封面图片高度
// const is_pc = computed(() => wxInfo().isPC);
// const PHeaderHeight = computed(() => {
//   if (is_pc.value) {
//     return "35vh";
//   } else {
//     return "20vh";
//   }
// });

// TAG: 自定义主题颜色
const themeVars = {
  buttonPrimaryBackground: styleColor.baseColor,
  buttonPrimaryBorderColor: styleColor.baseColor,
  pickerConfirmActionColor: styleColor.baseColor,
};

const PHeader = ref({});
const PCommit = ref({});
// const PHeader_cover = ref("");
// const PHeader_title = ref("");
// const mockData = ref([]);
/**
 * 表单结构数据
 */
const formData = ref([]);
/**
 * 格式化表单数据
*/
const formatData = (data) => {
  const arr = [];
  data.forEach((field) => {
    const { interaction_type, data_type, field_id, field_name, ...component_props } = field;
    // 生成组件属性
    const temp = {
      key: field_name,
      value: component_props.default ? component_props.default : "",
      component_props,
    };
    arr.push(temp);
  });
  return arr;
};
/**
 * 表单提交数据
 */
const postData = ref({});
/**
 * 表单历史数据
 */
const historyData = ref({});

// 编辑模式不能提交操作
const model = $route.query.model;
// 权限控制, 页面参数判断页面功能
/**
 * add 新增页
 * info 详情页
 * edit 编辑页
 * flow 流程页
 */
const page_type = $route.query.page_type ? $route.query.page_type : 'add';
//
const data_id = $route.query.data_id ? $route.query.data_id : null;
// 模仿金数据的扩展参数
const x_field_1 = $route.query.x_field_1 ? $route.query.x_field_1 : null;
// 周期ID标识
const x_cycle = $route.query.x_cycle ? $route.query.x_cycle : null;
// iframe传值openid
const iframe_openid = getUrlParams(location.href) ? getUrlParams(location.href).openid : '';
// 强制后台检查标识
const force_back = $route.query.force_back ? $route.query.force_back : '';

const notice_text = ref(""); // 顶部提示文字
const show_qrcode = ref(false); // 显示二维码
const qr_url = ref(""); // qrcode
const pwd_show = ref(false);
const mmtx_password = ref('');
const form_name = ref(''); // 表单名称

// 提交表单密码
const onSubmitPwd = async () => {
  const { code } = await postVerifyPasswordAPI({ form_code: $route.query.code, mmtx_password: mmtx_password.value });
  if (code) {
    pwd_show.value = false;
  }
}

// 弹出流程审核操作
const approval_show = ref(false);
const approval_note = ref('');
const flow_node_action_id = ref('');
// 审批组件点击
const onClickFloatingBubble = () => {
  approval_show.value = true;
}
const myForm = ref(null);
const approval_actions = ref([]);
const show_reject = ref(false);
const checked_reject = ref([]);
const reject_nodes = ref([]);
const onApprovalSelect = (item) => {
  flow_node_action_id.value = item.id;
  if (page_type === 'add') { // 新增页面统一处理为提交
    myForm.value.submit();
  }
  if (page_type === 'flow') {
    // 驳回选择分支操作
    if (item.id === 'reject' && item?.parent_nodes?.length) { // 点击驳回按钮
      show_reject.value = true;
      reject_nodes.value = item.parent_nodes; // 驳回操作对应的上级节点
      return;
    }
    myForm.value.submit();
  }
};
const onApprovalCancel = () => {
  console.warn('取消');
}

// const handleApproval = (type) => {
//   console.warn(type);
//   console.warn(approval_note.value);
// }

const onConfirmDialog = () => { // 提交驳回节点操作
  // 提交驳回节点操作，需要驳回的节点需要传递到后台数据中
  myForm.value.submit();
}
const onCancelDialog = () => { // 取消驳回节点操作
  checked_reject.value = [];
}

// TODO: 等待调试发送短信接口
const bind_tel_show = ref(false);
const bindForm = ref(null);
const bindSubmit = () => {
  bindForm.value.submit();
}

const onBindSubmit = (values) => {
  axios.post('/srv/?a=b_login', {
    phone: values.phone,
    pin: values.code,
  })
    .then(res => {
      if (res.data.code === 1) {
        bind_tel_show.value = false;
        // 表单成功提交后续操作
        successHandle();
      } else {
        console.warn(res.data);
        Toast({
          message: res.data.msg,
          icon: 'close',
        });
      }
    })
    .catch(err => {
      console.error(err);
    })
};

const flow_node_code = $route.query.flow_node_code ? $route.query.flow_node_code :formSetting.value.flow_node_code; // flow_node_code 表示随机选择的流程节点的ID
const form_flow_process_list = ref([]);
const active_flow_process = ref([]);
const collapseRef = ref(null);

const show_loading = ref(false);

onMounted(async () => {
  // 显示加载动画
  show_loading.value = true;
  // TAG: 全局背景色
  document
    .querySelector("body")
    .setAttribute("style", `background-color: ${styleColor.backgroundColor}`);
  const { data, flow_process_list, code } = await queryFormAPI({ form_code: $route.query.code, page_type, data_id, flow_node_code, force_back, openid: iframe_openid, x_cycle }); // flow_node_code 表示随机选择的流程节点的ID
  const form_data = data;
  // 处理审批意见显示
  if (code) {
    setTimeout(() => {
      form_flow_process_list.value = flow_process_list; // 上中下游节点的审批意见
      if (flow_process_list?.length) {
        active_flow_process.value.push(flow_process_list[0]['created_time']);
        // nextTick(() => {
        //   // 全部展开
        //   collapseRef.value?.toggleAll(true);
        // })
      }
    }, 1000);
  }
  // 缓存表单信息
  store.changeFormInfo(data);
  // 表单网页标题
  useTitle(form_data.name);
  form_name.value = form_data.name;
  // 重构数据结构
  let page_header = {};
  let page_commit = {};
  let page_form = [];
  form_data.field_list.forEach((element) => {
    if (element.tag === "page_header") {
      // 页眉组件
      page_header = element;
    } else if (element.tag === "page_commit") {
      // 提交按钮
      page_commit = element;
    } else {
      page_form.push(element);
    }
  });
  /** 页眉属性
   * @param label 表单标题
   * @param banner_type 页眉类型：["文字", "单张图", "轮播图"] text=文字，image=单张图，carousel=轮播图
   * @param banner_url 页眉图片地址
   * @param description 描述内容
   * @param invisible 页眉展示
   */
  if (page_header) {
    PHeader.value = {
      label: page_header.label,
      description: page_header.description,
      type: page_header.banner_type,
      cover: page_header.banner_url,
      banner: page_header.banner,
      visible: !page_header.invisible,
      flow_node_name: formSetting.value.flow_node_name ? formSetting.value.flow_node_name : '', // 节点名称
    };
  }
  if (page_commit) {
    PCommit.value = {
      text: page_commit.text,
      visible: !page_commit.invisible,
    };
  }

  // page_form.push({
  //   "tag": "divider",
  //   "name": "name_2",
  //   "index": 2,
  //   "label": "表格",
  //   "unique": false,
  //   "default": "",
  //   "disabled": false,
  //   "field_id": 799599,
  //   "readonly": false,
  //   "required": false,
  //   "data_type": "text",
  //   "field_name": "field_2",
  //   "placeholder": "请输入",
  //   "interaction_type": "h5edit"
  // })

  formData.value = formatData(page_form);

  // TAG：获取原来表单数据
  if (data_id) { // 如果有data_id，则获取历史数据 否则获取表单默认值
    const history_data = await queryFormDataAPI({ form_code: $route.query.code, data_id, openid: iframe_openid, force_back, page_type });
    if (history_data.code) {
      // 结构优化一下
      let object = history_data.data;
      const isInfoPage = page_type === 'info';
      const objectMap = new Map(Object.entries(object)); // 将 object 转换为 Map，Object.entries() 方法用于返回一个给定对象自身可枚举属性的键值对数组，数组中的每个元素是一个包含键值对的数组，[ ["name", "Alice"], ["age", 30], ["city", "New York"] ]
      formData.value.forEach((item) => {
        if (objectMap.has(item.key)) {
          item.component_props.default = objectMap.get(item.key);
          // 设置读写权限 read_only read_write
          if (isInfoPage) {
            item.component_props.readonly = true;
            PCommit.value.visible = false; // 只读模式下，提交按钮隐藏
          }
        }
      });
      historyData.value = history_data.data; // 历史表单字段数据
      // 显示加载动画
      show_loading.value = false;
    }
    if (!history_data) {
      PCommit.value.visible = false; // 查询数据错误，提交按钮隐藏
      // 显示加载动画
      show_loading.value = false;
    }
  } else {
    // 显示加载动画
    show_loading.value = false;
  }

  // TAG：创建组件类型
  createComponentType(formData.value);

  const isJSON = (value) => {
    try {
      JSON.parse(value);
      return true;
    } catch (e) {
      return false;
    }
  }

  // TAG：不同类型提交表单处理
  if (page_type === 'add' || page_type === undefined) { // 表单为新增状态, 检查是否有未完成的表单信息
    const existingCookie = Cookies.get($route.query.code);
    if (existingCookie) {
      // 如果Cookie存在，更新它
      let object = JSON.parse(existingCookie);
      // 默认值
      const objectMap = new Map(Object.entries(object)); // 将 object 转换为 Map，Object.entries() 方法用于返回一个给定对象自身可枚举属性的键值对数组，数组中的每个元素是一个包含键值对的数组，[ ["name", "Alice"], ["age", 30], ["city", "New York"] ]
      formData.value.forEach((item) => {
        if (objectMap.has(item.key)) {
          // 适配双重json字符串问题，比如地址
          const value = isJSON(objectMap.get((item.key))) ? JSON.parse(objectMap.get((item.key))) : objectMap.get((item.key));
          item.component_props.default = value;
        }
      });
    }
  }
  if (page_type === 'add' && !force_back) { // 表单为新增状态, 非后台打开状态
    // 过期时间显示
    notice_text.value = `表单报名将在 ${formSetting.value.sjsj_end_time} 后结束`;
    // 判断是否需要关注公众号, 弹出二维码识别
    if (formSetting.value.wxzq_must_follow && !formSetting.value.x_field_weixin_subscribe) {
      show_qrcode.value = true;
      qr_url.value = formSetting.value.wxzq_mp_qrcode;
      // 标记用户还未关注
      localStorage.setItem('weixin_subscribe', 0);
    }
    // 判断是否弹出密码输入框
    checkUserPassword();
    // 当数据量达到限额时，该表单将不能继续提交数据。
    if (formSetting.value.sjsj_max_count_error) {
      // 提交按钮禁用
      submitStatus.value = true;
    }
    // 设定填写次数
    if (formSetting.value.wxzq_scope && model !== 'preview') {
      if (formSetting.value.fill_error) {
        // 提交按钮禁用
        submitStatus.value = true;
      }
    }
  }
  // 启用分享功能，非预览模式
  if (formSetting.value.wxzq_is_share && model !== 'preview') {
    wx.ready(() => {
      /**
       * 微信分享卡片标题模式
       * form_name=使用表单名称作为分享标题，customize=自定义分享标题
       */
      const title = formSetting.value.wxzq_share_title_mode === 'form_name' ? form_name.value : formSetting.value.wxzq_share_custom_title;
      // 自定义分享内容
      sharePage({ title, desc: formSetting.value.wxzq_share_slogan, imgUrl: formSetting.value.wxzq_share_logo });
    });
  }

  setTimeout(() => {
    // 审核操作列表数据
    approval_actions.value = formSetting.value.flow_node_action_list?.map((item) => { return { name: item.btnText, id: item.id, parent_nodes: item.parent_nodes } });
  }, 1000);

  setTimeout(() => {
    const width = $('body').width();
    // 固定表单宽度
    $('.table-box').css('width', (width - 30) + 'px');
  }, 100);

  // TAG：表单样式统一修改
  // 详情页表单的border去掉
  if (page_type === 'info') {
    nextTick(() => {
      document.documentElement.style.setProperty('--border-style', '0');
    })
  }
  // iframe通信-读取联系人身份证信息
  window.addEventListener('message', (ev) => {
    let data = ev.data || null;
    if (data.length) {
      const objectMap = new Map(data?.map(item => [item.key, item.value]));
      formData.value.forEach((item) => {
        // 绑定别名字段
        if (objectMap.has(item.component_props.alias)) {
          if (item.component_props.tag === 'checkbox') { // 多选组件值需要转换为数组
            item.component_props.default = objectMap.get(item.component_props.alias).trim().split('　');
          } else {
            item.component_props.default = objectMap.get(item.component_props.alias);
          }
        }
      });
    }
  }, false);
});

// 打开轮询用户是否关注
const onTap = () => {
  if (localStorage.getItem('weixin_subscribe') === '0') {
    setInterval(() => {
      checkUserSubscribe()
    }, 1000);
  }
}

// 检查数据收集设置
const checkUserSubscribe = () => {
  // 判断是否需要关注公众号, 弹出二维码识别
  if (formSetting.value.wxzq_must_follow && formSetting.value.x_field_weixin_subscribe) {
    // 标记用户已关注
    localStorage.setItem('weixin_subscribe', 1);
    show_qrcode.value = false;
  }
  // 凭密码填写设置
  if (formSetting.value.mmtx_enable) {
    pwd_show.value = true;
  } else {
    pwd_show.value = false;
  }
}

// 检查密码验证功能
const checkUserPassword = () => {
  // 凭密码填写设置
  if (formSetting.value.mmtx_enable) {
    pwd_show.value = true;
  } else {
    pwd_show.value = false;
  }
}

/**
 * 合并并去重数据
 * @param {Array} data - 输入的数据数组，每个元素包含mode、logical_op和expr_list属性
 * @returns {Array} - 合并并去重后的数据数组
 *
 * 此函数旨在处理一组配置项，每个配置项由mode、logical_op和expr_list组成。
 * 它首先根据mode和logical_op属性合并相同的项目，然后在每个合并的项目中去重expr_list。
 * 合并的逻辑是基于mode和logical_op完全一致的情况下进行的。
 * 去重的逻辑是通过比较op、values和field_name属性来确定expr_list中的表达式是否重复。
 */
const mergeAndDeduplicate = (data) => {
  // 使用reduce函数合并数据
  return data.reduce((acc, current) => {
    // 查找是否已存在相同的项
    const existingItemIndex = acc.findIndex(item =>
        item.mode === current.mode && item.logical_op === current.logical_op
    );

    if (existingItemIndex !== -1) {
        // 如果存在相同项，则合并expr_list值
        acc[existingItemIndex].expr_list = acc[existingItemIndex].expr_list.concat(current.expr_list);
    } else {
        // 如果不存在相同项，则将当前项添加到累积器中
        acc.push(current);
    }

    // 返回处理后的累积器
    return acc;
  }, []).map(item => {
      // 从expr_list中移除重复项
      item.expr_list = item.expr_list.filter((expr, index, self) =>
          index === self.findIndex(e => (
              e.op === expr.op && JSON.stringify(e.values) === JSON.stringify(expr.values) && e.field_name === expr.field_name
          ))
      );
      return item;
  });
}

// 根据规则隐藏相应字段
const checkRules = () => {
  const rule_list = formInfo.value['rule_list'] ? [...formInfo.value['rule_list']] : [];
  // TAG：处理同一字段多个规则情况
  formData.value.forEach(item => {
    item.x_rules = []; // 字段的规则
  });

  rule_list.forEach(rule => {
    formData.value.forEach(item => {
      if (rule.field_names?.includes(item.key) && !rule.is_invalid) {
        // 匹配字段的规则集合
        item.x_rules.push({
          mode: rule.mode,
          logical_op: rule.logical_op,
          expr_list: rule.expr_list,
        })
      }
    })
  });

  formData.value.forEach(item => {
    // 把规则合并，同一字段下的mode/logical_op必须一致
    item.field_rules = mergeAndDeduplicate(item.x_rules)[0];
  });

  formData.value.forEach(item => {
    // 给受作用的字段绑定判断规则
    // 规则失效需要踢出
    // rule_list.forEach(rule => {
    //   if (rule.field_names?.includes(item.key) && !rule.is_invalid) {
    //     item.field_rules = {
    //       mode: rule.mode,
    //       logical_op: rule.logical_op,
    //       expr_list: rule.expr_list,
    //     }
    //   }
    // });
    // 只检查存在规则的字段
    if (item.field_rules) {
      let condition = '';
      // 多个规则的满足条件，为全且或者全或
      const op = item.field_rules?.logical_op === 'AND' ? '&&' : '||';
      item.field_rules?.expr_list?.forEach(expr => {
        let form_submission_value = postData.value[expr['field_name']]; // 表单提交值, field_12 : "" || field_13 : []
        let rule_matching_value = expr['values']; // 规则匹配值 values : ['x']
        if (typeof form_submission_value === 'string') { // 表单值为字符串（单选，下拉）
          // 处理单选项带补充信息时判断，去除补充信息
          if (form_submission_value.indexOf(':') !== -1) {
            let parts = form_submission_value.split(':');
            form_submission_value = parts[0];
          }
          const k = !!rule_matching_value.includes(form_submission_value); // 转换为布尔值
          condition += `${k}${op}`;
        }
        if (typeof form_submission_value === 'object') { // 表单值为数组（多选）
          // 处理多选项带补充信息时判断，去除补充信息
          form_submission_value = form_submission_value?.map(item => {
              if (item.includes(':')) {
                return item.split(':')[0].trim();  // 去除冒号及其后面的部分并去除前后空格
              }
              return item;
          });
          const k = !!(_.intersection(rule_matching_value, form_submission_value)).length; // 转换为布尔值
          condition += `${k}${op}`
        }
      });
      // 把结果转换为布尔值
      if (item.field_rules?.logical_op === 'AND') {
        if (condition.indexOf('false') >= 0) {
          condition = false;
        } else {
          condition = true;
        }
      }
      if (item.field_rules?.logical_op === 'OR') {
        if (condition.indexOf('true') >= 0) {
          condition = true;
        } else {
          condition = false;
        }
      }
      item['component_props']['disabled'] = item.field_rules?.mode === 'SHOW' ? !condition : condition;
      /**
       * 处理规则问题：收作用的规则字段如果隐藏，它设置的相应字段也需要隐藏
       */
      // 有规则的字段集合
      let rule_keys = formInfo.value['rule_list']
      .map(item => item.expr_list[0])
      .map(item => item.field_name);
      //
      let hide_fields = []; // 规则字段下面可以应用规则的字段
      formData.value?.forEach(item => {
        item.field_rules?.expr_list?.forEach(expr => {
          if (rule_keys?.includes(item.key)) {
            // 已隐藏字段
            if (item.component_props.disabled) {
              formInfo.value['rule_list']?.forEach(rule => {
                if (rule.expr_list[0]['field_name'] === item.key) {
                  hide_fields = rule.field_names;
                }
              })
            }
          }
        });
      })
      // 隐藏字段集合里面有当前字段
      if (hide_fields.includes(item.key)) {
        item['component_props']['disabled'] = true;
      }
    }
  });
}


// 处理没有绑定值的组件的赋值
// 省市区选择，图片上传，文件上传，电子签名，评分组件
// const area_picker = ref([]);
const image_uploader = ref([]);
const file_uploader = ref([]);
const table_editor = ref([]);
const sign = ref([]);
// const rate_picker = ref([]);
// const appointment = ref([]);
// 动态绑定ref数据
const setRefMap = (el, item) => {
  if (el) {
    if (item.component_props.tag === "image_uploader") {
      image_uploader.value.push(el);
    }
    if (item.component_props.tag === "file_uploader") {
      file_uploader.value.push(el);
    }
    if (item.component_props.tag === "table_editor") {
      table_editor.value.push(el);
    }
    // if (item.component_props.tag === "sign") {
    //   sign.value.push(el);
    // }
  }
};

// 操作绑定自定义字段回调
const onActive = (item) => {
  if (item?.key === "image_uploader") {
    postData.value[item.filed_name] = item.value;
  }
  if (item?.key === "file_uploader") {
    postData.value[item.filed_name] = item.value;
  }
  // if (item.key === "sign") {
  //   postData.value[item.filed_name] = item.value;
  // }
  if (item?.type === "radio") { // 单选控件
    postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value });
  }
  if (item?.type === "gender") { // 性别控件
    postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value });
  }
  if (item?.type === "checkbox") { // 多选控件
    const checkbox_value = _.cloneDeep(item.value)
    checkbox_value?.forEach((element, index) => {
      for (const key in item.affix) {
        if (item.affix[key] && element === key) {
          checkbox_value[index] = item.affix[key]
        }
      }
    });
    postData.value = _.assign(postData.value, { [item.key]: checkbox_value });
  }
  if (item?.type === "volunteer_group") { // 义工组别选择控件
    postData.value = _.assign(postData.value, { [item.key]: item.affix ? item.affix : item.value });
  }
  if (item?.type === "picker") { // 下拉框控件
    postData.value[item.key] = item.value;
  }
  if (item?.key === "table_editor") { // 表单控件
    postData.value[item.filed_name] = item.value;
  }
  // 检查规则，会影响字段显示
  checkRules();
};

// 检验没有绑定name的输入项
const validOther = () => {
  let valid = {
    status: true,
    key: "",
  };
  if (image_uploader.value) {
    // 图片上传
    image_uploader.value.forEach((item, index) => {
      if (image_uploader.value[index]?.validImageUploader && !image_uploader.value[index]?.validImageUploader()) {
        valid = {
          status: image_uploader.value[index]?.validImageUploader(),
          key: "image_uploader",
        };
        return false;
      }
    });
  }
  if (file_uploader.value) {
    // 文件上传
    file_uploader.value.forEach((item, index) => {
      if (file_uploader.value[index].validFileUploader && !file_uploader.value[index].validFileUploader()) {
        valid = {
          status: file_uploader.value[index].validFileUploader(),
          key: "file_uploader",
        };
        return false;
      }
    });
  }
  if (table_editor.value) {
    // 文件上传
    table_editor.value.forEach((item, index) => {
      if (table_editor.value[index].validTableEditor && !table_editor.value[index].validTableEditor()) {
        valid = {
          status: table_editor.value[index].validTableEditor(),
          key: "table_editor",
        };
        return false;
      }
    });
  }
  // if (sign.value) {
  //   // 电子签名
  //   sign.value.forEach((item, index) => {
  //     if (!sign.value[index].validSign()) {
  //       valid = {
  //         status: sign.value[index].validSign(),
  //         key: "sign",
  //       };
  //       return false;
  //     }
  //   });
  // }
  return valid;
};

// 预处理表单数据
const preValidData = (values) => {
  // 过滤掉标识为 ignore，undefined 的字段数据
  let { ignore, undefined, ...rest_data } = values;
  // 合并自定义字段到提交表单字段
  return _.assign(postData.value, rest_data);
}

const onRemove = (value) => { // 处理组件删除事件回调, 数据结构是二维数组，删除时返回被删除的一组数据
  value[0].forEach(item => {
    for (const key in postData.value) {
      if (item.key === key) {
        delete postData.value[key]; // 删除对应的键值对
      }
    }
  });
}

// const adjGroupData = (values) => { // 调整group组件的数据结构
//   // let obj = {
//   //   "field_10_group[0]_7653" : "1",
//   //   "field_10_group[1]_4154" : "11",
//   //   "field_11_group[0]_3440" : "2",
//   //   "field_11_group[1]_4282" : "22"
//   // }

//   // let arr = [{
//   //   "field_10": "1",
//   //   "field_11": "2",
//   // }, {
//   //   "field_10": "11",
//   //   "field_11": "22",
//   // }]
// }

const submitStatus = ref(false); // 表单提交按钮状态

const successHandle = () => { // 表单成功提交后续操作
  //在 iframe 中调用父页面中定义的变量 - Doris需要自由控制
  let getChildVal = parent.parent.getChildVal;
  if (getChildVal) {
    getChildVal();
    return false;
  }
  // 如果类型为跳转网页
  if (successInfo.value.commit_action === 'url') {
    window.location.href = successInfo.value.commit_url;
  } else {
    // 把成功信息写进cookies
    Cookies.set(`form_${successInfo.value.id}_s_i`, JSON.stringify(successInfo.value));
    // 跳转成功页面
    $router.push({
      path: "/success",
      query: {
        successId: successInfo.value.id,
      },
    });
  }
  // 删除存在cookie, 未完成的表单功能
  Cookies.remove($route.query.code);
}

const onSubmit = async (values) => { // 表单提交回调
  // 表单数据处理
  postData.value = preValidData(values);
  // 合并扩展字段
  postData.value = { ...postData.value, x_field_1, x_cycle };
  // formData.value disabled=true 数据处理, 表单页面上不显示
  let removeField = []; // 移除字段
  formData.value?.forEach(item => {
    if (item.component_props.disabled) {
      removeField.push(item);
      // 隐藏字段的值需要被置空
      // postData.value[item.key] = '';
      // 隐藏字段的值需要被删除
      delete postData.value[item.key];
    }
  });
  // 检查非表单输入项
  if (validOther().status) {
    // 编辑模式不能提交数据
    if (model === 'edit') {
      console.warn(removeField);
      console.warn(postData.value);
    }
    if (model === 'edit' || model === 'preview' || page_type === 'info') return false;
    // 提交按钮禁用
    submitStatus.value = true;
    // TAG：不同类型提交表单处理
    if (page_type === 'add' || page_type == null) { // 新增表单提交
      // 通过验证
      const result = await addFormDataAPI({
        form_code: $route.query.code,
        data: postData.value,
        openid: iframe_openid,
        flow_id: formSetting.value.flow_id, // 流程相关保存接口, 把flow_id传到后台
        flow_node_action_id: 'commit', // 流程节点的操作按钮的ID, 因为只有提交操作，ID写死
        force_back
      });
      if (result.code) {
        // 提交按钮禁用状态
        submitStatus.value = false;
        //
        showSuccessToast("提交成功");
        // 缓存表单返回值
        store.changeSuccessInfo(result.data);
        // TODO：校验手机号绑定状态
        let bind_status = true;
        if (!bind_status) {
          showConfirmDialog({
            title: '温馨提示',
            message: '您还没有绑定手机号，是否去绑定？',
            confirmButtonColor: styleColor.baseColor,
            cancelButtonText: '放弃'
          })
            .then(() => { // 确定去绑定手机号
              bind_tel_show.value = true;
            })
            .catch(() => { // 放弃手机号绑定
              // 表单成功提交后续操作
              successHandle();
            });
        } else {
          // 表单成功提交后续操作
          successHandle();
        }
      } else {
        // 提交按钮禁用状态
        submitStatus.value = false;
      }
    } else if (page_type === 'edit') { // 编辑表单提交
      // 从historyData历史数据里面，把隐藏字段移除
      removeField?.forEach(item => {
        if (item.component_props.disabled) {
          // 隐藏字段的值需要被删除
          delete historyData.value[item.key];
        }
      });
      // 显示的数据不是完整的数据， 把historyData历史数据合并到postData.value提交数据里面
      for (let key in historyData.value) {
        if (!(key in postData.value)) {
          postData.value[key] = historyData.value[key];
        }
      }
      // 编辑模式表单提交
      const result = await modiFormDataAPI({
        form_code: $route.query.code,
        data: postData.value,
        openid: iframe_openid,
        data_id,
        force_back
      });
      if (result.code) {
        // 提交按钮禁用状态
        submitStatus.value = false;
        //
        showSuccessToast("提交成功");
        // 缓存表单返回值
        store.changeSuccessInfo(result.data);
        // 表单成功提交后续操作
        successHandle();
      } else {
        // 提交按钮禁用状态
        submitStatus.value = false;
      }
    } else if (page_type === 'flow') { // 流程表单提交
      // 从historyData历史数据里面，把隐藏字段移除
      removeField?.forEach(item => {
        if (item.component_props.disabled) {
          // 隐藏字段的值需要被删除
          delete historyData.value[item.key];
        }
      });
      // 显示的数据不是完整的数据，把historyData历史数据合并到postData.value提交数据里面
      for (let key in historyData.value) {
        if (!(key in postData.value)) {
          postData.value[key] = historyData.value[key];
        }
      }
      const result = await flowFormDataAPI({
        form_code: $route.query.code,
        data: postData.value,
        data_id,
        flow_node_code,
        flow_node_action_id: flow_node_action_id.value,
        flow_content: approval_note.value,
        flow_reject_to_node_codes: checked_reject.value.length ? checked_reject.value.join(',') : '',
        force_back
      });
      if (result.code) {
        // 提交按钮禁用状态
        submitStatus.value = false;
        //
        showSuccessToast("操作成功");
        // 缓存表单返回值
        // store.changeSuccessInfo(result.data);
        //在 iframe 中调用父页面中定义的变量 - Doris需要自由控制
        let getChildVal = parent.parent.getChildVal;
        if (getChildVal) {
          getChildVal();
        }
      } else {
        // 提交按钮禁用状态
        submitStatus.value = false;
      }
    } else {
      console.warn('缺参数');
    }
  } else {
    // 提交按钮禁用状态
    submitStatus.value = false;
    console.warn(validOther().key + "不通过验证");
    // // 图片上传控件报错提示
    // if (validOther().key === "image_uploader") {
    //   showFailToast("图片上传为空");
    // }
    // // 文件上传控件报错提示
    // if (validOther().key === "file_uploader") {
    //   showFailToast("文件上传为空");
    // }
  }
};

const onFailed = (errorInfo) => { // 提交表单且验证不通过后触发
  showToast('有填写错误，请检查')
}
</script>

<style lang="less">

:root:root {
  --van-floating-bubble-background: #C2915F;
}

:root {
  --border-style: 1px solid #eaeaea;
}

.table-title {
  padding: 1rem;
  font-size: 1.15rem;
  text-align: center;
  white-space: pre-wrap;
}

.table-desc {
  padding: 0rem 1rem;
  color: #666;
  font-size: 0.9rem;
  white-space: pre-wrap;
  line-height: 1.5;

  img {
    width: 100%;
  }
}

.table-box {
  background-color: #ffffff;
  padding-bottom: 1rem;
  overflow: auto;
  margin: 1rem 0;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 10rem;
  // height: 10rem;
  background-color: #fff;
}

.pwd-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .block {
    width: 80vw;
    background-color: #fff;
    padding: 1rem;
    border-radius: 5px;
  }
}

.bind-tel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .block {
    width: 80vw;
    background-color: #fff;
    padding: 1rem;
    border-radius: 5px;
  }
}

.PHeader-Text {
  padding: 1rem;
  font-weight: bold;
  white-space: pre;
}

// :deep(.van-icon) { // 处理正式服务器上箭头上下位移问题
//   font-size: var(--van-cell-icon-size);
//   line-height: var(--van-cell-line-height);
// }
</style>