<script>
// getInTheaters 為封裝的介面請求
import { getInTheaters } from "@/api/movie";
import {
reactive,
toRefs,
onBeforeMount,
onMounted,
onBeforeUnmount,
provide,
} from "vue";
import { useRouter } from "vue-router";
import { useStore } from 'vuex'
export default {
components: {},
setup() {
const state = reactive({
inTheaters: [],
});

// 程式設計式導航
const router = useRouter();
const store = useStore();

onBeforeMount(() => {
store.commit("setShowBack", false);
});

onBeforeUnmount(() => {
store.commit("setShowBack", true);
});

const getInTheatersData = async () => {
const res = await getInTheaters(
"/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=3535827"
);
state.inTheaters = res.data.data.films;

onMounted(() => {
//執行請求
getInTheatersData();
});

//頁面跳轉
const goToList = (type) => {
router.push(`/list/${type}`);
};

// 傳遞資料給子元件
provide("title", "電影");

return { ...toRefs(state), goToList };
};
},
};
</script>