<template>
    <div>
        <select v-if="instance.work.status" id="states" v-model="instance.work.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>
            <option selected :value="5">مطالعه کامل</option>
            <option selected :value="6">انصراف از مطالعه</option>
        </select>
        <button v-else @click="submit"
            class="bg-zinc-100 text-zinc-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm dark:bg-zinc-800 dark:text-zinc-400 border border-zinc-400">
            افزودن به لیست</button>
    </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
const router = useRouter()

async function update() {
    await axios
        .patch(`${useRuntimeConfig().public.BaseUrl}maghale/works/${instance.work.id}/`, { status: instance.work.status })
}
async function submit() {
    await axios
        .post(`${useRuntimeConfig().public.BaseUrl}maghale/works/`, { activity: instance.id })
        .then(() => {
            instance.status = 1
            $CustomAlert('تغییرات ثبت شد', 4)
        })
}
</script>