<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('文本颜色')">
          <SelectColor v-model:value="data.info.config.color" />
        </a-form-item>
        <a-form-item :label="t('文本粗细')">
          <a-select v-model:value="data.info.config.fontWeight" style="width: 100%" allowClear>
            <a-select-option
              v-for="(item, index) in fontWeightOptions"
              :key="index"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item :label="t('字体大小')">
          <a-input-number v-model:value="data.info.config.fontSize" :min="0" />
        </a-form-item>
        <a-form-item :label="t('字体行距')">
          <a-input-number v-model:value="data.info.config.lineHeight" :min="0" />
        </a-form-item>
        <a-form-item :label="t('文本位置')">
          <a-select v-model:value="data.info.config.textAlign" style="width: 100%">
            <a-select-option
              v-for="(item, index) in positionOptions"
              :key="index"
              :value="item.value"
              >{{ item.label }}</a-select-option
            >
          </a-select>
        </a-form-item>
        <a-form-item :label="t('是否显示成块')">
          <a-switch v-model:checked="data.info.config.isBlock" />
        </a-form-item>
      </a-collapse-panel>
      <a-collapse-panel key="2" :header="t('大小定位')">
        <Location v-model:info="data.info" />
      </a-collapse-panel>
    </a-collapse>
  </DesignPropertiesBox>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref, watch } from 'vue';
  import { DesignPropertiesBox } from '/@/components/Desktop';
  import { titleInfo } from '../config/info';
  import { TitleInfo } from '/@/model/desktop/designer';
  import SelectColor from './SelectColor.vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import Location from './collapse/Location.vue';

  const { t } = useI18n();
  const props = withDefaults(
    defineProps<{
      info: TitleInfo;
    }>(),
    {
      info: () => {
        return titleInfo;
      },
    },
  );
  watch(
    () => props.info,
    (val) => {
      if (val) data.info = val;
    },
    {
      deep: true,
    },
  );
  const activeKey = ref(['1', '2']);
  const data: {
    show: boolean;
    info: TitleInfo;
  } = reactive({
    show: false,
    info: titleInfo,
  });
  const positionOptions = [
    {
      label: t('居左'),
      value: 'left',
    },
    {
      label: t('居中'),
      value: 'center',
    },
    {
      label: t('居右'),
      value: 'right',
    },
  ];
  const fontWeightOptions = [
    {
      label: t('正常'),
      value: 'normal',
    },
    {
      label: t('加粗'),
      value: 'bold',
    },
    {
      label: t('更粗'),
      value: 'bolder',
    },
    {
      label: t('细'),
      value: 'lighter',
    },
  ];
  onMounted(async () => {
    data.info = props.info;
    data.show = true;
  });
</script>

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