<template>
    <div>
        home
        <p>{{$t('serviceshop')}}</p>
        <p @click="updateUserLocation">{{userLocation}}</p>
        <p>{{userGeolocation.longitude}},{{userGeolocation.latitude}}</p>
        <teleport to="body">
            <div v-if="modalOpen" class="modal">
                <div>
                I'm a teleported modal! 
                (My parent is "body")
                <button @click="modalOpen = false">
                    Close
                </button>
                </div>
            </div>
        </teleport>
        
    </div>
</template>

<script>
import { ref, inject,onMounted, readonly , watch, toRefs,computed,reactive ,watchEffect  } from 'vue'

export default {
    setup (props,context) {
        //setup inject的使用
        const userLocation = inject('location', 'The Universe')
        const userGeolocation = inject('geolocation')
        const updateUserLocation = inject('updateLocation')

        // 使用 `toRefs` 创建对prop的 `user` property 的响应式引用,否则会报错
        const { user } = toRefs(props)

        let counttt = 133356

        const repositories = ref([])
        const getUserRepositories = () => {
        // 更新 `prop.user` 到 `user.value` 访问引用值
        repositories.value = 2324234
        }

        onMounted(getUserRepositories)

        // 在用户 prop 的响应式引用上设置一个侦听器
        watch(user, getUserRepositories)

        const searchQuery = ref('')
        const repositoriesMatchingSearchQuery = computed(() => {
        return repositories.value.filter(
            repository => repository.name.includes(searchQuery.value)
        )
        }) 

        return {
            repositories,
            getUserRepositories,
            counttt,
            repositoriesMatchingSearchQuery,
            userLocation,
            userGeolocation,
            updateUserLocation
        }
    },
    props: {
        user:''
    },
    components: {

    },
    data() {
        return {
            modalOpen:false,
        };
    },
    watch: {

    },
    computed: {

    },
    created() {
        console.log(this.counttt);
        this.modalOpen = true
        /**
         * reactive对于ref的使用是引用，相互改变会相互影响.如果不是ref那么就不会影响
         */
        const count = ref(0)
        const state = reactive({
            count
        })

        console.log(state.count)//0
        state.count = 1
        console.log(count.value)//1
        console.log(state.count)//1

        /**
         * 使用toRefs对reactive进行解构
         */

        const book = reactive({
            author: 'Vue Team',
            year: '2020',
            title: 'Vue 3 Guide',
            description: 'You are reading this book right now ;)',
            price: 'free'
        })
        let { author, title } = toRefs(book)

        title.value = 'Vue 3 Detailed Guide' // 我们需要使用 .value 作为标题，现在是 ref
        console.log(book.title) // 'Vue 3 Detailed Guide'

        /**
         * readonly 防止更改响应式对象,在copy上转换original 会触发侦听器依赖,转换copy 将导失败并导致警告
         */
        const original = reactive({ count: 0 })
        const copy = readonly(original)

        original.count++
        console.log(original.count)//1
        copy.count++ // 警告: "Set operation on key 'count' failed: target is readonly."

        /**
         * 响应式的计算,只读和可写
         */
        //只读
        const plusOne = computed(() => count.value+'zhesji')
        console.log(plusOne.value) // 1zhesji

        //可写
        const plusOne1 = computed({
            get: () => count.value + 1,
            set: val => {
                count.value = val - 1
            }
        })

        plusOne1.value = 1
        console.log(count.value) // 0

        /**
         * 响应式的监听使用 watchEffect 方法，它立即执行传入的一个函数，
         * 同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
         * 
         * 当 watchEffect 在组件的 setup() 函数或生命周期钩子被调用时，
         * 侦听器会被链接到该组件的生命周期，并在组件卸载时自动停止。
         */
        const stop = watchEffect(() => console.log(count.value))

        const inter = setInterval(()=>{
            count.value++
        },1000)

        setTimeout(()=>{
            clearInterval(inter)
            stop()
        },5000)

        /**
         * watch监听,单个监听
         */
        watch(count, (count, prevCount) => {
            console.log(count);
        })

        /**
         * watch监听,多个监听
         */
        watch([count, plusOne1], ([count, plusOne1], [prevCount, preplusOne1]) => {
             console.log(count,plusOne1);
        })
    },
    mounted() {

    },
    methods: {

    },
};
</script>

<style scoped>
.modal{
    width: 400px;
    margin: 0 auto;
    background-color: #fff;
}
</style>
