<template>
  <view class="min-page bg-f7">
    <up-sticky>
      <view class="top">
        <my-tabs
          :list="tabs.list"
          v-model="tabs.selIndex"
          @change="tabsChange"
          textKey="label"
        ></my-tabs>
      </view>
    </up-sticky>

    <view class="list">
      <view class="item" v-for="(item, index) in list" :key="index">
        <view class="u-flex u-row-between">
          <view>{{ item.couponJson.couponName }}</view>

          <view class="u-flex">
            <view class="status" :class="['status' + item.status]">{{
              returnStateText(item)
            }}</view>
            <view class="Id">ID:{{ item.id }}</view>
          </view>
        </view>
        <view class="u-m-t-28 desc">
          <view class="u-flex">
            <text class="color-666 text-right u-m-r-48" style="min-width: 96rpx"
              >使用门槛</text
            >
            <text class="color-333"
              >满{{ item.couponJson.fullAmount }}元可用</text
            >
          </view>
          <view class="u-flex u-m-t-16">
            <text class="color-666 text-right u-m-r-48" style="min-width: 96rpx"
              >有效期</text
            >
            <text class="color-333"
              >领券后{{ item.couponJson.validDays }}天过期</text
            >
          </view>
        </view>
        <view class="u-flex u-row-between u-m-t-24">
          <view
            class="u-flex u-flex-col u-row-center u-font-24 u-col-center text-center"
          >
            <view class="color-333 font-bold">{{ item.giveNum }}</view>
            <view class="color-666 u-m-t-16">发放数量</view>
          </view>
          <view
            class="u-flex u-flex-col u-row-center u-font-24 u-col-center text-center"
          >
            <view class="color-333 font-bold">{{
              item.giveNum - item.leftNum
            }}</view>
            <view class="color-666 u-m-t-16">已领取</view>
          </view>

          <view
            class="u-flex u-flex-col u-row-center u-font-24 u-col-center text-center"
          >
            <view class="color-333 font-bold">{{ item.leftNum }}</view>
            <view class="color-666 u-m-t-16">剩余</view>
          </view>

          <view
            class="u-flex u-flex-col u-row-center u-font-24 u-col-center text-center"
          >
            <view class="color-333 font-bold">{{ item.useNum }}</view>
            <view class="color-666 u-m-t-16">已使用</view>
          </view>
        </view>
        <view class="u-m-t-16 u-flex u-row-right" style="gap: 16rpx">
          <view
            class="btn share"
            @click="toShare(item)"
            v-if="item.status == 1"
          >
            分享</view
          >
          <view class="btn cancel" @click="cancel(item)">失效</view>
          <view class="btn primary" @click="toDetail(item)"> 查看</view>
        </view>
      </view>
    </view>

    <up-loadmore :status="isEnd ? 'nomore' : 'loading'"></up-loadmore>
    <view style="height: 40px"></view>
  </view>
</template>

<script setup>
import * as chatApi from "@/http/php/chat";

import { onReachBottom, onLoad } from "@dcloudio/uni-app";
import { reactive, ref, watch } from "vue";
import { onShow } from "@dcloudio/uni-app";
import go from "@/commons/utils/go.js";
import * as chatCouponApi from "@/http/api/market/chat";

import { useChatStore } from "@/store/chat";

const chatStore = useChatStore();
chatStore.onReceiveMsg = (msg) => {};
chatStore.connectSocket();

function toDetail(item) {
  uni.setStorageSync("cach_couponActivity", item);
  go.to("PAGES_CHAT_COUPON_ACTIVITY_DETAIL", {
    id: item.id,
  });
}
const tabs = reactive({
  list: [
    {
      label: "全部",
      value: "",
    },
    {
      label: "发放中",
      value: 1,
    },
    {
      label: "已失效",
      value: 3,
    },
  ],
  selIndex: 0,
});

