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

 -->
<template>
  <a-drawer
    :visible="vdata.visible"
    title="关联商户"
    width="90%"
    :maskClosable="false"
    @close="onClose"
  >
  <a-button type="primary" @click="addRelevance"><plus-outlined />一键关联商户</a-button>
    <a-form ref="infoFormModel" :model="vdata.saveObject" layout="vertical" :rules="vdata.rules">
        <div class="box-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 == 'status'">
            <a-badge status="default" text="禁用" v-if="record.status == 0"/>
              <a-badge status="success" text="正常" v-if="record.status == 1"/>
        </template>

        
        <template v-if="column.key == 'remark'">
          {{ record.remark??"--" }}
        </template>
        <template v-if="column.key == 'wxWeight'">
          {{ record.ysfWeight }}
        </template>
        <template v-if="column.key == 'ysfWeight'">
          {{ record.ysfWeight }}
        </template>
        <template v-if="column.key == 'aliWeight'">
            {{ record.aliWeight }}
        </template>
        <template v-if="column.key == 'op'">
          <div >
            <JeepayTableColumns>            
              <a-button  type="link" @click="shopFunc(record)">修改</a-button>
              </JeepayTableColumns>
          </div>
        </template>
      </template>
    </JeepayTable>
        </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>


  <a-modal v-model:visible="vdata.visibleShop" title="轮询设置" :footer="null" width="50%"  @cancel="handleCancel">
    <div style="height: 20vh; overflow: auto;"  >
      <div class="code code-layout-item" style="display: flex;justify-content:center">
          <a-form-item label="商户简称" required style="width: 80%;">
            <a-input v-model:value="vdata.shopInfo.mchShortName"> </a-input>
          </a-form-item> 
          <a-form-item label="商户编号" required style="width: 80%;">
            <a-input v-model:value="vdata.shopInfo.mchApplyId"> </a-input>
          </a-form-item> 
          <a-form-item label="权重" required style="width: 80%;">
            <a-input v-model:value="vdata.shopInfo.mchApplyId"> </a-input>
          </a-form-item> 
        </div>
        
        <div style="text-align: center;margin-top: 34px;">
          <a-button type="primary" :disabled="vdata.isDisabled" @click="sendNotes()">
                确定
           </a-button>
        </div>
    </div>
  </a-modal>

</template>


<script setup lang="ts">
import {  req,API_APP_SHOP_LIST,API_APP_SHOP_LIST_STATUS,API_APP_SHOP_LIST_RELEVANCE} 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: 'mchNo', title: '所属商户', dataIndex: 'mchNo' },
  { key: 'wxWeight', title: '微信权重', dataIndex: 'wxWeight' },
  { key: 'aliWeight', title: '支付宝权重', dataIndex: 'aliWeight' },
  { key: 'ysfWeight', title: '银联权重', dataIndex: 'ysfWeight' },
  { key: 'status', title: '状态' ,},
  { key: 'remark', title: '备注' ,},
  { key: 'createdAt', title: '时间' ,dataIndex: 'createdAt'},
  { key: 'op', title: '操作' ,fixed:"right", align: 'center' ,width:200}
])
  
const vdata : any =  reactive({
  isAdd: true, // 新增 or 修改
  isShow: false,
  visibleShop: false, // 抽屉开关
  visible: false, // 抽屉开关
  appId: '', // 应用AppId
  saveObject: {}, // 数据对象
  viewInfo: {}, // 数据对象
  btnLoading:false,
  sysRSA2PublicKey: '', 
  shopInfo:{},
  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 addRelevance(){
  $infoBox.confirmPrimary('是否重置并一键关联商户？', '', () => {
    req.add(API_APP_SHOP_LIST_RELEVANCE, { appId: vdata.appId }).then(data => {
         console.log(data,'resresres')  
         $infoBox.message.success('关联成功')  
         queryFunc()    
      })
    })
}
function  queryFunc () {
    vdata.btnLoading = true
    paywayTable.value.refTable(true)
  }
function searchFunc () { // 点击【查询】按钮点击事件
  paywayTable.value.refTable(true)
}

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_SHOP_LIST_STATUS, { productId: productId,state:state,appId:vdata.appId }).then(data => {
         console.log(data,'resresres')  
         $infoBox.message.success(data)  
         queryFunc()    
      })
    })
}

  function shopFunc(data){
    vdata.shopInfo = data
    vdata.visibleShop = true
  }
  function sendNotes(){
    req.add('', {
      remark:vdata.notes.value,
      applyId:vdata.notes.appid
    }).then(msg => {
         console.log(msg,'resresres')  
         $infoBox.message.success('编辑成功')  
         searchFunc() // 更新列表    
         vdata.visibleShop = false
      })
  }
  
function  reqPaywayTableDataFunc (params) {
  // params.state = 3  as any
  params.mchAppId = vdata.appId
  return req.list(API_APP_SHOP_LIST, Object.assign(params))
}
function  handleCancel (e) {
  vdata.visibleNotes = false
}
// 表单提交
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>

