<template>
  <section class="introPage">
    <ai-detail list>
      <ai-title slot="title" title="引导页配置" isShowBottomBorder>
        <template #rightBtn>
          <el-row type="flex">
            <component-lib @select="handleAddComp"/>
            <el-button type="text" @click="submit">保存</el-button>
            <el-button type="text" @click="">取消</el-button>
          </el-row>
        </template>
      </ai-title>
      <template #content>
        <ai-drag v-for="comp in configs" :key="comp.value" :w="comp.width" :h="comp.height" parent>
          <comp-render :ops="comp"/>
        </ai-drag>
        <div v-if="!hasConfigs" class="empty">编辑区域</div>
      </template>
    </ai-detail>
  </section>
</template>

<script>
import AiDrag from "../../components/AiDrag";
import ComponentLib from "./tools/componentLib";
import AiEditBtn from "../../components/AiEditBtn";
import CompRender from "./tools/compRender";

export default {
  name: "introPage",
  components: {CompRender, AiEditBtn, ComponentLib, AiDrag},
  props: {
    instance: Function,
    dict: {default: () => ({})}
  },
  computed: {
    hasConfigs: v => v.configs?.length > 0
  },
  data() {
    return {
      form: {},
      configs: []
    }
  },
  methods: {
    handleAddComp(comp) {
      console.log(comp)
      this.configs.push({...comp})
    },
    submit() {

    }
  },
  created() {
  }
}
</script>

<style lang="scss" scoped>
.introPage {
  height: 100%;

  .empty {
    width: 100%;
    min-height: calc(100vh - 180px);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 48px;
    color: #999;
    border: 1px dashed #ddd;
  }

  ::v-deep.ai-detail__content--wrapper {
    min-height: 100%;
  }
}
</style>
