<template>
  <page-header-wrapper>
    <a-card v-show="vdata.tableType == 'table'">
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData= {} }">
        <JeepaySearchInfoInput v-model:value="vdata.searchData['mchNo']" placeholder="用户号" :textUpStyle="true" :mchNoAndName="true" showType="MCH" />


        <jeepay-text-up v-model:value="vdata.searchData['appId']" :placeholder="'应用AppId'" />
        <jeepay-text-up v-model:value="vdata.searchData['appName']" :placeholder="'应用名称'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData['state']" placeholder="状态">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="0">禁用</a-select-option>
            <a-select-option value="1">启用</a-select-option>
            <a-select-option value="2">审核中</a-select-option>
            <a-select-option value="-1">审核驳回</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="false"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="appId"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
<!--          <a-button v-if="$access('ENT_MCH_APP_ADD')" type="primary" class="mg-b-30" @click="addFunc"><plus-outlined />新建</a-button>-->
          <a-button v-if="$access('ENT_MCH_APP_ADD')" type="primary" class="mg-b-30" @click="getAddFunc('appSaveEdit')"><plus-outlined />新建</a-button>

        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'appId'">
            <b>{{ record.appId }}</b>
          </template> <!-- 自定义插槽 -->
          <template v-if="column.key === 'state'">
            <a-badge status="error" text="禁用" v-if="record.state === 0"/>
            <a-badge status="processing" text="启用" v-if="record.state === 1"/>
            <a-badge status="warning" text="审核中" v-if="record.state === 2"/>
            <a-badge status="error" text="驳回" v-if="record.state === -1"/>
            <a-tooltip v-if="record.state == -1"    :title="record.stateDesc" >
              <info-circle-outlined style="color: #FFD080;margin-left: 10px"/>
            </a-tooltip>
          </template>

          <template v-if="column.key === 'defaultFlag'">
            <a-badge :status="record.defaultFlag === 0?'error':'processing'" :text="record.defaultFlag === 0?'否':'是'" />
          </template>
          <template v-if="column.key == 'range'">
            <a-tag v-if="record.range == 0" color="orange">线下场景</a-tag>
            <a-tag v-if="record.range == 1" color="green">线上场景</a-tag>

          </template>
          <template v-if="column.key === 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>

                <a-button v-if="record.state === 2" type="link" @click="showCheckModal(record)" >审核</a-button>
                <a-button v-if="record.state === 2" type="link" @click="showLookModal(record)" >查看</a-button>

                <a-button v-if="$access('ENT_MCH_APP_EDIT') && record.state !== 2 && record.state !== -1" type="link" @click="editFunc(record.appId)">修改</a-button>
<!--                <a-button v-if="$access('ENT_MCH_APP_PAY_CONFIG')  && record.state !== 2 && record.state !== -1" type="link" @click="showPayAbility(record)">功能配置</a-button>-->

                <a-button v-if="$access('ENT_MCH_APP_PAY_CONFIG') && record.state === 1" type="link" @click="mchConfigFunc(record)">高级功能配置</a-button>
<!--                <a-button v-if="$access('ENT_MCH_APP_PAY_CONFIG')  && record.state !== 2 && record.state !== -1" type="link" @click="showPayIfConfigList(record.appId, record.mchType == 2)">支付配置</a-button>-->
<!--                <a-button v-if="$access('ENT_MCH_APP_PAY_CONFIG') && record.mchType == 1  && record.state == 1" type="link" @click="jeepayOauth2ConfigDrawer.show(record.appId, record.mchType == 2)">oauth2</a-button>-->
                <a-button v-if="$access('ENT_MCH_APP_PAY_CONFIG') && record.mchType == 2  && record.state == 1" type="link" @click="jeepayOauth2ConfigDrawer.show(record.appId, record.mchType == 2)">小程序支付配置</a-button>
<!--                <a-button v-if="$access('ENT_MCH_APP_DEL')  && record.state !== 2 && record.state !== -1" type="link" style="color: red" @click="delFunc(record.appId)">删除</a-button>-->

            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增应用  -->
    <MchAppAddOrEdit ref="mchAppAddOrEdit" :callbackFunc="searchFunc" />

    <!-- 费率配置页面  -->
    <JeepayPayConfigDrawer ref="jeepayPayConfigDrawerRef" configMode="mgrMch" />

    <!-- oauth2配置  -->
    <JeepayOauth2ConfigDrawer ref="jeepayOauth2ConfigDrawer" configMode="mgrMch" />


    <MchAppPayAbility ref="mchAppPayAbility" :callbackFunc="searchFunc" />


    <a-card v-show="vdata.tableType == 'appSaveEdit'" style="background: #f0f2f5; ">
         <JeepayApplicationSave   ref="jeepayApplicationSave"  :configMode="'mgr'"  @itemRender="getMchAppSave" style="background: #f0f2f5; "/>
    </a-card>

    <a-modal
        v-model:visible="visibleStatus"
        title="审核"
        ok-text="确认"
        cancel-text="取消"
        @ok="hideModal"
    >
      <a-form ref="infoFormModel" :model="vdata.searchFrom"  class="edit-box">
        <a-row  justify="space-between" type="flex">
          <a-col :span="24">
            <a-form-item label="审核状态">
              <a-radio-group v-model:value="vdata.searchFrom.state">
                <a-radio value="-1">审核驳回</a-radio>
                <a-radio value="1">审核成功</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>

          <a-col :span="24">
            <a-form-item label="备注">
              <a-input v-model:value="vdata.searchFrom.stateDesc" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
    <!--用户配置  -->
    <MchAppConfig ref="mchAppConfigRef" />

  </page-header-wrapper>
