<!--
 * @Date: 2022-07-18 10:22:22
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-06-14 16:01:58
 * @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" 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; border-top: 1px dashed #eee; padding-top: 1rem;">
          <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>
          <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="actions"
    @select="onApprovalSelect"
    cancel-text="取消"
    close-on-click-action
    @cancel="onApprovalCancel"
  />
</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 } from "@/api/data.js";
import { showSuccessToast, showFailToast } 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'

// 获取表单设置
const store = mainStore();
const { formSetting, formInfo } = 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,
};

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 model = $route.query.model;
// 标记表单类型-只读标识
const form_type = $route.query.type;
// 模仿金数据的扩展参数
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;

// 格式化表单数据结构
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 onClickFloatingBubble = () => {
  approval_show.value = true;
}
const myForm = ref(null);
const actions = [
  { name: '提交', id: 'commit', },
  { name: '撤回', id: 'withdraw', disabled: true },
  { name: '驳回', id: 'reject', },
  { name: '结束流程', key: 'terminate', },
];
const onApprovalSelect = (item) => {
  switch (item.id) {
    case 'commit':
      myForm.value.submit()
      break;
    case 'withdraw':
      break;
    case 'reject':
      break;
    case 'terminate':
      break;
  }
};
const onApprovalCancel = () => {

}

onMounted(async () => {
  // TAG: 全局背景色
  document
    .querySelector("body")
    .setAttribute("style", `background-color: ${styleColor.backgroundColor}`);
  const { data } = await queryFormAPI({ form_code: $route.query.code });
  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"
  // })
  formData.value = formatData(page_form);

  // TAG：获取原来表单数据
  // iframe传值openid
  const iframe_openid = getUrlParams(location.href) ? getUrlParams(location.href).openid : '';
  const data_id = $route.query.data_id;
  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 (form_type === 'readonly') {
              item.component_props.readonly = true;
            }
          }
        }
      });
    }
  }

  // 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;
    }
  }
  // TODO: 判断是否流程表单
  formSetting.value.is_flow = 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.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') { // 表单值为字符串（单选，下拉）
          const k = !!rule_matching_value.includes(form_submission_value); // 转换为布尔值
          condition += `${k}${op}`;
        }
        if (typeof form_submission_value === 'object') { // 表单值为数组（多选）
          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 });
  }
  // 检查规则，会影响字段显示
  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 onSubmit = async (values) => {
  // 表单数据处理
  postData.value = preValidData(values);
  // 合并扩展字段
  postData.value = { ...postData.value, x_field_1, x_cycle };
  // 检查非表单输入项
  if (validOther().status) {
    // 编辑模式不能提交数据
    if (model === 'edit') {
      console.warn(postData.value);
    }
    if (model === 'edit' || model === 'preview') return false;
    // 提交按钮禁用
    submitStatus.value = true;
    // iframe传值openid
    const iframe_openid = getUrlParams(location.href) ? getUrlParams(location.href).openid : '';
    //
    const data_id = getUrlParams(location.href) ? getUrlParams(location.href).data_id : '';
    if (!data_id) { // 正常表单提交
      // 通过验证
      const result = await addFormDataAPI({
        form_code: $route.query.code,
        data: postData.value,
        openid: iframe_openid
      });
      if (result.code) {
        // 提交按钮禁用状态
        submitStatus.value = false;
        //
        showSuccessToast("提交成功");
        // 缓存表单返回值
        store.changeSuccessInfo(result.data);
        // 如果类型为跳转网页
        if (result.data.commit_action === 'url') {
          window.location.href = result.data.commit_url;
        } else {
          // 跳转成功页面
          $router.push({
            path: "/success",
          });
        }
      } else {
        // 提交按钮禁用状态
        submitStatus.value = false;
      }
    } else {
      // 编辑模式表单提交
      const result = await modiFormDataAPI({
        form_code: $route.query.code,
        data: postData.value,
        openid: iframe_openid,
        data_id
      });
      // TODO: 后续流程可能不一致，需要讨论
      if (result.code) {
        // 提交按钮禁用状态
        submitStatus.value = false;
        //
        showSuccessToast("提交成功");
        // 缓存表单返回值
        store.changeSuccessInfo(result.data);
        // 如果类型为跳转网页
        if (result.data.commit_action === 'url') {
          window.location.href = result.data.commit_url;
        } else {
          // 跳转成功页面
          $router.push({
            path: "/success",
          });
        }
      } else {
        // 提交按钮禁用状态
        submitStatus.value = false;
      }
    }
  } 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;
  }
}

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