<template>
  <!-- 该页面为填写信息的组件 -->
  <!-- 只读文件 -->
  <readOnlyInfo v-if="isDisable" ref="applyInfoRef" applyName="fuioupay" />

  <view v-if="!isDisable">
    <uni-collapse ref="collapse">
      <uni-collapse-item title="基础信息" class="coll-title" :open="true">
        <view class="content">
          <JeePayForm text="选择商户类型">
            <uni-data-checkbox
              v-model="applyDetailInfo.merchantType"
              :localdata="merchantTypeList"
              @change="mchTypeInfo"
            ></uni-data-checkbox>
          </JeePayForm>

          <JeePayForm text="是否开通微信">
            <uni-data-checkbox
              v-model="applyDetailInfo.wxFlag"
              :localdata="whetherList"
            ></uni-data-checkbox>
          </JeePayForm>

          <JeePayForm text="是否开通支付宝">
            <uni-data-checkbox
              v-model="applyDetailInfo.aliFlag"
              :localdata="whetherList"
            ></uni-data-checkbox>
          </JeePayForm>

          <JeePayForm text="选择证件类型">
            <radio-group
              class="radio-group"
              @change="publicSelect($event, 'licenseType')"
            >
              <label
                class="radio"
                v-for="(item, index) in licenseList"
                :key="index"
                ><radio
                  :value="item.value"
                  :checked="applyDetailInfo.licenseType == item.value"
                />{{ item.name }}</label
              >
            </radio-group>
          </JeePayForm>

          <JeePayForm
            text="营业执照图片"
            v-if="['0', '1', 'B'].includes(applyDetailInfo.licenseType)"
          >
            <JeepayUpLoad
              ocrFlag="license"
              :imgUrl="applyDetailInfo.licenseImg"
              @uploadSuccess="uploadSuccess($event, 'licenseImg')"
              @clear="clear('licenseImg')"
            />
          </JeePayForm>

          <JeePayForm
            text="商户名称全称"
            v-model:value="applyDetailInfo.mchFullName"
            tipText="小微商户,请命名为个体户xxx"
          />

          <JeePayForm
            :text="
              applyDetailInfo.licenseType == 'A' ? '身份证号码' : '营业执照号'
            "
            v-model:value="applyDetailInfo.licenseNo"
            tipText="请输入编号"
          />

          <JeePayForm
            v-if="['0', '1', 'B'].includes(applyDetailInfo.licenseType)"
            text="营业执照注册地址"
            v-model:value="applyDetailInfo.licRegisAddr"
          />

          <JeePayForm text="证件有效期开始时间">
            <termOfValidity
              :defaultDate="applyDetailInfo.licenseEffectBegin"
              @publicSelect="publicSelect($event, 'licenseEffectBegin')"
              :isEnd="false"
            />
          </JeePayForm>

          <JeePayForm text="证件有效期截止">
            <termOfValidity
              :defaultDate="applyDetailInfo.licenseEffectEnd"
              @publicSelect="publicSelect($event, 'licenseEffectEnd')"
            />
          </JeePayForm>

          <JeePayForm text="法人身份证人像面照片">
            <JeepayUpLoad
              ocrFlag="idCard"
              :imgUrl="applyDetailInfo.idcard1Img"
              @uploadSuccess="uploadSuccess($event, 'idcard1Img')"
              @clear="clear('idcard1Img')"
            />
          </JeePayForm>

          <JeePayForm
            text="法人身份证姓名"
            v-model:value="applyDetailInfo.idcardName"
          />

          <JeePayForm
            text="法人身份证号"
            v-model:value="applyDetailInfo.idcardNo"
          />

          <JeePayForm text="法人身份证国徽面照片">
            <JeepayUpLoad
              ocrFlag="idCard"
              :imgUrl="applyDetailInfo.idcard2Img"
              @uploadSuccess="uploadSuccess($event, 'idcard2Img')"
              @clear="clear('idcard2Img')"
            />
          </JeePayForm>

          <JeePayForm text="法人身份证起始有效期">
            <termOfValidity
              :defaultDate="applyDetailInfo.idcardEffectBegin"
              @publicSelect="publicSelect($event, 'idcardEffectBegin')"
              :isEnd="false"
            />
          </JeePayForm>

          <JeePayForm text="法人身份证结束有效期">
            <termOfValidity
              :defaultDate="applyDetailInfo.idcardEffectEnd"
              @publicSelect="publicSelect($event, 'idcardEffectEnd')"
              @endHandle="endHandle"
            />
          </JeePayForm>
        </view>
      </uni-collapse-item>
      <uni-collapse-item title="经营信息" class="coll-title">
        <view class="content">
          <JeePayForm text="选择行业MCC">
            <jeeDataPicker
              :code="codeBack.mccCode"
              :localdata="mccFuiouList"
              @change="publicSelect($event, 'mccCode')"
              paramType="last"
            />
          </JeePayForm>

          <JeePayForm
            text="商户简称"
            v-model:value="applyDetailInfo.mchShortName"
            tipText="建议和商户门头名称保持一致"
          />
          <JeePayForm
            text="客服电话"
            v-model:value="applyDetailInfo.servicePhone"
          />

          <JeePayForm text="商户经营地区县代码">
            <jeeDataPicker
              :code="codeBack.areaCode"
              :localdata="address"
              @change="publicSelect($event, 'areaCode')"
              paramType="arr"
            />
          </JeePayForm>

          <JeePayForm
            text="商户详细地址"
            v-model:value="applyDetailInfo.address"
          />

          <JeePayForm text="门头照">
            <JeepayUpLoad
              :imgUrl="applyDetailInfo.storeOuterImg"
              @uploadSuccess="uploadSuccess($event, 'storeOuterImg')"
              @clear="clear('storeOuterImg')"
            />
          </JeePayForm>

          <JeePayForm text="店内环境照">
            <JeepayUpLoad
              :imgUrl="applyDetailInfo.storeInnerImg"
              @uploadSuccess="uploadSuccess($event, 'storeInnerImg')"
              @clear="clear('storeInnerImg')"
            />
          </JeePayForm>

          <JeePayForm
            text="商户联系人姓名"
            v-model:value="applyDetailInfo.contactName"
          />
          <JeePayForm
            text="商户联系人身份证号"
            v-model:value="applyDetailInfo.contactCertNo"
          />
          <JeePayForm
            text="商户联系人电话"
            v-model:value="applyDetailInfo.contactPhone"
          />
          <JeePayForm
            text="商户联系人邮箱"
            v-model:value="applyDetailInfo.contactEmail"
          />
        </view>
      </uni-collapse-item>
      <uni-collapse-item title="结算账户" class="coll-title">
        <view class="content">
          <JeePayForm text="账户类型">
            <uni-data-checkbox
              v-model="applyDetailInfo.settAccountType"
              :localdata="settlementTypeList"
            ></uni-data-checkbox>
          </JeePayForm>

          <JeePayForm
            text="结算银行卡照片"
            v-if="applyDetailInfo.settAccountType == 'C'"
          >
            <JeepayUpLoad
              ocrFlag="bankCard"
              :imgUrl="applyDetailInfo.settAccountLicenseImg"
              @uploadSuccess="uploadSuccess($event, 'settAccountLicenseImg')"
              @clear="clear('settAccountLicenseImg')"
            />
          </JeePayForm>

          <JeePayForm
            text="开户许可证照片"
            v-if="
              applyDetailInfo.settAccountType == 'B' ||
              applyDetailInfo.licenseType == '0' ||
              applyDetailInfo.licenseType == '1'
            "
          >
            <JeepayUpLoad
              :imgUrl="applyDetailInfo.companyAccountLicenseImg"
              @uploadSuccess="uploadSuccess($event, 'companyAccountLicenseImg')"
              @clear="clear('companyAccountLicenseImg')"
            />
          </JeePayForm>

          <JeePayForm
            text="开户名称"
            v-model:value="applyDetailInfo.settAccountName"
          />
          <JeePayForm
            text="银行账号"
            v-model:value="applyDetailInfo.settAccountNo"
          />

          <JeePayForm text="开户行">
            <jeeDataPicker
              :code="codeBack.settAccountBankName"
              :localdata="bankFuiou"
              @change="publicSelect($event, 'settAccountBankName')"
              paramType="oneLevel"
            />
          </JeePayForm>

          <JeePayForm
            text="联行号"
            v-model:value="applyDetailInfo.interBankNo"
          />
          <JeePayForm
            text="开户支行名称"
            v-model:value="applyDetailInfo.settAccountBankBranchName"
          />

          <JeePayForm text="法人入账标识">
            <uni-data-checkbox
              v-model="applyDetailInfo.acntArtifFlag"
              :localdata="acntArtifFlagList"
            ></uni-data-checkbox>
          </JeePayForm>
          <template v-if="applyDetailInfo.acntArtifFlag == 0">
            <JeePayForm text="入账账户身份证人像面照片">
              <JeepayUpLoad
                :imgUrl="applyDetailInfo.settAccountIdcard1Img"
                @uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')"
                @clear="clear('settAccountIdcard1Img')"
              />
            </JeePayForm>

            <JeePayForm text="入账账户身份证国徽面照片">
              <JeepayUpLoad
                :imgUrl="applyDetailInfo.settAccountIdcard2Img"
                @uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')"
                @clear="clear('settAccountIdcard2Img')"
                ocrFlag="idCard"
              />
            </JeePayForm>

            <JeePayForm text="入账非法人证明照片">
              <JeepayUpLoad
                :imgUrl="applyDetailInfo.acntArtifImg"
                @uploadSuccess="uploadSuccess($event, 'acntArtifImg')"
                @clear="clear('acntArtifImg')"
              />
            </JeePayForm>
          </template>

          <JeePayForm
            text="入账证件号"
            v-model:value="applyDetailInfo.acntCertifId"
            :start="false"
          />
          <JeePayForm text="入账证件到期日" :start="false">
            <termOfValidity
              :defaultDate="applyDetailInfo.acntCertifExpireDt"
              @publicSelect="publicSelect($event, 'acntCertifExpireDt')"
            />
          </JeePayForm>

          <JeePayForm text="清算类型">
            <uni-data-checkbox
              v-model="applyDetailInfo.settleTp"
              :localdata="settleTpList"
            ></uni-data-checkbox>
          </JeePayForm>

          <JeePayForm
            text="选择清算类型扣率"
            v-if="
              applyDetailInfo.settleTp == 3 || applyDetailInfo.settleTp == 4
            "
          >
            <jeeDataPicker
              :code="codeBack.settleTpCd"
              :localdata="settleTpCdArr"
              @change="publicSelect($event, 'settleTpCd')"
              paramType="oneLevel"
              :mapText="{ text: 'rate', value: 'settleTpCd' }"
            />
          </JeePayForm>

          <JeePayForm
            text="清算时间"
            v-model:value="applyDetailInfo.settleTs"
            tipText="24小时制,如：上午8点输入：08"
            v-if="applyDetailInfo.settleTp == 4"
          />

          <!-- <view style="height: 800px">成高度</view> -->
        </view>
      </uni-collapse-item>

      <uni-collapse-item title="补充资料" class="coll-title">
        <view class="content">
          <JeePayForm
            text="组织机构代码证照片"
            v-if="applyDetailInfo.licenseType == '0'"
          >
            <JeepayUpLoad
              :imgUrl="applyDetailInfo.organizationImg"
              @uploadSuccess="uploadSuccess($event, 'organizationImg')"
              @clear="clear('organizationImg')"
            />
          </JeePayForm>

          <JeePayForm
            text="税务登记证照片"
            v-if="applyDetailInfo.licenseType == '0'"
          >
            <JeepayUpLoad
              :imgUrl="applyDetailInfo.taxRegistrationImg"
              @uploadSuccess="uploadSuccess($event, 'taxRegistrationImg')"
              @clear="clear('taxRegistrationImg')"
            />
          </JeePayForm>

          <JeePayForm
            text="手持证件照片"
            v-if="applyDetailInfo.licenseType == 'A'"
          >
            <JeepayUpLoad
              :imgUrl="applyDetailInfo.handCertificateImg"
              @uploadSuccess="uploadSuccess($event, 'handCertificateImg')"
              @clear="clear('handCertificateImg')"
            />
          </JeePayForm>

          <JeePayForm text="补充资料照片" :start="false">
            <JeepayUpLoad
              :imgUrl="applyDetailInfo.additionImg"
              @uploadSuccess="uploadSuccess($event, 'additionImg')"
              @clear="clear('additionImg')"
            />
          </JeePayForm>
        </view>
      </uni-collapse-item>

      <!-- 费率组件-->
      <defaultRate
        ref="defaultRateRef"
        isCheck="separate"
      />
    </uni-collapse>
  </view>
	
	<!-- 富有进价后操作 -->
	<fuiouEvent />
