<template>
  <DesignPropertiesBox v-if="data.show">
    <a-collapse v-model:activeKey="activeKey" ghost expandIconPosition="right">
      <a-collapse-panel key="1" :header="t('基础配置')">
        <a-form-item :label="t('标题')" :colon="false" labelAlign="left">
          <a-input v-model:value="data.info.config.title" />
        </a-form-item>
        <a-form-item
          :label="t('显示标题')"
          :wrapperCol="{
            style: { textAlign: 'right', paddingRight: '10px' },
          }"
        >
          <a-switch v-model:checked="data.info.config.showTitle" />
        </a-form-item>
        <a-form-item label="url">
          <a-textarea
            v-model:value="data.info.config.url"
            placeholder="请填写url,参数可用@代替。例如:https://www.learun.cn?id=@id"
          />
        </a-form-item>
        <a-form-item label="参数配置">
          <a-input
            :value="iframeText"
            :placeholder="t('点击进行参数配置')"
            @click="handleIframeConfig"
          >
            <template #suffix>
              <Icon icon="ant-design:ellipsis-outlined" />
            </template>
          </a-input>
        </a-form-item>
      </a-collapse-panel>
      <a-collapse-panel key="2" :header="t('大小定位')">
        <Location v-model:info="data.info" />
      </a-collapse-panel>
    </a-collapse>
    <IframeConfig
      v-if="iframeConfigDia"
      v-model:iframeConfigDia="iframeConfigDia"
      v-model:list="data.info.config.list"
    />
  </DesignPropertiesBox>
</template>

<script setup lang="ts">
  import { computed, onMounted, reactive, ref, watch } from 'vue';
  import { DesignPropertiesBox } from '/@/components/Desktop';
  import { iframeInfo } from '../config/info';
  import Location from './collapse/Location.vue';
  import { IframeInfo } from '/@/model/desktop/designer';
  import { useI18n } from '/@/hooks/web/useI18n';
  import IframeConfig from './collapse/IframeConfig.vue';
  const { t } = useI18n();
  const props = withDefaults(
    defineProps<{
      info: IframeInfo;
    }>(),
    {
      info: () => {
        return iframeInfo;
      },
    },
  );
  watch(
    () => props.info,
    (val) => {
      if (val) data.info = val;
    },
    {
      deep: true,
    },
  );
  const data: {
    show: boolean;
    info: IframeInfo;
  } = reactive({
    show: false,
    info: iframeInfo,
  });
  const activeKey = ref(['1', '2']);
  const iframeConfigDia = ref<boolean>(false);
  const iframeText = computed(() => {
    return data.info.config.list?.length ? t('已配置') : '';
  });
  onMounted(() => {
    data.info = props.info;
    data.show = true;
  });
  const handleIframeConfig = () => {
    iframeConfigDia.value = true;
  };
</script>

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