<template>
  <a-drawer
    v-model:visible="state.visible"
    width="40%"
    title="充值操作日志"
    :footer="false"
    unmount-on-close
    @close="closeDrawer"
  >
    <div v-if="props.orderNo !== ''">
      <a-radio-group
        v-model="state.isReverse"
        type="button"
        size="small"
        class="sort-btn"
      >
        <a-radio :value="true">正序</a-radio>
        <a-radio :value="false">逆序</a-radio>
      </a-radio-group>
      <a-timeline :reverse="state.isReverse">
        <a-timeline-item
          v-for="(item, index) in renderData"
          :key="index"
          :label="item.createdAt"
        >
          <a-space>
            <span>
              {{ mapStatus(item.operationStatus) }}
            </span>
            <span class="remark">
              {{ item.remark }}
            </span>
          </a-space>
        </a-timeline-item>
      </a-timeline>
    </div>
    <div v-else>404</div>
  </a-drawer>
</template>

<script setup lang="ts">
import { apiClient } from '@/api';
import { KamiInternalModelEntityV1CardRedeemOrderHistory } from '@/api/generated';
import { reactive, ref, watch } from 'vue';

const props = defineProps({
  orderNo: {
    type: String,
    default: ''
  }
});

const visible = defineModel<boolean>('visible');

const state = reactive<{ isReverse: boolean; visible: boolean }>({
  isReverse: true,
  visible: false
});

const renderData = ref<KamiInternalModelEntityV1CardRedeemOrderHistory[]>([]);

const getJDOrderHistoryList = async () => {
  const res = await apiClient.apiCardInfoCTripOrderGetHistoryListGet({
    orderNo: props.orderNo
  });
  renderData.value = res.data.list;
};

watch(
  () => visible.value,
  newValue => {
    state.visible = newValue;
    if (newValue) {
      getJDOrderHistoryList();
    } else {
      renderData.value = [];
    }
  }
);

const closeDrawer = () => {
  visible.value = false;
  // emit('update:visible', false);
};

const mapStatus = (opeationStatus: number) => {
  switch (opeationStatus) {
    case 100:
      return '充值失败';
    case 1:
      return '添加订单';
    case 2:
      return '分配账号';
    case 3:
      return '充值成功';
    case 4:
      return '开始回调';
    case 5:
      return '订单退回';
    case 6:
      return '订单失败(账户问题)';
    case 7:
      return '分配账号失败';
    case 8:
      return '订单验证失败';
    case 9:
      return '开始回调';
    case 10:
      return '回调成功';
    case 11:
      return '回调失败 ';
    case 12:
      return '订单未处于充值结束状态';
    case 13:
      return '用户设置不触发回调';
    case 14:
      return '未知状态';
    case 15:
      return '服务器错误';
    case 16:
      return '开始处理';
    default:
      return '未知状态';
  }
};
</script>

<style lang="less" scoped>
.sort-btn {
  float: right;
}

.remark {
  font-size: 0.8rem;
  font-weight: 300;
}
</style>