</template>

<script setup>
import { ref, reactive, inject } from "vue";
import address from "@/components/applyJson/addressFuiou.json"; // 地址
import mccFuiou from "@/components/applyJson/mccFuiou.json"; // 行业
import JeepayUpLoad from "@/components/JeepayUpLoad/JeepayUpLoad.vue"; // 图片上传
import defaultRate from "../../components/defaultRate.vue"; // 默认费率
import readOnlyInfo from "../../components/readOnlyInfo.vue"; // 只读文件
import tool from "@/util/tool.js"; // 工具类函数
import JeePayForm from "@/components/applyComponents/JeePayForm.vue"; // 通用左右结构布局
import termOfValidity from "@/components/applyComponents/termOfValidity.vue"; // 选择证件有效期
import jeeDataPicker from "@/components/applyComponents/dataPicker.vue"; // 通用级联选择
import bankFuiou from "@/components/applyJson/bankFuiou.json"; // 选择银行
import settleTpCdArr from "@/components/applyJson/settleTpCd.json"; // 选择清算折扣率
import { filterDcit } from "@/hooks/dict"; // 字典
import fuiouEvent from './fuiouEvent.vue' // 富有进件后的操作

const merchantTypeList = reactive(filterDcit(["A1", "A3", "A2"])); //商户类型
const whetherList = reactive(filterDcit(["C0", "C1"])); // 开通or不开通
const settlementTypeList = reactive(filterDcit(["B0", "B1"])); // 结算类型
const settleTpList = reactive(filterDcit(["D2", "D1", "D0", "D3"])); // 清算类型
const acntArtifFlagList = reactive(filterDcit(["K0", "K1"])); // 法人入账标识

