<template>
  <view class="market-box">
    <template v-for="(item, index) in taskList" :key="item.url">
      <view v-show="getShow(index)">
        <view
          class="market-list"
          :style="{ background: item.backgroundColor }"
          @click="navigateToDetail(item.url)"
        >
          <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>
    </template>
  </view>
</template>

<script setup lang="ts">
import taskList from './taskList'
import { useLoginStore } from '@/store/login'
const loginStore = useLoginStore()
let userInfo: any = loginStore.currentUserInfo
const currentRoles: number[] = userInfo.roles

const navigateToDetail = (url: string) => {
  uni.navigateTo({
    url: url
  })
}

const getShow = (index: number) => {
  if (index === 0) {
    return !currentRoles.includes(37)
  }
  if (index === 1) {
    return currentRoles.includes(37)
  }
  return true
}
</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>
