<template>
  <div class="container">
    <Breadcrumb :items="['充值账户管理', '充值记录']" />
    <a-card class="general-card" title="充值记录">
      <a-row>
        <a-col :flex="1">
          <a-form
            :model="formModel"
            :label-col-props="{ span: 6 }"
            :wrapper-col-props="{ span: 18 }"
            label-align="left"
          >
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item field="account" label="账户">
                  <a-input
                    v-model="formModel.account"
                    placeholder="请输入账户名称"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="attach" label="系统订单">
                  <a-input
                    v-model="formModel.attach"
                    placeholder="请输入系统订单号"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="merchantId" label="商户订单号">
                  <a-input
                    v-model="formModel.merchantId"
                    placeholder="请输入商户订单号"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="dateRange" label="创建时间">
                  <a-range-picker v-model="formModel.dateRange" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item field="cardPass" label="卡密">
                  <a-input
                    v-model="formModel.cardPass"
                    placeholder="请输入卡密"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 42px" direction="vertical" />
        <a-col flex="172px" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-space direction="horizontal" :size="18">
              <a-button type="primary" @click="search">
                <template #icon>
                  <icon-search />
                </template>
                搜索
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-refresh />
                </template>
                重置
              </a-button>
            </a-space>
            <a-space direction="horizontal" :size="18">
              <a-button
                type="secondary"
                status="warning"
                @click="downloadDataList"
              >
                <template #icon>
                  <icon-download />
                </template>
                下载
              </a-button>
            </a-space>
          </a-space>
        </a-col>
      </a-row>
      <a-divider style="margin-top: 0" />
      <a-table
        :loading="loading"
        :pagination="{
          current: pagination.current,
          pageSize: pagination.pageSize,
          total: pagination.total,
          pageSizeOptions: [10, 20, 50, 100],
          showPageSize: true,
          showTotal: true
        }"
        :columns="columns"
        :data="renderData"
        :bordered="false"
        column-resizable:bordered="{cell:true}"
        @page-change="onPageChange"
        @page-size-change="onPageSizeChange"
      >
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
        </template>
        <template #status="{ record }">
          <a-space>
            <a-tag
              :key="record.status"
              :color="getStatusColorMap(record.status).color"
              size="small"
            >
              {{ getStatusColorMap(record.status).text }}
            </a-tag>
            <a-tag
              v-if="record.status === 0 || record.status === 16"
              color="gray"
              size="small"
            >
              {{ record.remark }}
            </a-tag>
            <a-tag
              v-if="[1, 2].includes(record.notifyStatus)"
              size="small"
              :color="record.notifyStatus === 1 ? 'green' : 'red'"
            >
              回调{{ record.notifyStatus === 1 ? '成功' : '失败' }}
            </a-tag>
          </a-space>
        </template>
        <template #operations="{ record }">
          <a-space size="small">
            <a-tooltip content="详情">
              <a-button
                size="small"
                @click="showRechargeHistory(record.orderNo)"
              >
                <template #icon>
                  <icon-list />
                </template>
              </a-button>
            </a-tooltip>
            <a-popconfirm
              v-if="checkTokenFromIframe() && record.status === 16"
              content="确认重置?"
              @ok="() => resetStatus(record.orderNo)"
            >
              <a-button size="small" status="warning">重置</a-button>
            </a-popconfirm>
            <a-tooltip content="修正">
              <a-button
                v-if="checkTokenFromIframe() && record.status === 0"
                size="small"
                status="success"
                @click="showActualAmountModal(record.orderNo, record)"
              >
                <template #icon>
                  <icon-refresh />
                </template>
              </a-button>
            </a-tooltip>
            <a-tooltip content="回调">
              <a-button
                v-if="
                  (checkTokenFromIframe() && record.status === 0) ||
                  record.status === 1
                "
                size="small"
                status="warning"
                @click="callBackOrderManual(record.orderNo)"
              >
                <template #icon>
                  <icon-send />
                </template>
              </a-button>
            </a-tooltip>
            <!-- <a-popconfirm
              v-if="record.status === 14"
              content="确认修改状态到成功状态?"
              type="warning"
              @ok="modifyStatusToSucceed(record.orderNo)"
            >
              <a-button size="small" status="danger">修正状态</a-button>
            </a-popconfirm> -->
          </a-space>
        </template>
      </a-table>
    </a-card>
    <recharge-history
      v-model:visible="state.rechargeHistoryModalVisible"
      :order-no="state.selectedOrderNo"
    />
    <change-amount
      v-model:visible="state.changeAmountModalVisible"
      :record="state.currentRecord"
      :order-no="state.selectedOrderNo"
    />
  </div>
</template>

