<template>
  <view class="page-wrapper global-wrapper bgF2">
    <JHeaderTitle title="发起进件" bgColor="#f2f2f2" />

    <view class="select-title">商户</view>
    <JMainCard pd="0" wrapPd="20rpx">
      <view class="select-wrapper" @tap="jumpPage('mch')">
        <view class="select-mch" v-if="mchInfo.mchNo == undefined"> 请选择商户 </view>
        <view class="mch-info" v-else>
          <image src="/static/equipmentImg/mch-list.svg" mode="scaleToFill" />
          <view
            >{{ mchInfo.mchName }} <text>{{ mchInfo.mchNo }}</text>
          </view>
        </view>
        <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
      </view>
    </JMainCard>
    <template v-if="mchInfo.mchNo && vdata.range == 1">
    <view class="select-title change-config">
        <text>自动配置到应用</text>
        <switch style=" transform: scale(1.2)" color="#BF80FF" :checked="vdata.configAppIdFlag"  @change="isConfigAppId" />
    </view>
    <JMainCard pd="0" wrapPd="20rpx" v-if="vdata.configAppIdFlag">
      <view class="select-wrapper" @tap="jumpPageAppId('appId', appInfo.appId, { mchNo: mchInfo.mchNo })">
        <view class="select-mch" v-if="!appInfo.appId"> 请选择应用 </view>
        <view class="mch-info" v-else>
          <image src="/static/iconImg/icon-app-selected.svg" mode="scaleToFill" />
          <view
            >{{ appInfo.appName }} <text>{{ appInfo.appId }}</text>
          </view>
        </view>
        <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
      </view>
    </JMainCard>
    </template>
    <view class="select-title">通道</view>
    <JMainCard pd="0" wrapPd="20rpx">
      <view class="select-wrapper" @tap="pay.open(payInfo)">
        <view class="select-mch" v-if="payInfo.ifCode === undefined"> 请选择通道 </view>
        <view class="mch-info" v-else>
          <view class="img-wrapper bdR10" :style="{ backgroundColor: payInfo.bgColor }">
            <image :src="payInfo.icon" mode="scaleToFill" />
          </view>
          <view
            >{{ payInfo.ifName }} <text>{{ payInfo.remark }}</text>
          </view>
        </view>
        <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
      </view>
    </JMainCard>
	
	<view class="select-title">渠道</view>
	<JMainCard pd="0" wrapPd="20rpx">
	 <view class="select-wrapper" @tap="isv.open(isvInfo)">
	   <view class="select-mch" v-if="isvInfo.isvNo === undefined"> 请选择通道 </view>
	   <view class="mch-info" v-else>	      
	     <view>{{ isvInfo.isvName }}<text>{{isvInfo.isvNo}}</text> </view>
	   </view>
	   <image src="/static/iconImg/right-arrow.svg" mode="scaleToFill" />
	 </view>
	</JMainCard>
	
    <view class="select-footer">
      <JButton pd="30rpx 30rpx 50rpx 30rpx" @HandleTouch="next">下一步</JButton>
    </view>
  </view>
  <SelectedPay ref="pay" @selected="selected" />
  <SelectedIsv ref="isv" :infoId="vdata.mchNo" :channelRange="1" :channelIfCode="vdata.ifCode" @selected="selectedIsv" />
</template>

