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

  @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['orderId']" :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>
        </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>
        </a-form-item>
        <a-form-item label="" class="table-search-item">
          <a-select v-model:value="vdata.searchData['changeMethod']" 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="2">平台户退款</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="1">审核中</a-select-option>
            <a-select-option :value="2">打款中</a-select-option>
              <a-select-option :value="3">成功</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 === 'amount'">
            <a-popover placement="top" style="background: #0c2640 !important;">
              <template #content  style="background: #ff0 !important;">
                <p>实付金额：￥{{ (record.finalAmount / 100).toFixed(2) }}</p>
                <p>充值金额：￥{{ (record.amount / 100).toFixed(2) }}</p>
                <p>手续费：￥{{ (record.fee / 100).toFixed(2) }}</p>
              </template>
              <b style="color: #1890ff">￥{{ (record.finalAmount/100).toFixed(2) }} </b>
            </a-popover>
          </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?'退款':'未知' }}
            </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 === 3?'钱包账户':record.accountType === 1?'营销账户':record.accountType === 2?'虚拟银行':record.accountType === 0?'退款账户':'未知' }}
            </a-tag>
          </template>
          <template v-if="column.key === 'changeMethod'">
            <a-tag
                :key="record.changeMethod"
                :color="record.changeMethod === 0?'blue':record.changeMethod === 1?'orange':record.changeMethod === 2?'green':record.changeMethod === 6?'':'volcano'"
            >
              {{ record.changeMethod === 0?'扫码充值':record.changeMethod === 1?'对公转账':record.changeMethod === 2?'账户提现':record.changeMethod === 3?'平台户退款':'未知' }}
            </a-tag>
          </template>
          <template v-if="column.key === 'state'">
            <a-tag
                :key="record.state"
                :color="record.state === 0?'blue':record.state === 1?'orange':record.state === 2?'orange':record.state === 3?'green':record.state === -1?'red':'volcano'"
            >
              {{ record.state === 0?'订单生成':record.state === 1?'审核中':record.state === 2?'打款中':record.state === -1?'失败 ':record.state === 3?'成功':'未知' }}

            </a-tag>
            <a-tooltip v-if="record.state == -1"    :title="record.remark" >
              <info-circle-outlined style="color: red;margin-left: 5px"/>
            </a-tooltip>
          </template>

          <template v-if="column.key === 'operation'">
            <!-- 操作列插槽 -->
            <JeepayTableColumns>
              <a-button type="link" @click="changeFunc(record)" v-if="record.changeType == 1">详情</a-button>
              <a-button type="link" @click="checkFunc(record)" v-if="record.state == 1 && (record.changeMethod == 1 || record.changeMethod == 2)">处理</a-button>
            </JeepayTableColumns>
          </template>

        </template>
      </JeepayTable>
    </a-card>
    <!-- 详情页面组件  -->
  </div>
  <a-modal
      v-model:visible="vdata.visibleStatus"
      title="审核"
      ok-text="确认"
      cancel-text="取消"
      @ok="hideModal"
  >
    <a-form ref="infoFormModel" :model="vdata.searchFrom"  class="edit-box">
      <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="3" checked>通过</a-radio>
              <a-radio :value="-1">驳回</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="24" v-if="vdata.info.changeMethod === 2">
          <a-form-item label="打款方式">
            <a-radio-group v-model:value="vdata.info.mark">
              <a-radio value="0">手动打款</a-radio>
              <a-radio value="1">灵工打款</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>

  <template>
    <a-drawer
        width="50%"
        placement="right"
        :closable="true"
        :visible="vdata.visibleDetailStatus"
        :title="'详情'"
        @close="onClose"
    >
      <a-row justify="space-between" type="flex">
        <a-col :sm="12">
          <a-descriptions>
            <a-descriptions-item label="结算人名称">
              {{ vdata.detailData.settleName}}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :sm="12">
          <a-descriptions>
            <a-descriptions-item label="结算银行卡账号">
              {{ vdata.detailData.settleNo }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :sm="12">
          <a-descriptions>
            <a-descriptions-item label="开户行省市县">
              {{ vdata.detailData.bankCardAreaName }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :sm="12">
          <a-descriptions>
            <a-descriptions-item label="开户银行名称">
              {{ vdata.detailData.bankName }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
        <a-col :sm="12">
          <a-descriptions>
            <a-descriptions-item label="提现金额">
              ￥{{ (vdata.detailData.cashAmt / 100).toFixed(2) }}
            </a-descriptions-item>
          </a-descriptions>
        </a-col>
      </a-row>
    </a-drawer>
  </template>
</template>
<script setup lang="ts">

import {
  API_MCH_ACCOUNT_CHANGE_LOG_LIST,
  $getAccountChangeConfirm,
  req,
  reqLoad,
  API_URL_PRODUCT_EXAMINEE_CHECK, $getMchAppConfigAppCapability, API_MCH_ACCOUNT_FUND_LOG_LIST, $getAccountFundConfirm
} from '@/api/manage'

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 infoTable = ref()

let tableColumns = reactive([
  { key: 'changeType', title: '变动类型', dataIndex: 'changeType',  },
  { key: 'orderId', title: '流水号', dataIndex: 'orderId',  },
  { key: 'accountType', title: '账户类型', dataIndex: 'accountType',  },
  { key: 'mchNo', title: '用户信息', dataIndex: 'mchNo',  },
  { key: 'changeMethod', title: '变动方式', dataIndex: 'changeMethod' , },
  { key: 'amount', title: '金额', dataIndex: 'amount',  },
  { key: 'state', title: '状态', dataIndex: 'state' , },
  { key: 'remark', title: '备注',dataIndex: 'remark' },
  { key: 'updatedAt', title: '时间', dataIndex: 'updatedAt' , width: 200,},
  { key: 'operation', title: '操作',  fixed: 'right', align: 'center'}
])
const dateRangePicker = ref()
const vdata : any = reactive({
  visibleDetailStatus:false,
  visibleStatus:false,
  info:{},
  searchData : {} as any,
  detailData:{} as any,
})


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_FUND_LOG_LIST, params)
}

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

function hideModal (){
  checkSave()
  vdata.visibleStatus = false;
}

function checkFunc(data){
    vdata.info = {}
    vdata.info = {
      orderId:data.orderId,
      state:data.state,
      remark:data.auditRemark,
      changeType:data.changeType,
      changeMethod:data.changeMethod
    }
    vdata.visibleStatus = true;
}

function checkSave () {
  $getAccountFundConfirm(vdata.info).then((res) => {
    $infoBox.message.success('保存成功')
    searchFunc()
  })
}
function onClose () {
  vdata.visibleDetailStatus = false
}
function changeFunc(record){
  vdata.detailData = {}
  vdata.detailData = record.extra
  console.log(vdata.detailData,'record.extrarecord.extrarecord.extra')
  vdata.visibleDetailStatus = true
}
</script>