<script lang="ts" setup>
import { Message, TableColumnData } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';
import { onMounted, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import {
  AppleCardRechargeOrderParams,
  AppleCardRechargeOrderRecord,
  callBackOrderManualAPI,
  downloadDataListApi,
  modifyStatusToSucceedAPI,
  queryAppleCardRechargeOrderList,
  resetOrderStatusAPI
} from '@/api/apple-card-recharge-history';
import RechargeHistory from './components/recharge-history.vue';
import ChangeAmount from './components/change-amount.vue';
import { checkTokenFromIframe } from '@/utils/auth';

const route = useRoute();
const { accountID } = route.params;

const basePagination: Pagination = {
  current: 1,
  pageSize: 50
};
const pagination = reactive({
  accountID: accountID as string,
  ...basePagination
});
const columns: TableColumnData[] = [
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index'
  },
  {
    title: '订单号',
    dataIndex: 'orderNo'
  },
  {
    title: '系统订单号',
    dataIndex: 'attach'
  },
  {
    title: '商户订单号',
    dataIndex: 'merchantId'
  },
  {
    title: '分配账号',
    dataIndex: 'accountName',
    slotName: 'account'
  },
  {
    title: '卡密',
    dataIndex: 'cardPass',
    slotName: 'cardPass'
  },
  {
    title: '卡面金额',
    dataIndex: 'cardAmount',
    slotName: 'cardAmount'
  },
  {
    title: '支付金额',
    dataIndex: 'actualAmount',
    slotName: 'actualAmount'
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    slotName: 'createdAt'
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status'
  },
  {
    title: '操作',
    dataIndex: 'operations',
    slotName: 'operations'
  }
];
const generateFormModel = () => {
  return {
    account: '',
    orderNo: '',
    attach: '',
    cardNo: '',
    cardPass: '',
    merchantId: '',
    dateRange: []
  };
};
const { loading, setLoading } = useLoading(true);
const renderData = ref<AppleCardRechargeOrderRecord[]>([]);
const formModel = ref<{
  account: string;
  orderNo: string;
  attach: string;
  cardNo: string;
  cardPass: string;
  merchantId: string;
  dateRange: Date[];
}>(generateFormModel());
const state = reactive({
  rechargeHistoryModalVisible: false,
  selectedOrderNo: '',
  changeAmountModalVisible: false,
  currentRecord: {} as AppleCardRechargeOrderRecord
});

const fetchData = async (
  params: AppleCardRechargeOrderParams = {
    current: 1,
    pageSize: 50
  }
) => {
  setLoading(true);
  try {
    const {
      data: { list, total }
    } = await queryAppleCardRechargeOrderList(params);
    renderData.value = list;
    pagination.current = params.current;
    pagination.pageSize = params.pageSize;
    pagination.total = total;
  } catch (err) {
    console.error(err);
  } finally {
    setLoading(false);
  }
};

const onPageChange = (current: number) => {
  fetchData({ ...pagination, current });
};
const onPageSizeChange = (pageSize: number) => {
  fetchData({ ...pagination, pageSize });
};
const search = () => {
  fetchData({
    ...basePagination,
    ...formModel.value
  });
};
const reset = () => {
  formModel.value = generateFormModel();
};
const showRechargeHistory = (orderNo: string) => {
  state.rechargeHistoryModalVisible = true;
  state.selectedOrderNo = orderNo;
};
const getStatusColorMap = (status: number) => {
  type colorMap = {
    color: string;
    text: string;
  };
  let c: colorMap = {
    color: '',
    text: ''
  };

  switch (status) {
    case 0:
      c = {
        color: 'red',
        text: '失败'
      };
      break;
    case 1:
      c = {
        color: 'green',
        text: '成功'
      };
      break;
    case 15:
      c = {
        color: 'red',
        text: '失败(金额异议)'
      };
      break;
    case 14:
      c = {
        color: 'blue',
        text: '卡密重复(需人工介入)'
      };
      break;
    case 2:
      c = {
        color: 'orange',
        text: '调度中'
      };
      break;
    case 3:
      c = {
        color: 'blue',
        text: '等待'
      };
      break;
    case 16:
      c = {
        color: 'red',
        text: '冻结'
      };
      break;
    default:
      c = {
        color: 'grey',
        text: '其他状态，待更新'
      };
      break;
  }
  return c;
};
const callBackOrderManual = async (orderNo: string) => {
  await callBackOrderManualAPI({ orderNo });
  fetchData({ ...pagination, ...formModel.value });
  Message.success('回调成功');
};
const showActualAmountModal = (
  orderNo: string,
  record: AppleCardRechargeOrderRecord
) => {
  state.changeAmountModalVisible = true;
  state.selectedOrderNo = orderNo;
  state.currentRecord = record;
};
const modifyStatusToSucceed = async (orderNo: string) => {
  await modifyStatusToSucceedAPI({ orderNo });
  fetchData({ ...pagination, ...formModel.value });
  Message.success('处理成功');
};
watch(
  () => state.changeAmountModalVisible,
  newValue => {
    if (newValue === false) {
      search();
    }
  }
);
const resetStatus = (orderNo: string) => {
  resetOrderStatusAPI({ orderNo }).then(() => {
    Message.success('重置成功');
    search();
  });
};
onMounted(() => fetchData({ ...pagination }));
const downloadDataList = async () => {
  await downloadDataListApi({
    ...basePagination,
    ...formModel.value
  });
};
</script>
