<template>
  <div>
    <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-row>
        </a-form>
      </a-col>
      <a-divider style="height: 42px" direction="vertical" />
      <a-col flex="172px" style="text-align: right">
        <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-col>
    </a-row>
    <a-divider style="margin-top: 0" />
    <a-row style="margin-bottom: 16px">
      <a-col :span="12">
        <a-space>
          <a-button
            type="primary"
            size="small"
            @click="showAddModel({ account: '', password: '', id: '' })"
          >
            <template #icon>
              <icon-plus />
            </template>
            添加账号
          </a-button>
          <a-button size="small" @click="downloadAccountTemplte">
            <template #icon>
              <icon-download />
            </template>
            下载模板
          </a-button>
          <a-upload
            size="small"
            :action="`${getAPIBaseUrl()}/api/cardInfo/AppleCard/account/batchAdd`"
            :limit="1"
            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
            :headers="{
              Authorization: `Bearer ${getToken()}`,
              tokenFrom: getTokenFrom()
            }"
            @success="uploadSucceed"
          />
        </a-space>
      </a-col>
    </a-row>
    <a-table
      :loading="loading"
      :pagination="{
        current: pagination.current,
        pageSize: pagination.pageSize,
        total: pagination.total,
        pageSizeOptions: [10, 20, 50, 100],
        showPageSize: true
      }"
      :columns="columns"
      :data="renderData"
      :scroll="{ x: 1080 }"
      @page-change="onPageChange"
      @page-size-change="onPageSizeChange"
    >
      <template #index="{ rowIndex }">
        {{ rowIndex + 1 + (pagination.current - 1) * pagination.pageSize }}
      </template>
      <template #status="{ record }">
        <a-switch
          v-if="[1, 2].includes(record.status)"
          v-model="record.status"
          :checked-value="2"
          :unchecked-value="1"
          checked-text="正常"
          unchecked-text="禁用"
          @change="
            async () => {
              await continueOrSuspendRechargeAPI({ id: record.id });
              search();
            }
          "
        />
        <a-space v-else size="small">
          <a-tag
            v-for="(m, index) in getStatusColorMap(record.status)"
            :key="index"
            :color="m.color"
          >
            {{ m.text }}
          </a-tag>
        </a-space>
      </template>
      <template #operations="{ record }">
        <a-space size="small">
          <a-tooltip content="修改">
            <a-button
              size="small"
              status="warning"
              @click="showAddModel(record)"
            >
              <template #icon>
                <icon-pen />
              </template>
            </a-button>
          </a-tooltip>
          <a-tooltip content="详情">
            <a-button size="small" @click="showDetailModel(record)">
              <template #icon>
                <icon-list />
              </template>
            </a-button>
          </a-tooltip>
          <a-tooltip content="删除">
            <a-button
              v-if="checkTokenFromIframe()"
              size="small"
              status="danger"
              @click="deleteAppleCardHandler(record.id)"
            >
              <template #icon>
                <icon-delete />
              </template>
            </a-button>
          </a-tooltip>
        </a-space>
      </template>
    </a-table>
    <add-modal
      :id="state.accountId"
      v-model:visible="state.addModalVisible"
      :account="state.account"
    />
    <account-detail
      v-model:visible="state.accountDetailVisible"
      :accountId="state.accountId"
    />
  </div>
</template>

<script lang="ts" setup>
import useLoading from '@/hooks/loading';
import { Pagination } from '@/types/global';

import { onMounted, reactive, ref, watch } from 'vue';
import {
  AppleCardParams,
  continueOrSuspendRechargeAPI,
  deleteAppleCard,
  downloadAppleAccountTemplteAPI
} from '@/api/apple-card-info';
import { FileItem, Notification, TableColumnData } from '@arco-design/web-vue';
import { getToken, checkTokenFromIframe, getTokenFrom } from '@/utils/auth';
import { getAPIBaseUrl } from '@/api/utils';
import AddModal from './components/add-modal.vue';
import AccountDetail from './components/detail.vue';
import { apiClient } from '@/api';
import {
  ApiCardInfoAppleCardAccountGetListGetPageSizeEnum,
  KamiApiCardInfoAppleV1AppleCardListRecord
} from '@/api/generated';

