<template>
  <div class="main">
    <el-button @click="showDialog = true">直接使用的弹窗</el-button>
    <CusDialog
        title="直接引用的弹窗"
        v-model:show="showDialog"
        @submit="showDialog = false"
    >
      <div>
        直接引用，v-model:show
      </div>
    </CusDialog>
    <el-button @click="showDialog1 = true">引入组件的弹窗</el-button>
    <CD1Com v-model:show="showDialog1"/>
    <el-button @click="showDialog2 = true">关闭开启确认框</el-button>
    <CD2Com v-model:show="showDialog2"/>
    <el-button @click="showDialog3 = true">弹窗内的插槽</el-button>
    <CD3Com v-model:show="showDialog3"/>
    <el-button @click="showDialog4 = true">内容滚动是否包含底部按钮</el-button>
    <CD4Com v-model:show="showDialog4"/>
    <el-button @click="showDialog5 = true">宽度、高度</el-button>
    <CD5Com v-model:show="showDialog5"/>
    <el-button @click="showDialog6 = true">流体高度</el-button>
    <CD6Com v-model:show="showDialog6"/>
    <br/>
    <el-button @click="showDialogStyle = true" type="primary">基础样式</el-button>
    <CDStyleCom v-model:show="showDialogStyle"/>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import CD1Com from './cd1.vue'
import CD2Com from './cd2.vue'
import CD3Com from './cd3.vue'
import CD4Com from './cd4.vue'
import CD5Com from './cd5.vue'
import CD6Com from './cd6.vue'
import CDStyleCom from './style.vue'

export default defineComponent({
  name: '',
  components: {
    CD1Com,
    CD2Com,
    CD3Com,
    CD4Com,
    CD5Com,
    CD6Com,
    CDStyleCom,
  },
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({
      showDialog: false,
      showDialog1: false,
      showDialog2: false,
      showDialog3: false,
      showDialog4: false,
      showDialog5: false,
      showDialog6: false,
      showDialogStyle: false,
    })
    return {
      ...toRefs(state)
    }
  },
})
</script>

<style scoped lang="scss">
.main {
  >* {
    margin-right: 10px;
  }
}
</style>
