
<template>
  <div>
    <a-drawer
      v-model:visible="vdata.isShow" 
      title="报备管理"
      width="60%"
      :mask-closable="false"
      @close="vdata.isShow = false"
    >
      <a-checkbox style="margin-left:30px" @change="(e) => batchChecked(e.target.checked)">全选</a-checkbox>
      <a-button type="primary" @click="batchSend(1)">批量报备</a-button> &nbsp;
      <a-button type="primary" @click="batchSend(0)">批量注销</a-button> &nbsp;
      <br><br>
      <a-table :dataSource="vdata.tableDataSource" :columns="tableColumns" :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'batch'"><a-checkbox v-model:checked="record.checked" /></template>
          <template v-if="column.key === 'ifCode'">{{ record.ifName }}({{ record.ifCode }})</template>
          <template v-if="column.key === 'state'">
            <a-badge v-if="record.channelBindInfo.state == 0" status="default" text="未操作" /> 
            <a-badge v-if="record.channelBindInfo.state == 1" status="success" text="报备成功" /> 
            <a-badge v-if="record.channelBindInfo.state == 2" status="error" text="报备失败" /> 
            <a-tooltip v-if="record.channelBindInfo.state == 2" :title="record.channelBindInfo.errInfo">
              <info-circle-outlined />
            </a-tooltip>
          </template>

          <template v-if="column.key === 'info'">
            {{ record.channelBindInfo.channelTrmNo }}
          </template>

          <template v-if="column.key === 'op'">
            <a-button v-if="record.channelBindInfo.state == 0 || record.channelBindInfo.state == 2" type="link" @click="sendup(record.ifCode, 1)">报备</a-button>
            <a-button v-if="record.channelBindInfo.state == 1" type="link" @click="sendup(record.ifCode, 0)">注销</a-button>
            <a-button type="link" @click="showDiyDiv(record.ifCode, record.channelBindInfo)">自定义</a-button>
          </template>
        </template>
      </a-table>
    </a-drawer>

    <a-modal v-model:visible="vdata.isShowDiyDiv" title="自定义" :confirmLoading="vdata.confirmLoading" @ok="handleOkFunc">
      <a-form ref="infoDiyFormModel">
        <a-form-item label="状态">
          <a-radio-group v-model:value="vdata.diyModel.state">
            <a-radio :value="0">未操作</a-radio> <a-radio :value="1">报备成功</a-radio>  <a-radio :value="2">报备失败</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="参数">
          <a-textarea v-model:value="vdata.diyModel.channelTrmNo" />
        </a-form-item>
        <hr>
        <p style="color: indianred">注意: 若填写错误将有可能导致下单异常！ </p>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { req,  $getMchTermChannelBindInfos, $mchTermChannelSendup, $updMchTermChannelBindInfos }from '@/api/manage'
import { reactive, ref, nextTick, getCurrentInstance } from 'vue'

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

const tableColumns = [
  {key: 'batch', title: '选择', width: '70px' },
  {key: 'ifCode', title: '渠道', width: '270px'  },
  {key: 'state', title: '状态', width: '270px'  },
  {key: 'info', title: '渠道信息', width: '270px' },
  {key: 'op', title: '操作' },
          
]

const props = defineProps({
  callbackFunc: { type: Function, default: () => ({}) }
})

const vdata : any = reactive({

  isShow: false,
  isShowDiyDiv: false,
  confirmLoading: false, // 显示确定按钮loading图标
  recordId: null, // 更新对象ID
  tableDataSource: [],
  diyModel: {}, //自定义状态model 
})

function batchChecked(checked){
  vdata.tableDataSource.forEach(element => {
    element.checked = checked
  })
}

function batchSend(state){

  let ifCodeList : any = []

  vdata.tableDataSource.forEach(element => {

    if(!element.checked){ // 未选中
      return 
    }

    // 报备
    if(state == 1 && (element.channelBindInfo.state == 0 || element.channelBindInfo.state == 2)) {
      ifCodeList.push(element.ifCode)
    }

     // 注销
    if(state == 0 && element.channelBindInfo.state == 1 ) {
      ifCodeList.push(element.ifCode)
    }
  })

  if(ifCodeList.length < 1){
    return $infoBox.message.error('无可操作行！')
  }

  
  // 递归调用 报备接口
  let callSendupFunc = (index) => {

    if(index >= ifCodeList.length){ // 完成
      return Promise.resolve()
    }
    
    return sendup(ifCodeList[index], state, false).then(res => {
      index++
      return callSendupFunc(index)
    })

  }

  // 批量调用， 最后一个then更新 
  callSendupFunc(0).then(res => {
    $infoBox.message.success('批量操作完成')
    show(vdata.recordId)
  })

}


/** 报备 */
function sendup(ifCode, state, refFlag = true){

  return $mchTermChannelSendup(vdata.recordId, ifCode, state).then(res => {

    $infoBox.message.success(ifCode + ': 操作成功')
    if(refFlag){
      show(vdata.recordId) // 刷新页面
    }
  })

}


function handleOkFunc(){

   $updMchTermChannelBindInfos(vdata.recordId, vdata.diyModel).then((res) => {
     $infoBox.message.success('操作成功')
     show(vdata.recordId) // 刷新页面
     vdata.isShowDiyDiv = false
   })

  
}

function showDiyDiv(ifCode, model){

  vdata.diyModel = {ifCode: ifCode, state: model.state, channelTrmNo: model.channelTrmNo}
  vdata.isShowDiyDiv = true


}


// 显示 & 初始化地图
function show (recordId) { // 弹层打开事件

  vdata.recordId = recordId

  $getMchTermChannelBindInfos(recordId).then((res) => {
    
    vdata.tableDataSource = res
    vdata.isShow = true // 立马展示弹层信息

  })
 

}

defineExpose({show})
</script>
