import App from './App.uvue'
import { createSSRApp } from 'vue'
import CompForAppComponent from '@/components/CompForAppComponent.uvue'
import GlobalMixinComp1 from '@/pages/composition/mixins/components/GlobalMixinComp1.uvue'
import GlobalChildMixinComp1 from '@/pages/composition/mixins/components/GlobalChildMixinComp1.uvue'
import GlobalMixinComp2 from '@/pages/composition/mixins/components/GlobalMixinComp2.uvue'
import GlobalChildMixinComp2 from '@/pages/composition/mixins/components/GlobalChildMixinComp2.uvue'
import MixinCompForGlobalMixin from '@/pages/composition/mixins/components/MixinCompForGlobalMixin.uvue'
import MixinCompForGlobalChildMixin from '@/pages/composition/mixins/components/MixinCompForGlobalChildMixin.uvue'

export function createApp() {
  const app = createSSRApp(App)

  app.component('CompForAppComponent', CompForAppComponent)

  // #ifdef APP-ANDROID
  const globalChildMixin = defineMixin({
    components: { GlobalChildMixinComp1, MixinComp: MixinCompForGlobalChildMixin },
    props: {
      globalChildMixinProp1: {
        type: String,
        default: '通过 defineMixin 定义全局 child mixin props'
      },
      namesakeChildMixinProp: {
        type: String,
        default: '通过 defineMixin 定义全局同名 child mixin props'
      }
    },
    data() {
      return {
        namesakeChildMixinDataMsg: '通过 defineMixin 定义全局同名 child mixin data',
        globalChildMixinDataMsg1: '通过 defineMixin 定义全局 child mixin data',
        globalChildMixinOnloadMsg1: '',
        globalChildMixinOnloadTime1: 0,
        globalChildMixinWatchMsg1: '',
      }
    },
    computed: {
      globalChildMixinComputed1(): string {
        const res = `通过 defineMixin 定义全局 child mixin computed, 更新后的 globalChildMixinOnloadMsg1: ${this.globalChildMixinOnloadMsg1}`
        console.log(res)
        return res
      },
      namesakeChildMixinComputed(): string {
        const res = '通过 defineMixin 定义全局同名 child mixin computed'
        console.log(res)
        return res
      }
    },
    watch: {
      globalMixinOnloadMsg1(newVal: string) {
        this.globalChildMixinWatchMsg1 = `通过 defineMixin 定义全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
        console.log(this.globalChildMixinWatchMsg1)
      },
    },
    emits: ['globalChildMixinEmit1'],
    onLoad() {
      this.globalChildMixinOnloadTime1 = Date.now()
      const res = '通过 defineMixin 定义全局 child mixin onLoad'
      console.log(res)
      this.globalChildMixinOnloadMsg1 = res
    },
    methods: {
      globalChildMixinMethod1(): string {
        const res = '通过 defineMixin 定义全局 child mixin method'
        console.log(res)
        return res
      },
      namesakeChildMixinMethod(): string {
        const res = '通过 defineMixin 定义全局同名 child mixin method'
        console.log(res)
        return res
      },
    }
  })
  const globalMixin = defineMixin({
    mixins: [globalChildMixin],
    components: { GlobalMixinComp1, MixinComp: MixinCompForGlobalMixin },
    props: {
      globalMixinProp1: {
        type: String,
        default: '通过 defineMixin 定义全局 mixin props'
      },
      namesakeMixinProp: {
        type: String,
        default: '通过 defineMixin 定义全局同名 mixin props'
      }
    },
    data() {
      return {
        globalMixinDataMsg1: '通过 defineMixin 定义全局 mixin data',
        namesakeMixinDataMsg: '通过 defineMixin 定义全局同名 mixin data',
        globalMixinOnloadMsg1: '',
        globalMixinOnloadTime1: 0,
        globalMixinWatchMsg1: ''
      }
    },
    computed: {
      globalMixinComputed1(): string {
        const res = `通过 defineMixin 定义全局 mixin computed, 更新后的 globalMixinOnloadMsg1: ${this.globalMixinOnloadMsg1}`
        console.log(res)
        return res
      },
      namesakeChildMixinComputed(): string {
        const res = '通过 defineMixin 定义全局同名 mixin computed'
        console.log(res)
        return res
      }
    },
    watch: {
      globalMixinOnloadMsg1(newVal: string) {
        this.globalMixinWatchMsg1 = `通过 defineMixin 定义全局 mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
        console.log(this.globalMixinWatchMsg1)
      },
    },
    emits: ['globalMixinEmit1'],
    onLoad() {
      this.globalMixinOnloadTime1 = Date.now()
      const res = '通过 defineMixin 定义全局 mixin onLoad'
      console.log(res)
      this.globalMixinOnloadMsg1 = res
    },
    methods: {
      globalMixinMethod1(): string {
        const res = '通过 defineMixin 定义全局 mixin method'
        console.log(res)
        return res
      },
      namesakeMixinMethod1(): string {
        const res = '通过 defineMixin 定义全局同名 mixin method'
        console.log(res)
        return res
      }
    }
  })
  app.mixin({
    mixins: [{
      components: { GlobalChildMixinComp2 },
      props: {
        globalChildMixinProp2: {
          type: String,
          default: '通过字面量定义全局 child mixin props'
        },
        namesakeChildMixinProp: {
          type: String,
          default: '通过字面量定义全局同名 child mixin props'
        }
      },
      data() {
        return {
          namesakeChildMixinDataMsg: '通过字面量定义全局同名 child mixin data',
          globalChildMixinDataMsg2: '通过字面量定义全局 child mixin data',
          globalChildMixinOnloadMsg2: '',
          globalChildMixinOnloadTime2: 0,
          globalChildMixinWatchMsg2: ''
        }
      },
      computed: {
        globalChildMixinComputed2(): string {
          const res = `通过字面量定义全局 child mixin computed, 更新后的 globalChildMixinOnloadMsg2: ${this.globalChildMixinOnloadMsg2}`
          console.log(res)
          return res
        },
        namesakeChildMixinComputed(): string {
          const res = '通过定义全局同名 child mixin computed'
          console.log(res)
          return res
        }
      },
      watch: {
        globalMixinOnloadMsg1(newVal: string) {
          this.globalChildMixinWatchMsg2 = `通过字面量定义全局 child mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
          console.log(this.globalChildMixinWatchMsg2)
        },
      },
      emits: ['globalChildMixinEmit2'],
      onLoad() {
        this.globalChildMixinOnloadTime2 = Date.now()
        const res = '通过字面量定义全局 child mixin onLoad'
        console.log(res)
        this.globalChildMixinOnloadMsg2 = res
      },
      methods: {
        globalChildMixinMethod2(): string {
          const res = '通过字面量定义全局 child mixin method'
          console.log(res)
          return res
        },
        namesakeChildMixinMethod(): string {
          const res = '通过字面量定义全局同名 child mixin method'
          console.log(res)
          return res
        },
      }
    }],
    components: { GlobalMixinComp2 },
    props: {
      globalMixinProp2: {
        type: String,
        default: '通过字面量定义全局 mixin props'
      },
      namesakeMixinProp: {
        type: String,
        default: '通过字面量定义全局同名 mixin props'
      }
    },
    data() {
      return {
        globalMixinDataMsg2: '通过字面量定义全局 mixin data',
        namesakeMixinDataMsg: '通过字面量定义全局同名 mixin data',
        globalMixinOnloadMsg2: '',
        globalMixinOnloadTime2: 0,
        globalMixinWatchMsg2: ''
      }
    },
    computed: {
      globalMixinComputed2(): string {
        const res = `通过字面量定义全局 mixin computed, 更新后的 globalMixinOnloadMsg2: ${this.globalMixinOnloadMsg2}`
        console.log(res)
        return res
      },
      namesakeChildMixinComputed(): string {
        const res = '通过字面量定义全局同名 mixin computed'
        console.log(res)
        return res
      }
    },
    watch: {
      globalMixinOnloadMsg1(newVal: string) {
        this.globalMixinWatchMsg2 = `通过字面量定义全局 mixin watch, 更新后的 globalMixinOnloadMsg1: ${newVal}`
        console.log(this.globalMixinWatchMsg2)

      },
    },
    emits: ['globalMixinEmit2'],
    onLoad() {
      this.globalMixinOnloadTime2 = Date.now()
      const res = '通过字面量定义全局 mixin onLoad'
      console.log(res)
      this.globalMixinOnloadMsg2 = res
    },
    methods: {
      globalMixinMethod2(): string {
        const res = '通过字面量定义全局 mixin method'
        console.log(res)
        return res
      },
      namesakeMixinMethod(): string {
        const res = '通过字面量定义全局同名 mixin method'
        console.log(res)
        return res
      }
    }
  })
  app.mixin(globalMixin)
  // #endif

  return {
    app
  }
}