<!-- 复制自： 运营平台
   差异： 删除商户号mchNo 的input即可。

 -->
<template>
  <!--  <a-drawer-->
  <!--      :visible="vdata.visible"-->
  <!--      :title=" vdata.isAdd ? '新增应用' : '修改应用'"-->
  <!--      width="40%"-->
  <!--      :maskClosable="false"-->
  <!--      @close="onClose"-->
  <!--  >-->

  <a-card class="card-box-div">
    <div class="div-top-title">
      <div  class="div-top-title-tio1">
        <span class="div-top-title-tio-span">基础信息 </span>
      </div>
      <div class="div-top-title-tio2" @click="onClose">
        <a-button type="link" style="color: #808080 ;"><left-outlined />返回列表页</a-button>
      </div>
    </div>
    <a-divider class="divider-box-top" />
    <a-form ref="infoFormModel" :model="vdata.saveObject"  :rules="vdata.rules" class="edit-box" >
      <a-row  justify="space-between" type="flex">
        <a-col :span="24">
          <a-form-item label="应用类型" name="range">
            <a-radio-group v-model:value="vdata.saveObject['range']">
              <a-radio :value="1">线上场景</a-radio>
              <a-radio :value="0">线下场景</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col  :span="9"   v-if="props.configMode != 'mch'">
          <a-form-item label="用户名称" name="mchName">
            <JeepaySearchInfoInput v-model:value="vdata.saveObject['mchName']" @itemRender="getUser" placeholder="用户名称" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />
          </a-form-item>
        </a-col>
        <!--        <a-col :span="24">-->
        <!--          <a-form-item label="是否支持API" name="apiFlag">-->
        <!--            <a-radio-group v-model:value="vdata.saveObject['apiFlag']">-->
        <!--              <a-radio :value="1" >支持 </a-radio>-->
        <!--              <a-radio :value="0" >不支持</a-radio>-->
        <!--            </a-radio-group>-->
        <!--          </a-form-item>-->
        <!--        </a-col>-->
        <a-col :span="24">
          <a-form-item label="应用名称" name="appName">
            <a-input v-model:value="vdata.saveObject['appName']" class="w-300" placeholder="请输入" />
          </a-form-item>
        </a-col>

        <!--        <a-col :span="12">-->
        <!--          <a-form-item label="设置为默认应用" name="defaultFlag">-->
        <!--            <a-radio-group v-model:value="vdata.saveObject['defaultFlag']">-->
        <!--              <a-radio :value="1">是</a-radio>-->
        <!--              <a-radio :value="0">否</a-radio>-->
        <!--            </a-radio-group>-->
        <!--          </a-form-item>-->
        <!--        </a-col>-->
        <a-col :span="24">
          <a-form-item label="备注" name="remark" class="m-b-10">
            <a-input v-model:value="vdata.saveObject['remark']" class="w-300" placeholder="请输入备注" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>

  <a-card :title="'经营场景'"  class="card-box-div" >
    <a-form ref="infoFormModel" :model="vdata.saveObject"  :rules="vdata.rules1" class="edit-box">
      <a-row  justify="space-between" type="flex">
        <a-col :span="24">
          <a-form-item label="经营类目" name="mccCode" style="width: 300px;">
            <a-select v-model:value="vdata.saveObject['mccCode']" placeholder="经营场景" show-search @change="handleSceneChange" @search="handleAppidChange" :filter-option="false">
              <a-select-option v-for="(item,index) in vdata.filteredSceneInfoList" :key="index">{{ item.name }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="vdata.saveObject['qualifications']" style="display: flex">
          <a-form-item label="特殊资质" name="qualifications" >
            <!--          <label for="" class="w-200"  name="qualifications" >特殊资质：</label>-->
            <div >
              <div class="upload-box" v-for="(item,index) in vdata.saveObject['qualifications']" :key="index">
                <label style="margin-right: 5px;">{{ item.name }}</label>
                <!--              <a-tooltip :title="'法人身份证国徽面'"><info-circle-outlined /></a-tooltip>-->
                <JeepayUpload v-model:src="item.url" bizType="applyment" :imgSize="1"  @ocrScan="ocrScanSettFunc" class="upload-box-img"/>
                <!--              <span class="jeepay-tip-text color-box-span" @click="getImg(item)"></span>-->
                <div class="color-box-span" @click="getImg(item)">查看示例</div>
              </div>
              <!--            <div class="upload-box">-->
              <!--              <label style="margin-right: 5px;">法人身份证国徽面</label> <a-tooltip :title="'法人身份证国徽面'"><info-circle-outlined /></a-tooltip>-->
              <!--              <JeepayUpload v-model:src="vdata.saveObject.settAccountIdcard2Img" bizType="applyment" :imgSize="1" class="upload-box-img"-->
              <!--                            ocrType="idCard" @ocrScan="ocrScanSettFunc"/>-->
              <!--              <span class="jeepay-tip-text" style="margin-left: 35px">(示例截图)</span>-->
              <!--            </div>-->
              <!--            <div class="upload-box">-->
              <!--              <label style="margin-right: 5px;">法人身份证国徽面</label><a-tooltip :title="'法人身份证国徽面'"> <info-circle-outlined /></a-tooltip>-->
              <!--              <JeepayUpload v-model:src="vdata.saveObject.settAccountIdcard2Img" bizType="applyment" :imgSize="1" class="upload-box-img"-->
              <!--                            ocrType="idCard" @ocrScan="ocrScanSettFunc"/>-->
              <!--              <span class="jeepay-tip-text" style="margin-left: 35px">(示例截图)</span>-->
              <!--            </div>-->
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>



  <a-card :title="'交易场景'"  class="card-box-div" >

    <a-form ref="infoFormModel" :model="vdata.saveObject" :rules="vdata.rules2" class="edit-box">
      <a-row  justify="space-between" type="flex">
        <a-col :span="24">
          <!--            <a-form-item label="交易分类" name="transactionType">-->
          <!--              <a-select show-search  :value="vdata.saveObject.transactionType" placeholder="选择分类"    >-->
          <!--                <a-select-option v-for="(item,index) in vdata.transactionInfoList" :key="index" :value="item.id">-->
          <!--                  {{ item.name }}-->
          <!--                </a-select-option>-->
          <!--              </a-select>-->
          <!--            </a-form-item>-->
          <a-form-item label="交易分类" name="transactionType">
            <a-checkbox-group v-model:value="vdata.saveObject.transactionType" @change="changeFunc">
              <a-checkbox v-for="(item,index) in vdata.transactionInfoList" :key="index" :value="item.id">{{ item.name }}</a-checkbox>
            </a-checkbox-group>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="vdata.saveObject.transactionType">

          <a-collapse  v-for="(item,index) in vdata.information" :key="index" style="margin: 10px 0">
            <a-collapse-panel :header="item.title">

              <div class="rate-card-content">
                <div class="weChat-pay-list">
                  <a-row :gutter="24" justify="space-between" type="flex">
                    <a-col :span="24" v-if="item.type <=3">
                      <a-form-item :label="item.title+'状态'" name="status">
                        <a-radio-group v-model:value="item.status">
                          <a-radio :value="1">已上线</a-radio>
                          <a-radio :value="0">未上线</a-radio>
                        </a-radio-group>
                      </a-form-item>
                    </a-col>
                    <a-col :span="24"  class="label-img-box" v-if="item.status == 0 && item.type <=3">
                      <label for="" class="w-200">{{item.title}}页面截图：</label>
                      <div >
                        <div class="upload-box">
                          <label for="">首页截图</label>
                          <JeepayUpload v-model:src="item.pic1Url" bizType="applyment" :imgSize="1" class="upload-box-img"
                                        @ocrScan="ocrScanSettFunc"/>
                        </div>
                        <div class="upload-box">
                          <label for="">商品或服务页截图</label>
                          <JeepayUpload v-model:src="item.pic2Url" bizType="applyment" :imgSize="1" class="upload-box-img"
                                        @ocrScan="ocrScanSettFunc"/>
                        </div>
                        <div class="upload-box">
                          <label for="">支付页截图</label>
                          <JeepayUpload v-model:src="item.pic3Url" bizType="applyment" :imgSize="1" class="upload-box-img"
                                        @ocrScan="ocrScanSettFunc"/>
                        </div>
                      </div>
                    </a-col>

                    <a-col :span="24" v-if="item.status == 1">
                      <div v-if="item.type  == 1">
                        <a-form-item :label="item.title+'地址'" name="url" >
                          <a-input v-model:value="item.url" placeholder="需输入页面链接" />
                          <span class="jeepay-tip-text" v-html="item.prompt_content"></span>
                        </a-form-item>
                      </div>
                      <div v-if="item.type  == 2">
                        <a-form-item label="APP名称" name="name">
                          <a-input v-model:value="item.name" placeholder="需输入APP名称" />
                        </a-form-item>
                        <a-form-item :label="item.title+'地址'" name="url" v-if="item.type  == 2">
                          <a-input v-model:value="item.url" placeholder="需输入页面链接" />
                          <span class="jeepay-tip-text" v-html="item.prompt_content"></span>
                        </a-form-item>
                      </div>
                      <div v-if="item.type  == 3">
                        <a-form-item label="小程序名称" name="name">
                          <a-input v-model:value="item.name" placeholder="需输入小程序名称" />
                        </a-form-item>
                      </div>

                      <div v-if="item.type  == 4">
                        <a-form-item label="平台名称" name="name">
                          <a-input v-model:value="item.name" placeholder="需输入平台名称" />
                          <span class="jeepay-tip-text" v-html="item.prompt_content"></span>
                        </a-form-item>
                      </div>
                    </a-col>
                    <a-col :span="24">
                      <a-form-item label="备注" name="remark">
                        <a-textarea v-model:value="item.remark" placeholder="备注" :rows="2" />
                        <span class="jeepay-tip-text" v-html="item.prompt_title"></span>
                      </a-form-item>
                    </a-col>
                  </a-row>
                </div>
              </div>
            </a-collapse-panel>
          </a-collapse>


        </a-col>
      </a-row>
    </a-form>
  </a-card>


  <a-card :title="'预开通产品'"  class="card-box-div">

    <a-form ref="infoFormModel" :model="vdata.saveObject" :rules="vdata.rules3" class="edit-box">
      <a-row  justify="space-between" type="flex">
        <a-col :span="24" style="margin:10px 0px">
          <a-form-item label="选择产品" name="productIds">
            <a-textarea v-if="vdata.saveObject.productIdsName" v-model:value="vdata.saveObject.productIdsName"
                        disabled />
            <a-button style="margin-top: 5px" type="primary" @click="showQrcSelectProductModel">选择产品</a-button>
          </a-form-item>
        </a-col>

<!--        <a-col :span="24">-->
<!--          <a-form-item label="选择产品" name="predicOpenProduct">-->
<!--            <a-checkbox-group v-model:value="vdata.saveObject.predicOpenProduct">-->
<!--              <a-checkbox v-for="(item) in vdata.productList" :key="item.productId" :value="item.productId">{{ item.productName }}</a-checkbox>-->
<!--            </a-checkbox-group>-->
<!--          </a-form-item>-->
<!--        </a-col>-->
<!--        <a-col :span="24">-->
<!--          <a-form-item label="选择方案" name="predicOpenPackage">-->
<!--            <a-checkbox-group v-model:value="vdata.saveObject.predicOpenPackage">-->
<!--              <a-checkbox v-for="(item) in vdata.packageList" :key="item.packageId" :value="item.packageId">{{ item.name }}</a-checkbox>-->
<!--            </a-checkbox-group>-->
<!--          </a-form-item>-->
<!--        </a-col>-->

        <a-col :span="24" style="margin:10px 0px">
          <a-form-item label="关联方案" name="packageName">
            <a-textarea v-if="vdata.saveObject.packageName" v-model:value="vdata.saveObject.packageName"
                        disabled />
            <a-button style="margin-top: 5px" type="primary" @click="showQrcSelectPackageModel">选择绑定方案</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>

  <a-card :title="'签名配置'" v-if="vdata.saveObject.range == 1"  class="card-box-div">

    <a-form ref="infoFormModel" layout="vertical" :model="vdata.saveObject" :rules="vdata.rules3" class="edit-box">
      <a-row  justify="space-between" type="flex">

        <a-col :span="24">
          <a-form-item name="appSignType">
            <template #label>
              <span>支持的签名方式</span> &nbsp;
              <a-popover placement="top">
                <template #title><span>签名方式</span></template>
                <template #content>
                  <p>若需要使用系统测试则必须支持MD5， 若仅通过API调用则根据需求进行选择。 </p>
                </template>
                <question-circle-outlined />
              </a-popover>
            </template>

            <a-checkbox-group v-model:value="vdata.saveObject.appSignTypeObject">
              <a-checkbox value="MD5">MD5</a-checkbox>
              <a-checkbox value="RSA2">
              <span style="display: grid">
                  <span>RSA2</span >
                <span style="margin-left:-25px;width: 250px" class="jeepay-tip-text">点此查看：<a href='https://shouyinbei.yuque.com/rv7pt7/ly9al3/oudphcwqibfo9gni' target="_blank">RSA2密钥配置流程</a></span >

              </span>
                <!--                <a-popover placement="top">-->
                <!--                  <template #content>-->

                <!--                  </template>-->
                <!--                  <question-circle-outlined />-->
                <!--                </a-popover>-->
              </a-checkbox>

            </a-checkbox-group>

          </a-form-item>


          <a-form-item v-show="vdata.saveObject.appSignTypeObject && vdata.saveObject.appSignTypeObject.indexOf('MD5') >= 0" label="设置MD5秘钥" name="appSecret">
            <a-textarea v-model:value="vdata.saveObject['appSecret']" :placeholder="vdata.saveObject['appSecret_ph']" type="textarea" />
            <a-button type="primary" style="margin-top: 5px;" ghost @click="randomKey(false, 128, 0)"><file-sync-outlined />随机生成私钥</a-button>
          </a-form-item>

          <a-form-item v-show="vdata.saveObject.appSignTypeObject && vdata.saveObject.appSignTypeObject.indexOf('RSA2') >= 0" label="设置RSA2应用公钥" name="appRsa2PublicKey">
            <a-textarea v-model:value="vdata.saveObject['appRsa2PublicKey']" type="textarea" />
          </a-form-item>

          <a-form-item v-show="vdata.saveObject.appSignTypeObject && vdata.saveObject.appSignTypeObject.indexOf('RSA2') >= 0" label="支付网关系统公钥（回调验签使用）">
            <a-textarea :rows="6" :value="vdata.sysRSA2PublicKey" :disabled="true" type="textarea" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-card>

  <a-card  :title="'提交'"  class="card-box-div">
    <div class="drawer-btn-center drawer-btn-center-bottom">
      <a-button :style="{ marginRight: '8px' }" @click="onClose"><close-outlined />取消</a-button>
      <a-button type="primary" v-if="vdata.isAdd"  :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />保存</a-button>
      <a-button type="primary" v-if="vdata.type == 2"  :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />提交修改</a-button>
    </div>
  </a-card>

  <JeepayModelProductList v-if="JeepayModelProductListFlag" ref="jeepayModelProductListRef"
                          @selectFinishFunc="selectQrcFinishProductFunc" :configMode="props.configMode" />
  <JeepayModelProgrammeList v-if="jeepayModelProgrammeListFlag" :configMode="props.configMode" ref="jeepayModelProgrammeListRef"
                            @selectFinishFunc="selectQrcFinishPackageFunc" :title="vdata.title" />
  <!--  </a-drawer>-->
</template>

<script setup lang="ts">
import {
  API_URL_MCH_APP,
  API_URL_QUALIFICATIONDEFINE_PAGE,
  API_URL_MCH_APPS,
  req,
  $getSysRSA2PublicKey,
  API_URL_PRODUCT_LIST,
  API_URL_PACKAGE_LIST
} from '@/api/manage'
import {ref, reactive, getCurrentInstance, nextTick} from 'vue'

const { $infoBox,$SYS_NAME_MAP,$viewerApi } = getCurrentInstance()!.appContext.config.globalProperties
const props = defineProps({
  callbackFunc: { type: Function, default: () => () => ({}) },
  configMode: { type: String, default: '' },   // 模式
})
const vdata : any =  reactive({
  type:1,
  information:[] as any,
  informationIds:[] as any,
  productList:[] as any,
  packageList:[] as any,
  sceneInfoList:[] as any,
  // filteredSceneInfoList:['直播','语音','院线','演出赛事','游戏','医疗器械药品信息展示'] as any,
  filteredSceneInfoList:[] as any,
  transactionInfoList:[
    {
      id:1,
      name:"网站",
    },
    {
      id:2,
      name:"APP",
    },
    {
      id:3,
      name:"小程序",
    },
    {
      id:4,
      name:"公众号/生活号",
    },
    {
      id:5,
      name:"其他",
    },
  ] as any,
  transactionInfo: {
    wangZhangVisibleType:0,
    wangZhangVisible:true,
    appVisible:true,
    appVisibleType:0,
    xcxVisible:true,
    xcxVisibleType:0,
    accountVisible:true,
    accountVisibleType:0,
    othertVisible:true,
    othertVisibleType:0,
    wangZhang: {
      visible: true,
    },
    app: {
      visible: true,
    },
    xcx: {
      visible: true,
    },
    account: {
      visible: true,
    },
    other: {
      visible: true,
    },
  },
  isAdd: true, // 新增 or 修改
  visible: true, // 抽屉开关
  appId: '', // 应用AppId
  saveObject: {
    'range':1,
    'state': 1,
    'appSecret': '',
    'mchNo': '',
    'defaultFlag': 0,
    'appSecret_ph': '请输入',
    appSignTypeObject: ['MD5']
  }, // 数据对象
  btnLoading:false,
  sysRSA2PublicKey: '',
  rules1: {
    mccCode: [{required: true, message: '请选择经营场景', trigger: 'blur'}],
    qualifications: [{required: true, message: '请填写特殊资质', trigger: 'blur'}],
  },
  rules2: {
    transactionType: [{required: true, message: '请选择交易分类', trigger: 'blur'}],
  },
  rules3: {
    appSignTypeObject: [{required: true, message: '请选择支持的签名方式', trigger: 'blur'}],
  },
  rules: {
    // mchName: [{ required: true, message: '请选择用户名称', trigger: 'blur' }],
    range: [{ required: true, message: '请选择应用类型', trigger: 'blur' }],
    appName: [{ required: true, message: '请输入应用名称', trigger: 'blur' }],
    apiFlag: [{ required: true, message: '请选择是否支持API', trigger: 'blur' }],
    // defaultFlag: [{ required: true, message: '是否设置为默认应用', trigger: 'blur' }],
    appSecret: [{
      validator:  (rule, value) => {

        // 新增 & 选择了MD5 :  必须输入MD5私钥
        if(vdata.isAdd && vdata.saveObject.appSignTypeObject.indexOf('MD5') >= 0 && !value){
          return Promise.reject('请输入MD5秘钥')
        }
        return Promise.resolve()
      }
    }],
    appRsa2PublicKey: [{
      validator:  (rule, value) => {

        // 新增 & 选择了MD5 :  必须输入MD5私钥
        if(vdata.saveObject.appSignTypeObject.indexOf('RSA2') >= 0 && !value){
          return Promise.reject('请输入RSA2应用公钥')
        }
        return Promise.resolve()

      }

    }]
  },
  scenarioDetail:[//交易场景
    {},
    {
      "title": "网站",
      "name": "", //APP名称，网站名称等
      "content": "", //APP内容，网站内容
      "prompt_content": `1、需输入可正常访问的网站页面地址<br>2、网站需要经过ICP备案 查询是否备案 <a href='https://beian.miit.gov.cn/#/Integrated/index'>https://beian.miit.gov.cn/#/Integrated/index</a>`, //APP内容，网站内容
      "prompt_title": "1、您可补充贵司售卖的产品及网站支付使用场景，并需与您录入的网站所提供的服务保持一致<br>2、网站如需账号密码登录，请在此提供账号密码。", //APP内容，网站内容
      "remark": "", //备注信息
      "type": 1, //类型。1、网站；2、APP； 3、小程序； 4、公众号/服务号； 5、其他
      "url": "",
      "status": 1,
      "pic1Url": "",
      "pic2Url": "",
      "pic3Url": "",
      // "pic4Url": ""
    },{
      "title": "APP",
      "name": "", //APP名称，网站名称等
      "content": "", //APP内容，网站内容
      "prompt_content":"需输入可正常访问的APP下载地址或已上架的应用市场名称",
      "prompt_title": "1、您可补充贵司售卖的产品及APP支付使用场景，并需与您录入的APP所提供的服务保持一致<br>2、APP如需账号密码登录，请在此提供账号密码。", //APP内容，网站内容
      "remark": "", //备注信息
      "type": 2, //类型。1、网站；2、APP； 3、小程序； 4、公众号/服务号； 5、其他
      "url": "",
      "status": 1,
      "pic1Url": "",
      "pic2Url": "",
      "pic3Url": "",
      // "pic4Url": ""
    },{
      "title": "小程序",
      "name": "", //APP名称，网站名称等
      "content": "", //APP内容，网站内容
      "prompt_content":"指小程序已在微信或支付宝发布的小程序名称",
      "prompt_title": "1、您可补充贵司售卖的产品及小程序支付使用场景，并需与您录入的小程序所提供的服务保持一致<br>2、小程序如需账号密码登录，请在此提供账号密码。", //APP内容，网站内容
      "remark": "", //备注信息
      "type": 3, //类型。1、网站；2、APP； 3、小程序； 4、公众号/服务号； 5、其他
      "url": "",
      "status": 1,
      "pic1Url": "",
      "pic2Url": "",
      "pic3Url": "",
      // "pic4Url": ""
    },{
      "title": "公众号/服务号",
      "name": "", //APP名称，网站名称等
      "content": "", //APP内容，网站内容
      "prompt_content":"指已在微信公众号/支付宝生活号上线的名称",
      "prompt_title": "1、您可补充贵司售卖的产品及支付使用场景，并需与您录入的所提供的服务保持一致<br>2、如需账号密码登录，请在此提供账号密码。", //APP内容，网站内容
      "remark": "", //备注信息
      "type": 4, //类型。1、网站；2、APP； 3、小程序； 4、公众号/服务号； 5、其他
      "url": "",
      "status": 1,
      "pic1Url": "",
      "pic2Url": "",
      "pic3Url": "",
      // "pic4Url": ""
    },{
      "title": "其他",
      "name": "", //APP名称，网站名称等
      "content": "", //APP内容，网站内容
      "prompt_content":"",
      "prompt_title": "您需要描述贵司售卖的产品及支付使用场景", //APP内容，网站内容
      "remark": "", //备注信息
      "type": 5, //类型。1、网站；2、APP； 3、小程序； 4、公众号/服务号； 5、其他
      "url": "",
      "status": 1,
      "pic1Url": "",
      "pic2Url": "",
      "pic3Url": "",
      // "pic4Url": ""
    }
  ],
})

// 表单组件
const infoFormModel = ref()

// 抽屉显示1 查看 2编辑
function show(record,type=1) {
  // console.log(recordId,'recordIdrecordId')
  vdata.isAdd = !record
  vdata.type = type
  // 数据清空
  vdata.saveObject = {
    'range':1,
    'state': 1,
    'appSecret': '',
    'mchNo': '',
    'defaultFlag': 0,
    'appSecret_ph': '请输入',
    appSignTypeObject: ['MD5']
  }

  getQualificationDefine()
  if (!vdata.isAdd) { // 修改信息 延迟展示弹层
    vdata.appId = record.appId
    // 拉取详情
    req.getById(API_URL_MCH_APP, record.appId).then(res => {
      vdata.saveObject = res
      vdata.saveObject.qualifications = res.qualificationList
      vdata.information = res.information
      vdata.saveObject.transactionType = [] as any;
      if(res.information.length > 0){
        for (var i=0;i<res.information.length;i++){
          vdata.saveObject.transactionType.push(vdata.information[i]['type'])
          vdata.information[i]['title'] = vdata.scenarioDetail[vdata.information[i].type]['title']
          vdata.information[i]['prompt_content'] = vdata.scenarioDetail[vdata.information[i].type]['prompt_content']
          vdata.information[i]['prompt_title'] = vdata.scenarioDetail[vdata.information[i].type]['prompt_title']
        }
      }
      vdata.saveObject['appSecret_ph'] = res.appSecret
      vdata.saveObject['appSecret'] = ''

      vdata.saveObject.appSignTypeObject = []
      if(res.appSignType){
        vdata.saveObject.appSignTypeObject = JSON.parse(res.appSignType)
      }

      for (var i = 0;i<vdata.sceneInfoList.length;i++){
        if(vdata.sceneInfoList[i].code == vdata.saveObject.mccCode){
          vdata.saveObject.mccCode = i
        }
      }
      console.log(vdata.saveObject.mccCode,'vdatasaveObjectmccCode')

    })
    vdata.visible = true
  } else {

    vdata.visible = true // 展示弹层信息
  }




}
getProductList()
getPackageList()
getSysRSA2PublicKey()
function  getSysRSA2PublicKey(){
// 查询系统公钥
  $getSysRSA2PublicKey().then((res) => {
    vdata.sysRSA2PublicKey = res
  })
}
function getProductList() {
  req.list(API_URL_PRODUCT_LIST, {pageNumber: -1}).then(resData => {
    vdata.productList = resData.records
  })
}
function getPackageList() {
  req.list(API_URL_PACKAGE_LIST, {pageNumber: -1}).then(resData => {
    vdata.packageList = resData.records
  })
}
// 表单提交
const onSubmit = () => {

  // 处理签名方式
  vdata.saveObject.appSignType = JSON.stringify(vdata.saveObject.appSignTypeObject)

  let reqObject = Object.assign({}, vdata.saveObject) // 请求数据
  reqObject['predicOpenPackage'] = ''
  if (Array.isArray(vdata.saveObject.predicOpenPackage)) {
    reqObject['predicOpenPackage'] = vdata.saveObject.predicOpenPackage.join(',');
  }
  reqObject['predicOpenProduct'] = ''
  if (Array.isArray(vdata.saveObject.predicOpenProduct)) {
    reqObject['predicOpenProduct'] = vdata.saveObject.predicOpenProduct.join(',');
  }
  if(!vdata.saveObject['qualifications']){
    $infoBox.message.error('请选择经营场景')
    return false;
  }

  if(!vdata.saveObject['appName']){
    $infoBox.message.error('请选择应用名称')
    return false;
  }

  // if(vdata.saveObject['qualifications'].length == 0){
  //   $infoBox.message.error('请选择填写经营场景内容')
  //   return false;
  // }

  if(vdata.information.length  == 0){
    $infoBox.message.error('请选择交易场景')
    return false;
  }

  console.log(vdata.information,'vdata.information')



  if(vdata.information.length > 0){
    for (var i=0;i<vdata.information.length;i++){
      if(vdata.information[i].status == 1 ){
        if(vdata.information[i].type==1 && !vdata.information[i].url){
          $infoBox.message.error('请输入网站地址')
          return false;
        }
        if(vdata.information[i].type==2 && !vdata.information[i].url && !vdata.information[i].name){
          $infoBox.message.error('请输入APP名称或APP地址')
          return false;
        }
        if(vdata.information[i].type==3 && !vdata.information[i].name){
          $infoBox.message.error('请输入小程序名称')
          return false;
        }
        if(vdata.information[i].type==4 && !vdata.information[i].name){
          $infoBox.message.error('请输入平台名称')
          return false;
        }
        if(vdata.information[i].type==5 && !vdata.information[i].remark){
          $infoBox.message.error('请输入其他备注')
          return false;
        }
      }else{
        if(vdata.information[i].type==1 || vdata.information[i].type==2 || vdata.information[i].type==3){
          if(!vdata.information[i].pic1Url || !vdata.information[i].pic2Url || !vdata.information[i].pic3Url){
            $infoBox.message.error('请输入页面截图')
            return false;
          }
        }
      }
    }
  }

  if(!vdata.saveObject['qualifications']){
    $infoBox.message.error('请选择经营类目')
    return false;
  }
  console.log(vdata.saveObject['qualifications'],'qualifications')
  for (var i=0; i<vdata.saveObject['qualifications'].length;i++){
    if(!vdata.saveObject['qualifications'][i].url){
      $infoBox.message.error('请输入'+vdata.saveObject['qualifications'][i].name)
      return false;
    }
  }




  reqObject['information'] = vdata.information;
  console.log(vdata.saveObject['mccCode'],'mccCode')
  console.log(vdata.sceneInfoList,'sceneInfoList')
  reqObject['mccCode'] = vdata.sceneInfoList[vdata.saveObject['mccCode']].code //资质编码
  reqObject['qualificationList'] = vdata.saveObject['qualifications'] //资质相关信息
  delete reqObject['transactionType']
  reqObject['pryCapabilityCodeList'] = []

  req.addOrUpdate(vdata.isAdd ? null : vdata.appId, API_URL_MCH_APPS, reqObject).then(res => {
    vdata.visible = false
    props.callbackFunc() // 刷新列表
    onClose();
  }).finally(() => {
    vdata.btnLoading = false
  })
  // infoFormModel.value.validate().then(() => {
  //
  //   vdata.btnLoading = true
  //   let reqObject = Object.assign({}, vdata.saveObject) // 请求数据
  //
  //   delete reqObject['appSecret_ph']
  //   if (!vdata.isAdd && reqObject['appSecret'] === '') {
  //     delete reqObject['appSecret']
  //   }
  //
  //
  // })
}

function getUser(e){
  console.log(e,'getUsergetUsergetUser')
    vdata.saveObject.mchNo = e.mchNo
    vdata.saveObject.mchName = e.mchShortName
}

function ocrScanSettFunc(orcObject: any) {

}
function randomKey(randomFlag, min, max) { // 生成随机128位私钥
  let str = ''
  let range = min
  const arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
  // 随机产生
  if (randomFlag) {
    range = Math.round(Math.random() * (max - min)) + min
  }
  for (var i = 0; i < range; i++) {
    var pos = Math.round(Math.random() * (arr.length - 1))
    str += arr[ pos ]
  }
  vdata.saveObject['appSecret'] = str
}

const emit = defineEmits(['itemRender'])
const onClose = () => {
  vdata.visible = false
  emit('itemRender',{'tableType':'table',type:1})
}

const handleSceneChange = (value) => {
  vdata.saveObject.qualifications = vdata.sceneInfoList[value].params
  console.log(vdata.saveObject.qualifications,'valuevaluevalue')
}
const handleAppidChange = (value) => {
  vdata.filteredSceneInfoList = [];
  vdata.sceneInfoList.forEach((item,index) => {
    if (item.includes(value)) {
      vdata.filteredSceneInfoList.push(vdata.sceneInfoList[index]);
    }
  });
};



function changeFunc(value, selectedOptions){
  vdata.information = [];
  vdata.informationIds = [];
  for (var i=0;i<value.length;i++) {
    if (!vdata.informationIds.includes(value[i])) {
      let detail = {} as any;
      if (value[i] == 1) {
        detail = vdata.scenarioDetail[1]
      } else if (value[i] == 2) {

        detail = vdata.scenarioDetail[2]
      } else if (value[i] == 3) {

        detail = vdata.scenarioDetail[3]
      } else if (value[i] == 4) {
        detail = vdata.scenarioDetail[4]
      } else if (value[i] == 5) {
        detail = vdata.scenarioDetail[5]
      }
      vdata.information.push(detail)
    }
  }

  vdata.informationIds = value
  vdata.saveObject.transactionType = value
}



function getQualificationDefine(){
  req.list(API_URL_QUALIFICATIONDEFINE_PAGE, {pageNumber: -1}).then(resData => {
    vdata.filteredSceneInfoList = resData.records
    vdata.sceneInfoList = resData.records
  })
}
function getImg(item){
  $viewerApi({images: [item.propertyName]})
}

const JeepayModelProductListFlag = ref(false)
const jeepayModelProgrammeListFlag = ref(false)
const jeepayModelProductListRef = ref(false)
const jeepayModelProgrammeListRef = ref(false)
function showQrcSelectProductModel() {
  vdata.title = '绑定产品'
  JeepayModelProductListFlag.value = true
  nextTick(() => {
    jeepayModelProductListRef.value.show()
  })
}
function showQrcSelectPackageModel(title) {
  vdata.title = '绑定方案'
  jeepayModelProgrammeListFlag.value = true
  nextTick(() => {
    jeepayModelProgrammeListRef.value.show()
  })
}
function selectQrcFinishProductFunc(e) { // 码牌选择完成事件
  JeepayModelProductListFlag.value = false
  if (!e || e.length <= 0) {
    vdata.saveObject.productIdsName = ''
    vdata.saveObject.productIds = []
    return $infoBox.message.error('请开启要绑定的产品！')
  }
  vdata.saveObject.productIdsName = ''
  vdata.saveObject.productIds = []

  e.forEach((item) => {
    vdata.saveObject.productIdsName += item.productName + ','
    vdata.saveObject.productIds.push(item.productId)
  })
}
function selectQrcFinishPackageFunc(e) { // 码牌选择完成事件
  jeepayModelProgrammeListFlag.value = false

  if (!e || e.length <= 0) {
    vdata.saveObject.packageName = ''
    vdata.saveObject.packageIds = []
    return $infoBox.message.error('请开启要绑定的方案！')
  }
  vdata.saveObject.packageName = ''
  vdata.saveObject.packageIds = []
  e.forEach((item) => {
    vdata.saveObject.packageName += item.name + ','
    vdata.saveObject.packageIds.push(item.packageId)
  })
}
defineExpose({ show })
</script>
<style lang="less" scoped>

.edit-box{
  padding: 20px 30px;
}
.rate-card-wrapper {
  margin-bottom: 20px;
  position: relative;

  width: 100%;
  // height: 182px;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    height: 48px;
    border-radius: 5px 5px 0 0;
    background-color: #fafafa;
    .card-title {
      font-size: 14px;
      font-weight: 700;
    }
    .h-left {
      font-weight: bold;
      display: flex;
      align-items: center;
      div {
        display: flex;
        align-items: center;
      }
      div:nth-child(n + 2) {
        margin-left: 30px;
      }
    }
  }
  .rate-card-content {
    padding: 30px 30px 40px 30px;
  }

}


