<template>
  <view>
    <CuNavbar title="审核详情">
      <template #right>
        <view class="text-sm text-white" @click="goPath(`/pages/audits/log?id=${data.check_id}`)">审核流程</view>
      </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>

    <view v-if="checkable" 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 @click="onJj" color="#999999" shape="circle" plain block>
            拒绝
          </uv-button>
        </view>
        <view class="flex-1">
          <uv-button type="primary" shape="circle" block @click="onTg">
            通过
          </uv-button>
        </view>
      </view>
    </view>

    <uv-modal
      ref="modalRef"
      title="提示"
      :content="modelOptions.content"
      @confirm="modelOptions.onConfirm"
      :showCancelButton="true"
    >
      <view class="flex-1" v-if="modelOptions.isValue">
        <view class="w-full">
          <uv-textarea v-model="value" placeholder="请填写未通过原因"></uv-textarea>
        </view>
      </view>
    </uv-modal>
  </view>
</template>
<script setup>
import CuNavbar from '@/components/cu-navbar/index'
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed, reactive } from 'vue'
import { http } from '@/utils/request'
import BaseData from './base-data.vue'
import datajson from './data.data'

const value = ref('')
const colums = computed(() => datajson[type.value].data ?? [])
const params = computed(() => datajson[type.value].params ?? {})
const id = ref(null)
const type = ref(null)
const data = ref(null)
const checkable = ref(false)

const modalRef = ref(null)

const modelOptions = reactive({
  title: '提示',
  content: '确定通过吗?',
  isValue: false,
  onConfirm: () => {},
})

const onConfirm = async () => {
  if (modelOptions.isValue && !value.value) {
    return uni.showToast({title: "请填写未通过原因", icon: "none"})
  }
  try {
    await http.post(`/workflow/${id.value}/check`, {
      status: !modelOptions.isValue,
      remarks: modelOptions.isValue ? value.value : '',
    })
    uni.$emit('refresh', { index: 'check' })
    uni.navigateBack()
  } catch (error) {
    console.log(error)
  }
}

const onTg = () => {
  value.value = ''
  modelOptions.title = '提示'
  modelOptions.content = '确定通过吗?'
  modelOptions.isValue = false
  modelOptions.onConfirm = onConfirm
  modalRef.value.open()
}
const onJj = () => {
  value.value = ''
  modelOptions.title = '拒绝原因'
  modelOptions.content = '确定拒绝吗?'
  modelOptions.isValue = true
  modelOptions.onConfirm = onConfirm
  modalRef.value.open()
}

onLoad((opt) => {
  id.value = opt.id
  type.value = opt.type
  getData()
})

const getData = async () => {
  const resData = await http.get(`/workflow/${id.value}`, {
    params: {
      subject_type: type.value,
      ...params.value,
    },
  })
  data.value = resData.data
  checkable.value = resData.checkable
}

const goPath = (url) => {
  uni.navigateTo({ url })
}
</script>
