<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="resetFunc">
        <!-- 时间搜索控件 -->
        <a-form-item label="" class="table-search-item">
          <JeepayDateRangePicker ref="dateRangePicker" v-model:value="vdata.searchData['queryDateRange']"
                                 customDateRangeType="date" />
        </a-form-item>
        <jeepay-text-up v-model:value="vdata.searchData['modifyApplyId']" :placeholder="'申请单号'" />
        <jeepay-text-up v-model:value="vdata.searchData['mchShortName']" :placeholder="'商户号/商户名称'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData.modifyApplyType" placeholder="申请单类型">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="1">基本资料变更</a-select-option>
            <a-select-option value="2">结算信息变更</a-select-option>
            <a-select-option value="3">费率信息变更</a-select-option>
            <a-select-option value="6">结算类型变更</a-select-option>
          </a-select>
        </a-form-item>
        <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="3">驳回</a-select-option>
            <a-select-option value="5">待签约</a-select-option>
          </a-select>
        </a-form-item>
      </JeepaySearchForm>

      <!-- 列表渲染 -->
      <JeepayTable
          ref="infoTable"
          :init-data="true"
          :req-table-data-func="reqTableDataFunc"
          :table-columns="tableColumns"
          :search-data="vdata.searchData"
          row-key="mchName"
          @btnLoadClose="btnLoading=false"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'state'">
            <a-badge v-if="record.state == 0" status="default" text="草稿" />
            <a-badge v-if="record.state == 1" status="warning" text="审核中" />
            <a-badge v-if="record.state == 2" status="success" text="审核成功" />
            <a-badge v-if="record.state == 3" status="error" text="驳回" />
            <a-badge v-if="record.state == 4" status="processing" text="操作未完成" />
            <a-badge v-if="record.state == 5" status="processing" text="待签约" />
            <!--						<a-badge v-if="record.state == 7" status="processing" text="等待预审" />-->
            <!--						<a-badge v-if="record.state == 8" status="processing" text="预审拒绝" />-->
            <!--						<a-badge v-if="record.state == 20" status="error" text="已风控" /> -->
            <!--						<a-badge v-if="record.state == 21" status="error" text="已冻结" /> -->

            <link-outlined v-if="record.state == 5 || record.state == 6"  @click="oauthFuncButton(record)"  style="font-size: 16px; padding-left: 5px;color: #1965FF" />
            <reload-outlined  @click="queryChannelState(record, record.state)"   style="color: #1890ff; margin-left: 10px"  v-if="record.state == 5" />
            <a-tooltip v-if="record.state == 3" :title="record.applyErrorInfo">
              <info-circle-outlined style="color:#F00;margin-left: 5px"/>
            </a-tooltip>
            <a-tooltip v-if="record.state == 9" title="次日生效">
              <info-circle-outlined style="color:#F00;margin-left: 5px"/>
            </a-tooltip>
            <a-tooltip v-if="record.state == 4" title="操作未完成，请联系平台">
              <info-circle-outlined style="color:#F00;margin-left: 5px"/>
            </a-tooltip>

<!--            <link-outlined v-if="record.state == 5"  @click="oauthFuncButton(record.applyId)"  style="font-size: 16px; padding-left: 5px;color: #1965FF" />-->
<!--            <reload-outlined  @click="queryChannelState(record.queryChannelState, record.state)"   style="color: #1890ff; margin-left: 10px"  v-if="record.state == 5" />-->
          </template>


          <template v-if="column.key === 'modifyApplyType'">
            <a-tag
                :key="record.modifyApplyType"
                :color="record.modifyApplyType === 1?'blue':record.modifyApplyType === 2?'orange':record.modifyApplyType === 3?'green':record.modifyApplyType === 6?'green':record.modifyApplyType === 7?'cyan':'volcano'"
            >
              {{ record.modifyApplyType === 1?'基本资料变更':record.modifyApplyType === 2?'结算信息变更':record.modifyApplyType === 3?'费率信息变更':record.modifyApplyType === 6?'结算类型变更':record.modifyApplyType === 7?'退款账户绑定':'其他' }}
            </a-tag>
          </template>

          <template v-if="column.key === 'operation'">
            <JeepayTableColumns>
              <a-button  type="link" @click="showModal(record)"  v-if="record.state ==1">审核</a-button>
              <a-button  type="link" @click="getChanageDetailFunc(record.modifyApplyId,record.applyId)"  >详情</a-button>
            </jeepaytablecolumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>

    <a-modal
        v-model:visible="visibleStatus"
        title="审核"
        ok-text="确认"
        cancel-text="取消"
        @ok="hideModal"
    >
      <a-form ref="infoFormModel" :model="vdata.info"  class="edit-box" :rules="saveRule">
        <a-row  justify="space-between" type="flex">
          <a-col :span="24">
            <a-form-item label="审核状态">
              <a-radio-group v-model:value="vdata.info.state">
                <a-radio :value="false">审核驳回</a-radio>
                <a-radio :value="true">审核成功</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="备注">
              <a-input v-model:value="vdata.info.remark" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
    <!-- 详情页面组件  -->
    <JeepMchApplyChangeDetail ref="infoDetail" :callback-func="searchFunc" />
    <SigningConfig ref="signingConfigRef" v-show="vdata.visibleSigningConfig" />
  </page-header-wrapper>
