<template>
  <div></div>
</template>

<script>
export default {
  model: {
    prop: 'modelValue',
    event: 'change'
  },
  props: {
    modelValue: {
      type: String | Number | Object,
      default: ''
    },
    datasource: {},
    amisJson: {
      type: Object,
      required: true,
      default: {
        type: 'input-text',
        label: '输入框：'
      }
    }
  },
  data() {
    return {
      amisInstance: null,
      unmounted: false
    }
  },
  watch: {
    modelValue(val) {
      this.amisInstance?.updateProps({
        data: {
          name: val
        }
      })
    },
    amisJson: {
      handler(val) {
        this.amisInstance?.updateProps(val)
      },
      deep: true
    }
  },
  async mounted() {
    const amis = amisRequire('amis/embed')
    const instance = amis.embed(
      this.$el,
      {
        type: 'page',
        body: {
          ...this.amisJson,
          ...{
            name: 'name'
          }
        },
        data: {
          ...{
            name: this.modelValue
          },
          ...this.datasource
        },
        onChange: (values) => {
          this.$emit('change', values)
        }
      },
      {},
      {
        popOverContainerSelector: 'body'
      }
    )
    this.amisInstance = instance
  },
  destroyed() {
    this.unmounted = true
    this.amisInstance?.unmount()
  }
}
</script>

<style scoped lang="scss">
.amis-scope {
  background: unset !important;
  :deep(.cxd-Combo-item) {
    padding: 10px 0 !important;
  }
}
:deep(.cxd-Page-body) {
  padding: unset;
}
:deep(.cxd-Page) {
  background: unset;
}
</style>
