import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  ref,
  watch,
} from 'vue';
import './index.less';
import { useI18n } from 'vue-i18n';
import CustomButton from '@/components/button';
import RadioGroup from '@/components/RadioGroup';
import Loading from '@/components/Loading';
import Card from '../card';
import { UserOrder } from '@/utils/api/BlindBox';
import { useFoxWallet } from '@/store/FoxWallet';
import { MessagePlugin } from 'tdesign-vue-next';
import Empty from '@/components/empty';
export default defineComponent({
  props: {
    modelValue: String,
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const { t } = useI18n();
    // 当前展示的模块
    const myboxType = ref(2);
    const { $state: FoxWallet } = useFoxWallet();
    //
    const loading = ref(false);
    /**
     * 进行中1
     * 未完成2
     * 未中奖3
     * 中签4
     */
    const myblindBoxList = reactive({
      list: [],
    });
    // 是否显示可中签价值
    const isShowEnd = ref(false);
    const pageNum = ref(1);
    const pageSize = ref(10);
    const total = ref(0);
    const btnOptions = computed(() => [
      {
        label: t('raffle.inprogress'),
        value: 2,
        other: {
          title: t('raffle.inprogress'),
          type: 'success',
        },
      },
      {
        label: t('raffle.Unfinished'),
        value: 1,
        other: {
          title: t('raffle.Unfinished'),
          type: 'failed',
        },
      },
      {
        label: t('raffle.Finished'),
        value: 3,
        other: {
          title: 'true',
          type: 'failed',
        },
      },
    ]);
    // 当前显示的标签内容
    const CustomStatus = ref(btnOptions.value[0].other);

    const onBack = () => {
      emit('update:modelValue', 'activity');
    };
    const getList = async () => {
      try {
        if (!FoxWallet.address) {
          MessagePlugin.warning(t('header.UnconnectedWallet'));
          return;
        }
        loading.value = true;
        let res: any = await UserOrder({
          page: pageNum.value,
          limit: pageSize.value,
          status: myboxType.value,
          address: FoxWallet.address,
        });
        myblindBoxList.list = res.data.data;
        total.value = res.data.total;
        loading.value = false;
      } catch (e) {
        console.log(e);
        loading.value = false;
      }
    };
    const onPageChange = () => {
      getList();
    };
    watch(
      () => loading.value,
      (v) => {
        if (!v) {
          // 判断当前模块
          if (myboxType.value == 1) {
            CustomStatus.value = btnOptions.value[1].other;
          } else if (myboxType.value == 2) {
            CustomStatus.value = btnOptions.value[0].other;
          } else {
            CustomStatus.value = btnOptions.value[2].other;
          }
          if (myboxType.value == 3) {
            isShowEnd.value = true;
          } else {
            isShowEnd.value = false;
          }
        }
      }
    );
    // 条件改变
    const onChange = (value: any) => {
      if (myboxType.value == value) {
        return;
      }
      myboxType.value = value;
      getList();
    };
    onMounted(() => {
      getList();
    });
    return () => (
      <div class="custom-my-blind-box">
        <div class="header">
          <div class="blind-box-head">
            <span>{t('raffle.MyBlindBox')}</span>
            <CustomButton
              value={t('button.back')}
              onClick={onBack}
            ></CustomButton>
          </div>
          <RadioGroup
            v-model={myboxType.value}
            options={btnOptions.value}
            onChange={onChange}
          ></RadioGroup>
        </div>
        <div class="my-blind-box-content">
          {myblindBoxList.list.map((item: any) => (
            <Card
              info={item}
              showEnd={isShowEnd.value}
              customStatus={CustomStatus.value}
            ></Card>
          ))}
          <Empty v-show={!loading.value && !myblindBoxList.list.length}></Empty>
        </div>
        <Loading v-show={loading.value}></Loading>
        <div class="pagination-box">
          <t-pagination
            v-model={pageNum.value}
            v-model:pageSize={pageSize.value}
            total={total.value}
            totalContent={false}
            showPageSize={false}
            onCurrentChange={onPageChange}
          />
        </div>
      </div>
    );
  },
});
