<template>
  <view class="page">
    <view class="box">
      <!-- 商户类型 渠道信息 进件信息 -->
      <!-- 微信小程序不能用动态组件！！！ -->
      <shengpay
        :ref="refHandle"
        @applyHandle="applyHandle"
        v-if="showRef('shengpay')"
      />
      <alipay
        :ref="refHandle"
        @applyHandle="applyHandle"
        v-if="showRef('alipay')"
      />
      <wxpay
        :ref="refHandle"
        @applyHandle="applyHandle"
        v-if="showRef('wxpay')"
      />
      <zftpay
        :ref="refHandle"
        @applyHandle="applyHandle"
        v-if="showRef('zftpay')"
      />
      <sftpay
        :ref="refHandle"
        @applyHandle="applyHandle"
        v-if="showRef('sftpay')"
      />
      <lklpay
        :ref="refHandle"
        @applyHandle="applyHandle"
        v-if="showRef('lklpay')"
      />
      <ysfpay
        :ref="refHandle"
        @applyHandle="applyHandle"
        v-if="showRef('ysfpay')"
      />
      <dgpay
        :ref="refHandle"
        @applyHandle="applyHandle"
        v-if="showRef('dgpay')"
      />
      <yspay
        :ref="refHandle"
        @applyHandle="applyHandle"
        v-if="showRef('yspay')"
      />
      <utmpay
        :ref="refHandle"
        @applyHandle="applyHandle"
        v-if="showRef('utmpay')"
      />
      <fuioupay
        :ref="refHandle"
        @applyHandle="applyHandle"
        v-if="showRef('fuioupay')"
      />
      <lklspay
        :ref="refHandle"
        @applyHandle="applyHandle"
        v-if="showRef('lklspay')"
      />

      <view class="notes" v-if="['0', '3', '8'].includes(channelInfo.state)">
        <image
          src="@/static/img/exclamation.svg"
          style="height: 22rpx; width: 22rpx"
        ></image>
        <text>请确保信息的真实性和准确性，否则将影响通道申请成功率</text>
      </view>

      <!-- 错误信息 -->
      <view class="result-fail" v-if="channelInfo.state == 3 && applyErrorInfo">
        <text style="width: 83%">驳回原因：{{ applyErrorInfo }} </text>
        <image src="@/static/img/passerror.svg"></image>
      </view>

      <view class="result-wait" v-if="channelInfo.state == 1">
        <text style="width: 83%">信息审核中：请耐心等待</text>
        <image src="@/static/img/passwait.svg"></image>
      </view>
      <!-- channelInfo.state -->
      <view class="result-success" v-if="channelInfo.state == 2">
        <text style="width: 83%">恭喜你：通道已开通</text>
        <image src="@/static/img/passok.svg"></image>
      </view>

      <!--  状态: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
			状态为 1,2,4,5 开启disable  (也就是状态不为 0 3) -->
      <template v-if="['0', '3', '8'].includes(channelInfo.state)">
        <view class="btn-area">
          <view @click.stop="read" class="read">智能读取</view>
          <view @click.stop="draft" style="margin-left: 30rpx" class="read">保存草稿</view>
        </view>

        <button @click.stop="submit(false)" class="submit">提交</button>
      </template>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, toRaw, provide, nextTick } from "vue";
import shengpay from "./channel/shengft/shengft.vue"; // 盛付通
import alipay from "./channel/zfbpay.vue"; // 支付宝官方
import wxpay from "./channel/wxpay.vue"; // 微信官方
import zftpay from "./channel/zftpay.vue"; // 支付宝直付通
import sftpay from "./channel/sftpay.vue"; // 微信收付通
import lklpay from "./channel/lklpay.vue"; // 拉卡拉
import ysfpay from "./channel/ysfpay.vue"; // 云闪付
import fuioupay from "./channel/fuiou/fuioupay.vue"; // 富友
import dgpay from "./channel/dgpay/dgpay.vue"; // 斗拱
import utmpay from "./channel/utmpay/utmpay.vue"; // 银联前置
import yspay from "./channel/yspay/yspay.vue"; // 银盛
import lklspay from "./channel/lklspay/lklspay.vue"; // lklsass

import { onLoad, onShow } from "@dcloudio/uni-app";
import {
  $mchApplymentsInfo,
  $mergeApplyDetailInfos,
  $mchApplyments,
  $updateApply,
} from "@/http/apiManager.js";
import { debounce } from "@/util/tool.js";
import rules from "./components/rules.js"; //引入表单校验规则
import graceChecker from "@/util/graceChecker.js"; //引入表单校验工具函数

