<template>
  <!-- 充值审核 -->
  <div class="platinum_recharge_review_tab">
    <Filter @search="search" />
    <contextMenu :contextMenuList="getBtnListAction()">
      <a-table :columns="columns"
               class="srcollYTable"
               :scroll="{ x: '100%', y: 'calc(100vh - 163px)' }"
               :pagination="false"
               :expandedRowKeys="expandedRowKeys"
               :customRow="Rowclick"
               rowKey="key"
               :data-source="tableList">
        <!-- 额外的展开行 -->
        <template #expandedRowRender="{ record }">
          <BtnList :btnList="getBtnListAction()"
                   @onClick="btnClick(record)" />
        </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>
    <ControlModal :selectedRow="selectedRow"
                  @refresh="getTableList" />
    <a-modal :visible="previewVisible"
             :footer="null"
             @cancel="cancelImg">
      <img alt="预览附件"
           style="width: 100%"
           :src="previewImage" />
    </a-modal>
  </div>
</template>

<script lang="ts">
import { defineComponent, initData, getTableColumns, getTableEvent, contextMenu, BtnList, queryTableList, _getBtnList } from '@/common/export/table';
import { queryAccountInOutApply } from '@/services/go/ermcp/qhj';
import { QhjAccountOutInApply } from '@/services/go/ermcp/qhj/interface';
import Filter from '../../compoments/filter/index.vue';
import ControlModal from './compoments/controlModal/index.vue';
import { handleTableStatus, inOrOutStatus } from '../../setup';
import { BtnList as BtnListType } from '@/common/components/buttonList/interface';
import { handlePreviewImg } from '@/common/setup/upload';

export default defineComponent({
    name: 'platinum_recharge_review_tab',
    components: { Filter, contextMenu, BtnList, ControlModal },
    setup() {
        // 表头数据
        const { columns, registerColumn, updateColumn } = getTableColumns();
        // 表格事件
        const { expandedRowKeys, selectedRow, Rowclick, btnClick } = getTableEvent<QhjAccountOutInApply>({});
        // 表格操作按钮列表
        const [firstBtn] = _getBtnList('platinum_recharge_review_tab', true).value;
        // 表格列表数据
        const { loading, tableList, queryTable } = queryTableList();
        // 状态
        const { tableStatus, getTableListStatus, search } = handleTableStatus(queryTable, 2);
        function getBtnListAction(): BtnListType[] {
            const arr: string[] = ['详情'];
            switch (tableStatus.value) {
                case inOrOutStatus.wait:
                    arr.push('确认收款');
                    arr.push('审核拒绝');
                    break;
            }
            return firstBtn.filter((e: BtnListType) => arr.includes(e.lable));
        }
        // 预览附件
        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);
        }
        function getTableList() {
            queryTable(queryAccountInOutApply, { querytype: 2, applystatus: tableStatus.value });
        }
        initData(() => {
            // 默认 查询待审核状态列表
            getTableList();
            // 注册表头信息 过滤
            registerColumn('table_pcweb_qhj_recharge_review', []);
        });

        return {
            getTableList,
            getBtnListAction,
            getTableListStatus,
            previewVisible,
            previewImage,
            getVisibleImg,
            cancelImg,
            columns,
            search,
            getUrl,
            expandedRowKeys,
            selectedRow,
            Rowclick,
            firstBtn,
            loading,
            tableList,
            updateColumn,
            queryTable,
            btnClick,
        };
    },
});
</script>

<style lang="less">
.platinum_recharge_review_tab {
}
</style>;