import { createApp } from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"
// import ElementPlus from 'element-plus'
// import { ElButton, ElInput } from 'element-plus'

import {
    ElButton,
    ElInput,
    ElSelect,
    ElOption,
    ElLoading,
    ElCheckbox,
    ElCheckboxGroup,
    ElCarousel,
    ElCarouselItem,
    ElBadge,
    ElDropdown,
    ElPopover,
    ElDatePicker,
    ElMessage,
    ElSkeleton,
    ElSkeletonItem,
    ElBreadcrumb,
    ElAffix,
    ElConfigProvider,
    ElProgress,
    ElScrollbar,
    // 其他需要的组件
} from "element-plus"

import "element-plus/theme-chalk/index.css"
import "element-plus/dist/index.css"
import "element-plus/theme-chalk/index.css"
import locale from "element-plus/lib/locale/lang/zh-cn"

import zhCn from "element-plus/dist/locale/zh-cn.mjs"

import lazyPlugin from "vue3-lazyload"

// import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import api from "./utils/api"

//引入封装Axios请求
import Axios from "@/utils/axios"

const app = createApp(App)

app.use(ElButton)
app.use(ElInput)
app.use(ElSelect)
app.use(ElOption)
app.use(ElLoading)
app.use(ElCheckbox)
app.use(ElCheckboxGroup)
app.use(ElCarousel)
app.use(ElCarouselItem)
app.use(ElBadge)
app.use(ElDropdown)
app.use(ElPopover)
app.use(ElDatePicker, {
    locale: zhCn,
})
app.use(ElSkeleton)
app.use(ElSkeletonItem)
app.use(ElMessage)
app.use(ElBreadcrumb)
app.use(ElAffix)
app.use(ElProgress)

app.use(ElConfigProvider)
app.use(ElScrollbar)

app.use(lazyPlugin)

app.use(store).use(router).use(Axios)

api.index()
    .then(res => {
        const data = res.data
        // const url = import("@/assets/homeImage/informationO.png")
        store.state.seachTypeData = data.combination
        store.state.indexData = data
        store.state.ListSelectBtn = data.recommendedTab
        store.state.user = data.user
        store.state.nav = data.nav
        store.state.wechat = data.wechat
        store.state.apartment = data.config.apartment
        store.state.schoolList = data.schoolList
        store.state.advData = data.adv
        store.state.typeKey = data.config.type
        store.state.locationKey = data.config.location

        // 将 location 转换为对象 好用于级联选择器
        const location = data.config.location || {}
        const type = data.config.type || {}

        store.state.locationObj = optimalValue(location)
        store.state.typeObj = optimalValue(type)

        store.state.brandKey = optimalValueArray(data.config.apartment.brand || [])
        store.state.roomTypeKey = optimalValueArray(data.config.apartment.roomtype || [])
        store.state.roomlistingsKey = optimalValueArray(data.config.apartment.roomlistings || [])
    })
    .finally(() => {
        app.mount("#app")
    })

// 优化值 1 1.1 1.2 类似的值
const optimalValue = data => {
    let obj = {}
    for (const key in data) {
        const [parentKey, childKey] = key.split(".")

        if (!childKey) {
            obj[parentKey] = {
                name: data[key],
                children: {},
            }
        } else {
            if (!obj[parentKey].children) obj[parentKey].children = {}
            obj[parentKey].children[key] = data[key]
        }
    }

    return obj || {}
}

// 优化值 数组 转对象
const optimalValueArray = data => {
    let obj = {}
    data.forEach(item => {
        obj[item.id] = item.name
    })
    return obj
}