<template>
  <page-header-wrapper>
    <a-card class="table-card">
      <JeepaySearchForm :searchFunc="searchFunc" :resetFunc="onReset">
        <jeepay-text-up v-model:value="searchData['nickname']" :placeholder="'微信昵称'" />
      </JeepaySearchForm>
      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :init-data="true"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="searchData"
        row-key="userId"
        @btnLoadClose="btnLoading=false"
      >
        <template #topBtnSlot>
          <a-button v-if="$access('ENT_MCH_WXMP_USER_ADD')" type="primary" @click="addFunc"><plus-outlined />新建接收人</a-button>
        </template>

        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'sendStatus'">
            <JeepayTableColState :state="record.sendStatus" :showSwitchType="$access('ENT_MCH_WXMP_USER_EDIT')" :onChange="(sendStatus) => { return updateState(record.userId, sendStatus)}" />
          </template>

          <template v-if="column.key === 'operation'">
            <a-button v-if="$access('ENT_MCH_WXMP_USER_DELET')" type="link" style="color: red" @click="delFunc(record.userId)">删除</a-button>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 新增页面组件  -->
    <InfoAddOrEdit ref="infoAddOrEdit" :callbackFunc="searchFunc" />
  </page-header-wrapper>
</template>
<script setup lang="ts">
import { API_URL_MCH_WXMP_UESR, req, reqLoad } from '@/api/manage'
import InfoAddOrEdit from './AddOrEdit.vue'
import { ref, reactive, getCurrentInstance } from 'vue'


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


const infoAddOrEdit = ref()
const infoTable = ref()
let tableColumns = reactive([
  { key: 'nickname', fixed: 'left', title: '微信昵称', dataIndex: 'nickname'},
  { key: 'wxOpenId', title: 'openId', dataIndex: 'wxOpenId', },
  { key: 'wxAppId', title: 'appId', dataIndex: 'wxAppId'},
  { key: 'sendStatus', title: '状态' },
  { key: 'createdAt', dataIndex: 'createdAt', title: '创建日期',},
  { key: 'operation', title: '操作', fixed: 'right', align: 'center'}
])

  let btnLoading = ref(false)
  let searchData = ref({})

  function reqTableDataFunc(params: any) { // 请求table接口数据
    return req.list(API_URL_MCH_WXMP_UESR, params)
  }
  function searchFunc () { // 点击【查询】按钮点击事件
    btnLoading.value = true
    infoTable.value.refTable(true)
  }
  function addFunc () { // 业务通用【新增】 函数
    infoAddOrEdit.value.show()
  }
  function updateState (recordId, state) { // 【更新状态】
    return new Promise<void>((resolve, reject) => {
      $infoBox.confirmDanger('确认修改？', '', () => {
        return reqLoad.updateById(API_URL_MCH_WXMP_UESR, recordId, { sendStatus: state }).then(res => {
          searchFunc()
          resolve()
        }).catch(err => reject(err))
      },
        () => {
        reject(new Error())
      })
    })
  }
  
  function delFunc (recordId: any) { // 业务通用【删除】 函数
    $infoBox.confirmDanger('确认删除？', '', () => {
        reqLoad.delById(API_URL_MCH_WXMP_UESR, recordId).then((res: any) => {
            infoTable.value.refTable(true)
            $infoBox.message.success('删除成功')
          })
    })
  }
  function onReset(){ //重置搜索内容
    searchData.value = {}
  }
</script>
