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

  @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>
        <jeepay-text-up v-model:value="vdata.searchData['flowNo']" :placeholder="'流水号'" />
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData['accountType']" 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="3">钱包账户</a-select-option>
            <a-select-option :value="2">虚拟银行</a-select-option>
            <a-select-option :value="4">手续费</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData['changeType']" 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="4">抵扣</a-select-option>
          </a-select>
        </a-form-item>

      </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 === 'beforeAmt'">
            ￥{{ record.beforeAmt ? (record.beforeAmt/100).toFixed(2) : 0 }}
          </template>
          <template v-if="column.key === 'changeAmt'">
            ￥{{ record.changeAmt ? (record.changeAmt/100).toFixed(2) : 0 }}
          </template>
          <template v-if="column.key === 'afterAmt'">
            ￥{{ record.afterAmt ? (record.afterAmt/100).toFixed(2) : 0 }}
          </template>

          <template v-if="column.key === 'changeType'">
            <a-tag
                :key="record.changeType"
                :color="record.changeType === 0?'blue':record.changeType === 1?'orange':record.changeType === 2?'green':record.changeType === 6?'':'volcano'"
            >
              {{ record.changeType === 0?'充值':record.changeType === 1?'提现':record.changeType === 2?'转账':record.changeType === 3?'退款':record.changeType === 4?'抵扣':'未知' }}
            </a-tag>
          </template>
          <template v-if="column.key === 'accountType'">
            <a-tag
                :key="record.accountType"
                :color="record.accountType === 0?'red':record.accountType === 1?'orange':record.accountType === 2?'blue':record.accountType === 6?'':'volcano'"
            >
              <!--              {{ record.accountType === 4?'手续费账户':record.accountType === 3?'钱包账户':record.accountType === 1?'营销账户':record.accountType === 2?'虚拟银行':record.accountType === 0?'退款账户':'未知' }}-->

              {{record.accountTypeDesc }}
            </a-tag>
          </template>
          <template v-if="column.key === 'changeMethod'">
            <a-tag
                :key="record.changeMethod"
                :color="record.changeMethod === -1?'red':record.changeMethod === 0?'blue':record.changeMethod === 1?'orange':record.changeMethod === 2?'green':record.changeMethod === 6?'orange':'volcano'"
            >
              {{record.changeMethodDesc }}
            </a-tag>
          </template>
          <template v-if="column.key === 'state'">
            <!--            1处理中 2成功  -1失败-->
            <a-tag v-if="record.state == 1" color="warning">{{ record.stateDesc }}</a-tag>
            <a-tag v-if="record.state == 2" color="success">{{ record.stateDesc }}</a-tag>
            <a-tag v-if="record.state == 3" color="processing">{{ record.stateDesc }}</a-tag>
            <a-tag v-if="record.state == -1" color="error">{{ record.stateDesc }}</a-tag>
            <a-tooltip v-if="record.state == -1"    :title="record.remark" >
              <info-circle-outlined style="color: #FFD080;margin-left: 10px"/>
            </a-tooltip>
          </template>
          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button type="link" @click="detailFunc(record)">详情</a-button>
            </JeepayTableColumns>
          </template>

        </template>
      </JeepayTable>
    </a-card>
    <!-- 详情页面组件  -->
    <InfoDetail ref="infoDetail" :callback-func="searchFunc" />
  </div>
</template>
<script setup lang="ts">

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

// 定义父组件的传值
const props = defineProps({
  defaultQueryCondition: { type: Object, default: () => {}  }, // 查询集合的条件
  showSearch: { type: Boolean, default: true } //是否显示搜索面板
})

const infoDetail = ref()

const infoTable = ref()

let tableColumns = reactive([
  { key: 'flowNo', title: '流水号', dataIndex: 'flowNo',  },
  { key: 'accountType', title: '账户类型', dataIndex: 'accountType',  },
  { key: 'changeMethod', title: '变动方式', dataIndex: 'changeMethod' , },
  // { key: 'accountNo', title: '账户号', dataIndex: 'accountNo',  },
  { key: 'beforeAmt', title: '变动前账户余额', dataIndex: 'beforeAmt',  },
  { key: 'changeAmt', title: '变动金额', dataIndex: 'changeAmt',  },
  { key: 'afterAmt', title: '变动后账户余额', dataIndex: 'afterAmt' ,  },
  { key: 'changeType', title: '变动类型', dataIndex: 'changeType',  },
  // { key: 'state', title: '状态', dataIndex: 'state' , },
  { key: 'remark', title: '备注',dataIndex: 'remark' },
  { key: 'updatedAt', title: '时间', dataIndex: 'updatedAt' , width: 200,},
])
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', opAccountType: 1 }
}

  // 请求table接口数据
  function reqTableDataFunc(params: any) {
    return req.list(API_MCH_ACCOUNT_CHANGE_LOG_LIST, params)
    }
  function searchFunc () { // 点击【查询】按钮点击事件
      infoTable.value.refTable(true)
    }

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