<route lang="json">
{
  "style": {
    "navigationBarTitleText": "全部任务",
    "navigationBarBackgroundColor": "#fff"
  }
}
</route>
<script setup lang="ts">
import Card from '@designer-hub/app/src/components/card.vue'
import { getTaskList, taskReceive } from '../../../core/libs/requests'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import dayjs from 'dayjs'
import PageHelperEvo from '@/components/page-helper-evo.vue'
import { getTasks } from '../../../core/libs/agent-requests'
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const tasksList = ref([])
const types = ref({
  // 0: { title: '团队任务', bg: '', bgClass: 'bg-gradient-to-r from-[#cfe0ff] to-[#e1ecff]' },
  1: { title: '团队任务', bg: '', bgClass: 'bg-gradient-to-r from-[#cfe0ff] to-[#e1ecff]' },
  2: { title: '抢单任务', bg: '', bgClass: 'bg-gradient-to-r from-[#ffcfcf] to-[#ffeae1]' },
  3: { title: '指定任务', bg: '', bgClass: 'bg-gradient-to-r from-[#ffe8cf] to-[#fff3e1]' },
})
const status = ref({
  1: {
    title: '未开始',
    bg: 'bg-[#f04c47]',
    bgClass: 'bg-[#f04c47]',
  },
  2: { title: '进行中', bg: '', bgClass: 'bg-[#2357e9]' },
  3: { title: '已撤回', bg: '', bgClass: 'bg-[#f04c47]' },
  4: { title: '已完成', bg: '', bgClass: 'bg-[#f04c47]' },
  5: { title: '未完成', bg: '', bgClass: 'bg-[#abacaf]' },
  6: { title: '待确认', bg: '', bgClass: 'bg-[#f04c47]' },
})
const query = computed(() => ({ brokerId: userInfo.value.userId }))

// 状态（1-未开始，2-进行中，3-已撤回，4-已完成，5-未完成，6-待确认）
const toDetail = async (item) => {
  await uni.navigateTo({ url: `/pages/home/tasks/detail/index?taskId=${item.id}` })
}
const acceptingOrders = async (item) => {
  uni.showLoading()
  const res = await taskReceive({ brokerId: userInfo.value.userId, taskId: item.id, orders: true })
  uni.hideLoading()
  initData()
}
const acceptingNoOrders = async (item) => {
  uni.showLoading()
  const res = await taskReceive({ brokerId: userInfo.value.userId, taskId: item.id, orders: false })
  uni.hideLoading()
  initData()
}

const initData = async () => {
  const res = await getTaskList({ brokerId: userInfo.value.userId })
  tasksList.value = res.data
}
onMounted(async () => {
  initData()
})
</script>
<template>
  <div class="bg-white rounded-lg shadow flex m-[18px] p-[11px]">
    <div class="text-black/90 text-base font-normal font-['PingFang_SC'] leading-relaxed">
      任务积分
    </div>
    <div class="flex-1"></div>
    <div class="text-[#ff2e2e] text-[22px] font-medium font-['DIN'] leading-none">6153</div>
    <div class="w-6 h-6 relative"></div>
  </div>

  <PageHelperEvo :request="getTasks" :query="query">
    <template #default="{ source }">
      <div class="flex-grow flex flex-col gap-4 p-4">
        <template v-for="item in source.list" :key="item.id">
          <div @click="toDetail(item)">
            <Card :custom-class="`${types[item.taskType].bgClass} p-0`" style="padding: 0">
              <div class="flex p-4 items-center">
                <div
                  :class="`${status[item.status].bgClass} w-[47px] h-[23px] px-1 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"
                  >
                    {{ status[item.status].title }}
                  </div>
                </div>
                <div
                  class="mx-2.5 text-black/90 text-lg font-normal font-['PingFang_SC'] leading-none"
                >
                  {{ types[item.taskType].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">
                  {{ item.pointsReward }}
                </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">
                    {{ item.name }}
                  </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">
                    {{ item.bearerName }}
                  </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">
                    {{ dayjs(item.startTime).format('YYYY/MM/DD') }}-{{
                      dayjs(item.endTime).format('YYYY/MM/DD')
                    }}
                  </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']">
                    目标 {{ item.storeQuantity }}
                  </div>
                  <template v-if="!item.receive">
                    <div class="flex-1"></div>
                    <div class="text-black/90 text-sm font-normal font-['PingFang SC']">
                      个人完成
                      <span style="color: #2357e9">{{ item.personalCompletedNum }}</span>
                    </div>
                    <div class="flex-1"></div>
                    <div class="text-black/90 text-sm font-normal font-['PingFang SC']">
                      累计完成
                      <span style="color: #f1981b">{{ item.completedNum }}</span>
                    </div>
                  </template>
                  <template v-else>
                    <div class="flex-1"></div>
                    <div
                      v-if="item.receive"
                      class="mr-[16px] w-[68px] h-7 px-2.5 py-[3px] rounded-[30px] border border-[#fe5053] justify-center items-center gap-2.5 inline-flex"
                      style="border: 1px solid #fe5053"
                      @click.stop="acceptingNoOrders(item)"
                    >
                      <div class="w-9 text-[#ff2d2d] text-xs font-normal font-['PingFang SC']">
                        不接单
                      </div>
                    </div>
                    <div
                      v-if="item.receive"
                      @click.stop="acceptingOrders(item)"
                      class="w-[68px] h-7 px-2.5 py-[3px] bg-[#2357e9] rounded-[30px] justify-center items-center gap-2.5 inline-flex"
                    >
                      <div class="text-white text-xs font-normal font-['PingFang SC']">接单</div>
                    </div>
                  </template>
                </div>
              </div>
            </Card>
          </div>
        </template>
      </div>
    </template>
  </PageHelperEvo>
</template>