.weChat-pay-list {
  display: flex;
  align-items: center;

  .w-pay-title {
    margin-bottom: 20px;
  }

  .w-pay-item:nth-child(n+2) {
    margin-left: 50px;
  }
}

.h-right2-div{
  margin-left: 20px
}
// 以下 为移动端样式 移动端所有样式类名 均以 -phone 结尾
.rate-card-wrapper-phone{
  width: 100%;
  overflow-x: auto;
  white-space: nowrap !important;
  font-size: 12px !important;
  .w-pay-title-phone{
    width: 30vw;
  }
}
.config-phone{
  overflow-x: auto;
  background-color: #fff;
  ::v-deep .ant-collapse-header{
    background-color: #fafafa;
  }
  ::v-deep .ant-input-number{
    min-width: 80px;
  }
}
.upload-box{
  margin: 5px 10px;
}
.upload-box-img{
  //text-align: center;
}
.card-box-div{
  margin-bottom: 10px;
}
.drawer-btn-center-bottom{
  border-top: unset !important;
}
.rate-card-wrapper .card-header{
  background: #f7f8fa !important;
}
.w-300{
  width: 400px;
}
.label-img-box{
  display: flex;
  margin-bottom:20px;
}

:deep(.edit-box .ant-form-item-label) {
  width: 150px !important;
}
:deep(.edit-box .ant-form-item-label label) {
  white-space: pre-wrap !important;
}
.w-200{
  text-align: right;
  width: 150px !important;
}

.div-top-title{
  display: flex;
  position: relative;
  padding: 15px 20px;
}
.div-top-title-tio-span{
  font-size: 17px;
  font-weight: 600;
}
.div-top-title-tio1{
  width: 50%;
}
.div-top-title-tio2{
  width: 50%;
  text-align: right;
}

.div-top-title-tio2 bottom{
  background: #fff;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  box-shadow: 0 2px 0 rgba(0,0,0,.015);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5715;
  padding: 4px 25px !important;
  text-align: center;
}
.divider-box-top{
  margin:unset !important;
}
.color-box-span{
  font-size: 13px;
  color: #2C6EF6 !important;
  text-align: left;
  padding: 10px 0;
}
.upload-box-img :deep(.ant-upload-list-item-name){
  //display: none;
}
</style>

