<template>
  <view class="px-base">
    <CuNavbar title="任务详情"></CuNavbar>
    <view
      class="mt-30rpx card-shadow bg-white rounded-19rpx px-base text-[#333333] text-27rpx"
    >
      <template v-for="(item, i) in columsList" :key="i">
        <template v-if="item.dataIndex == 'taskable.photos'">
          <view class="py-20rpx">
            <view>{{ item.title }}</view>
            <view class="grid grid-cols-3 gap-15rpx mt-20rpx">
              <view class="" v-for="op in item.value" :key="op">
                <image class="w-full" mode="widthFix" :src="op"></image>
              </view>
            </view>
          </view>
        </template>
        <view
          v-else
          class="py-20rpx flex"
          :class="[
            [
              item.labelPosition == 'top'
                ? 'flex-col space-y-10rpx'
                : 'items-center justify-between',
            ],
          ]"
        >
          <view>{{ item.title }}</view>
          <view class="text-hex-999999">{{ item.value }}</view>
        </view>
        <uv-line color="#f5f5f5" v-if="i != columsList.length - 1"></uv-line>
      </template>
    </view>
    <!-- <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 { http } from '@/utils/request'
import { ref, computed } from 'vue'
import { timeFormat } from '@climblee/uv-ui/libs/function'
const baseColums = [
  {
    title: '申请人',
    dataIndex: 'taskable.store_master.name',
  },
  {
    title: '所属门店',
    dataIndex: 'taskable.store.address',
  },
  {
    title: '电话号码',
    dataIndex: 'taskable.store_master.phone',
  },
  {
    title: '申请时间',
    dataIndex: 'created_at',
    format: timeFormat,
  },
  {
    title: '清洁范围',
    dataIndex: 'taskable.description',
    labelPosition: 'top',
  },
  {
    title: '清洁结果',
    dataIndex: 'taskable.photos',
  },
]
const id = ref(null)
const data = ref({})

const columsList = computed(() => {
  const arr = []
  baseColums.forEach((e) => {
    const { dataIndex, format } = e
    let str = getValue(data.value, dataIndex)
    if (isFunction(format)) {
      str = format(str)
    }
    arr.push({
      ...e,
      value: str,
    })
  })
  return arr
})

onLoad((opt) => {
  id.value = opt.id
  getDetail()
})

const getDetail = async () => {
  const resdata = await http.get(`/tasks/${id.value}`, {
    params: {
      id: id.value,
    },
  })
  data.value = resdata
}

const getValue = (obj, path) => {
  return path.split('.').reduce((acc, key) => (acc ? acc[key] : undefined), obj)
}

const isFunction = (fn) => {
  return typeof fn === 'function'
}
</script>
