<template>
  <view>
    <CuNavbar title="报销详情">
      <template #right>
        <uv-icon 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="actions" @select="select" />

    <uv-modal ref="modalRef" title="提示" content="确定删除吗?" @confirm="onDelete" :showCancelButton="true"></uv-modal>
  </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 ,onShow} from '@dcloudio/uni-app'
import { http } from '@/utils/request'
import statusFun from '@/utils/status'

const modalRef = ref(null)
const actions = ref([
  { name: '修改', value: 'edit', disabled: false },
  { name: '删除', value: 'delete', disabled: false },
  { name: '审核流程', value: 'check-logs', disabled: false }
])

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

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

const select = (e) => {
  if (e.value == 'edit') {
    uni.navigateTo({
      url: `/pages/expense-account/submit?id=${id.value}`,
    })
  } else if (e.value == 'delete') {
    modalRef.value.open()
  } else if (e.value == 'check-logs') {
    return uni.navigateTo({
      url: `/pages/audits/log?id=${data.value.workflow_check.id}`
    })
  }
}

const onDelete = () => {
  http.delete(`/reimbursements/${id.value}`).then(() => {
    uni.$emit('refresh')
    uni.showToast({
      title: '删除成功',
      icon: 'none',
    })
    uni.navigateBack()
  })
}

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

const getDetail = () => {
  http.get(`/reimbursements/${id.value}`).then((res) => {
    data.value = res
    let status = res.workflow_check.check_status
    if ([2, 3].indexOf(status) != -1) {
      actions.value[0].disabled = true
      actions.value[1].disabled = true
      // actions.value.splice(0, 2)
    }
  })
}
</script>
