<template>
  <view class="px-base">
    <CuNavbar title="任务详情"></CuNavbar>

    <BaseCompApi :apiUrl="`/tasks/${id}`" :colums="baseColums">
      <template v-slot="{ slotName, data }">
        <view v-if="slotName == 'taskable.description'">
          {{ data }}
        </view>
      </template>
    </BaseCompApi>

    <view class="h-100rpx">
      <view
        class="fixed bottom-0 left-0 right-0 h-120rpx bg-white flex items-center px-base space-x-30rpx"
      >
        <view class="flex-1">
          <uv-button color="#999999" shape="circle" plain block>
            拒绝
          </uv-button>
        </view>
        <view class="flex-1">
          <uv-button type="primary" shape="circle" block> 通过 </uv-button>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import BaseCompApi from '@/components/base-comp/base-api.vue'
import { timeFormat } from '@climblee/uv-ui/libs/function'
const baseColums = [
  {
    title: '申请人',
    dataIndex: 'name',
  },
  {
    title: '所属门店',
    dataIndex: 'taskable.store.address',
  },
  {
    title: '电话号码',
    dataIndex: '',
  },
  {
    title: '申请时间',
    dataIndex: 'created_at',
    format: timeFormat,
  },
  {
    title: '清洁范围',
    dataIndex: 'taskable.description',
    labelPosition: 'top',
  },
]
const id = ref(null)

onLoad((opt) => {
  id.value = opt.id
})
</script>
