<template>
  <view class="content">
    <kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>
    <!-- <view class="w-full">
      <wd-navbar fixed safeAreaInsetTop :leftText="coupon_info?.info?.name || '商城首页'">
        <template #right>
          <wd-icon @click="utils.toUrl('/store/setup/index')" name="setting" size="22px"></wd-icon>
        </template>
      </wd-navbar>
    </view> -->

    <view class=" bg-white sticky top-0 z-50 flex items-center">
      <view class="flex-1">
        <wd-search @search="search({ value: params.keywords })" @clear="search({ value: params.keywords = '' })"
          v-model="params.keywords" hide-cancel>
          <template #prefix>
            <wd-popover v-model="popover" mode="menu" :content="menu" @menuclick="changeSearchType">
              <view class="search-type">
                <text>{{ searchType }}</text>
                <wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
              </view>
            </wd-popover>
          </template>
        </wd-search>
      </view>

      <view class="mr-2">
        <wd-button @click="utils.toUrl('/store/coupon/edit')" size="small">新增券</wd-button>
      </view>
    </view>

    <!-- <view class="flex-1 bg-white pb-2">
      <div class="rounded-md overflow-hidden">
        <wd-tabs @change="search">
          <wd-tab :title="`全部`" :name="null"></wd-tab>
          <wd-tab :title="`领取后过期`" :name="0"></wd-tab>
          <wd-tab :title="`定时过期`" :name="1"></wd-tab>
        </wd-tabs>
      </div>
    </view> -->

    <view class="grid p-2">

      <yList height="91vh" ref="yListRef" :apiObj="coupon.List" :params="{ ...params }">
        <template #default="{ list: couponList }">
          <view class="flex flex-col">
            <view v-for="coupon of couponList" class="overflow-hidden relative">


              <wd-swipe-action class="rounded-xl overflow-hidden mb-3 ">

                <view class="couponCart relative " style="background-color: #fff;
    background-image: linear-gradient(135deg,#ff552d 10%,#0000 0,#0000 50%,#fe4b26 0,#ff702c 60%,#0000 0,#0000);
    background-size: 9.09px 9.09px;">

                  <view class="w-[76%] bg-red-600 absolute top-0 bottom-0 left-0" style="z-index: 0;"></view>

                  <view class="relative px-4 py-4" style="z-index: 1;">
                    <view
                      class="rounded-r-xl font-bold absolute top-0 left-0 px-2 pr-4 py-1 text-[12px] bg-neutral-900 text-orange-500 z-30">
                      ID: {{ coupon.id }}
                    </view>

                    <view
                      class="rounded-xl font-bold absolute top-0 left-8 px-2 pr-4 py-1 pl-8 text-[12px] bg-neutral-800 text-orange-500 z-20">
                      {{ ["优惠券", "商品可用", "分类可用", "当面付"][coupon.coupon_type] }}
                    </view>

                    <view v-if="coupon.stock > 0"
                      class="rounded-xl font-bold absolute top-0 left-24 px-2 py-1 pl-8 text-[12px] bg-neutral-700 text-orange-400 z-10">
                      剩余 {{ coupon.stock }}
                    </view>


                    <view v-else
                      class="rounded-xl font-bold absolute top-0 left-24 px-2 py-1 pl-8 text-[12px] bg-neutral-700 text-white z-10">
                      已领完
                    </view>


                    <view class="flex">
                      <view class="mt-4 mr-6">
                        <!-- <view class="price text-[16px] text-orange-300">
                          
                        </view> -->

                        <view class="leading-4 mt-1">

                          <view class="price  text-[12px] text-orange-300">
                            {{ coupon.name }}
                          </view>

                          <view class="price text-white text-[12px]">

                            <div class="day" v-if="coupon.send_type == 1">
                              有效时间： {{ formatOfTime(coupon.start_time) }} - {{ formatOfTime(coupon.end_time) }}
                            </div>
                            <div v-else>有效时间：--</div>

                          </view>

                          <view class="price text-white text-[12px]">
                            过期时间：{{ coupon.day }} 天
                          </view>

                          <div class="flex flex-col">
                            <view class="price text-white text-[12px] mr-4">
                              券金额： {{ coupon.price }} 天
                            </view>

                            <view class="price text-white text-[12px]">
                              满减金额： {{ coupon.full_price }} 天
                            </view>

                          </div>
                        </view>

                      </view>




                    </view>

                    <view class="mt-4 text-white flex items-center justify-center absolute top-0 right-[24%] ">

                      <view class="bg-red-700 px-4 py-2 font-bold text-[13px] rounded-l-full " :round="false"
                        size="small">
                        <span v-if="coupon.limit_type == 1">不限</span>
                        <span v-if="coupon.limit_type == 2">每天一次</span>
                        <span v-if="coupon.limit_type == 3">每人一次</span>
                      </view>

                    </view>

                  </view>


                </view>

                <template #right>
                  <view class="flex h-full ">
                    <view
                      class="px-4 text-nowrap  h-full bg-red-700 text-white text-black flex items-center justify-center">
                      <view @click="utils.toUrl('/store/coupon/edit?id=' + coupon.id)" style="writing-mode: vertical-rl;
    text-orientation: upright;">
                        编辑
                      </view>
                    </view>
                  </view>
                </template>

              </wd-swipe-action>



            </view>
          </view>
        </template>
      </yList>

    </view>

    <wd-toast />
    <wd-message-box></wd-message-box>
  </view>
</template>

<script setup>
import { ref, nextTick } from 'vue';
import utils from '@/utils/utils.js';
import coupon from '@/api/store/coupon.js';
import kevyloading from "@/components/kevy-loading/kevy-loading";
import { useMessage } from '@/uni_modules/wot-design-uni';
import { useToast } from '@/uni_modules/wot-design-uni'
import yList from "/components/yList/index.vue";

import {
  onShow,
} from "@dcloudio/uni-app";

const yListRef = ref(null);

const searchType = ref('券名');
const popover = ref(false);

const search = ({ value } = {}) => {

  if (searchType.value == '券名') {
    yListRef.value.upData({
      name: params.value.keywords,
    });
  } else if (searchType.value == '券金额') {
    yListRef.value.upData({
      price: params.value.keywords
    });
  } else {
    yListRef.value.upData({});
  }

};

const menu = ref([
  { content: '券名' },
  { content: '券金额' },
]);

const params = ref({
  name: null,
  price: null,
  send_type: null
});

/**
 * 切换搜索类型
 * @param {Object} item - 切换的项
 */
function changeSearchType({ item, index }) {
  searchType.value = item.content;
  search(params.value.keywords)
}

/** 
 * @type {Ref<boolean>} 
 * 控制页面加载状态的 Ref
 */
const loading = ref(false);

const formatOfTime = (theTimeStamp) => {
  const date = new Date(theTimeStamp * 1000); // 将时间戳转换为毫秒
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');

  return `${year}-${month}-${day} ${hours}`;
}

// 初始化调用获取一行数据
onShow(() => {

  nextTick(() => {
    search({ value: params.value.keywords = '' })
  })
  // search('')
  // getcouponList();
})
</script>

<style lang="scss" scoped>
.search-type {
  position: relative;
  height: 30px;
  line-height: 30px;
  padding: 0 8px 0 16px;
  font-size: 24rpx;
  color: rgba(0, 0, 0, .45);
}

.search-type::after {
  position: absolute;
  content: '';
  width: 1px;
  right: 0;
  top: 5px;
  bottom: 5px;
  background: rgba(0, 0, 0, 0.25);
}

.search-type {
  :deep(.icon-arrow) {
    display: inline-block;
    font-size: 20px;
    vertical-align: middle;
  }
}


.couponBox,
.title {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

.couponBox {
  justify-content: flex-start;
}

.title {
  justify-content: space-between;
}

.title-tip {
  color: rgba(0, 0, 0, 0.25);
  font-size: 12px;
}
</style>
