<template>
    <div>
        <select v-if="store.idea.is_member" id="states" v-model="instance.status" @change="update"
            class="bg-zinc-50 border border-zinc-300 text-zinc-900 text-xs rounded-lg border-s-2 focus:ring-blue-500 focus:border-blue-500 block p-1 dark:bg-zinc-700 dark:border-zinc-600 dark:placeholder-zinc-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
            <option selected :value="1">درحال بررسی</option>
            <option selected :value="2">مرتبط</option>
            <option selected :value="3">نامرتبط</option>
            <option selected :value="4">مفید</option>
        </select>
        <div v-else>
            <span v-if="instance.status == 1"
                class="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-yellow-800 dark:text-yellow-400 border border-yellow-400">
                {{ instance.get_status }}</span>
            <span v-else-if="instance.status == 2"
                class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-blue-800 dark:text-blue-400 border border-blue-400">
                {{ instance.get_status }}</span>
            <span v-else-if="instance.status == 3"
                class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-red-800 dark:text-red-400 border border-red-400">
                {{ instance.get_status }}</span>
            <span v-else
                class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-green-800 dark:text-green-400 border border-green-400">
                {{ instance.get_status }}</span>
        </div>
    </div>
</template>

<script setup>
import axios from 'axios';
import { useMaghaleStore } from '~/store'
const { $CustomAlert } = useNuxtApp();
const store = useMaghaleStore()
const props = defineProps(['instance'])
const instance = props.instance

async function update() {
    await axios
        .patch(`${useRuntimeConfig().public.BaseUrl}ideas/steps/${instance.id}/`, { status: instance.status })
}
</script>