<script setup>
import { ref, onMounted } from 'vue'
import { useAuthStore } from '@/stores/Auth'
import { useRouter } from 'vue-router'

const store = useAuthStore()
const router = useRouter()

const requests = ref([])
const loading = ref(false)
const error = ref(null)

// загрузка списка заявок
async function loadRequests() {
  loading.value = true
  const { response, error: err } = await store.getRequests()
  if (err) {
    error.value = err
  } else {
    requests.value = response.data
  }
  loading.value = false
}
function getErrorMessage(error) {
  if (!error) return 'Неизвестная ошибка';
  if (typeof error === 'string') return error;
  if (error.response && error.response.data && error.response.data.message) return error.response.data.message;
  if (error.data && error.data.message) return error.data.message;
  if (error.message) return error.message;
  try {
    return JSON.stringify(error);
  } catch {
    return 'Неизвестная ошибка';
  }
}

async function lockRequest(id) {
  if (!confirm('Подписать заявку? После этого редактировать её сможет только региональный менеджер.')) return;
  loading.value = true;
  const {response, error: err} = await store.lockRequest(id);
  if (err) {
    alert('Ошибка: ' + getErrorMessage(err.data.error));
  } else {
    // обновить список заявок, чтобы кнопка исчезла
    await loadRequests();
  }
  loading.value = false;
}

onMounted(loadRequests)

function create() {
  router.push({ name: 'request-create' })
}

function edit(id) {
  router.push({ name: 'request-edit', params: { id } })
}
</script>


<template>
  <div>
    <h1>Список заявок</h1>

    <button
        class="btn btn-primary mb-3"
        @click="create"
    >
      Создать заявку
    </button>

    <div v-if="loading" class="text-center">Загрузка...</div>
    <div v-else-if="error" class="alert alert-danger">
      Ошибка загрузки: {{ error.message || error }}
    </div>
    <table v-else class="table table-hover">
      <thead>
      <tr>
        <th>ID</th>
        <th>Название</th>
        <th>Точек</th>
        <th>Действия</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="r in requests" :key="r.id">
        <td>{{ r.id }}</td>
        <td>{{ r.name }}</td>
        <td>{{ r.points_count }}</td>
        <td>
          <button v-if="store.hasPermission('update-requests')" class="btn btn-sm btn-outline-primary me-2" @click="edit(r.id)">
            Редактировать
          </button>
          <button
              v-if="store.hasPermission('update-requests') && !r.is_locked"
              class="btn btn-sm btn-success"
              @click="lockRequest(r.id)"
          >
            Подписать
          </button>
          <span v-else-if="r.is_locked" class="badge bg-success">Подписана</span>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

