<template>
  <DesignPropertiesBox v-if="data.show" class="pt-4">
    <!-- <a-collapse v-model:activeKey="activeKey" ghost expandIconPosition="right">
      <a-collapse-panel key="1" :header="t('背景图配置')"> -->
    <a-form-item :label="t('背景图图片')">
      <a-input v-model:value="imageUrl" :disabled="true" style="margin-bottom: 10px" />
      <a-upload
        action=""
        :beforeUpload="submitUpload"
        accept=""
        :max-count="1"
        :show-upload-list="false"
      >
        <a-button type="primary">
          {{ t('点击上传') }}
        </a-button>
        <a-button type="error" @click.stop="handleClear" class="ml-4">
          {{ t('清空') }}
        </a-button>
      </a-upload>
    </a-form-item>
    <a-form-item :label="t('背景图平铺')">
      <a-select v-model:value="data.info.repeat" :options="options1" />
    </a-form-item>
    <a-form-item :label="t('背景图大小')">
      <a-select v-model:value="data.info.size" :options="options2" />
    </a-form-item>
    <!-- </a-collapse-panel>
    </a-collapse> -->
  </DesignPropertiesBox>
</template>

<script setup lang="ts">
  import { onMounted, reactive, ref, watch } from 'vue';
  import { DesignPropertiesBox } from '/@/components/Desktop';
  import { backgroundInfo } from '../config/info';
  import { BackgroundSetting } from '/@/model/desktop/designer';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { getFileList } from '/@/api/system/file';
  import { uploadMultiApi } from '/@/api/sys/upload';
  import type { SelectProps } from 'ant-design-vue';
  import { getFileUrl } from '/@/utils/event/design';

  const { t } = useI18n();
  const props = withDefaults(
    defineProps<{
      info: BackgroundSetting;
    }>(),
    {
      info: () => {
        return backgroundInfo;
      },
    },
  );
  watch(
    () => props.info,
    (val) => {
      if (val) {
        data.info = val;
      }
    },
    {
      deep: true,
    },
  );
  const data: {
    show: boolean;
    info: BackgroundSetting;
  } = reactive({
    show: false,
    info: backgroundInfo,
  });
  const options1 = ref<SelectProps['options']>([
    {
      value: 'no-repeat',
    },
    {
      value: 'repeat',
    },
    {
      value: 'repeat-x',
    },
    {
      value: 'repeat-y',
    },
    {
      value: 'round',
    },
    {
      value: 'space',
    },
    {
      value: 'inherit',
    },
    {
      value: 'initial',
    },
    {
      value: 'revert',
    },
    {
      value: 'revert-layer',
    },
    {
      value: 'unset',
    },
  ]);
  const options2 = ref<SelectProps['options']>([
    {
      value: 'auto',
    },
    {
      value: 'contain',
    },
    {
      value: 'cover',
    },
    {
      value: 'inherit',
    },
    {
      value: 'initial',
    },
    {
      value: 'revert',
    },
    {
      value: 'revert-layer',
    },
    {
      value: 'unset',
    },
  ]);
  // const activeKey = ref(['1', '2']);
  const imageUrl = ref('');
  onMounted(() => {
    data.info = props.info;
    if (data.info.image) {
      getImage();
    }
    data.show = true;
  });
  const submitUpload = (file) => {
    let folderId = data.info.image;
    uploadMultiApi(
      {
        name: 'file',
        file: [file],
      },
      folderId,
    ).then((res) => {
      data.info.image = res[0].folderId;
      getImage();
    });
  };
  async function getImage() {
    if (data.info.image) {
      let fileList = await getFileList({ folderId: data.info.image });
      if (fileList.length) {
        imageUrl.value = getFileUrl(fileList[0]);
        data.info.image = fileList[0].folderId;
      }
    } else {
      imageUrl.value = '';
    }
  }
  function handleClear() {
    data.info.image = '';
    imageUrl.value = '';
  }
</script>

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