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

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 type = ref(1)
</script>
<template>
  <view class="flex-grow flex flex-col p-4 gap-4">
    <Card :custom-class="[types[type].bgClass, 'p-0']">
      <div class="flex p-4 items-center">
        <div class="text-black/90 text-lg font-normal font-['PingFang SC'] leading-none">
          目标{{ types[type].title }}（30）量
        </div>
        <div class="flex-1"></div>
        <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>
      <div class="flex flex-col gap-4 bg-white p-5 rounded-2xl">
        <div
          class="grid grid-cols-[2fr_2fr_3fr] items-center border-b border-b-solid border-b-[#efefef] pb-1.5"
        >
          <div class="flex items-center">
            <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>
          <div class="flex items-center justify-center">
            <div class="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 class="flex items-center justify-end">
            <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-none">
              奖励积分
            </div>
            <div class="ml-2 text-[#ff2e2e] text-[22px] font-medium font-['DIN'] leading-none">
              2000
            </div>
          </div>
        </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">
            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>
          <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 10:20
          </span>
        </div>
        <div class="w-[310px] h-[42px]">
          <span class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-normal">
            备注说明：
          </span>
          <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
            平台统计预计在本月底进行截止请注意时间
          </span>
        </div>
      </div>
    </Card>
    <Card>
      <div class="flex items-center">
        <div class="mr-2.5 w-1 h-4 rotate-180 bg-[#2357e9] rounded-[20px]"></div>
        <SectionHeading title="数据明细" size="base"></SectionHeading>
      </div>
      <div class="flex flex-col gap-4 mt-5">
        <div class="flex gap-2.5 p-3.5 bg-[#f7fbff] items-center rounded-[10px]">
          <img class="w-11 h-11 rounded-full" src="https://via.placeholder.com/44x44" />
          <div class="flex-1 flex flex-col gap-2">
            <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
              王一博
            </div>
            <div class="text-black/30 text-sm font-normal font-['PingFang SC'] leading-none">
              打卡imola瓷砖
            </div>
          </div>
          <div class="flex items-start h-full">
            <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal">
              2024/04/01 11:25
            </div>
          </div>
        </div>
        <div class="flex gap-2.5 p-3.5 bg-[#f7fbff] items-center rounded-[10px]">
          <img class="w-11 h-11 rounded-full" src="https://via.placeholder.com/44x44" />
          <div class="flex-1 flex flex-col gap-2">
            <div class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
              王一博
            </div>
            <div class="text-black/30 text-sm font-normal font-['PingFang SC'] leading-none">
              打卡imola瓷砖
            </div>
          </div>
          <div class="h-full flex items-start">
            <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal">
              2024/04/01 11:25
            </div>
          </div>
        </div>
      </div>
    </Card>
  </view>
</template>
