<template>
  <!-- 只读文件 -->
  <readOnlyInfo
    v-if="isDisable"
    ref="applyInfoRef"
    applyName="lklspay"
  ></readOnlyInfo>
  <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"
            ></uni-data-checkbox>
          </JeePayForm>
          <!-- 个人不需要营业执照 -->
          <template v-if="applyDetailInfo.merchantType != 1">
            <JeePayForm
              text="营业执照名称"
              v-model:value="applyDetailInfo.mchFullName"
            />
            <JeePayForm text="营业执照照片">
              <JeepayUpLoad
                ocrFlag="license"
                :imgUrl="applyDetailInfo.licenseImg"
                @uploadSuccess="uploadSuccess($event, 'licenseImg')"
                @clear="clear('licenseImg')"
              />
            </JeePayForm>

            <JeePayForm
              text="营业执照编号"
              v-model:value="applyDetailInfo.licenseNo"
            />
            <JeePayForm text="营业执照起始有效期">
              <termOfValidity
                :defaultDate="applyDetailInfo.licenseEffectBegin"
                @publicSelect="publicSelect($event, 'licenseEffectBegin')"
                :isEnd="false"
              />
            </JeePayForm>

            <JeePayForm text="营业执照有效期截止">
              <termOfValidity
                :defaultDate="applyDetailInfo.licenseEffectEnd"
                @publicSelect="publicSelect($event, 'licenseEffectEnd')"
                @endHandle="endHandle"
              />
            </JeePayForm>
          </template>
          <JeePayForm
            text="商户注册名称"
            v-model:value="applyDetailInfo.merRegName"
          />
          <JeePayForm
            text="商户经营名称"
            v-model:value="applyDetailInfo.mchShortName"
          />
          <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
        :show-animation="false"
        title="经营信息"
        class="coll-title"
      >
        <view class="content">
          <JeePayForm text="选择行业MCC">
            <jeeDataPicker
              :code="codeBack.mccCode"
              :localdata="mcc"
              @change="publicSelect($event, 'mccCode')"
              paramType="splicing"
            />
          </JeePayForm>

          <JeePayForm
            text="商户联系人姓名"
            v-model:value="applyDetailInfo.contactName"
          />
          <JeePayForm
            text="商户联系人手机号"
            v-model:value="applyDetailInfo.contactPhone"
          />
          <JeePayForm
            text="商户联系人邮箱"
            v-model:value="applyDetailInfo.contactEmail"
          />
          <JeePayForm text="商户经营省市县">
            <jeeDataPicker
              :code="codeBack.mchAreaCode"
              :localdata="address"
              @change="publicSelect($event, 'mchAreaCode')"
              paramType="arr"
            />
          </JeePayForm>
          <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="收银台照">
            <JeepayUpLoad
              :imgUrl="applyDetailInfo.storeCashierImg"
              @uploadSuccess="uploadSuccess($event, 'storeCashierImg')"
              @clear="clear('storeCashierImg')"
            />
          </JeePayForm>
          <JeePayForm text="选择经纬度" tipHolder="点击选择经纬度">
            <text @tap="lnglatAmap">{{
              applyDetailInfo.lnglat || '点击选择经纬度'
            }}</text>
          </JeePayForm>
        </view>
      </uni-collapse-item>
      <uni-collapse-item
        :show-animation="false"
        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-model:value="applyDetailInfo.settAccountName"
          />
          <JeePayForm
            text="银行账号"
            v-model:value="applyDetailInfo.settAccountNo"
          />
          <JeePayForm text="银行查询地区">
            <uni-data-checkbox
              v-model="applyDetailInfo.selectAreaCode"
              :localdata="selectAreaCodeList"
            ></uni-data-checkbox>
          </JeePayForm>
          <JeePayForm text="支行地址">
            <jeeDataPicker
              :localdata="address"
              @change="changeSubBranch($event)"
              paramType="arr"
            />
          </JeePayForm>
          <JeePayForm v-if="bankInfoList.length > 0" text="支行">
            <text @tap="bank.open()">{{
              applyDetailInfo.settAccountBankName || '选择银行'
            }}</text>
          </JeePayForm>
          <JeePayForm
            text="银行名称"
            v-model:value="applyDetailInfo.settAccountBankName"
          >
          </JeePayForm>
          <JeePayForm
            text="联行行号"
            v-model:value="applyDetailInfo.openningBankCode"
          >
          </JeePayForm>
          <JeePayForm
            text="清算行号"
            v-model:value="applyDetailInfo.clearingBankCode"
          >
          </JeePayForm>
        </view>
      </uni-collapse-item>
      <uni-collapse-item
        :show-animation="false"
        title="结算人信息"
        class="coll-title"
      >
        <JeePayForm text="结算人是否为法人">
          <uni-data-checkbox
            v-model="applyDetailInfo.isLegalInfo"
            :localdata="isLegalInfoList"
          ></uni-data-checkbox>
        </JeePayForm>
        <template v-if="applyDetailInfo.isLegalInfo == '0'">
          <JeePayForm text="结算人身份证人像面照">
            <JeepayUpLoad
              ocrFlag="idCard"
              :imgUrl="applyDetailInfo.settAccountIdcard1Img"
              @uploadSuccess="uploadSuccess($event, 'settAccountIdcard1Img')"
              @clear="clear('settAccountIdcard1Img')"
            />
          </JeePayForm>
          <JeePayForm text="结算人身份证国徽面照">
            <JeepayUpLoad
              ocrFlag="idCard"
              :imgUrl="applyDetailInfo.settAccountIdcard2Img"
              @uploadSuccess="uploadSuccess($event, 'settAccountIdcard2Img')"
              @clear="clear('settAccountIdcard2Img')"
            />
          </JeePayForm>
          <JeePayForm
            text="结算人身份证号"
            v-model:value="applyDetailInfo.settAccountIdcardNo"
          >
          </JeePayForm>
          <JeePayForm text="结算人身份证起始有效期">
            <termOfValidity
              :defaultDate="applyDetailInfo.settAccountIdcardEffectBegin"
              @publicSelect="
                publicSelect($event, 'settAccountIdcardEffectBegin')
              "
              :isEnd="false"
            />
          </JeePayForm>

          <JeePayForm text="法人身份证结束有效期">
            <termOfValidity
              :defaultDate="applyDetailInfo.settAccountIdcardEffectEnd"
              @publicSelect="publicSelect($event, 'settAccountIdcardEffectEnd')"
              @endHandle="endHandle"
            />
          </JeePayForm>
        </template>
        <JeePayForm text="其他材料">
          <JeepayUpLoad
            :imgUrl="applyDetailInfo.otherFile"
            @uploadSuccess="uploadSuccess($event, 'otherFile')"
            @clear="clear('otherFile')"
          />
        </JeePayForm>
      </uni-collapse-item>

      <!-- 盛付通费率组件 -->
      <defaultRate ref="defaultRateRef" />
    </uni-collapse>
    <SelectBank
      ref="bank"
      :list="bankInfoList"
      key="id"
      value="branchBankName"
      @choiceValue="updataBank"
    ></SelectBank>
  </view>