const channelInfo = inject("channelInfo");

const emit = defineEmits(["paramsHandle", "applyHandle"]);

// 商户进件详细信息（JSON类型字符串）
const applyDetailInfo = reactive({
  licenseType: "A", // 证件类型
  settleTp: "1", // 结算类型默认1
});

// 状态分类: 0-未发起、 1-审核中、 2-进件成功、 3-驳回待修改、 4-待验证、 5-待签约
// 当状态为 1 2 4 5 时要开启只读模式，0 3 不开启
let isDisable = ref(false);
if (!["0", "3", "8"].includes(channelInfo.state)) isDisable.value = true;

// 上传图片成功  以及OCR识别信息回显
const uploadSuccess = (res, name) => {
  applyDetailInfo[name] = res.data;
  if (res.ocrInfo && Object.keys(res.ocrInfo).length < 1) return false;
  // OCR图片识别  idCard-身份证 idcard1Img，idcard2Img  license-营业执照 licenseImg
  if (name == "idcard1Img") {
    applyDetailInfo.idcardName = res.ocrInfo.idcardName; // 法人身份证姓名
    applyDetailInfo.idcardNo = res.ocrInfo.idcardNo; // 法人身份证号
  } else if (name == "idcard2Img") {
    applyDetailInfo.idcardEffectBegin = res.ocrInfo.idcardEffectBegin; // 有效期
    applyDetailInfo.idcardEffectEnd = res.ocrInfo.idcardEffectEnd; // 有效期end
  } else if (name == "licenseImg") {
    applyDetailInfo.licenseEffectBegin = res.ocrInfo.licenseEffectBegin; // 执照有效期
    applyDetailInfo.licenseEffectEnd = res.ocrInfo.licenseEffectEnd; // 有效期end
    applyDetailInfo.mchFullName = res.ocrInfo.mchFullName; // 全称
    applyDetailInfo.licenseNo = res.ocrInfo.licenseNo; // 编号
    applyDetailInfo.address = applyDetailInfo.licRegisAddr =
      res.ocrInfo.address;
  } else if (name == "settAccountLicenseImg") {
    applyDetailInfo.settAccountNo = res.ocrInfo.settAccountNo; // 银行卡号
  } else if (name == "settAccountIdcard2Img") {
    applyDetailInfo.acntCertifExpireDt = res.ocrInfo.idcardEffectEnd; // 持卡人有效期end
  }
};

