import { computed, ref, watch } from 'vue'
import { useAppStore } from '~src/store'
import { isNullES } from 'js-fast-way'
import { setElementMainColor } from 'js-fast-way'

export function useProject() {
    const useAppState = useAppStore()

    const projectId = ref(useAppState.getProjectId)
    const contractId = ref(useAppState.getContractId)
    const projectInfo = ref(useAppState.getProjectInfo)
    const contractInfo = ref(useAppState.getContractInfo)

    watch(() => [
        useAppState.getProjectId, useAppState.getContractId,
        useAppState.getProjectInfo, useAppState.getContractInfo,
    ], ([pid, cid, pinfo, cinfo]) => {
        projectId.value = pid
        contractId.value = cid
        projectInfo.value = pinfo
        contractInfo.value = cinfo
        setYunNanTheme(pid)
    }, { deep: true })

    const isAppLoading = computed(() => {
        return !isNullES(projectId.value) && !isNullES(contractId.value)
    })
    const setYunNanTheme = (pid)=>{
        console.log( projectId.value, ' projectId.value ')
        
        const id = '1891312830718746625'
        let isYunNan = pid === id
        if (isYunNan) {
            setElementMainColor('#409eff')
            let colorName = 'blue'
            let theme = 'light'
            document.documentElement.setAttribute('class', `${theme} color-${colorName}`)
            return
        }
    }
    return {
        projectId,
        contractId,
        projectInfo,
        contractInfo,
        isAppLoading,
    }
}