<template>
  <DesignPropertiesBox v-if="data.show" style="margin-top: 10px">
    <a-form-item :label="t('标题')">
      <a-input v-model:value="data.info.config.title" />
    </a-form-item>
  </DesignPropertiesBox>
</template>

<script setup lang="ts">
  import { onMounted, reactive, watch } from 'vue';
  import { DesignPropertiesBox } from '/@/components/Desktop';
  import { defaultInfo } from '../config/info';

  import { DefaultInfo } from '/@/model/mobileDesign/designer';
  import { useI18n } from '/@/hooks/web/useI18n';
  const { t } = useI18n();
  const props = withDefaults(
    defineProps<{
      info: DefaultInfo;
    }>(),
    {
      info: () => {
        return defaultInfo;
      },
    },
  );
  watch(
    () => props.info,
    (val) => {
      if (val) data.info = val;
    },
    {
      deep: true,
    },
  );
  const data: {
    show: boolean;
    info: DefaultInfo;
  } = reactive({
    show: false,
    info: defaultInfo,
  });

  onMounted(() => {
    data.info = props.info;
    data.show = true;
  });
</script>

<style lang="less" scoped></style>