// 清除图片  仅前端
const clear = (key) => (applyDetailInfo[key] = "");

let mccFuiouList = ref(); // 富有具体的行业类型

// 通用选择事件 回调函数
const publicSelect = (e, key) => {
  applyDetailInfo[key] = e.detail.value;
  // 根据不同的主体类型 走不同的json
  applyDetailInfo.merchantType == 3
    ? (mccFuiouList.value = mccFuiou.corporationList)
    : (mccFuiouList.value = mccFuiou.personalList);
  if (key == "merchantType") {
    mchTypeInfo(e.detail.value);
  }
};

// 证件类型，随主体类型变更
const licenseList = ref([]);
// 证件类型具体内容
const mchTypeInfo = (val) => {
  const value = typeof val == "object" ? val.detail.value : val;
  if (value == 1) {
    licenseList.value = [{ value: "A", name: "身份证" }];
    applyDetailInfo.licenseType = "A";
  } else if (value == 2) {
    licenseList.value = [{ value: "B", name: "营业执照" }];
  } else if (value == 3) {
    licenseList.value = [
      { value: "0", name: "营业执照" },
      { value: "1", name: "三证合一" },
    ];
  }
};

// 发起进件
const launchApply = (isTempData) => {
  // 拿费率组件的值
  applyDetailInfo.paywayFeeList = defaultRateRef.value.getList(isTempData)

  // 判断类型，对象类型是费率正常提交   Sting 是错误信息
  if (typeof applyDetailInfo.paywayFeeList === "string")
    return uni.showToast({
      title: applyDetailInfo.paywayFeeList,
      icon: "none",
    });

  emit("applyHandle", {
    name: "fuioupay",
    isTempData,
    applyDetailInfo,
    formCheck: [
      applyDetailInfo.settAccountType,
      applyDetailInfo.licenseType,
      applyDetailInfo.acntArtifFlag,
      applyDetailInfo.settleTp,
    ],
  });
};

