<!--
 * @Date: 2022-07-18 10:22:22
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-07-22 12:00:06
 * @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 class="table-box" :style="{ margin: is_pc ? '1rem 0' : '1rem', overflow: 'auto' }">
    <template v-if="PHeader.visible">
      <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.description" class="table-desc" v-html="PHeader.description" />
    <van-config-provider :theme-vars="themeVars">
      <van-form ref="myForm" @submit="onSubmit" :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="page_type === 'flow' && 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>
        <!-- <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 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">
    <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>
</template>

<script setup>
import "@vant/touch-emulator";
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 } from "vant";
import { wxInfo, getUrlParams } 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 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 $route = useRoute();
const $router = useRouter();
const PHeader = ref({});
const PCommit = ref({});
const PHeader_cover = ref("");
const PHeader_title = ref("");
const mockData = ref([]);
const formData = ref([]);
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 : null;
//
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 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 area_picker = ref([]);
const image_uploader = ref([]);
const file_uploader = 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 === "sign") {
    //   sign.value.push(el);
    // }
  }
};

const notice_text = ref("");
const show = ref(false);
const qr_url = ref("");
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 onApprovalSelect = (item) => {
  flow_node_action_id.value = item.id;
  if (page_type === 'add') { // 新增页面统一处理为提交
    myForm.value.submit();
  }
  if (page_type === 'flow') {
    myForm.value.submit();
  }
  // switch (item.id) {
  //   case 'commit':
  //     myForm.value.submit();
  //     break;
  //   case 'draft':
  //     myForm.value.submit();
  //     break;
  //   case 'withdraw':
  //     handleApproval('withdraw');
  //     break;
  //   case 'reject':
  //     handleApproval('reject');
  //     break;
  //   case 'terminate':
  //     handleApproval('terminate');
  //     break;
  // }
};
const onApprovalCancel = () => {
  console.warn('取消');
}

// const handleApproval = (type) => {
//   console.warn(type);
//   console.warn(approval_note.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 = getUrlParams(location.href) ? getUrlParams(location.href).flow_node_code : formSetting.value.flow_node_code; // flow_node_code 表示随机选择的流程节点的ID
const flow_node_code = $route.query.flow_node_code ? $route.query.flow_node_code :formSetting.value.flow_node_code; // flow_node_code 表示随机选择的流程节点的ID

