<!--
  历史记录的通用组件， 可抽屉可 页面 

  @author terrfly
  @site https://www.jeequan.com
  @date 2022/03/23 20:23
-->
<template>
  <div>
    <a-card class="table-card">
      <JeepaySearchForm v-if="props.showSearch" :searchFunc="searchFunc" :resetFunc="resetFunc">
        <a-form-item label="" class="table-search-item">
          <JeepayDateRangePicker
            ref="dateRangePicker"
            v-model:value="vdata.searchData['queryDateRange']"
            customDateRangeType="dateTime"
          />
        </a-form-item>
        <a-form-item v-if="props.showAllSearch" label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData['infoType']" placeholder="角色类型">
            <a-select-option value="">全部</a-select-option>
            <a-select-option value="PLATFORM">运营平台</a-select-option>
            <a-select-option v-if="$hasAgentEnt()" value="AGENT">代理商</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item v-if="props.showAllSearch" label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData['bizType']" 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="4">人工调账</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item v-if="props.showAllSearch" label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData['opAccountType']" 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>
        </a-form-item>

        <jeepay-text-up v-if="props.showAllSearch" v-model:value="vdata.searchData['infoId']" :placeholder="'角色ID'" />
        <jeepay-text-up v-model:value="vdata.searchData['hid']" :placeholder="'流水号'" />
        <jeepay-text-up v-model:value="vdata.searchData['relaBizOrderId']" :placeholder="'关联订单号'" />
      </JeepaySearchForm>
      <!-- 列表渲染 -->
      <JeepayTable
        ref="infoTable"
        :init-data="false"
        :req-table-data-func="reqTableDataFunc"
        :table-columns="tableColumns"
        :search-data="vdata.searchData"
        row-key="hid"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'infoId'">
            <span v-if="record.infoType == 'AGENT' && $hasAgentEnt()">代理商： {{ record.infoName }}({{ record.infoId }})</span>

            <span v-if="record.infoId == 'PLATFORM_INACCOUNT'">运营平台入账账户</span>

            <span v-if="record.infoId == 'PLATFORM_PROFIT'">运营平台利润账户</span>
          </template>

          <template v-if="column.key === 'bizType'">
            <span v-if="record.bizType == 1">订单佣金计算</span>
            <span v-if="record.bizType == 2">退款轧差</span>
            <span v-if="record.bizType == 3">佣金提现</span>
            <span v-if="record.bizType == 4">人工调账</span>
          </template>

          <template v-if="column.key === 'opBeforeAmount'">
            <span>{{ record.opBeforeAmount / 100 }}</span>
          </template>
          <template v-if="column.key === 'opAmount'">
            <span>{{ record.opAmount / 100 }}</span>
          </template>
          <template v-if="column.key === 'opAfterAmount'">
            <span>{{ record.opAfterAmount / 100 }}</span>
          </template>
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button type="link" @click="detailFunc(record.hid)">详情</a-button>
            </JeepayTableColumns>
          </template>
        </template>
      </JeepayTable>
    </a-card>
    <!-- 详情页面组件  -->
    <InfoDetail ref="infoDetail" :callback-func="searchFunc" />
  </div>
</template>
<script setup lang="ts">

import { API_URL_WALLET_HISTORY_LIST, req, reqLoad } from '@/api/manage'
import InfoDetail from './Detail.vue'
import { ref, reactive, defineProps, getCurrentInstance, onMounted } from 'vue'
const { $infoBox,$access, $hasAgentEnt } = getCurrentInstance()!.appContext.config.globalProperties

// 定义父组件的传值
const props = defineProps({
  defaultQueryCondition: { type: Object, default: () => {}  }, // 查询集合的条件
  showSearch: { type: Boolean, default: true }, //是否显示搜索面板
  showAllSearch: { type: Boolean, default: true } //是否显示搜索面板上的所有内容,如果是false，仅显示日期和流水号
})

const infoDetail = ref()

const infoTable = ref()

let tableColumns = reactive([
  { key: 'hid', title: '流水号', fixed: 'left', dataIndex: 'hid' },
  { key: 'bizType', title: '业务类型', dataIndex: '业务' },
  { key: 'infoId', title: '角色名称', dataIndex: 'infoId' },
  { key: 'opBeforeAmount', title: '变动前账户余额', dataIndex: 'opBeforeAmount' },
  { key: 'opAmount', title: '变动金额', dataIndex: 'opAmount' },
  { key: 'opAfterAmount', title: '变动后账户余额', dataIndex: 'opAfterAmount' },
  { key: 'relaBizOrderId', title: '关联订单号', dataIndex: 'relaBizOrderId' },
  { key: 'createdAt', title: '时间', dataIndex: 'createdAt' },
  { key: 'operation', title: '操作',  fixed: 'right', align: 'center'}
])
const dateRangePicker = ref()
const vdata : any = reactive({
  searchData : { queryDateRange: 'today' }
})

onMounted(() => {
  Object.assign(vdata.searchData, props.defaultQueryCondition)
  infoTable.value.refTable(true)
})

function resetFunc() {
  dateRangePicker.value.returnSelectModel()
  vdata.searchData = { queryDateRange: 'today', infoType: 'PLATFORM', opAccountType: 1 }
}

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

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

function detailFunc (recordId: any) { // 钱包流水详情页
  infoDetail.value.show(recordId)
}
</script>