// 进件渠道信息，包含 支付接口代码 名称 状态 进件ID
const channelInfo = reactive({});

const vdata = reactive({
  channelRef: "",
});

// 动态ref
const refHandle = (el) => {
  if (el) vdata.channelRef = el;
};

// 动态展示隐藏
const showRef = (code) => code === channelInfo.code;

onLoad((option) => {
  for (let key in option) {
    if (option[key] === "undefined") {
      option[key] = undefined;
      continue;
    }
    if (key == "codeUrl") {
      channelInfo.codeUrl = decodeURIComponent(option.codeUrl);
      continue;
    }
    channelInfo[key] = option[key];
  }
});

provide("channelInfo", channelInfo);

onMounted(() => {
  if (channelInfo.applyId) mchApplyInfoHandle(); // 调用查询进件信息函数，只有进件完之后才有该ID
});

// 查询进件信息
let mchApplyInfo = ref({}); // 进件信息
let applyErrorInfo = ref(false); // 错误信息
const mchApplyInfoHandle = () => {
  let originData = ""; // 进件资料回显 是否查询原始数据  状态1原始， 状态0不填加密数据
  if (["0", "3", "8"].includes(channelInfo.state)) originData = 1;

  $mchApplymentsInfo(channelInfo.applyId, originData).then(({ bizData }) => {
    // 错误信息
    if (bizData) {
      bizData.applyErrorInfo
        ? (applyErrorInfo.value = bizData.applyErrorInfo)
        : (applyErrorInfo.value = false);
      // 获取进件信息对象后，为子页码赋值
      assignment(JSON.parse(bizData.applyDetailInfo));
    }
  });
};

// 智能读取按钮
const read = () => {
  uni.showLoading({ title: "读取中", icon: "none" });
  $mergeApplyDetailInfos(channelInfo.mchNo)
    .then((res) => {
      uni.hideLoading();

      // 非空校验，然后剔除为空属性， 再将读取到的信息放到子组件进行合并
      if (res.bizData && Object.keys(res.bizData).length !== 0) {
        let obj = {};

        for (let item in res.bizData) {
          if (res.bizData[item]) obj[item] = res.bizData[item];
        }

        assignment(obj);

        uni.showToast({ title: "读取成功", icon: "none" });
      } else {
        uni.showToast({ title: "读取信息为空", icon: "none" });
      }
    })
    .catch((err) => {});
};

// 保存草稿  (接口一致，传参为true)
const draft = () => submit(true);

// 为子页面赋值，通过code值来判断为谁赋值
const assignment = (obj) => {
  vdata.channelRef.assignObj(obj);
};

// 发起按钮
const isLoad = ref(false);

let timer; // 定时器
const submit = (isTempData) => {
  if (timer) clearTimeout(timer);
  timer = setTimeout(() => {
    timer = null;
    vdata.channelRef.launchApply(isTempData);
  }, 500);
};

// 受益人前置校验函数
const ownerCheck = (index, val) => {
  let errText = "";
  switch (val) {
    case "idcard1Img":
      errText = `请上传第${index + 1}项受益人身份证人像面照`;
      break;
      1;
    case "idcardNo":
      errText = `请输入第${index + 1}项受益人身份证号`;
      break;
    case "idcardName":
      errText = `请输入第${index + 1}项受益人身份证名称`;
      break;
    case "idcardAddress":
      errText = `请输入第${index + 1}项受益人身份证地址`;
      break;
    case "idcard2Img":
      errText = `请上传第${index + 1}项受益人身份证国徽面照`;
      break;
    case "idcardEffectEnd":
      errText = `请选择第${index + 1}项受益人身份证起始有效期`;
      break;
    case "idcardEffectBegin":
      errText = `请选择第${index + 1}项受益人身份证结束有效期`;
  }
  uni.showToast({ title: errText, icon: "none" });
};