onMounted(async () => {
  // TAG: 全局背景色
  document
    .querySelector("body")
    .setAttribute("style", `background-color: ${styleColor.backgroundColor}`);
  const { data } = await queryFormAPI({ form_code: $route.query.code, page_type, data_id, flow_node_code }); // flow_node_code 表示随机选择的流程节点的ID
  const form_data = data;
  // 缓存表单信息
  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,
    };
  }
  if (page_commit) {
    PCommit.value = {
      text: page_commit.text,
      visible: !page_commit.invisible,
    };
  }
  // TODO：待完善，集合组保存的字段和值怎么处理，都是单条数据都要合并到相应的 group_field_name 下面？

  // page_form.unshift({
  //   data_type : "text",
  //   default : "",
  //   disabled : false,
  //   field_id : 1414832,
  //   field_name : "field_4",
  //   index : 41,
  //   interaction_type : "h5edit",
  //   label : "物品详情",
  //   name : "name_41",
  //   placeholder : "请输入",
  //   readonly : false,
  //   required : false,
  //   tag : "group",
  //   unique : false,
  //   field_groups: [{
  //     "tag": "input",
  //     "name": "input_21",
  //     "index": 2,
  //     "label": "物品描述",
  //     "unique": false,
  //     "default": "",
  //     "disabled": false,
  //     "field_id": 7985071,
  //     "readonly": false,
  //     "required": false,
  //     "data_type": "text",
  //     "field_name": "field_10",
  //     "placeholder": "请输入",
  //     "is_camera_scan": false,
  //     "camera_scan_type": "",
  //     "interaction_type": "h5edit",
  //     "is_edit_camera_scan_result": false,
  //     "group_field_name" : "field_4",
  //   },{
  //       "tag": "gender",
  //       "name": "gender_3",
  //       "note": "",
  //       "index": 3,
  //       "label": "性别",
  //       "options": [
  //           {
  //               "title": "男",
  //               "value": "男",
  //               "checked": false,
  //               "desc_url": "",
  //               "is_input": false,
  //               "desc_text": "",
  //               "desc_type": "",
  //               "desc_btn_name": "",
  //               "input_required": false,
  //               "input_placeholder": "请输入补充信息"
  //           },
  //           {
  //               "title": "女",
  //               "value": "女",
  //               "checked": false,
  //               "desc_url": "",
  //               "is_input": false,
  //               "desc_text": "",
  //               "desc_type": "",
  //               "desc_btn_name": "",
  //               "input_required": false,
  //               "input_placeholder": "请输入补充信息"
  //           }
  //       ],
  //       "disabled": false,
  //       "field_id": 799603,
  //       "required": false,
  //       "data_type": "text",
  //       "direction": "vertical",
  //       "field_name": "field_4",
  //       "option_map": {
  //           "女": {
  //               "title": "女",
  //               "value": "女",
  //               "checked": false,
  //               "desc_url": "",
  //               "is_input": false,
  //               "desc_text": "",
  //               "desc_type": "",
  //               "desc_btn_name": "",
  //               "input_required": false,
  //               "input_placeholder": "请输入补充信息"
  //           },
  //           "男": {
  //               "title": "男",
  //               "value": "男",
  //               "checked": false,
  //               "desc_url": "",
  //               "is_input": false,
  //               "desc_text": "",
  //               "desc_type": "",
  //               "desc_btn_name": "",
  //               "input_required": false,
  //               "input_placeholder": "请输入补充信息"
  //           }
  //       },
  //       "interaction_type": "h5edit"
  //   },]
  // });

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

  // page_form.push({
  //   data_type: "text",
  //   default: "选项标题1",
  //   direction: "vertical",
  //   disabled: false,
  //   field_id: 800207,
  //   field_name: "field_62",
  //   index: 61,
  //   interaction_type: "h5edit",
  //   label: "义工组别",
  //   name: "radio_61",
  //   note: "",
  //   required: false,
  //   tag: "volunteer_group",
  //   options: [
  //     {
  //       checked: true,
  //       desc_btn_name: "",
  //       desc_text: "",
  //       desc_type: "",
  //       desc_url: "",
  //       input_placeholder: "请输入补充信息",
  //       input_required: false,
  //       is_input: false,
  //       title: "选项标题1",
  //       value: "选项标题1"
  //     },
  //     {
  //       checked: false,
  //       desc_btn_name: "",
  //       desc_text: "",
  //       desc_type: "",
  //       desc_url: "",
  //       input_placeholder: "请输入补充信息",
  //       input_required: false,
  //       is_input: false,
  //       title: "选项标题2",
  //       value: "选项标题2"
  //     }
  //   ]
  // })
  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 });
    if (history_data.code) {
      let object = history_data.data; // 表单数据
      formData.value.forEach((item) => { // 把对应数据赋值到表单
        for (const key in object) {
          const element = object[key];
          if (item.key === key) {
            item.component_props.default = element;
            // 设置读写权限 read_only read_write
            if (page_type === 'info') {
              item.component_props.readonly = true;
              PCommit.value.visible = false; // 只读模式下，提交按钮隐藏
            }
          }
        }
      });
      historyData.value = history_data.data; // 历史表单字段数据
    }
    if (!history_data) {
      PCommit.value.visible = false; // 查询数据错误，提交按钮隐藏
    }
  }

  // TAG: mock数据
  mockData.value = [
    {
      key: "field_1",
      value: "",
      component: "",
      component_props: {
        name: "appointment",
        tag: "appointment",
        label: "预约时间",
        default: '',
        required: true,
        placeholder: '',
        appointment_title: '选择入寺时间',
        options: [{
          title: '03月27日',
          placeholder: '剩余余量 9878',
          value: '',
          disabled: false,
          columns: [{
            checked : false,
            disabled : false,
            value: '1',
            text : "16:00-17:30 余1399",
          }, {
            checked : false,
            disabled : true,
            value: '2',
            text : "18:00-19:30 余1399",
          }]
        }, {
          title: '03月28日',
          placeholder: '剩余余量 9878',
          value: '',
          disabled: false,
          columns: [{
            checked : false,
            disabled : true,
            value: '3',
            text : "16:00-17:30 余1399",
          }, {
            checked : false,
            disabled : false,
            value: '4',
            text : "16:00-17:30 余1399",
          }]
        }, {
          title: '03月28日',
          placeholder: '等待预约（提前一天）',
          value: '',
          disabled: true,
          columns: [{
            checked : false,
            disabled : true,
            value: '5',
            text : "12:00-13:30 余1399",
          }, {
            checked : false,
            disabled : false,
            value: '6',
            text : "14:00-15:30 余1399",
          }]
        }]
      },
    },
  ];

  // 生成自定义组件
  // createComponentType(mockData.value);
  createComponentType(formData.value);

  // 过期时间显示
  notice_text.value = `表单报名将在 ${formSetting.value.sjsj_end_time} 后结束`;
  // 判断是否需要关注公众号, 弹出二维码识别
  if (formSetting.value.wxzq_must_follow && !formSetting.value.x_field_weixin_subscribe) {
    show.value = true;
    qr_url.value = formSetting.value.wxzq_mp_qrcode;
    // 标记用户还未关注
    localStorage.setItem('weixin_subscribe', 0);
  }
  // 判断是否弹出密码输入框
  checkUserPassword();
  // 启用分享功能，非预览模式
  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 });
    });
  }
  // 当数据量达到限额时，该表单将不能继续提交数据。
  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;
    }
  }


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