<script setup>
import { ref,reactive } from 'vue'
import { onShow,onLoad,onUnload } from '@dcloudio/uni-app'
import { $getIsvInfoList,$findMer,$getMchAppList } from '@/http/apiManager.js'
import JHeaderTitle from '@/components/newComponents/JHeaderTitle/JHeaderTitle'
import JMainCard from '@/components/newComponents/JMainCard/JMainCard'
import JButton from '@/components/newComponents/JButton/JButton'
import SelectedPay from './components/SelectedPay.vue'
import SelectedIsv from './components/SelectedIsv.vue'
import useStore from '@/hooks/useStore.js'
const { getStore, clearItem } = useStore()
onLoad((options)=>{
    if (options.range) vdata.range = options.range
  if(options.applyId){
    Object.assign(vdata,options)
    getApplyInfo(options)
  }
})
onShow(() => {
  if (getStore('mch') && getStore('mch').mchNo && getStore('mch').mchNo !== mchInfo.value.mchNo) {
    mchInfo.value = getStore('mch')
	vdata.mchNo=mchInfo.value.mchNo
    getAppList()
  }
  if (getStore("appId") && getStore("appId").appId) {
    console.log(getStore("appId"));
    appInfo.value = getStore("appId")
  }
})
const mchInfo = ref({})
const payInfo = ref({})
const isvInfo = ref({})
const appInfo = ref({}) //应用信息
const pay = ref(null)
const isv = ref(null)
const vdata = reactive({
	ifCode:"",
	range:0,
    configAppIdFlag:true
})
const jumpPage = (val) => {
  uni.navigateTo({
    url: `/pageWork/SelectedList/SelectedList?title=${val}&selected=${mchInfo.value.mchNo}`,
  })
}
// 跳转到通用选择页面
const jumpPageAppId = (val, selected, search) => {
  if (search) search = JSON.stringify(search)
  uni.navigateTo({
    url: `/pageWork/SelectedList/SelectedList?title=${val}&selected=${selected}&&search=${search}`,
  })
}
const next = () => {
  console.log(mchInfo);
  if (!mchInfo.value.mchNo){
	return uni.showToast({ title: '请选择商户', icon: 'none' })  
  } 
  if (!payInfo.value.ifCode) return uni.showToast({ title: '请选择通道', icon: 'none' })
  uni.showLoading({ title: '加载中...' })
  
  // 缺参数
  $getIsvInfoList({pageNumber:-1,ifCode:payInfo.value.ifCode,range:vdata.range,infoId:mchInfo.value.mchNo}).then((res) => {
  // $getIsvInfoList().then((res) => {
    uni.hideLoading()
    // uni.navigateTo({
    //   url: `./applyDetail?code=${payInfo.value.ifCode}&state=${0}&name=${
    //     payInfo.value.ifName
    //   }&applyId=${""}&codeUrl=${false}&mchNo=${mchInfo.value.mchNo}`,
    // })
    let copyInfoSourceApplyIdParam = vdata.applyId || ''
    vdata.applyId = vdata.applyId? vdata.applyId :'' // 防止地址栏被转为 undefined
	console.log(`./applyDetailWeb?mchNo=${mchInfo.value.mchNo}&ifCode=${payInfo.value.ifCode}&isView=0&copyInfoSourceApplyId=${copyInfoSourceApplyIdParam}&isvNo=${isvInfo.value.isvNo}&range=${vdata.range}`);
    uni.navigateTo({ url: `./applyDetailWeb?mchNo=${mchInfo.value.mchNo}&ifCode=${payInfo.value.ifCode}&isView=0&copyInfoSourceApplyId=${copyInfoSourceApplyIdParam}&isvNo=${isvInfo.value.isvNo}&range=${vdata.range}` })
    // uni.navigateTo({ url: `./applyDetailWeb?mchNo=${mchInfo.value.mchNo}&ifCode=${payInfo.value.ifCode}&isView=0&copyInfoSourceApplyId=${vdata.applyId}&autoConfigMchAppId=${vdata.configAppIdFlag?appInfo.value.appId:''}` })
  })
}
const selected = (data) => {
  payInfo.value = data
  vdata.ifCode = data.ifCode
}
const selectedIsv = (data) => {
  isvInfo.value = data
  console.log(isvInfo.value);
}
function getApplyInfo(options) {
  $findMer(options.mchNo).then(({bizData})=>{
    mchInfo.value = bizData
    getAppList()
  })
}
const isConfigAppId = (e) => {
  vdata.configAppIdFlag = e.detail.value
}
// 查询默认应用
const getAppList = () => {
    if(!mchInfo.value.mchNo) return
  $getMchAppList({ mchNo: mchInfo.value.mchNo,defaultFlag: 1  }).then(({ bizData }) => {
    if (bizData.records.length > 0) {
      appInfo.value = bizData.records[0]
    }
  })
}
onUnload(()=>{
  clearItem('mch')
  clearItem('appId')
})
</script>

<style lang="scss" scoped>
.page-wrapper {
  .select-title {
    margin-top: 30rpx;
    margin-left: 50rpx;
    font-size: 33rpx;
  }
  .select-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    .select-mch {
      margin: 20rpx;
    }
    .mch-info {
      display: flex;
      image {
        width: 93rpx;
        height: 93rpx;
        margin-right: 10rpx;
      }
      view {
        display: flex;
        flex-direction: column;
        font-size: 33rpx;
        font-weight: 700;
        text {
          margin-top: 15rpx;
          color: #8c8c8c;
          font-size: 25rpx;
          font-weight: 500;
        }
      }
    }
    image {
      width: 40rpx;
      height: 40rpx;
    }
    .img-wrapper {
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      width: 93rpx;
      height: 93rpx;
      margin-right: 20rpx;
      image {
        width: 60rpx;
        height: 66rpx;
      }
    }
  }
  .select-footer {
    position: fixed;
    right: 0;
    left: 0;
    bottom: 0;
  }
}
.change-config{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 20rpx;
}
</style>
