<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'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import DataForm from "@/components/data-form.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 current = ref<number>(10)
const type = ref(1)
const taskType = ref(2)
const publishState = ref(false)
const fromModel = ref()
const customerSchema = ref({
  customerName: {
    type: 'TextField',
    label: '个人完成量:',
    props: {
      labelWidth: '126rpx',
      placeholder: '请输入个人完成量',
    },
  },
  customerPhoneNumbe: {
    type: 'textarea',
    label: '上报说明:',
    props: {
      labelWidth: '126rpx',
      placeholder: '请输入上报说明',
    },
  },
})
</script>
<template>
  <view class="flex-grow flex flex-col p-4 gap-4" style="position: relative">
    <Card :custom-class="`${types[type].bgClass} px-0 py-0`">
      <div class="flex items-center py-[20px] px-[15px]">
        <div class="text-black/90 text-lg font-normal font-['PingFang SC'] leading-none">
          团队任务
        </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="bg-[#f6f7ff]" style="border-top-left-radius: 8px; border-top-right-radius: 8px">
        <div class="flex flex-row items-center justify-start p-[15px] gap-2">
          <div style="width: 50px; height: 50px">
            <wd-circle v-model="current" :size="50" color="rgba(66, 113, 255, 1)"></wd-circle>
          </div>
          <div class="flex flex-row items-center justify-start ml-[37px]">
            <div class="text-black/60 text-sm font-normal font-['PingFang SC']">奖励积分：</div>
            <div class="text-[#ff2d2d] text-[22px] font-medium font-['DIN'] leading-normal">
              6000
            </div>
            <div class="text-[#ff2d2d] text-xs font-normal font-['PingFang SC'] leading-normal">
              积分
            </div>
          </div>
        </div>
        <div class="flex flex-row items-center justify-between gap-2 p-[20px]">
          <div class="flex items-center justify-center flex-col">
            <div class="text-black/60 text-xs font-normal font-['PingFang SC']">目标</div>
            <div class="w-5 text-black/90 text-lg font-medium font-['DIN'] leading-normal">30</div>
          </div>
          <div style="background: #e8e8e8; height: 10px; width: 1px"></div>
          <div class="flex items-center justify-center flex-col">
            <div class="text-black/60 text-xs font-normal font-['PingFang SC']">个人完成</div>
            <div class="w-5 text-black/90 text-lg font-medium font-['DIN'] leading-normal">30</div>
          </div>
          <div style="background: #e8e8e8; height: 5px; width: 1px"></div>
          <div class="flex items-center justify-center flex-col">
            <div class="text-black/60 text-xs font-normal font-['PingFang SC']">累计完成</div>
            <div class="w-5 text-black/90 text-lg font-medium font-['DIN'] leading-normal">30</div>
          </div>
          <!--            </div>-->
        </div>
      </div>
      <div class="bg-[#ffffff] p-[14px] pt-[24px]">
        <div class="mb-[19px]">
          <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">
            邀请30位设计师带客到店
          </span>
        </div>
        <div class="mb-[19px]">
          <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 class="mb-[19px]">
          <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">
            曲江新区店
          </span>
        </div>
        <div class="mb-[19px]">
          <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="mb-[19px]">
          <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">
            邀请设计师带客到店，扫码获取积分
          </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">
            到店扫码
          </span>
        </div>
      </div>
      <div class="bg-[#ffffff] p-[14px]">
        <div class="flex items-center justify-between">
          <div class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-none">
            已接单经纪人
          </div>
          <div class="text-black/40 text-sm font-normal font-['PingFang SC'] leading-none">
            共2人
          </div>
        </div>
        <div class="flex items-center justify-start gap-3">
          <div class="my-[23px]">
            <img class="w-[46px] h-[46px] rounded-full" src="https://via.placeholder.com/46x46" />
            <div
              class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none mt-[10px]"
            >
              王世东
            </div>
          </div>
          <div>
            <img class="w-[46px] h-[46px] rounded-full" src="https://via.placeholder.com/46x46" />
            <div
              class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-none mt-[10px]"
            >
              王世东
            </div>
          </div>
        </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 v-if="taskType == 1" 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>
      <div v-else class="bg-[#f7fbff] rounded-[10px] py-[22px] px-[16px] mt-[20px]">
        <div class="flex items-center justify-between">
          <div class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal">
            2024/04/01 11:25
          </div>
          <div class="text-[#2357e9] text-xs font-normal font-['PingFang SC'] leading-normal">
            审核中
          </div>
        </div>
        <div class="mt-[7px]">
          <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
            个人完成量：
          </span>
          <span class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
            1
          </span>
        </div>
        <div class="mt-[2px]">
          <span class="text-black/60 text-sm font-normal font-['PingFang SC'] leading-normal">
            上报说明
          </span>
          <span class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
            ：
          </span>
          <span class="text-black/90 text-sm font-normal font-['PingFang SC'] leading-normal">
            我邀请设计师苏小萌到IMOLA曲江新区店
          </span>
        </div>
      </div>
    </Card>
    <BottomAppBar fixed placeholder>
      <template v-if="taskType == 1">
        <div class="flex items-center justify-between gap-3">
          <div
            class="grow shrink basis-0 px-5 py-3 bg-[#f2f3ff] rounded-md justify-center items-center gap-1 flex"
          >
            <div
              class="text-center text-[#ff2d2d] text-base font-normal font-['PingFang SC'] leading-normal"
            >
              不接单
            </div>
          </div>
          <div
            class="grow shrink basis-0 px-5 py-3 bg-[#2357e9] rounded-md justify-center items-center gap-1 flex"
          >
            <div
              class="text-center text-white text-base font-normal font-['PingFang SC'] leading-normal"
            >
              接单
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <div class="px-5 py-3 bg-[#2357e9] rounded-md justify-center items-center gap-1">
          <div @click="publishState = true"
            class="text-center text-white text-base font-normal font-['PingFang SC'] leading-normal"
          >
            上报
          </div>
        </div>
      </template>
    </BottomAppBar>
    <wd-action-sheet v-model="publishState" title="" @close="publishState = false">
      <view class="flex flex-col p-4 mt-4">
        <data-form :schema="customerSchema" v-model="fromModel" ></data-form>
<!--        <div><DataForm :schema="schema" direction="horizontal"></DataForm></div>-->
        <div><wd-button block :round="false">提交</wd-button></div>
      </view>
    </wd-action-sheet>
  </view>
</template>
