<template>
  <page-header-wrapper>
    <a-card v-show="vdata.tableType == 'table'">
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="() => { vdata.searchData= {} }">
        <jeepay-text-up v-model:value="vdata.searchData.appName" :placeholder="'应用名称'" />
        <jeepay-text-up v-model:value="vdata.searchData.appId" :placeholder="'应用ID'" />
        <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>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.range" 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>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :initData="true"
        :reqTableDataFunc="reqTableDataFunc"
        :tableColumns="tableColumns"
        :searchData="vdata.searchData"
        rowKey="appId"
        @btnLoadClose="vdata.btnLoading=false"
      >
        <template #topBtnSlot>
          <div>
<!--            <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>
          </div>
        </template>
        <template #bodyCell="{column,record}">
          <template v-if="column.key == 'appId'">
            <b>{{ record.appId }}</b>
          </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 === '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: #F00;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 == 'op'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button   type="link" @click="showLookModal(record)" v-if="record.state != -1 && record.range == 1" >查看</a-button>
              <a-button   type="link" @click="showLookModal(record,2)" v-if="record.state == -1" >修改</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  type="link" @click="ShopFunc(record.appId)" v-if="record.turnsPay == 'Y'">关联商户</a-button>-->
              <!-- <a-button v-if="userStore.userInfo.mchType == '2' && $access('ENT_MCH_APP_PAY_CONFIG')" type="link" @click="jeepayOauth2ConfigDrawer.show(record.appId, true)">小程序支付配置</a-button> -->
<!--              <a-button v-if="userStore.userInfo.mchType == '1' && $access('ENT_MCH_APP_PAY_CONFIG') && record.state !== 2 && record.state !== -1" type="link" @click="jeepayOauth2ConfigDrawer.show(record.appId, false)">oauth2</a-button>-->
<!--              <a-button v-if="$access('ENT_MCH_APP_PAY_CONFIG') && record.state !== 2 && record.state !== -1" type="link" @click="showPayIfConfigList(record.appId)">支付配置</a-button>-->
              <a-button v-if="$access('ENT_MCH_APP_PAY_CONFIG') && record.state !== 2 && record.state !== -1" type="link" @click="productFunc(record.appId)">产品绑定</a-button>
              <a-button v-if="$access('ENT_MCH_APP_PAY_CONFIG') && record.state !== 2 && record.state !== -1" type="link" @click="caseFunc(record.appId)">方案绑定</a-button>
              <a-button v-if="$access('ENT_MCH_APP_SIGN') && record.state !== 2 && record.state !== -1 && record.range == 1" type="link"   @click="signFunc(record.appId)">签名配置</a-button>
              <a-button v-if="$access('ENT_MCH_PAY_TEST') && record.state !== 2 && record.state !== -1" type="link">
                <router-link :to="{name:'ENT_MCH_PAY_TEST', params:{appId:record.appId}}">
                  支付测试
                </router-link>
              </a-button>
<!--              <a-button v-if="$access('ENT_MCH_TRANSFER') && record.state !== 2 && record.state !== -1" type="link">-->
<!--                <router-link :to="{name:'ENT_MCH_TRANSFER', params:{appId:record.appId}}">-->
<!--                  发起转账-->
<!--                </router-link>-->
<!--              </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" />
    <!-- 签名配置 -->
    <MchAppSignConfig ref="mchAppSignConfig" :callbackFunc="searchFunc" />
    <!-- 产品绑定 -->
    <MchAppProduct ref="mchAppProduct" :callbackFunc="searchFunc" />
    <!-- 关联商户 -->
    <MchAppShop ref="mchAppShop" :callbackFunc="searchFunc" />


    <!-- 费率配置页面  -->
    <JeepayPayConfigDrawer ref="jeepayPayWayFeeConfigDrawer" :configMode=" userStore.userInfo.mchType == '1' ? 'mchSelfApp1' : 'mchSelfApp2' " />

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

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

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

<script lang="ts" setup>
import { API_URL_MCH_APP, req } from '@/api/manage'
import MchAppAddOrEdit from './AddOrEdit.vue'
import MchAppSignConfig from './SignConfig.vue'
import MchAppProduct from './Product.vue'
import MchAppShop from './Shop.vue'
import {ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { useUserStore } from '@/store/modules/user'
import JeepayApplicationSave from "@/components/link/JeepayUIComponents/JeepayMchApplyment/JeepayApplicationSave.vue";
import {useRouter} from "vue-router";
const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

// store对象
const userStore = useUserStore()
const router = useRouter() //这是全部路由

const jeepayOauth2ConfigDrawer = ref()
const jeepayApplicationSave = ref()

// eslint-disable-next-line no-unused-vars
const tableColumns = reactive([
  { key: 'appName',fixed: 'left',  title: '应用名称', dataIndex: 'appName' },
  { key: 'appId', title: '应用ID', },
  { key: 'range', title: '应用类型',},
  { key: 'state', title: '应用状态',},
  // { key: 'defaultFlag', title: '默认',},
  { key: 'createdAt', title: '创建日期', dataIndex: 'createdAt',},
  { key: 'op', title: '操作', fixed: 'right', align: 'center' }
])

  const jeepayPayWayFeeConfigDrawer = ref()
  const mchAppAddOrEdit = ref()
  const mchAppSignConfig = ref()
  const mchAppProduct = ref()
  const mchAppShop = ref()
  const infoTable = ref()

  const vdata = reactive({
    tableType:'table',
    btnLoading: false,
    tableColumns: tableColumns,
    searchData: {} as any
  })

  function  queryFunc () {
    vdata.btnLoading = true
    infoTable.value.refTable(true)
  }

  // 请求table接口数据
  function reqTableDataFunc(params){
    return req.list(API_URL_MCH_APP, params)
  }

  function searchFunc () { // 点击【查询】按钮点击事件
    infoTable.value.refTable(true)
  }

  function addFunc() { // 业务通用【新增】 函数
    mchAppAddOrEdit.value.show()
  }

  function editFunc (recordId) { // 业务通用【修改】 函数
    mchAppAddOrEdit.value.show(null, recordId)
  }

  function signFunc (recordId) { // 业务通用【修改】 函数
    mchAppSignConfig.value.show(recordId)
  }
  function productFunc (recordId) { // 产品绑定
    // mchAppProduct.value.show(recordId)

    router.push({
      path:'/productCenter',
    })
  }
function caseFunc (recordId) { // 方案绑定
  router.push({
    path:'/markets',
  })
}
  function ShopFunc (recordId) { // 产品绑定
    mchAppShop.value.show(recordId)
  }
  
  
  function delFunc (appId) { 
    $infoBox.confirmDanger('确认删除？', '', () => {
      req.delById(API_URL_MCH_APP, appId).then(res => {
        $infoBox.message.success('删除成功！')
        searchFunc()
      })
    },() => {
      console.log(1111)
    })
  }

  function showPayIfConfigList(recordId) { // 支付参数配置
    jeepayPayWayFeeConfigDrawer.value.show(recordId)
  }
 function  getAddFunc(type){
    vdata.tableType  = type
   jeepayApplicationSave.value.show()
 }

 function getMchAppSave(e){
   if(e.type == 1){
     vdata.tableType  = e.tableType
     queryFunc()
   }

 }
function showLookModal(record,type=1){
  vdata.tableType  = 'appSaveEdit'
  jeepayApplicationSave.value.show(record,type)
}
</script>

<style lang="less" scoped>
</style>