let codeBack = reactive({}); // 用于级联选择器 文字回显

let applyInfoRef = ref(null); // 只读组件信息

// 合并信息方法, 智能读取，和信息回显，通过此方法合并
const assignObj = (obj) => {
  obj.merchantType == 3
    ? (mccFuiouList.value = mccFuiou.corporationList)
    : (mccFuiouList.value = mccFuiou.personalList);

  mchTypeInfo(obj.merchantType);
  // 开启只读模式
  if (isDisable.value) {
    // 证件码转文字
    let mchType = obj.merchantType;
    if (mchType == "A") {
      obj.licenseText = "身份证";
    } else if (mchType == "B") {
      obj.licenseText = "营业执照";
    } else if (mchType == "0") {
      obj.licenseText = "营业执照";
    } else if (mchType == "1") {
      obj.licenseText = "三证合一";
    }
    obj.mccText = tool.mccBack(obj.mccCode, mccFuiouList.value, "last"); // 行业码转文字
    obj.areaText = tool.addressBack(obj.areaCode, address); // 地址码转文字
    obj.settAccountText = obj.settAccountType == "C" ? "对私" : "对公"; // 账户类型
    obj.acntArtifText = obj.acntArtifFlag == "0" ? "非法人入账" : "法人入账";

    if (applyDetailInfo.settleTp == "1") {
      // 清算类型
      obj.acntArtifText = "自动结算（T1）";
    } else if (applyDetailInfo.settleTp == "2") {
      obj.acntArtifText = "手动结算";
    }

    applyInfoRef.value.getApplyInof(obj);
  }

  // 用于级联选择器 文字回显
  Object.assign(applyDetailInfo, obj);
  codeBack.mccCode = obj.mccCode;
  codeBack.areaCode = obj.areaCode;
  codeBack.settAccountBankName = obj.settAccountBankName;
  codeBack.settleTpCd = obj.settleTpCd; // 清算类型扣率
};

const defaultRateRef = ref(); // 费率组件

defineExpose({ launchApply, assignObj });
</script>

<style scoped lang="scss">
@import "../../static/information.scss";
</style>