</template>

<script setup lang="ts">
import {$getMchAppAudit, $getSysRSA2PublicKey, API_URL_MCH_APP, API_URL_PRODUCT_EXAMINEE_CHECK, req} from '@/api/manage'
import MchAppAddOrEdit from './AddOrEdit.vue'
import MchAppPayAbility from './payAbility.vue'
import MchAppConfig from './MchAppConfig.vue'
import {ref, reactive, onMounted, getCurrentInstance, provide,  computed} from 'vue'

import { useRoute } from 'vue-router'

const jeepayOauth2ConfigDrawer = ref()
const mchAppConfigRef = ref()


const tableColumns = reactive([
  { key: 'appId', title: '应用ID',  },
  { key: 'appName', title: '应用名称', dataIndex: 'appName', },
  { key: 'mchNo', title: '用户号', dataIndex: 'mchNo',  },
  { key: 'state', title: '应用状态',},
  { key: 'range', title: '应用类型',},
  // { key: 'defaultFlag', title: '默认',  },
  { key: 'createdAt', title: '创建日期', dataIndex: 'createdAt', },
  { key: 'op', title: '操作',   fixed: 'right', align: 'center' }
])

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

const infoTable = ref()
const jeepayApplicationSave = ref()

let visibleStatus = ref(false)
const vdata = reactive({
  tableType:"table",
  searchFrom:{state:"",stateDesc:"",appid:""},
  btnLoading: false,
  searchData: {},
  configMchAppIsIsvsubMch: false, // 配置商户应用是否是： 特约商户
})

// 向下注入： 是否当前配置的是 特约商户。
provide('configMchAppIsIsvsubMch', computed( () => vdata.configMchAppIsIsvsubMch))

const queryFunc = () => {

  vdata.btnLoading = true
  infoTable.value.refTable(true)
}

onMounted(() => {
  vdata.searchData['mchNo'] = useRoute().query.mchNo
  queryFunc()
})

// 请求table接口数据
  function reqTableDataFunc (params) {
    return req.list(API_URL_MCH_APP, params)
  }
  const searchFunc = function () { // 点击【查询】按钮点击事件
    infoTable.value.refTable(true)
  }

  const mchAppAddOrEdit = ref()
  const mchAppPayAbility = ref()
  const addFunc = function () { // 业务通用【新增】 函数
    mchAppAddOrEdit.value.show(vdata.searchData['mchNo'])
  }

  const editFunc = function (recordId) { // 业务通用【修改】 函数
    mchAppAddOrEdit.value.show(vdata.searchData['mchNo'], recordId)
  }
function mchConfigFunc (record: any) { // 配置 函数
  mchAppConfigRef.value.show(record)
}
  const delFunc = (appId) => {
    $infoBox.confirmDanger('确认删除？', '', () => {
      req.delById(API_URL_MCH_APP, appId).then(res => {
        infoTable.value.refTable(true)
        $infoBox.message.success('删除成功！')
        // $infoBox.searchFunc()
      })
    })
  }

  const jeepayPayConfigDrawerRef = ref()
  const showPayIfConfigList = function (recordId, configMchAppIsIsvsubMch) { // 支付参数配置

    vdata.configMchAppIsIsvsubMch = configMchAppIsIsvsubMch

    jeepayPayConfigDrawerRef.value.show(recordId)
  }

  function showPayAbility(record){
    mchAppPayAbility.value.show(record)
  }

function showLookModal(record){
  vdata.tableType  = 'appSaveEdit'
  jeepayApplicationSave.value.show(record)
}
function getMchAppSave(e){
  if(e.type == 1){
    vdata.tableType  = e.tableType
    queryFunc()
  }

}
function showCheckModal (data){
  vdata.searchFrom = {
    state:data.state,
    stateDesc:"",
    appid:data.appId,
  }
   visibleStatus.value = true;
}
function hideModal (){
  checkSave()
  visibleStatus.value = false;
}
function checkSave () {
  $getMchAppAudit(vdata.searchFrom).then((res) => {
    $infoBox.message.success('审核成功')
    queryFunc()
  })

}
function  getAddFunc(type){
  vdata.tableType  = type
  jeepayApplicationSave.value.show()
}
</script>
