<template>
  <view class="market-box">
    <view v-for="item in taskList" :key="item.id">
      <view
        class="market-list"
        :style="{ background: item.backgroundColor }"
        @click="navigateToDetail(item.id, item.title)"
      >
        <image :src="item.img" alt="" />
        <view class="info" :style="{ color: item.color }">
          <view class="title">{{ item.title }}</view>
        </view>
        <view class="btn">
          <uv-icon name="arrow-right" :color="item.color" size="16" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import taskList from './taskList'
import { onShow } from '@dcloudio/uni-app'
// 引入防抖函数
const Lock = ref(false)

onShow(() => {
  Lock.value = false
  console.log('cc', Lock.value)
})

const navigateToDetail = (id: number, title: string) => {
  if (Lock.value) return
  uni.showLoading({
    mask: true,
    title: '加载中'
  })

  Lock.value = true

  uni.navigateTo({
    url: `/pages-sub-task/task/index?value=${id}&title=${title}`
  })
  setTimeout(() => {
    uni.hideLoading()
    Lock.value = false
  }, 3000)
}
</script>

<style lang="scss" scoped>
.market-box {
  padding: 30rpx;
  .market-list {
    height: 180rpx;
    border-radius: 16rpx;
    padding: 10rpx 24rpx;
    display: flex;
    align-items: center;
    margin-bottom: 24rpx;
    image {
      width: 160rpx;
      height: 160rpx;
    }
    .info {
      margin-left: 24rpx;
      .title {
        font-size: 36rpx;
        font-weight: 600;
        margin-bottom: 10rpx;
      }
      .desc {
        font-size: 22rpx;
      }
    }
    .btn {
      margin-left: auto;
      width: 56rpx;
      height: 56rpx;
      border-radius: 50%;
      background: rgba($color: #fff, $alpha: 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
