<template>
  <a-drawer
    v-model:visible="state.visible"
    width="40%"
    title="充值操作日志"
    :footer="false"
    unmount-on-close
    @close="closeDrawer"
  >
    <div v-if="props.orderNo !== ''">
      <a-row justify="end">
        <a-radio-group v-model="state.sortRule" type="button" size="small">
          <a-radio :value="0">正序</a-radio>
          <a-radio :value="1">逆序</a-radio>
          <a-radio :value="2">文本</a-radio>
        </a-radio-group>
      </a-row>
      <a-row justify="start" style="padding: 2rem">
        <a-timeline
          v-show="[0, 1].includes(state.sortRule)"
          :reverse="state.sortRule == 0"
        >
          <a-timeline-item
            v-for="(item, index) in renderData"
            :key="index"
            :label="item.createdAt"
          >
            <a-space>
              <span>
                {{ item.operation }}
              </span>
              <span class="remark">
                {{ item.remark }}
              </span>
            </a-space>
          </a-timeline-item>
        </a-timeline>
        <div v-show="state.sortRule == 2">
          <a-typography-title :heading="5">明细</a-typography-title>
          <a-typography-paragraph
            v-for="(item, index) in sortBy(renderData, 'id')"
            :key="index"
          >
            【{{ item.createdAt }}】{{ item.operation }} {{ item.remark }}
          </a-typography-paragraph>
        </div>
      </a-row>
    </div>
    <div v-else>404</div>
  </a-drawer>
</template>

<script setup lang="ts">
import {
  AppleCardOperationHistoryList,
  queryAppleCardOperationHistoryList
} from '@/api/apple-card-recharge-history';
import { sortBy } from 'lodash';
import { reactive, ref, watch } from 'vue';

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

const emit = defineEmits(['update:visible']);

const state = reactive<{ sortRule: number; visible: boolean }>({
  sortRule: 0,
  visible: false
});

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

const getAppleCardOperationHistoryList = async () => {
  const res = await queryAppleCardOperationHistoryList({
    orderNo: props.orderNo
  });
  renderData.value = res.data.list;
};

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

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

<style lang="less" scoped>
.remark {
  font-size: 0.8rem;
  font-weight: 300;
}
</style>
