<template>
  <view>
    <CuNavbar title="报销详情">
      <template #right>
        <uv-icon
          v-if="data?.workflow_check?.check_status == 4"
          color="white"
          @click="open"
          name="more-dot-fill"
        ></uv-icon>
      </template>
    </CuNavbar>
    <view class="px-base mt-30rpx">
      <view class="card-shadow bg-white rounded-19rpx px-base">
        <BaseData :colums="colums" :data="data"></BaseData>
      </view>
    </view>

    <uv-action-sheet
      ref="actionSheet"
      :actions="actionlist"
      @select="select"
      cancelText="取消"
    >
    </uv-action-sheet>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index.vue'
import BaseData from '@/pages/audits/base-data.vue'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { http } from '@/utils/request'

const actionlist = ref([
  {
    name: '删除',
    value: 'delete',
  },
])

const colums = [
  {
    title: "审核状态",
    dataIndex: "workflow_check.check_status_text",
  },
  {
    title: "申请人",
    dataIndex: "employee.name"
  },
  {
    title: "所属门店",
    dataIndex: "store.title"
  },
  {
    title: "电话号码",
    dataIndex: "employee.phone"
  },
  {
    title: "申请时间",
    dataIndex: "created_at_format"
  },
  {
    title: '报销分类',
    dataIndex: 'type.name',
  },
  {
    title: '报销金额',
    dataIndex: 'expense',
  },
  {
    title: '报销原因',
    dataIndex: 'reason',
    labelPosition: 'top',
  },
  {
    title: '报销凭证',
    dataIndex: 'photos',
    type: 'album',
  },
  {
    title: '未通过原因',
    dataIndex: 'remarks',
    labelPosition: 'top',
    isShow: (item) => {
      return item?.check_status == 4
    },
  },
]
const actionSheet = ref(null)
const data = ref(null)
const id = ref(null)

const open = () => {
  actionSheet.value.open()
}

const select = (e) => {
  console.log(e)
}

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

const getDetail = () => {
  http.get(`/reimbursements/${id.value}`).then((res) => {
    data.value = res
  })
}
</script>
