<!--
 * @Date: 2022-07-18 10:22:22
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2022-12-07 16:12:26
 * @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">
    <van-image
      v-if="PHeader.type === '单张图'"
      width="100%"
      :height="PHeaderHeight"
      :src="PHeader.cover"
      fit="cover"
    />
    <template v-if="PHeader.type === '轮播图'">
      <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.label" class="table-title">{{ PHeader.label }}</div>
    <div v-if="PHeader.description" class="table-desc" v-html="PHeader.description" />
    <van-config-provider :theme-vars="themeVars">
      <van-form @submit="onSubmit">
        <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"
          />
        </van-cell-group>
        <div v-if="formData.length" style="margin: 16px">
          <van-button v-if="model === 'edit'" round block type="primary">
            提交
          </van-button>
          <van-button v-else round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </van-config-provider>
  </div>
  <div
    style="text-align: center; color: #545454; font-size: 0.85rem; padding-bottom: 1rem"
  >
    提交即授权该表单收集你的填写信息
  </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>
</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, getFormSettingAPI } from "@/api/form.js";
import { addFormDataAPI } from "@/api/data.js";
import { showSuccessToast, showFailToast } from "vant";
import { wxInfo, getUrlParams } from "@/utils/tools";
import { styleColor } from "@/constant.js";

// 获取表单设置
const store = mainStore();
const { formSetting } = 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 PHeader_cover = ref("");
const PHeader_title = ref("");
const mockData = ref([]);
const formData = ref([]);
const postData = ref({});

// 编辑模式不能提交操作
const model = $route.query.model;

// 格式化表单数据结构
const formatData = (data) => {
  const arr = [];
  data.forEach((field) => {
    // 生成组件属性
    const component_props = {
      name: field.component_code,
    };
    if (field.component_type === "h5edit") {
      // 编辑组件
      field.property_list.forEach((prop) => {
        const key = prop["property_code"];
        const obj = {
          [key]:
            prop["setting_value"].length > 1
              ? prop["setting_value"]
              : prop["setting_value"][0],
        };
        Object.assign(component_props, obj);
      });
    } else {
      // 展示组件
      field.property_list.forEach((prop) => {
        const key = prop["property_code"];
        const obj = {
          [key]: prop["setting_value"],
        };
        Object.assign(component_props, obj);
      });
    }
    // 绑定组件名称标识
    const temp = {
      key: field.field_name,
      value: component_props.default ? component_props.default : "",
      component: field.component_code,
      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([]);
// 动态绑定ref数据
const setRefMap = (el, item) => {
  if (el) {
    if (item.component_props.name === "area_picker") {
      area_picker.value.push(el);
    }
    if (item.component_props.name === "image_uploader") {
      image_uploader.value.push(el);
    }
    if (item.component_props.name === "file_uploader") {
      file_uploader.value.push(el);
    }
    if (item.component_props.name === "sign") {
      sign.value.push(el);
    }
    if (item.component_props.name === "rate_picker") {
      rate_picker.value.push(el);
    }
  }
};

const notice_text = ref("");
const show = ref(false);
const qr_url = ref("");

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[0];
  useTitle(form_data.name);
  // 重构数据结构
  let page_header = {};
  let page_form = [];
  form_data.field_list.forEach((element) => {
    if (element.component_code === "page_header") {
      // 页眉组件
      const list = element.property_list;
      list.forEach((ele) => {
        page_header[ele["property_code"]] =
          ele.setting_value.length > 1 ? ele.setting_value : ele.setting_value[0];
      });
    } else {
      page_form.push(element);
    }
  });
  // TODO: 后期需要适配多种图片展示方式，展示只显示单张图片模式
  /** 页眉属性
   * @param label 表单标题
   * @param banner_type 页眉类型：["文字", "单张图", "轮播图"]
   * @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,
    };
  }
  formData.value = formatData(page_form);
  // mockData.value = [
  //   {
  //     key: "",
  //     value: "",
  //     component: "",
  //     component_props: {
  //       name: "multi_rule",
  //       label: "同意活动规则之后才可提交",
  //       required: "1",
  //       count: "2",
  //     },
  //   },
  // ];
  // 生成自定义组件
  // 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);
  }
});

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

// 检查数据收集设置
const checkUserSubscribe = async () => {
  const code = getUrlParams(location.href) ? getUrlParams(location.href).code : '';
  const { data } = await getFormSettingAPI({ form_code: code });
  const form_setting = {};
  if (data.length) {
    data[0].property_list.forEach((prop) => {
      const key = prop["property_code"];
      const obj = {
        [key]:
          prop["setting_value"].length > 1
            ? prop["setting_value"]
            : prop["setting_value"][0],
      };
      Object.assign(form_setting, obj, data[0]['extend']);
    });
  }
  // 判断是否需要关注公众号, 弹出二维码识别
  if (form_setting.wxzq_must_follow && form_setting.x_field_weixin_subscribe) {
    // 标记用户已关注
    localStorage.setItem('weixin_subscribe', 1);
    show.value = false;
  }
}

// 操作绑定自定义字段回调
const onActive = (item) => {
  if (item.key === "area_picker") {
    postData.value[item.filed_name] = item.value;
  }
  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 === "rate") {
    postData.value = _.assign(postData.value, { [item.key]: item.value });
  }
};

// 检验没有绑定name的输入项
const validOther = () => {
  let valid = {
    status: true,
    key: "",
  };
  if (area_picker.value) {
    // 省市区地址
    area_picker.value.forEach((item, index) => {
      if (!area_picker.value[index].validAreaPicker()) {
        valid = {
          status: area_picker.value[index].validAreaPicker(),
          key: "area_picker",
        };
        return false;
      }
    });
  }
  if (image_uploader.value) {
    // 图片上传
    image_uploader.value.forEach((item, index) => {
      if (!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()) {
        valid = {
          status: file_uploader.value[index].validFileUploader(),
          key: "file_uploader",
        };
        return false;
      }
    });
  }
  if (sign.value) {
    // 电子签名
    sign.value.forEach((item, index) => {
      if (!sign.value[index].validImageUploader()) {
        valid = {
          status: sign.value[index].validImageUploader(),
          key: "sign",
        };
        return false;
      }
    });
  }
  if (rate_picker.value) {
    // 评分组件
    rate_picker.value.forEach((item, index) => {
      if (!rate_picker.value[index].validImageUploader()) {
        valid = {
          status: rate_picker.value[index].validImageUploader(),
          key: "rate_picker",
        };
        return false;
      }
    });
  }
  return valid;
};

const onSubmit = async (values) => {
  // 合并自定义字段到提交表单字段
  postData.value = _.assign(postData.value, values);
  // 检查非表单输入项
  if (validOther().status) {
    // 通过验证
    const result = await addFormDataAPI({
      form_code: $route.query.code,
      data: postData.value,
    });
    if (result.code) {
      showSuccessToast("提交成功");
      $router.push({
        path: "/success",
      });
    }
  } else {
    console.warn(validOther().key + "不通过验证");
    // // 图片上传控件报错提示
    // if (validOther().key === "image_uploader") {
    //   showFailToast("图片上传为空");
    // }
    // // 文件上传控件报错提示
    // if (validOther().key === "file_uploader") {
    //   showFailToast("文件上传为空");
    // }
  }
};
</script>

<style lang="less" scoped>
.table-title {
  padding: 1rem;
  font-size: 1.15rem;
  text-align: center;
}
.table-desc {
  padding: 0rem 1rem;
  color: #666;
  font-size: 0.9rem;
}
.table-box {
  margin: 1rem;
  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;
}
</style>