const basePagination: Pagination = {
  current: 1,
  pageSize: 50
};
const pagination = reactive({
  ...basePagination
});
const columns: TableColumnData[] = [
  {
    title: '序号',
    dataIndex: 'index',
    slotName: 'index',
    width: 50,
    minWidth: 40
  },
  {
    title: '账号',
    dataIndex: 'account'
  },
  {
    title: '密码',
    dataIndex: 'password'
  },
  {
    title: '余额',
    dataIndex: 'balanceItunes',
    ellipsis: true,
    tooltip: true
  },
  {
    title: '总充值金额',
    dataIndex: 'balance',
    ellipsis: true,
    tooltip: true
  },
  {
    title: '今日充值金额',
    dataIndex: 'todayRechargeAmount',
    ellipsis: true,
    tooltip: true
  },
  {
    title: '今日充值笔数',
    dataIndex: 'todayRechargeCount',
    ellipsis: true,
    tooltip: true
  },
  {
    title: '充值限制金额',
    dataIndex: 'maxAmountLimit',
    ellipsis: true,
    tooltip: true
  },
  {
    title: '充值限制次数',
    dataIndex: 'maxCountLimit',
    ellipsis: true,
    tooltip: true
  },
  {
    title: '上传人',
    dataIndex: 'uploadUser.username',
    slotName: 'uploadUser'
  },
  {
    title: '最后充值时间',
    dataIndex: 'todayRechargeDatetime',
    ellipsis: true,
    tooltip: true
  },
  {
    title: '创建时间',
    dataIndex: 'createdAt',
    slotName: 'createdAt'
  },
  {
    title: '状态',
    dataIndex: 'status',
    slotName: 'status',
    align: 'center',
    width: 110
  },
  {
    title: '操作',
    dataIndex: 'operations',
    slotName: 'operations',
    fixed: 'right',
    width: 220
  }
];
const generateFormModel = () => {
  return {
    account: '',
    password: ''
  };
};
const { loading, setLoading } = useLoading(true);
const renderData = ref<KamiApiCardInfoAppleV1AppleCardListRecord[]>([]);
const formModel = ref(generateFormModel());
const state = reactive({
  addModalVisible: false,
  deployModalVisible: false,
  accountDetailVisible: false,
  accountId: '',
  account: {
    account: '',
    password: '',
    maxAmountLimit: 0,
    maxCountLimit: 0
  }
});

const fetchData = async (
  params: AppleCardParams = { current: 1, pageSize: 50 }
) => {
  setLoading(true);
  try {
    const {
      data: { list, total }
    } = await apiClient.apiCardInfoAppleCardAccountGetListGet({
      current: params.current,
      pageSize:
        params.pageSize as unknown as ApiCardInfoAppleCardAccountGetListGetPageSizeEnum,
      account: params.account
    });
    renderData.value = list;
    pagination.current = params.current;
    pagination.pageSize = params.pageSize;
    pagination.total = total;
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    setLoading(false);
  }
};
const onPageChange = (current: number) => {
  fetchData({ ...pagination, current });
};
const onPageSizeChange = (pageSize: number) => {
  fetchData({ ...pagination, pageSize });
};
const search = () => {
  fetchData({
    ...basePagination,
    ...formModel.value
  } as unknown as AppleCardParams);
};
const reset = () => {
  formModel.value = generateFormModel();
};

const deleteAppleCardHandler = async (id: string) => {
  try {
    await deleteAppleCard({ id });
  } catch {
    Notification.error({
      id: 'appleAccountNotice',
      content: '删除苹果卡失败',
      closable: true
    });
  } finally {
    fetchData({ ...pagination });
  }
};

const showAddModel = (record: KamiApiCardInfoAppleV1AppleCardListRecord) => {
  state.addModalVisible = true;
  state.accountId = record.id;
  state.account = {
    account: record.account,
    password: record.password,
    maxAmountLimit: record.maxAmountLimit,
    maxCountLimit: record.maxCountLimit
  };
};
const showDetailModel = (record: KamiApiCardInfoAppleV1AppleCardListRecord) => {
  state.accountDetailVisible = true;
  state.accountId = record.id;
};
watch(
  () => state.addModalVisible,
  val => {
    if (!val) {
      search();
    }
  }
);
const getStatusColorMap = (status: number) => {
  type colorMap = {
    color: string;
    text: string;
  };
  const c: colorMap[] = [];
  switch (status) {
    case 1:
      c.push();
      break;
    case 2:
      c.push({
        color: 'green',
        text: '正常'
      });
      break;
    case 3:
      c.push({
        color: 'red',
        text: '账/密错误'
      });
      break;
    case 4:
      c.push({
        color: 'orange',
        text: '额度超出'
      });
      break;
    case 5:
      c.push({
        color: 'pinkpurple',
        text: '50元限制'
      });
      break;
    case 6:
      c.push({
        color: 'magenta',
        text: '安全登录限制'
      });
      break;
    case 7:
      c.push({
        color: 'pinkpurple',
        text: '禁用(2分钟)'
      });
      break;
    case 8:
      c.push({
        color: 'red',
        text: '禁用'
      });
      break;
    case 9:
      c.push({
        color: 'red',
        text: '禁用(1分钟)'
      });
      break;
    default:
      c.push({
        color: 'grey',
        text: '其他状态，待更新'
      });
      break;
  }
  return c;
};
const downloadAccountTemplte = () => {
  downloadAppleAccountTemplteAPI();
};
const uploadSucceed = (fileItem: FileItem) => {
  Notification.success({
    id: 'appleAccountNotice',
    content: fileItem.response?.data?.msg || '上传成功',
    closable: true
  });
  search();
};
onMounted(() => {
  fetchData();
});
</script>