</template>
<script setup>
import { reactive, ref, inject } from 'vue'
import readOnlyInfo from '../../components/readOnlyInfo.vue' // 只读文件
import JeePayForm from '@/components/applyComponents/JeePayForm.vue' // 通用左右结构布局
import JeepayUpLoad from '@/components/JeepayUpLoad/JeepayUpLoad.vue' // 图片上传
import termOfValidity from '@/components/applyComponents/termOfValidity.vue' // 选择证件有效期
import jeeDataPicker from '@/components/applyComponents/dataPicker.vue' // 通用级联选择
import tool from '@/util/tool.js' // 工具类函数
import address from '@/components/applyJson/lklAdress.json' // 地址
import mcc from '@/components/applyJson/mccLkl.json' // 行业
import { $lklGetBankList } from '@/http/apiManager.js' //获取银行列表
import SelectBank from '../../components/SelectBank.vue'
import { filterDcit } from '@/hooks/dict' // 字典
const settlementTypeList = reactive(filterDcit(['B0', 'B1'])) // 结算类型
const merchantTypeList = reactive(filterDcit(['A5', 'A2'])) // 商户
const selectAreaCodeList = reactive(filterDcit(['N0', 'N1'])) // 银行卡查询地区
const isLegalInfoList = reactive(filterDcit(['C2', 'C3'])) // 银行卡查询地区
import defaultRate from '../../components/defaultRate.vue' // 默认费率
const emit = defineEmits(['applyHandle'])
const bankInfoList = ref([])
const bank = ref()
const defaultRateRef = ref() // 获取费率组件
const applyDetailInfo = reactive({
  merchantType: 1,
  selectAreaCode: '1',
  isLegalInfo: '1',
})
const channelInfo = inject('channelInfo')
let isDisable = ref(false)
if (!['0', '3', '8'].includes(channelInfo.state)) isDisable.value = true
// 行业类型，地理位置回显
let codeBack = reactive({
  areaCode: '', // 商户地理位置回显
  mccCode: '',
})
// 只读组件信息
let applyInfoRef = ref(null)
// 通用选择函数
const publicSelect = (e, key) => {
  applyDetailInfo[key] = e.detail.value
  if (key == 'merBusiContent') {
    // 经营内容文字回显
    applyDetailInfo.merBusiContent = e.detail.value[0].value
    merBusiText.value = merBusiArray.find(
      (item) => item.value == e.detail.value[0].value
    ).text
  } else if (key == 'settlePeriod') {
    // 结算周期文字回显
    applyDetailInfo.settlePeriod = e.detail.value[0].value
    settleText.value = settleArray.find(
      (item) => item.value == e.detail.value[0].value
    ).text
  } else if (key == 'posType') {
    // POS类型文字回显
    applyDetailInfo.posType = e.detail.value[0].value
    posText.value = posArray.find(
      (item) => item.value == e.detail.value[0].value
    ).text
  }
}
// 上传图片成功
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 = res.ocrInfo.address
  }
}
// 选择经纬度
const lnglatAmap = () => {
  console.log(1)
  uni.chooseLocation({
    success: function (res) {
      // console.log("位置名称：" + res.name);
      // console.log("详细地址：" + res.address);
      // console.log("纬度：" + res.latitude);
      // console.log("经度：" + res.longitude);
      applyDetailInfo.lnglat = `${res.longitude},${res.latitude}`
      applyDetailInfo.longtude = res.longitude
      applyDetailInfo.latitude = res.latitude
      applyDetailInfo.address = res.address
    },
  })
}
// 清除图片  仅前端
const clear = (name, url) => (applyDetailInfo[name] = '')
// 选择支行的回调
const changeSubBranch = (val) => {
  const areaCode = val.detail.value[applyDetailInfo.selectAreaCode]
  applyDetailInfo.settAccountBankBranchAreaCode = val.detail.value
  $lklGetBankList(areaCode).then((res) => {
    const { bizData } = res
    bankInfoList.value = JSON.parse(bizData)
  })
}
// 选择银行回调
const updataBank = (val) => {
  // branchBankName 联行 行号
  // clearNo 清算行号
  applyDetailInfo.bankInfo = val.id
  applyDetailInfo.settAccountBankName = val.branchBankName
  applyDetailInfo.openningBankCode = val.branchBankNo
  applyDetailInfo.clearingBankCode = val.clearNo
  console.log(val, '银行回调')
}
const launchApply = (isTempData) => {
  // 有费率的进件渠道，要在发起进件之前，获取所选择的费率信息
  applyDetailInfo.paywayFeeList = defaultRateRef.value.getList(isTempData)
  applyDetailInfo.mchFullName = applyDetailInfo.mchFullName
    ? applyDetailInfo.mchFullName
    : applyDetailInfo.mchShortName

  // return;
  emit('applyHandle', {
    name: 'lklspay',
    isTempData,
    applyDetailInfo,
    formCheck: [applyDetailInfo.merchantType, applyDetailInfo.isLegalInfo],
  })
}

// 合并信息方法, 职能读取，和信息回显，通过此方法合并
// const assignObj = (obj) => {
//   Object.assign(applyDetailInfo, obj);
// };
// 合并信息方法, 职能读取，和信息回显，通过此方法合并
const assignObj = (obj) => {
  Object.assign(applyDetailInfo, obj)

  // 行业类型，地理位置回显
  codeBack.bankCode = obj.settAccountBankBranchAreaCode
    ? obj.settAccountBankBranchAreaCode[2]
    : null
  codeBack.branchCode = obj.bankBranchAreaCode
    ? obj.bankBranchAreaCode[1]
    : null

  // 以下用于只读信息页
  obj.settAccountBankBranchAreaText = tool.addressBack(
    obj.settAccountBankBranchAreaCode,
    address
  )
  obj.bankBranchAreaCodeText = tool.addressBack(obj.bankBranchAreaCode, address)
  obj.areaText = tool.addressBack(obj.mchAreaCode, address)

  // 传值给只读组件
  if (applyInfoRef.value) applyInfoRef.value.getApplyInof(obj)
}
defineExpose({ launchApply, assignObj })
</script>

<style lang="scss" scoped></style>
