<!--
 * @Author: nxy
 * @Date: 2024-06-11 09:35:20
-->
<template>
  <div class="custom-page-config">
    <a-form layout="inline" :label-width="45" label-placement="left" :model="canvasConfig">
      <a-form-item label="宽度">
        <!-- 尺寸选择 -->
        <a-input-number
          v-model:value="canvasConfig.width"
          :disabled="editCanvas?.lockScale"
          :min="60"
          @change="changeSizeHandle"
        ></a-input-number>
      </a-form-item>
      <a-form-item label="高度">
        <a-input-number
          v-model:value="canvasConfig.height"
          :disabled="editCanvas?.lockScale"
          :min="60"
          @change="changeSizeHandle"
        ></a-input-number>
      </a-form-item>
    </a-form>
    <a-card class="upload-box">
      <a-upload
        class="upload-ls"
        v-model:file-list="uploadFileListRef"
        :showUploadList="false"
        :customRequest="customRequest"
        :onBeforeUpload="beforeUploadHandle"
      >
        <img v-if="canvasConfig.backgroundImage" class="upload-show" :src="canvasConfig.backgroundImage" alt="背景" />
        <div class="upload-img" v-show="!canvasConfig.backgroundImage">
          <img src="@/assets/images/chart/noImage.png" />
          <span> 背景图需小于5M ，格式为 png/jpg的文件 </span>
        </div>
      </a-upload>
    </a-card>
    <a-space class="mt-20">
      <span>背景颜色:</span>
      <div class="picker-height">
        <!-- 颜色选择器 -->
        <color-picker :show-alpha="true" v-model:value="canvasConfig.background" />
      </div>
    </a-space>
    <a-space :size="0" class="mt-20">
      <span style="margin-right: 8px">背景控制:</span>
      <a-button class="clear-btn" size="small" :disabled="!canvasConfig.backgroundImage" @click="clearImage"> 清除背景 </a-button>
      <a-button class="clear-btn" size="small" :disabled="!canvasConfig.background" @click="clearColor"> 清除颜色 </a-button>
    </a-space>

    <a-space :size="0" class="mt-20">
      <span style="margin-right: 8px">适配方式:</span>
      <a-radio-group v-model:value="canvasConfig.previewScaleType" button-style="solid">
        <a-radio-button :value="item.key" v-for="item in previewTypeList" :key="item.key" ghost>
          <a-tooltip>
            <template #title>{{ item.desc }}</template>
            <component :is="item.icon" style="font-size: 16px"></component>
          </a-tooltip>
        </a-radio-button>
      </a-radio-group>
    </a-space>
  </div>
</template>

<script setup name="PageConfig">
import { nextTick, ref } from 'vue';
import { useChartEditStore } from '@/store/modules/chart/chartEditStore';
import { message } from 'ant-design-vue';
import { FileApi } from '@/views/system/backend/file/api/FileApi';
import { BlockOutlined, ColumnHeightOutlined, ColumnWidthOutlined, DragOutlined } from '@ant-design/icons-vue';

const chartEditStore = useChartEditStore();

const editCanvas = chartEditStore.getEditCanvas;
const canvasConfig = chartEditStore.getEditCanvasConfig;

const uploadFileListRef = ref([]);

const previewTypeList = ref([
  {
    key: 'fit',
    title: '自适应',
    icon: BlockOutlined,
    desc: '自适应比例展示，页面会有留白'
  },
  {
    key: 'scrollY',
    title: 'Y轴滚动',
    icon: ColumnWidthOutlined,
    desc: 'X轴铺满，Y轴自适应滚动'
  },
  {
    key: 'scrollX',
    title: 'X轴滚动',
    icon: ColumnHeightOutlined,
    desc: 'Y轴铺满，X轴自适应滚动'
  },
  {
    key: 'full',
    title: '铺满',
    icon: DragOutlined,
    desc: '强行拉伸画面，填充所有视图'
  }
]);

// 修改尺寸
const changeSizeHandle = () => {
  chartEditStore.computedScale();
};

// 自定义上传操作
const customRequest = options => {
  const { file } = options;
  nextTick(() => {
    // 调用更新头像的接口
    const formData = new FormData();
    formData.append('file', file);
    FileApi.commonUpload('N', formData).then(res => {
      if (res.code == '00000') {
        chartEditStore.setEditCanvasConfig('backgroundImage', res.data.fileUrl);
        chartEditStore.setEditCanvasConfig('selectColor', false);
      } else {
        message.error('添加图片失败，请稍后重试！');
      }
    });
  });
};

// 上传之前
const beforeUploadHandle = ({ file }) => {
  uploadFileListRef.value = [];
  const type = file.file.type;
  const size = file.file.size;

  if (size > 1024 * 1024 * 5) {
    message.warning(`图片超出 ${5}M 限制，请重新上传！`);
    return false;
  }
  if (type !== 'png' && type !== 'jpg') {
    message.warning('文件格式不符合，请重新上传！');
    return false;
  }
  return true;
};

// 清除背景
const clearImage = () => {
  chartEditStore.setEditCanvasConfig('backgroundImage', undefined);
  chartEditStore.setEditCanvasConfig('selectColor', true);
};

// 清除颜色
const clearColor = () => {
  chartEditStore.setEditCanvasConfig('background', undefined);
  if (canvasConfig.backgroundImage) {
    chartEditStore.setEditCanvasConfig('selectColor', false);
  }
};
</script>

<style scoped lang="less">
.custom-page-config {
  padding-top: 20px;

  .upload-box {
    margin-top: 20px;
    border-radius: 8px;
    cursor: pointer;

    :deep(.ant-card-body) {
      padding: 12px;
    }

    .upload-ls {
      display: inline-block;
      width: 100%;

      :deep(.ant-upload) {
        width: 100%;
      }
    }

    .upload-show {
      width: -webkit-fill-available;
      height: 193px;
      border-radius: 5px;
    }
    .upload-img {
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        height: 150px;
      }
      span {
        padding: 10px 0;
        color: #ccc;
      }
    }
  }
}
.mt-20 {
  margin-top: 20px;
}
</style>