// 打开轮询用户是否关注
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.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;
  }
}

function mergeAndDeduplicate(data) {
    return data.reduce((acc, current) => {
        const existingItemIndex = acc.findIndex(item =>
            item.mode === current.mode && item.logical_op === current.logical_op
        );

        if (existingItemIndex !== -1) {
            // Merge expr_list values
            acc[existingItemIndex].expr_list = acc[existingItemIndex].expr_list.concat(current.expr_list);
        } else {
            // Push new item to the accumulator
            acc.push(current);
        }

        return acc;
    }, []).map(item => {
        // Remove duplicates from 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;
    }
  });
}

// 操作绑定自定义字段回调
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;
  }
  // 检查规则，会影响字段显示
  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 (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 {
    // 跳转成功页面
    $router.push({
      path: "/success",
    });
  }
}

const onSubmit = async (values) => {
  // 表单数据处理
  postData.value = preValidData(values);
  // 合并扩展字段
  postData.value = { ...postData.value, x_field_1, x_cycle };
  // TODO: formData.value disabled=true 数据处理？表单页面上不显示？不一定需要处理
  // 检查非表单输入项
  if (validOther().status) {
    // 编辑模式不能提交数据
    if (model === 'edit') {
      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: flow_node_action_id.value, // 用户选择的流程节点的操作按钮的ID
      });
      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历史数据合并到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
      });
      if (result.code) {
        // 提交按钮禁用状态
        submitStatus.value = false;
        //
        showSuccessToast("提交成功");
        // 缓存表单返回值
        store.changeSuccessInfo(result.data);
        // 表单成功提交后续操作
        successHandle();
      } else {
        // 提交按钮禁用状态
        submitStatus.value = false;
      }
    } else if (page_type === 'flow') { // 流程表单提交
      // 显示的数据不是完整的数据，把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
      });
      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("文件上传为空");
    // }
  }
};
</script>

<style lang="less">

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

.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;

  img {
    width: 100%;
  }
}

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

.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>