<template>
  <!-- 充值审核 -->
  <div class="platinum_recharge_review_tab">
    <Filter @search="search" />
    <a-table :columns="columns" class="srcollYTable" :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }" :loading="loading" :pagination="false" :expandedRowKeys="expandedRowKeys" :customRow="Rowclick" :rowKey="(record,index)=>index" :data-source="tableList">
      <!-- 额外的展开行 -->
      <template #expandedRowRender="{ record }">
        <mtp-table-button class="btn-list-sticky" :buttons="handleBtn(record)" :record="record" @click="openComponent" />
      </template>
      <!-- 账户类型 -->
      <template #userinfotype="{ record }">
        <a>{{ record.userinfotype === 1 ? "个人" : "企业" }}</a>
      </template>
      <template #applystatus="{ }">
        <a>{{ getTableListStatus() }}</a>
      </template>
      <template #certificatephotourl="{ record}">
        <template v-if="record.certificatephotourl">
          <a v-for="(item, index) in getUrl(record.certificatephotourl)" :key="item" @click.stop="getVisibleImg(record.certificatephotourl, index)">{{item}}</a>
        </template>
        <span v-else></span>
      </template>
    </a-table>
    <!-- 右键 -->
    <contextMenu :contextMenu="contextMenu" @cancel="closeContext" :list="handleBtn(selectedRow)"> </contextMenu>
    <component :is="componentId" v-if="componentId" :selectedRow="selectedRow" @cancel="closeComponent"> </component>
    <a-modal :visible="previewVisible" :footer="null" @cancel="cancelImg">
      <img alt="预览附件" style="width: 100%" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script lang="ts">
import { EnumRouterName } from '@/common/constants/enumRouterName';
import { ComposeTableParam, contextMenu, defineAsyncComponent, defineComponent, handleComposeTable, MtpTableButton, queryTableList } from '@/common/export/commonTable';
import { getTableButton } from '@/common/setup/table/button';
import { handlePreviewImg } from '@/common/setup/upload';
import { queryAccountInOutApply } from '@/services/go/ermcp/qhj';
import { QhjAccountOutInApply } from '@/services/go/ermcp/qhj/interface';
import Filter from '../../compoments/filter/index.vue';
import { handleTableStatus, inOrOutStatus } from '../../setup';

export default defineComponent({
  name: 'platinum_recharge_review_tab',
  components: {
    Filter,
    contextMenu,
    MtpTableButton,
    detail: defineAsyncComponent(() => import('./compoments/detail/index.vue')), // 详情
    confirm_payment: defineAsyncComponent(() => import('./compoments/payment/index.vue')), // 确认收款
    review_refuse: defineAsyncComponent(() => import('./compoments/refuse/index.vue')), // 审核拒绝
  },
  setup() {
    // 表格列表数据
    const { loading, tableList, queryTable } = queryTableList<QhjAccountOutInApply>();
    // 状态
    const { tableStatus, getTableListStatus, search } = handleTableStatus(queryTable, 2);

    const queryTableAction = () => {
      queryTable(queryAccountInOutApply, { querytype: 2, applystatus: tableStatus.value });
    };
    // 表格通用逻辑
    const param: ComposeTableParam = {
      queryFn: queryTableAction,
      tableName: 'table_pcweb_qhj_recharge_review',
    };

    function handleBtn(record: QhjAccountOutInApply) {
      if (!record) return;
      const buttons = getTableButton();
      if (tableStatus.value === inOrOutStatus.wait) {
        return buttons;
      } else {
        return buttons.filter((e) => e.code === 'detail');
      }
    }
    // 预览附件
    const { previewVisible, previewImage, cancelImg, previewImg } = handlePreviewImg();
    function getUrl(value: string): string[] {
      return value.split(',').map((el, i) => `附件${i + 1}`);
    }
    function getVisibleImg(value: string, i: number) {
      const str = value.split(',')[i];
      previewImg(str);
    }

    return {
      ...handleComposeTable<QhjAccountOutInApply>(param),
      loading,
      handleBtn,
      getTableListStatus,
      previewVisible,
      previewImage,
      getVisibleImg,
      cancelImg,
      search,
      getUrl,
      tableList,
    };
  },
});
</script>