// 最终版，发起进件
const applyHandle = (objData, ownerFlag = false) => {
  const { name, isTempData, applyDetailInfo } = objData;

  // 从reactive中拿回被代理的对象 (商户进件详细消息)
  const rowApplyDetailInfo = toRaw(applyDetailInfo);

  // 每次进来都要重置一次进件规则 需要深拷贝，因为下方会动态添加很多东西
  let check = JSON.parse(JSON.stringify(rules[name + "Rule"]));

  // 添加额外的进件规则
  objData.formCheck ? rules[name + "Fun"](check, ...objData.formCheck) : null;

  let checkRes = graceChecker.check(rowApplyDetailInfo, check);
  if (!checkRes && !isTempData)
    return uni.showToast({ title: graceChecker.error, icon: "none" });

  // 受益人校验，比较特殊，放在最后手动校验
  if (
    ownerFlag &&
    !isTempData &&
    applyDetailInfo.companyBeneficiaryList.length > 0
  ) {
    let ownerList = applyDetailInfo.companyBeneficiaryList;

    for (let ownerIndex = 0; ownerIndex < ownerList.length; ownerIndex++) {
      for (let key in ownerList[ownerIndex]) {
        if (!ownerList[ownerIndex][key]) return ownerCheck(ownerIndex, key);
      }
    }
  }

  // 传参对象
  let params = {
    ifCode: channelInfo.code, // 支付接口代码
    productType: applyDetailInfo.productType, //产品类型
    address: applyDetailInfo.address,
    contactName: applyDetailInfo.contactName,
    mchFullName: applyDetailInfo.mchFullName || applyDetailInfo.mchShortName,
    areaCode: applyDetailInfo.areaCode ? applyDetailInfo.areaCode[2] : "", // 只要区县码即可
    contactPhone: applyDetailInfo.contactPhone,
    applyDetailInfo: JSON.stringify(rowApplyDetailInfo),
    mchNo: channelInfo.mchNo,
  };
  let applyId;
  channelInfo.applyId ? (applyId = channelInfo.applyId) : (applyId = undefined);

  if (applyId) params.applyId = applyId; // 有就传

  if (isTempData && channelInfo.applyId) {
    uni.showLoading({ title: "保存中...", icon: "none" }); // 开启loading
    params.isTempData = true;
    // 保存草稿调用update方法进行提交
    $updateApply(params.applyId, params)
      .then((res) => {
        uni.hideLoading();
        uni.showToast({ title: "保存成功", icon: "none" });
        if (channelInfo.applyId) {
          uni.navigateBack();
        } else {
          uni.navigateBack({ delta: 2 });
        }
      })
      .catch((err) => {});
    return;
  }

  if (isTempData) params.isTempData = true;
  uni.showLoading({
    title: isTempData ? "保存中..." : "发送中...",
    icon: "none",
  });

  // 存在applyid情况下的发起进件也走更新接口
  if (channelInfo.applyId) {
    $updateApply(params.applyId, params)
      .then((res) => {
        uni.hideLoading();
        uni.showToast({ title: "发送成功", icon: "none" });
        if (channelInfo.applyId) {
          uni.navigateBack();
        } else {
          uni.navigateBack({ delta: 2 });
        }
      })
      .catch((err) => {});
    return;
  }

  // 发起进件函数
  $mchApplyments(params)
    .then((res) => {
      uni.hideLoading();
      uni.showToast({
        title: isTempData ? "保存成功" : "发送成功",
        icon: "none",
      });
      if (channelInfo.applyId) {
        uni.navigateBack();
      } else {
        uni.navigateBack({ delta: 2 });
      }
    })
    .catch((err) => {});
};
</script>

<style lang="scss" scoped>
@import "./static/information.scss";
.page {
  padding: 30rpx;
  box-sizing: border-box;
  padding-bottom: 150rpx;
  background-color: #f5f6fd;
  min-height: calc(100vh - 0px);
}
.box {
  border-radius: 10px;
  overflow: hidden;
  padding-bottom: 10px;
  background-color: #fff;
}
.mch-title {
  font-weight: bold;
  font-size: 28rpx;
  color: #3981ff;
}
.mch-type {
  display: flex;
  align-items: center;
  image {
    margin-left: 10px;
    height: 20rpx;
    width: 20rpx;
  }
}

.btn-area {
  position: relative;
  z-index: 20;
  box-sizing: border-box;
  width: 100%;
  background: #fff;
  // background: linear-gradient(transparent,#fff 85%);
  padding: 10rpx 30rpx 30rpx;
  display: flex;
  position: fixed;
  bottom: 1rpx;
  left: 0;
  justify-content: space-between;

  .read {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    height: 90rpx;
    border: 1rpx solid #c5c7cc;
    border-radius: 10rpx;
    background: #fff;
    font-weight: 500;
    font-size: 30rpx;
    letter-spacing: 0.07em;
    color: #808080;
  }
}
.submit {
  display: flex;
  justify-content: center;
  margin: 0 auto;
	margin-bottom: 150rpx;
  width: 380rpx;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 10rpx;
  background: #3981ff;
  font-weight: 500;
  font-size: 30rpx;
  color: #fff;
}
</style>
