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

 -->
<template>
  <a-drawer
    :visible="vdata.visible"
    title="产品绑定"
    width="90%"
    :maskClosable="false"
    @close="onClose"
  >
    <a-form ref="infoFormModel" :model="vdata.saveObject" layout="vertical" :rules="vdata.rules">
        <div class="box-div">
            <!-- <div class="box-div-top">
               <span class="box-div-top-span1">绑定产品</span>
               <span class="box-div-top-span2">已绑定9个产品</span>
            </div> -->

            <JeepayTable
      ref="paywayTable"
      class="table-item"
      :initData="true"
      :searchData="vdata.searchData"
      :reqTableDataFunc="reqPaywayTableDataFunc"
      :tableColumns="paywayTableColumns"
      rowKey="wayCode"
      :scrollX="500"
      :topRowIsShow="false"
    >
      <template #bodyCell="{column,record}">

        <!-- <template v-if="column.key == 'checkState'">
            <a-badge status="processing" text="未开通" v-if="record.checkState == 0"/>
              <a-badge status="warning" text="审核中" v-if="record.checkState == 1"/>
              <a-badge status="error" text="审核驳回" v-if="record.checkState == 2"/>
              <a-badge status="success" text="已开通" v-if="record.checkState == 3"/>
              <a-badge status="default" text="已取消" v-if="record.checkState == 4"/>
        </template> -->
        <template v-if="column.key == 'state'">
            <a-badge status="default" text="未绑定" v-if="record.state == 0"/>
              <a-badge status="success" text="已绑定" v-if="record.state == 1"/>
        </template>
        <template v-if="column.key == 'op'">
          <div >
            <JeepayTableColumns>            
              <a-button  type="link" @click="prodUrlFunc(record.productUrl)">查看文档</a-button>
<!--              <a-button  type="link"  @click="prodStatusFunc(record.productId,1)" v-if="record.state == 0">立即关联</a-button>-->
<!--              <a-button type="link" style="color: red" @click="prodStatusFunc(record.productId,0)" v-if="record.state == 1">取消关联</a-button>-->
            </JeepayTableColumns>
          </div>
        </template>
      </template>
    </JeepayTable>

            <!-- <div class="box-div-list">
                <ul class="box-div-ul">
                  <li class="box-div-li">产品名称</li>
                  <li class="box-div-li2">产品介绍</li>
                  <li class="box-div-li">产品开通状态</li>
                  <li class="box-div-li">操作</li>
                </ul>
                <ul class="box-div-ul-list">
                  <li class="box-div-li box-div-list-li">产品名称</li>
                  <li class="box-div-li2 box-div-list-li">产品介绍</li>
                  <li class="box-div-li box-div-list-li">产品开通状态</li>
                  <li class="box-div-li box-div-list-li">操作</li>
                </ul>
            </div> -->
        </div>
    </a-form>

    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" @click="onClose"><close-outlined />取消</a-button>
      <!-- <a-button type="primary" :loading="vdata.btnLoading" @click="onSubmit"><check-outlined />保存</a-button> -->
    </div>

  </a-drawer>
</template>


<script setup lang="ts">
import { API_URL_MCH_APP, req, $getSysRSA2PublicKey, $mchAppSecret,API_URL_MCH_PAYPASSAGE_LIST,API_APP_PRODUCT_LIST,API_URL_PRODUCT_START_LIST,API_APP_PRODUCT_LIST_STATE } from '@/api/manage'
import {ref, reactive,getCurrentInstance} from 'vue'
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

const props = defineProps({
  callbackFunc: { type: Function, default: () => () => ({}) }
})

// 支付方式（左侧）的列表
const paywayTableColumns = reactive([
  { key: 'productName', title: '产品名称', dataIndex: 'productName', align: 'center' ,width:80},
  { key: 'productDesc', title: '产品介绍', dataIndex: 'productDesc', align: 'center' ,width:400},
  // { key: 'checkState', title: '审核状态' ,fixed:"right" ,width:200},
  { key: 'state', title: '关联状态' ,fixed:"right", align: 'center' ,width:200},
  { key: 'op', title: '操作' ,fixed:"right", align: 'center',width:200}
])
  
const vdata : any =  reactive({
  isAdd: true, // 新增 or 修改
  isShow: false,
  visible: false, // 抽屉开关
  appId: '', // 应用AppId
  saveObject: {}, // 数据对象
  viewInfo: {}, // 数据对象
  btnLoading:false,
  sysRSA2PublicKey: '', 
  rules: {
  }
})

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

// 抽屉显示
const show = (appId) => {
  vdata.isAdd = !appId
  // 数据清空
  vdata.saveObject = {
    'state': 1,
    'appSecret': '',
    'defaultFlag': 1,
    'appSecret_ph': '请输入',
    appSignTypeObject: ['MD5']
  }
  
  if (infoFormModel.value !== undefined) {
    infoFormModel.value.resetFields()
  }

  if (!vdata.isAdd) { // 修改信息 延迟展示弹层
    vdata.appId = appId
    console.log(vdata.appId,'vdata.appId')
    vdata.visible = true
    reqPaywayTableDataFunc({pageNumber:1,pageSize:10})
  } else {

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

}
  
function  queryFunc () {
    vdata.btnLoading = true
    paywayTable.value.refTable(true)
  }
function searchFunc () { // 点击【查询】按钮点击事件
  paywayTable.value.refTable(true)
}
// function prodEditFunc (appId) { 
//     $infoBox.confirmDanger('确认删除？', '', () => {
//       req.delById(API_URL_MCH_APP, appId).then(res => {
//         $infoBox.message.success('删除成功！')
//         searchFunc()
//       })
//     })
//   }
function prodStatusFunc(productId,state){
  const text  = "确认关联产品？";
  if(state == 0){
    const text  ="确认取消关联产品？";
  }
console.log(vdata.appId,'vdata.appIdvdata.appId')
  $infoBox.confirmPrimary(text, '', () => {
    req.add(API_APP_PRODUCT_LIST_STATE, { productId: productId,state:state,appId:vdata.appId }).then(data => {
         console.log(data,'resresres')  
         $infoBox.message.success(data)  
         queryFunc()    
      })
    })
}

  function prodUrlFunc(url){
         window.open(url)
  }

  
function  reqPaywayTableDataFunc (params) {
  // params.state = 3  as any
  params.appId = vdata.appId
  return req.list(API_APP_PRODUCT_LIST, Object.assign(params))
}

// 表单提交
const onSubmit = () => {

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






const onClose = () => {
  vdata.visible = false
}

defineExpose({ show })
</script>
<style>
.box-div{
  /* background: #fafafa; */
  border-radius: 10px;
  padding: 10px;
}
.box-div-top{
  padding: 15px;
  border-bottom: 1px solid #EDEDED;
}
.box-div-top-span1{
  font-size: 17px;
  font-weight: 400;
  font-family: Source Han Sans-Regular;
}
.box-div-top-span2{
    font-size: 13px;
    color: #767676;
    padding-left: 16px;
}
.box-div-ul{
    display: flex;
    width: 100%;
    margin-top: 26px;
    background: #F9FAFA;
}
.box-div-li{
  width: 20%;
  text-align: center;
  padding: 10px 0;
}
.box-div-li2{
  width: 40%;
  text-align: center;
  padding: 10px 0;
}
.box-div-ul-list{  
    display: flex;
    width: 100%;
    margin-top: 26px;
}
.table-item{
  margin-top: 30px;
}
</style>

