""" @author: yy @desc：审批记录 @date: 2025-06-08 09:43:01 """
<template>
  <div>
    <!-- 下发的 -->
    <div v-if="data.type === '01'">
      <MOSTY.Table
        v-if="detailData?.length"
        :table-columns="detailApproveInfoTableConfig"
        :tableData="detailData"
        :tableloading="tableloading"
        :isSelect="true"
        :isSort="true"
        actionsW="280"
      >
        <template #actions="{ row }">
          <el-button v-if="row.state === '05'" link type="primary" size="small" @click="handleAction(row)"> 去审批 </el-button>
        </template>
      </MOSTY.Table>
      <el-empty v-else description="暂无数据" />
    </div>
    <!-- 接收的 -->
    <div v-else>
      <el-steps direction="vertical" :active="active" v-if="detailData?.length">
        <el-step :title="item.statusTitle" v-for="(item, i) in detailData" :key="i">
          <template #description>
            <div>
              <div>
                {{ item.statusType === "01" ? "提交人" : "审核人" }}：
                {{ item.statusType === "01" ? item.xtCjr : item.xtCjr }}
              </div>
              <div>{{ item.statusType === "01" ? "反馈" : "审核" }}时间：{{ item.xtCjsj }}</div>
              <div v-if="item.statusType === '02'">状态：{{ item.status === "01" ? "审批通过" : "审批不通过" }}</div>
              <div v-if="item.status === '02'">意见：{{ item.detail }}</div>
            </div>
          </template>
        </el-step>
      </el-steps>
      <el-empty v-else description="暂无数据" />
    </div>

    <el-dialog v-model="dialogFormVisible" title="审批">
      <el-form :model="form" ref="ruleFormRef" class="mosty-from-wrap" :inline="false">
        <el-row style="width: 100%">
          <el-col :span="24">
            <el-form-item label="任务标题">
              <label>{{ currentTitle }}</label>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="width: 100%">
          <el-col :span="24">
            <el-form-item label="审批状态">
              <el-radio-group v-model="form.status">
                <el-radio label="01">通过</el-radio>
                <el-radio label="02">不通过</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="width: 100%">
          <el-col :span="24">
            <el-form-item v-if="form.status === '02'" label="审批意见" prop="detail" :rules="[{ required: true, message: '请输入审批意见', trigger: 'blur' }]">
              <el-input type="textarea" v-model="form.detail" :autosize="{ minRows: 3, maxRows: 5 }" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" v-loading="saveloading" @click="handelDailogSubmit"> 提交 </el-button>
          <el-button @click="dialogFormVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue"
import { ElMessage } from "element-plus"
import * as MOSTY from "@/components/MyComponents/index"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import { detailApproveInfoTableConfig } from "../models/detail"

const props = defineProps({
  // 详情接口数据
  data: {
    default: () => ({}),
    type: Object
  }
})

const ruleFormRef = ref()
const detailData = ref([])
const active = ref(0)
const tableloading = ref(false)
const dialogFormVisible = ref(false)
const saveloading = ref(false)
const currentTitle = ref("")
const taskId = ref("")
const form = ref({
  status: "01", // 审核状态 01 同意 02 拒绝
  detail: "" // 审批意见
})

const handelDailogSubmit = async () => {
  saveloading.value = true
  if (!ruleFormRef.value) return
  await ruleFormRef.value.validate(async valid => {
    if (valid) {
      console.log(form.value)
      try {
        const _url = form.value.status === "01" ? "passTask" : "refuseTask"
        await postApi({ ...form.value, taskId: taskId.value }, "/mosty-jcgl/taskController/" + _url)
        ElMessage.success("审批成功")
        dialogFormVisible.value = false
        getData()
      } catch (e) {
        console.log(e)
      } finally {
        saveloading.value = false
      }
    } else {
      saveloading.value = false
    }
  })
}

const handleAction = row => {
  currentTitle.value = row.title
  taskId.value = row.id
  dialogFormVisible.value = true
}

const getData = async () => {
  try {
    tableloading.value = true
    const url = `/mosty-jcgl/taskController/${props.data.type === "01" ? "selectRecord" : "selectStatusRecord"}`
    detailData.value = await getApi({ taskId: props.data.id }, url)
    active.value = detailData.value.length - 1
  } catch (e) {
    console.log(e)
  } finally {
    tableloading.value = false
  }
}

onMounted(() => {
  getData()
})
</script>
<style lang="scss" scoped></style>