</template>
<script setup lang="ts">

import {
  API_URL_MCH_MODIFY_APPLYMENT_AUDIT,
  API_URL_MCH_MODIFY_APPLYMENT_LIST,
  API_URL_PRODUCT_EXAMINEE_CHECK,
  $getMchApplymentsModifyApplyId,
  $getMerchantChangeModifyApply,
  req,
  reqLoad
} from '@/api/manage'

import { ref, reactive, onMounted,getCurrentInstance  } from 'vue'
import router from '@/router'
import { Modal } from 'ant-design-vue';
import { AnyARecord } from 'dns';
import SigningConfig from "./SigningConfig.vue";

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties;
const infoTable = ref()
let tableColumns = reactive([
  { key: 'modifyApplyType', dataIndex: 'modifyApplyType', title: '申请单类型' },
  { key: 'modifyApplyId', title: '申请单号', dataIndex: 'modifyApplyId', },
  { key: 'applyId', title: '商户号', dataIndex: 'applyId', },
  { key: 'mchShortName', title: '商户简称', dataIndex: 'mchShortName', },
  { key: 'state', title: '申请单状态', fixed: 'right',},
  { key: 'createdAt', dataIndex: 'createdAt', title: '申请时间', },
  { key: 'operation', title: '操作', fixed: 'right', align: 'center' }
])
const infoFormModel = ref()
const signingConfigRef = ref()
const dateRangePicker = ref()
const saveRule = {
  state: [{ required: true, message: '请选择审核状态', trigger: 'blur' }],
  remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
}
let btnLoading = ref(false)
let state = ref()
let stateDesc = ref()
let priceDesc = ref()
let infoDetail = ref()
let imgDesc = ref()
let logId = ref('')
const vdata = reactive({
  visibleSigningConfig:false,
  searchData: {} as any,
  info:{} as any,
  searchFrom: {} as any
})
let visibleStatus = ref(false)
function showModal (data){
  vdata.info = {
    modifyApplymentId:data.modifyApplyId,
    state:data.state,
    remark:data.remark,
  }
  visibleStatus.value = true;
}
function hideModal (){
  checkSave()
}
const resetFunc = () => {
  dateRangePicker.value.returnSelectModel()
  vdata.searchData = {}
}
function checkSave () {

  infoFormModel.value.validate().then(() => {
    req.add(API_URL_MCH_MODIFY_APPLYMENT_AUDIT, vdata.info).then(res => {
      visibleStatus.value = false;
      queryFunc()
    }).catch(err => {
      queryFunc()
    })
  })
}

function getChanageDetailFunc(recordId : any,applyId:any) { // 进件详情页


  infoDetail.value.show(recordId,applyId)
}
function queryFunc () {
  btnLoading.value = true
  infoTable.value.refTable(true)
}
// 请求table接口数据
function reqTableDataFunc(params: any) {
  return req.list(API_URL_MCH_MODIFY_APPLYMENT_LIST, params)
}

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

// 查询最新状态
function queryChannelState(record, currState) {
  $getMchApplymentsModifyApplyId(record.modifyApplyId).then((res) => {
    let str ='modifyApplyType='+vdata.searchData.modifyApplyType+'&mchApplyId='+record.modifyApplyId
    $getMerchantChangeModifyApply(str).then((resData) => {
      if (currState != resData.state) {
        $infoBox.message.success("状态已更新");
        searchFunc(); // 更新列表
      } else {
        $infoBox.message.info("状态无变化");
      }
    })
  });
}
//签约
function oauthFuncButton(data){
  vdata.visibleSigningConfig = true;
  signingConfigRef.value.show(data);
}
</script>
