<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { taskReceive } from '../../../core/libs/requests'
import { useUserStore } from '../../../store'
import Card from '@designer-hub/app/src/components/card.vue'
import dayjs from 'dayjs'
import { useTask } from '../../../composables/task'
import { AgentTask } from '@designer-hub/app/src/core/libs/models'
const props = withDefaults(defineProps<{ options: any }>(), { options: () => ({}) })
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)

const emits = defineEmits<{ change: [] }>()
const { types } = useTask()
const status = ref<{ [key: number]: { title: string; bg: string; bgClass: string } }>({
  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 acceptingOrders = async (item: AgentTask) => {
  uni.showModal({
    title: '提示',
    content: '是否确认接受该任务？',
    showCancel: true,
    cancelText: '取消',
    confirmText: '确定',
    success: async function (res) {
      if (res.confirm) {
        await uni.showLoading()
        const res = await taskReceive({
          brokerId: userInfo.value.userId,
          taskId: item.id,
          isOrders: true,
        })
        uni.hideLoading()
        uni.showToast({ title: '接单成功', icon: 'none' })
        emits('change')
      } else if (res.cancel) {
        /* empty */
      }
    },
  })
}
const acceptingNoOrders = async (item: AgentTask) => {
  uni.showModal({
    title: '提示',
    content: '是否确认不接该任务？',
    showCancel: true,
    cancelText: '取消',
    confirmText: '确定',
    success: async function (res) {
      if (res.confirm) {
        await uni.showLoading()
        const res = await taskReceive({
          brokerId: userInfo.value.userId,
          taskId: item.id,
          isOrders: false,
        })
        uni.hideLoading()
        if (res) {
          await uni.showToast({ title: '已拒绝接单', icon: 'none' })
        }
        emits('change')
      } else if (res.cancel) {
        /* empty */
      }
    },
  })
}
const toDetail = () =>
  uni.navigateTo({ url: `/pages/agent/tasks/detail/index?taskId=${props.options.id}` })
</script>
<template>
  <div @click="toDetail">
    <Card
      :custom-class="`p-0 bg-gradient-to-r`"
      style="padding: 0"
      :custom-style="types[options.taskType as 1 | 2 | 3].bgStyle"
    >
      <div class="flex p-4 items-center">
        <div
          :class="`${status[options.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[options.status as 1 | 2 | 3].title }}
          </div>
        </div>
        <div class="mx-2.5 text-black/90 text-lg font-normal font-['PingFang_SC'] leading-none">
          {{ types[options.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-['D-DIN-PRO'] leading-none">
          {{ options.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">
            {{ options.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">
            {{ options.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(options.startTime).format('YYYY/MM/DD') }}-{{
              dayjs(options.endTime).format('YYYY/MM/DD')
            }}
          </span>
        </div>
        <div class="flex items-center border-t border-t-solid border-t-[#efefef] pt-2.5">
          <div class="text-black/90 text-sm font-normal font-['PingFang_SC']">
            目标 {{ options.storeQuantity ?? 0 }}
          </div>
          <template v-if="!options.receive">
            <div class="flex-1"></div>
            <div class="text-black/90 text-sm font-normal font-['PingFang_SC']">
              个人完成
              <span style="color: #2357e9">{{ options.personalCompletedNum ?? 0 }}</span>
            </div>
            <div class="flex-1"></div>
            <div class="text-black/90 text-sm font-normal font-['PingFang_SC']">
              累计完成
              <span style="color: #f1981b">{{ options.completedNum ?? 0 }}</span>
            </div>
          </template>
          <template v-else>
            <div class="flex-1"></div>
            <div
              v-if="options.receive"
              class="mr-[16px] w-[68px] h-7 px-2.5 py-[3px] box-border rounded-[30px] border border-[#fe5053] justify-center items-center gap-2.5 inline-flex"
              style="border: 1px solid #fe5053"
              @click.stop="acceptingNoOrders(options)"
            >
              <div class="w-9 text-[#ff2d2d] text-xs font-normal font-['PingFang_SC']">不接单</div>
            </div>
            <div
              v-if="options.receive"
              @click.stop="acceptingOrders(options)"
              class="w-[68px] h-7 px-2.5 py-[3px] box-border 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>