const query = reactive({
  page: 1,
  size: 10,
});
function cancelChatCoupon(item) {
  chatCouponApi.chatCouponExpired(item.id).then((res) => {
    if (res) {
      uni.showToast({
        title: "操作成功",
        icon: "none",
      });
      refresh();
    } else {
      uni.showToast({
        title: "取消失败",
        icon: "none",
      });
    }
  });
}

function sendMsg(msg) {
  chatStore.sendMessage({
    to_id: groupInfo.value.id,
    to_user_type: groupInfo.value.id,
    chat_type: 2,
    content: msg.value,
    image_url: "",
    order_id: "",
    session_id: options.session_id,
    ...msg,
  });
}
function toShare(item) {
  sendMsg({
    coupon: { ...item.couponJson, title: item.title,activity_id:item.id },
    chat_coupon_id:item.id,
    msg_type: 4,
  });

  uni.navigateBack({
    delta: 2,
  });
 
}

const options = reactive({});
const groupInfo = ref({});
onLoad((opt) => {
  Object.assign(options, opt);
  chatApi
    .groupInfo({
      group_id: options.group_id,
    })
    .then((res) => {
      groupInfo.value = res || {};
    });
});
function cancel(item) {
  uni.showModal({
    title: "提示",
    content: "确定取消该优惠券吗？",
    confirmText: "确定",
    cancelText: "取消",
    success: function (res) {
      if (res.confirm) {
        cancelChatCoupon(item);
      } else if (res.cancel) {
        console.log("用户点击取消");
      }
    },
  });
}
function returnStateText(item) {
  if (item.status == 1) {
    return "发放中";
  } else if (item.status == 3) {
    return "已失效";
  }
}
function tabsChange(e) {
  tabs.selIndex = e;
  refresh();
}
function refresh() {
  query.page = 1;
  isEnd.value = false;
  init();
}
const list = ref([]);

const isEnd = ref(false);
function init() {
  chatCouponApi
    .chatCouponPage({ ...query, status: tabs.list[tabs.selIndex].value })
    .then((res) => {
      console.log(res);
      const arr = (res.records || []).map((v) => {
        return {
          ...v,
          couponJson: JSON.parse(v.couponJson),
        };
      });
      if (query.page == 1) {
        list.value = arr;
      } else {
        list.value.push(...arr);
      }
      console.log(list.value);
      isEnd.value = query.page >= res.totalPage * 1;
    });
}
onReachBottom(() => {
  if (!isEnd.value) {
    query.page++;
    init();
  }
});
onShow(init);
</script>

<style scoped lang="scss">
.top {
  padding: 20rpx 62rpx;
  background-color: #fff;
}
.list {
  padding: 32rpx 28rpx;
  .item {
    padding: 32rpx;
    background-color: #fff;
    margin-bottom: 28rpx;
    .desc {
      padding: 32rpx 28rpx;
      background: #f8f8f8;
      font-size: 24rpx;
    }
    .status {
      padding: 4rpx 12rpx;
      border-radius: 8rpx;
      font-size: 24rpx;
      &.status1 {
        color: rgba(52, 199, 89, 1);
        background-color: rgba(52, 199, 89, 0.15);
      }
      &.status3 {
        color: #999999;
        background-color: rgba(153, 153, 153, 0.15);
      }
    }
    .Id {
      padding: 8rpx 6rpx;
      margin-left: 36rpx;
      font-size: 18rpx;
      color: #999;
      border-radius: 4rpx;
      background-color: #f8f8f8;
    }
  }
}
.btn {
  padding: 8rpx 42rpx;
  border-radius: 100rpx;
  font-size: 28rpx;
  font-weight: 700;
  &.cancel {
    background-color: #f8f8f8;
    color: #999999;
  }
  &.primary {
    background-color: $my-main-color;
    color: #fff;
  }
  &.share {
    background-color: #ecf5ff;
    color: $my-main-color;
    border: 1px solid $my-main-color;
  }
}
</style>
