<!--
  配置商户通道 组件

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/04/06 10:14
-->

<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row :gutter="10">
        <a-col :span="8">
          <a-form-item label="">
            <a-input v-model:value="vdata.searchData.wayCode" placeholder="支付方式代码" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="">
            <a-input v-model:value="vdata.searchData.wayName" placeholder="支付方式名称" />
          </a-form-item>
        </a-col>
        <a-col :sm="6">
          <span class="table-page-search-submitButtons">
            <a-button type="primary" :loading="vdata.btnLoading" @click="searchFunc"><search-outlined />查询</a-button>
            <a-button style="margin-left: 8px" @click="() => vdata.searchData = {}"><reload-outlined />重置</a-button>
          </span>
        </a-col>
      </a-row>
    </a-form>
  </div>
  <div v-if="vdata.appId" class="table-box">
    <!-- 列表渲染 -->
    <JeepayTable
      ref="paywayTable"
      class="table-item"
      :initData="true"
      :searchData="vdata.searchData"
      :reqTableDataFunc="reqPaywayTableDataFunc"
      :tableColumns="paywayTableColumns"
      rowKey="wayCode"
      :scrollX="500"
      :topRowIsShow="false"
      :rowSelection="{ type: 'radio',selectedRowKeys: [vdata.currentWayCode], onChange: selectWaycodeFunc }"
    >
      <template #bodyCell="{column,record}">
        <template v-if="column.key == 'wayCode'">
          {{ record.wayName }} （{{ record.wayCode }}）
        </template>
        <template v-if="column.key == 'isConfig'">
          <a-badge :status="record.isConfig === 0?'error':'processing'" :text="record.isConfig === 0 ? '未配置':'已配置'" />
        </template>
      </template>
    </JeepayTable>

      
    <!-- 列表渲染 -->
    <JeepayTable
      v-if="vdata.currentWayCode"
      ref="interfaceTable"
      class="table-item"
      :initData="false"
      :topRowIsShow="false"
      :reqTableDataFunc="reqInterfaceTableDataFunc"
      :tableColumns="interfaceTableColumns"
      rowKey="rowKey"
      :scrollX="300"
    >
      <template #bodyCell="{column,record}">
        <template v-if="column.key == 'ifName'">
          <div class="if-name">
            <div class="back" :style="{ background: record.bgColor }">
              <img :src="record.icon" alt="">
            </div>
            <div>{{ record.ifName }}</div>
          </div>
        </template>  

        <template v-if="column.key == 'rateFee'">
          <JeepayPaywayItem :value="record.paywayFee" :readonly="true" :prcessValRate="true" />
        </template>

        <template v-if="column.key == 'configState'">
          <JeepayTableColState :state="record.configState" :show-switch-type="true" :on-change="(state) => { return updateState(record.ifCode, state)}" />
        </template>
      </template>
    </JeepayTable>
  </div>
</template>

<script lang="ts" setup>
import { API_URL_MCH_PAYPASSAGE_LIST, $getAvailablePayInterfaceList, $updateMchPassageState, req } from '@/api/manage'
import { reactive,getCurrentInstance, ref, onMounted, nextTick } from 'vue'
import { genRowKey } from '@/utils/util'

const { $access, $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const paywayTable = ref()
const interfaceTable = ref()


// 定义父组件的传值
const props : any = defineProps({
 
  infoId: { type: String, default: '' }, // 当前配置的所属infoId
  configMode: { type: String, default: '' },   // 模式

})


// 支付方式（左侧）的列表
const paywayTableColumns = reactive([
  { key: 'wayCode', title: '支付方式代码', dataIndex: 'wayCode' ,maxWidth:200},
  { key: 'isConfig', title: '状态', }
])


// 支付方式（右侧）的列表
const interfaceTableColumns = reactive([
 
  { key: 'ifName', title: '通道名称', dataIndex: 'ifName',minWidth: 100, width: 150, maxWidth: 200 },
  { key: 'rateFee', title: '费率' ,minWidth: 100, width: 150, maxWidth: 200  },
  { key: 'configState', title: '状态',minWidth: 100, width: 150, maxWidth: 200  }
])

// 响应式数据
const vdata : any = reactive({
  appId: '', //当前的appId 
  currentWayCode: '', // 当前选择的支付方式
  searchData: {}
})


onMounted(() => {
  vdata.appId = props.infoId
})

// 请求支付通道数据
function  reqPaywayTableDataFunc (params) {
  return req.list(API_URL_MCH_PAYPASSAGE_LIST, Object.assign(params, { appId: vdata.appId }))
}

// 搜索
const searchFunc = function () { // 点击【查询】按钮点击事件
  paywayTable.value.refTable(true)
}

// 请求支付通道数据
function  reqInterfaceTableDataFunc (params) {

  return $getAvailablePayInterfaceList(vdata.appId, vdata.currentWayCode).then( res => {
    res.records.forEach(element => {
      element.rowKey = genRowKey()
    })
    return Promise.resolve(res)
  })
}


// 选择支付方式
function selectWaycodeFunc (selectedRowKeys) {
  vdata.currentWayCode = selectedRowKeys[0] 
  nextTick(() => {
    interfaceTable.value.refTable(true)  
  })
  
}

/** 更新状态  */
function  updateState (ifCode, state) { // 【更新状态】

    const title = state === 1 ? '确认[启用]该通道？' : '确认[停用]该通道？'
    const content = state === 1 ? '启用后将会将其他通道关闭' : '停用后将无法正常支付'

    return $infoBox.confirmDangerPromise(title, content).then(resInfo => {

      return $updateMchPassageState(vdata.appId, vdata.currentWayCode, ifCode, state).then(res => {
        $infoBox.message.success('已配置')
        paywayTable.value.refTable(false)
        interfaceTable.value.refTable(true)
    })
  })
}


</script>

<style lang="less" scoped>
.table-box {
  display: flex;
  .table-item {
    
    width: 50%;
  } 
}
.if-name {
  display: flex;
 
  align-items: center;
  .back {
    margin-right: 20px;
    width: 30px;
    height: 30px;
    border-radius: 7px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width :16px;
      height: 16px;
    }
  }

}
/deep/ .ant-table-wrapper {
  margin: 0;
}
</style>