<script lang="ts" setup>
import {computed, ref} from 'vue';
import Taro from '@tarojs/taro';
import * as dayjs from 'dayjs';
import {getIntegralDetail, getBeanDetail, getGiftRecord} from '@/api/user';
import {TriangleDown} from '@nutui/icons-vue-taro';

const tabValue = ref(1);

const tabsList = ref([
  {
    title: '兑换明细',
    value: 1,
  },
  {
    title: '赠送明细',
    value: 3,
  },
  {
    title: '豆子明细',
    value: 2,
  },
  {
    title: '活动赠送',
    value: 4,
  },
  {
    title: '聚合积分',
    value: 5,
  },
]);

const computerType = computed(() => {
  return (val: number) => {
    switch (val) {
      case 5:
        return '注册赠送';
      case 6:
        return '签到赠送';
      case 7:
        return '系统赠送';
    }
  };
});

const tabChange = (index: number) => {
  tabValue.value = index;
  data.value = [];
  getList();
  page.value.PageNum = 1;
};

interface DataType {
  goods_name: string;
  add_time: string;
  number: number;
  order_number: number;
  type: number;
  oid: string;
  residue: number;
}

const data = ref<DataType[]>([]);

const userInfo = ref<any>({});

Taro.useLoad(() => {
  pickerVal.value = [
    dayjs().format('YYYY-MM-DD'),
    dayjs().format('YYYY-MM-DD'),
  ];
  getList();
  userInfo.value = Taro.getStorageSync('userInfo');
});

const page = ref({
  PageNum: 1,
  PageSize: 10,
  ItemCount: 0,
});

const pageChange = (e: number) => {
  page.value.PageNum = e;
  getList();
};

const getList = async () => {
  try {
    let res: any;
    const newData = {
      PageNum: page.value.PageNum,
      PageSize: page.value.PageSize,
      Type: tabValue.value,
      TimeStart: pickerVal.value[0],
      TimeEnd: pickerVal.value[1],
    };
    if (tabValue.value === 1 || tabValue.value === 3 || tabValue.value === 5) {
      res = await getBeanDetail(newData);
    } else if (tabValue.value === 2) {
      // delete data.value.Type;
      Reflect.deleteProperty(data.value, 'Type');
      res = await getIntegralDetail(newData);
    } else if (tabValue.value === 4) {
      res = await getGiftRecord(newData);
    }
    data.value = res.data.data || [];
    page.value.ItemCount = res.data.count;
  } catch (error) {
    Taro.showToast({
      title: error.msg,
      icon: 'none',
    });
  }
};

const pickerRef = ref();
const showPicker = ref(false);

const pickerVal = ref<Array<string>>([]);

const openPicker = () => {
  showPicker.value = true;
  pickerRef.value.scrollToDate(dayjs().format('YYYY-MM-DD'));
};
const choose = e => {
  pickerVal.value = [e[0][3], e[1][3]];
  getList();
};

const closePicker = () => {
  showPicker.value = false;
};
</script>

<template>
  <view>
    <view class="tabs-box">
      <view
        class="item"
        v-for="(item, idx) in tabsList"
        :key="idx"
        @click="tabChange(item.value)"
        :style="{
          backgroundColor: item.value === tabValue ? '#ff0000' : '#F0F0F0',
          color: item.value === tabValue ? '#fff' : '#333',
        }">
        <view>{{ item.title }}</view>
      </view>
    </view>

    <view
      @click="openPicker"
      class="pt-[20px] pb-[20px] pl-[25px] text-[30px] text-[#333] flex items-center">
      <text>时间筛选</text>
      <TriangleDown size="20px" color="#333" />
    </view>

    <nut-calendar
      ref="pickerRef"
      type="range"
      title="时间筛选"
      v-model:visible="showPicker"
      :default-value="pickerVal"
      start-date="2023-01-01"
      end-date="2070-01-01"
      @close="closePicker"
      @choose="choose">
    </nut-calendar>

    <view v-if="data.length > 0">
      <view v-if="tabValue === 1">
        <view class="card-list" v-for="(item, index) in data" :key="index">
          <view class="left">
            <view>订单号: {{ item.oid }}</view>
            <text class="jf">{{
              dayjs(item.add_time).format('YYYY/MM/DD mm:ss')
            }}</text>
          </view>
          <view class="right">
            <view v-if="tabValue === 1" style="color: red"
              >-
              <text>{{ item.number }}</text>
            </view>
            <text class="jf">积分余额: {{ item.residue || 0 }}</text>
          </view>
        </view>
      </view>
      <view v-if="tabValue === 3 || tabValue === 5">
        <view class="card-list" v-for="(item, index) in data" :key="index">
          <view class="left">
            <view>订单：{{ item.oid }}</view>
            <view>时间：{{ item.add_time.slice(0, 10) }}</view>
          </view>
          <view class="right">
            <view v-if="tabValue === 5" style="color: red"
              >-
              <text>{{ item.number }}积分</text>
            </view>
            <view v-if="tabValue === 3" style="color: green"
              >+
              <text>{{ item.number }}</text>
              积分
            </view>
          </view>
        </view>
      </view>
      <view v-else-if="tabValue === 2">
        <view class="card-list" v-for="(item, index) in data" :key="index">
          <view class="left">
            <view class="text">订单：{{ item.oid }}</view>
            <view>时间：{{ item.add_time.slice(0, 10) }}</view>
          </view>
          <view class="right">
            <view style="color: green"
              >+
              <text>{{ item.number }}</text>
              豆子
            </view>
          </view>
        </view>
      </view>
      <view v-else-if="tabValue === 4">
        <view class="card-list" v-for="(item, index) in data" :key="index">
          <view class="left">
            <view class="text">类型：{{ computerType(item.type) }}</view>
            <view>时间：{{ item.add_time.slice(0, 10) }}</view>
          </view>
          <view class="right">
            <view style="color: green"
              >+
              <text>{{ item.number }}</text>
              豆子
            </view>
          </view>
        </view>
      </view>
      <nut-pagination
        class="mt-3"
        v-model="page.PageNum"
        :total-items="page.ItemCount"
        :items-per-page="page.PageSize"
        @change="pageChange" />
    </view>
    <nut-empty v-else description="暂无明细"></nut-empty>
  </view>
</template>

<style lang="scss">
.nut-pagination {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.tabs-box {
  display: flex;
  align-items: center;
  background-color: #fff;
  text-align: center;
  flex-wrap: wrap;
  padding: 15px;
  justify-content: space-evenly;

  .item {
    padding: 10px 20px;
    font-size: 23px;
    border-radius: 10px;
  }
}

.card-list {
  // margin: 10px 20px;
  background-color: #fff;
  display: flex;
  border-radius: 10px;
  padding: 20px;
  justify-content: space-between;
  align-items: center;
  font-size: 25px;

  .jf {
    color: #484848;
  }

  .left {
    .text {
      text-align: left;
      font-weight: bolder;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
      word-break: break-word;
      color: #484848;
    }
  }

  .right {
    flex: 1;
    text-align: right;
  }
}
</style>
