<route lang="yaml">
style:
  navigationBarTitleText: 全部任务
  navigationBarBackgroundColor: '#fff'
</route>
<script setup lang="ts">
import Card from '@designer-hub/app/src/components/card.vue'

const tasks = ref([
  {
    status: 0,
    type: 1,
    name: 'imola',
    brand: 'imola瓷砖',
    start: '2024/06/07',
    end: '2024/06/15',
    targe: 30,
    finished: 22,
  },
  {
    status: 0,
    type: 2,
    name: 'imola',
    brand: 'imola瓷砖',
    start: '2024/06/07',
    end: '2024/06/15',
    targe: 30,
    finished: 22,
  },
  {
    status: 0,
    type: 1,
    name: 'imola',
    brand: 'imola瓷砖',
    start: '2024/06/07',
    end: '2024/06/15',
    targe: 30,
    finished: 22,
  },
])
const types = ref({
  1: { title: '到店', bg: '', bgClass: 'bg-gradient-to-r from-[#cfe0ff] to-[#e1ecff]' },
  2: { title: '订单', bg: '', bgClass: 'bg-gradient-to-r from-[#ffe8cf] to-[#fff3e1]' },
})
const toDetail = async () => {
  await uni.navigateTo({ url: '/pages/home/tasks/detail/index' })
}
</script>
<template>
  <div class="flex-grow flex flex-col gap-4 p-4">
    <template v-for="({ type }, i) of tasks" :key="i">
      <div @click="toDetail()">
        <Card :custom-class="`${types[type].bgClass} p-0`">
          <div class="flex p-4 items-center">
            <div
              class="w-[47px] h-[23px] px-1 bg-[#2357e9] rounded border justify-center items-center gap-2.5 inline-flex"
            >
              <div
                class="text-right text-white text-xs font-normal font-['PingFang SC'] leading-tight"
              >
                进行中
              </div>
            </div>
            <div class="mx-2.5 text-black/90 text-lg font-normal font-['PingFang SC'] leading-none">
              {{ types[type].title }}量
            </div>
            <div class="flex-1"></div>
            <div class="mx-1.5 text-black/40 text-xs font-normal font-['PingFang SC'] leading-none">
              奖励积分
            </div>
            <div class="text-[#ff2e2e] text-[22px] font-medium font-['DIN'] leading-none">2000</div>
          </div>
          <div class="flex flex-col gap-4 bg-white p-5 rounded-2xl">
            <div>
              <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
                材料商：
              </span>
              <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none">
                imola
              </span>
            </div>
            <div>
              <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
                品牌：
              </span>
              <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none">
                imola瓷砖
              </span>
            </div>
            <div>
              <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
                任务时间：
              </span>
              <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none">
                2024/06/07-2024/09/16
              </span>
            </div>
            <div class="flex items-center border-t border-t-solid border-t-[#efefef] pt-1.5">
              <div class="text-black/90 text-sm font-normal font-['PingFang SC']">目标</div>
              <div class="ml-2 text-black/90 text-lg font-medium font-['DIN'] leading-normal">
                30
              </div>
              <div class="ml-12 text-[#2357e9] text-sm font-normal font-['PingFang SC']">完成</div>
              <div class="ml-2 text-[#2357e9] text-lg font-medium font-['DIN'] leading-normal">
                22
              </div>
            </div>
          </div>
        </Card>
      </div>
    </template>
  </div>
</template>
