<template>
  <div>
    <el-scrollbar>
      <!--        背景-->
      <el-card v-if="backGroundObject.permissionsConfig && (backGroundObject.permissionsConfig.length > 0)"
               :body-style="{background: '#f8f8f8'}"
               style="max-width: 100%; border-radius: 8px">

        <el-row style="margin-bottom: 10px">
          <el-col :span="22">
            <span class="eleTitle">编辑背景</span>
          </el-col>
        </el-row>

        <template v-for="(perm) in backGroundObject.permissionsConfig">
          <el-row class="permRow" v-if="perm == '0'">
            <el-row>
              <span class="eleLabel">选择颜色</span>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="4" v-for="color in backGroundObject.userSelectableColors">
                <el-button class="colorButton" :color="color" @click="updateBackground({color: color, fill: color})"/>
              </el-col>
            </el-row>
          </el-row>

          <el-row class="permRow" v-if="perm == '1'">
            <el-row>
              <span class="eleLabel">背景尺寸</span>
            </el-row>
            <el-row :gutter="10">
              <el-col :span="11">
                <el-input
                    v-model="canvasWidth"
                    :value="pageSizeWidth"
                    @change="changeTemplateWidth"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                >
                  <template #prepend>宽</template>
                </el-input>
              </el-col>
              <el-col :span="2"/>
              <el-col :span="11">
                <el-input
                    v-model="canvasHeight"
                    :value="pageSizeHeight"
                    @change="changeTemplateHeight"
                    oninput="value=value.replace(/[^\d.]/g,'')"
                >
                  <template #prepend>高</template>
                </el-input>
              </el-col>
            </el-row>
          </el-row>
        </template>
      </el-card>

      <!--      文本-->
      <el-card v-if="textPermDisplay"
               :body-style="{background: '#f8f8f8'}"
               style="max-width: 100%; border-radius: 8px">

        <el-row style="margin-bottom: 10px">
          <el-col :span="24">
            <span class="eleTitle">编辑文本</span>
          </el-col>
          <el-col :span="24">
            <el-tabs v-model="activeTextTabIndex">
              <el-tab-pane v-for="(text,index) in textObjects" :label="text.itemName" :name="index">
                <template v-for="(perm) in text.permissionsConfig">
                  <!--                  文本内容-->
                  <el-row class="permRow" v-if="perm == '0'">
                    <el-col :span="4">
                      <span class="eleLabel">文本</span>
                    </el-col>
                    <el-col :span="20">
                      <el-select
                          v-model="text.text"
                          filterable
                          allow-create
                          default-first-option
                          @change="eleTextChange(text.id, $event)">
                        <el-option v-for="str in text.userPresetTexts"
                                   :key="str.text"
                                   :label="str.text"
                                   :value="str.text"/>
                      </el-select>
                    </el-col>
                  </el-row>

                  <!--                  字号-->
                  <el-row class="permRow" v-if="perm == '1'">
                    <el-col :span="4">
                      <span class="eleLabel">字号</span>
                    </el-col>
                    <el-col :span="20">
                      <el-button-group class="full-group">
                        <el-tooltip placement="top" content="增大字号" :hide-after="0">
                          <el-button class="font-size" @click="handleElementFontsize(text.id,'+')">
                            <IconFontSize/>
                            +
                          </el-button>
                        </el-tooltip>

                        <el-tooltip placement="top" content="减小字号" :hide-after="0">
                          <el-button @click="handleElementFontsize(text.id,'-')">
                            <IconFontSize/>
                            -
                          </el-button>
                        </el-tooltip>
                      </el-button-group>
                    </el-col>
                  </el-row>

                  <!--                  字体-->
                  <el-row class="permRow" v-if="perm == '2'">
                    <el-col :span="4">
                      <span class="eleLabel">字体</span>
                    </el-col>
                    <el-col :span="20">
                      <el-select v-model="text.fontFamily" placement="left"
                                 @change="handleElementFontFamily(text.id, $event)">
                        <el-option-group v-for="group in fontOptionGroups" :key="group.label" :label="group.label">
                          <template v-if="group.type == 0">
                            <el-option v-for="item in group.options" :key="item" :value="item.value" :label="item.label"
                                       :style="{fontFamily: item.value}"></el-option>
                          </template>
                          <template v-else>
                            <el-option v-for="item in group.options" :key="item.id" :value="item.fontFamily"
                                       :label="item.fontName">
                              <el-image style="height: 18px; width: 90px" :src="item.fontThumbUrl"></el-image>
                            </el-option>
                          </template>
                        </el-option-group>
                      </el-select>
                    </el-col>
                  </el-row>

                  <!--                  颜色-->
                  <el-row class="permRow" v-if="perm == '3'">
                    <el-row>
                      <span class="eleLabel">选择颜色</span>
                    </el-row>
                    <el-row :gutter="10">
                      <el-col :span="4" v-for="color in text.userSelectableColors">
                        <el-button class="colorButton" :color="color" @click="updateFontColor(text.id,color)"/>
                      </el-col>
                    </el-row>
                  </el-row>

                  <!--                  字间距-->
                  <el-row class="permRow" v-if="perm == '4'">
                    <el-col :span="4">
                      <span class="eleLabel">缩进</span>
                    </el-col>
                    <el-col :span="20">
                      <el-button-group class="full-group">
                        <el-tooltip placement="top" content="减小缩进" :hide-after="0">
                          <el-button @click="handleElementCharSpacing(text.id,'-')">
                            <IconIndentLeft/>
                          </el-button>
                        </el-tooltip>
                        <el-tooltip placement="top" content="增大缩进" :hide-after="0">
                          <el-button @click="handleElementCharSpacing(text.id,'+')">
                            <IconIndentRight/>
                          </el-button>
                        </el-tooltip>
                      </el-button-group>
                    </el-col>
                  </el-row>

                  <!--                  尺寸及位置-->
                  <el-row class="permRow" v-if="perm == '5'">
                    <el-col :span="4">
                      <span class="eleLabel">尺寸</span>
                    </el-col>
                    <el-col :span="20">
                      <el-tag effect="dark" type="info">请拖拽右侧元素更改元素尺寸</el-tag>
                    </el-col>
                  </el-row>
                  <el-row class="permRow" v-if="perm == '6'">
                    <el-col :span="4">
                      <span class="eleLabel">位置</span>
                    </el-col>
                    <el-col :span="20">
                      <el-tag effect="dark" type="info">请拖拽右侧元素更改元素位置</el-tag>
                    </el-col>
                  </el-row>
                </template>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-card>

      <!--      图片-->
      <el-card v-if="imgPermDisplay"
               :body-style="{background: '#f8f8f8'}"
               style="max-width: 100%; border-radius: 8px;">

        <el-row style="margin-bottom: 10px">
          <el-col :span="24">
            <span class="eleTitle">编辑图片</span>
          </el-col>
          <el-col :span="24">
            <el-tabs v-model="activeImgTabIndex">
              <el-tab-pane v-for="(img,index) in imgObjects" :label="img.itemName" :name="index">
                <template v-for="(perm) in img.permissionsConfig">
                  <!--                  上传图片-->
                  <el-row class="permRow" v-if="perm == '0'">
                    <el-col :span="4">
                      <span class="eleLabel">上传</span>
                    </el-col>
                    <el-col :span="20">
                      <FileInput class="full-width-btn" @change="(files: FileList) => replaceImage(img.id,files)">
                        <el-button class="full-btn">
                          <IconTransform class="btn-icon"/>
                        </el-button>
                      </FileInput>
                    </el-col>
                  </el-row>
                  <!--                  尺寸及位置-->
                  <el-row class="permRow" v-if="perm == '1'">
                    <el-col :span="4">
                      <span class="eleLabel">尺寸</span>
                    </el-col>
                    <el-col :span="20">
                      <el-tag effect="dark" type="info">请拖拽右侧元素更改元素尺寸</el-tag>
                    </el-col>
                  </el-row>
                  <el-row class="permRow" v-if="perm == '2'">
                    <el-col :span="4">
                      <span class="eleLabel">位置</span>
                    </el-col>
                    <el-col :span="20">
                      <el-tag effect="dark" type="info">请拖拽右侧元素更改元素位置</el-tag>
                    </el-col>
                  </el-row>
                </template>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </el-card>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
import useCanvas from "@/views/Canvas/useCanvas";
import {computed, ref} from "vue";
import {MaxSize, MinSize, TransparentFill} from "@/configs/background";
import {WorkSpaceElement} from "@/types/canvas";
import {storeToRefs} from "pinia";
import {useFabricStore, useMainStore, useTemplatesStore} from "@/store";
import {propertiesToInclude, WorkSpaceDrawType} from "@/configs/canvas";
import {Gradient, Pattern, Image, util, Textbox} from "fabric";
import useHandleBackground from "@/hooks/useHandleBackground";
import {mm2px, px2mm} from "@/utils/image";
import {ElMessage} from "element-plus";
import useI18n from "@/hooks/useI18n";
import {ArcText} from "@/extension/object/ArcText";
import {FontGroupOption} from "@/types/elements";

const {t} = useI18n();
const mainStore = useMainStore();
const {sizeMode, unitMode} = storeToRefs(mainStore);
const {canvasObject, systemFonts, onlineFonts} = storeToRefs(mainStore)
const [canvas] = useCanvas();
const templatesStore = useTemplatesStore();
const {setBackgroudImage} = useHandleBackground();
const {currentTemplate} = storeToRefs(templatesStore);
const fabricStore = useFabricStore();
const {clip, safe, zoom, opacity} = storeToRefs(fabricStore);
const objects = canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));
// const objects = computed(() => {
//   return canvas == null ? [] : canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));
// })
const backGroundObject = computed(() => {
  return /*canvas == null ? {} :*/ canvas.getObjects().filter((item) => item.id === WorkSpaceDrawType)[0];
})
const textObjects = computed(() => {
  return /*canvas == null ? [] :*/ canvas.getObjects().filter((item) => item.name === 'textbox');
})
const imgObjects = computed(() => {
  return /*canvas == null ? [] :*/ canvas.getObjects().filter((item) => item.name === 'image');
})

const textPermDisplay = computed(() => {
  let result = false;
  textObjects.value.forEach(x => {
    if (x.permissionsConfig && (x.permissionsConfig.length > 0)) {
      result = true;
      return;
    }
  })
  return result;
})

const imgPermDisplay = computed(() => {
  let result = false;
  imgObjects.value.forEach(x => {
    if (x.permissionsConfig && (x.permissionsConfig.length > 0)) {
      result = true;
      return;
    }
  })
  return result;
})

const activeTextTabIndex = ref(0)
const activeImgTabIndex = ref(0)

const pageSizeWidth = computed(() => {
  return Math.round(templateWidth.value * 100) / 100
})
const pageSizeHeight = computed(() => {
  return Math.round(templateHeight.value * 100) / 100
})
const templateWidth = computed(() => {
  const workWidth = currentTemplate.value.width / currentTemplate.value.zoom;
  return unitMode.value === 0 ? px2mm(workWidth) : workWidth;
});

const templateHeight = computed(() => {
  const workHeight = currentTemplate.value.height / currentTemplate.value.zoom;
  return unitMode.value === 0 ? px2mm(workHeight) : workHeight;
});

const canvasWidth = ref<number>(templateWidth.value);
const canvasHeight = ref<number>(templateHeight.value);

const background = computed(() => {
  if (!currentTemplate.value) {
    return {
      fillType: 0,
      fill: TransparentFill,
      backgroundColor: "#fff",
    } as WorkSpaceElement;
  }
  if (!currentTemplate.value.workSpace) {
    return {
      fillType: 0,
      fill: TransparentFill,
      backgroundColor: "#fff",
    } as WorkSpaceElement;
  }
  return currentTemplate.value.workSpace;
});

const fontOptionGroups = ref<FontGroupOption[]>([
  {
    type: 0,
    label: '系统字体',
    options: systemFonts.value
  },
  {
    type: 1,
    label: '在线字体',
    options: onlineFonts.value
  }
])


// 固定宽高
const isFixed = ref(false);
// 设置背景
const updateBackground = (props: Partial<WorkSpaceElement>) => {
  const [canvas] = useCanvas();
  const workSpaceDraw = canvas.getObjects().filter((item) => item.id === WorkSpaceDrawType)[0];
  if (!workSpaceDraw) return;
  workSpaceDraw.set({...props});
  if (props.fill instanceof Pattern) {
    props.fill = props.fill.toObject() as Pattern
  }
  templatesStore.updateWorkSpace({workSpace: {...background.value, ...props}});
  const workProps = workSpaceDraw.toObject(propertiesToInclude as any[]);
  templatesStore.updateElement({id: workSpaceDraw.id, props: {...workProps, ...props}});
  canvas.renderAll();
};

// 修改上传背景
const changeBackgroundImage = async (imageURL: string) => {
  if (background.value.imageSize === "repeat") {
    const backgroundImage = await util.loadImage(imageURL);
    const workSpacePattern = new Pattern({
      source: backgroundImage,
      repeat: "repeat",
    });
    updateBackground({fill: workSpacePattern, imageURL});
  } else {
    setBackgroudImage(imageURL);
    updateBackground({fill: TransparentFill, imageURL});
  }
};

// 获取画布尺寸
const getCanvasSize = () => {
  let width =
      unitMode.value === 0 ? mm2px(canvasWidth.value) : canvasWidth.value;
  let height =
      unitMode.value === 0 ? mm2px(canvasHeight.value) : canvasHeight.value;
  width = width * zoom.value;
  height = height * zoom.value;
  return {width, height};
};

// 修改画布宽度
const changeTemplateWidth = () => {
  const [canvas] = useCanvas();
  const workSpaceDraw = canvas
      .getObjects()
      .filter((item) => item.id === WorkSpaceDrawType)[0];
  if (!workSpaceDraw) return;
  const ratio = currentTemplate.value.height / currentTemplate.value.width;
  let {width, height} = getCanvasSize();
  if (width / zoom.value < mm2px(MinSize)) {
    ElMessage({
      message: t("style.minimumSizeLimit") + MinSize,
      type: "warning",
    });
    width = mm2px(MinSize) * zoom.value;
  }
  if (width / zoom.value > mm2px(MaxSize)) {
    ElMessage({
      message: t("style.maximumSizeLimit") + MaxSize,
      type: "warning",
    });
    width = mm2px(MaxSize) * zoom.value;
  }
  height = isFixed.value ? width * ratio : height;
  workSpaceDraw.set({width: width / zoom.value, height: height / zoom.value});
  templatesStore.setSize(width, height, zoom.value);
  sizeMode.value = 2;
  canvas.renderAll();
  // resetCanvas()
  // addHistorySnapshot();
};

// 修改画布高度
const changeTemplateHeight = () => {
  const [canvas] = useCanvas();
  const workSpaceDraw = canvas
      .getObjects()
      .filter((item) => item.id === WorkSpaceDrawType)[0];
  if (!workSpaceDraw) return;
  const ratio = currentTemplate.value.height / currentTemplate.value.width;
  let {width, height} = getCanvasSize();
  if (height / zoom.value < mm2px(MinSize)) {
    ElMessage({
      message: t("style.minimumSizeLimit") + MinSize,
      type: "warning",
    });
    height = mm2px(MinSize) * zoom.value;
  }
  if (height / zoom.value > mm2px(MaxSize)) {
    ElMessage({
      message: t("style.maximumSizeLimit") + MaxSize,
      type: "warning",
    });
    height = mm2px(MaxSize) * zoom.value;
  }
  width = isFixed.value ? height / ratio : width;
  workSpaceDraw.set({width: width / zoom.value, height: height / zoom.value});
  templatesStore.setSize(width, height, zoom.value);
  sizeMode.value = 2;
  canvas.renderAll();
  // resetCanvas()
  // addHistorySnapshot();
};

//查找目标元素
const findObject = (objId: string) => {
  return objects.find((item) => item.id === objId);
}

//修改文字信息
const eleTextChange = (objId: string, text) => {
  const handleElement = findObject(objId) as Textbox | ArcText;

  if (handleElement.isEditing) {
    handleElement.setSelectionStyles({text})
  } else {
    templatesStore.modifedElement(handleElement, {text})
  }
  canvas.renderAll()
}

// 修改字体大小
const handleElementFontsize = (objId: string, mode: string) => {
  const handleElement = findObject(objId) as Textbox | ArcText;

  if (handleElement.fontSize <= 6) return
  const fontSize = mode === '+' ? handleElement.fontSize + 1 : handleElement.fontSize - 1
  if (handleElement.isEditing) {
    handleElement.setSelectionStyles({fontSize})
  } else {
    templatesStore.modifedElement(handleElement, {fontSize})
  }
  canvas.renderAll()
}

// 修改字体族
const handleElementFontFamily = (objId: string, fontFamily: string) => {
  const handleElement = findObject(objId) as Textbox | ArcText;

  if (handleElement.isEditing) {
    handleElement.setSelectionStyles({fontFamily})
  } else {
    templatesStore.modifedElement(handleElement, {fontFamily})
  }
  canvas.renderAll()
}

// 修改字体颜色
const updateFontColor = (objId: string, fill: string) => {
  const handleElement = findObject(objId) as Textbox | ArcText;

  if (handleElement.isEditing) {
    handleElement.setSelectionStyles({fill})
  } else {
    templatesStore.modifedElement(handleElement, {fill, color: fill})
  }
}

// 修改缩进
const handleElementCharSpacing = (objId: string, mode: '+' | '-') => {
  const handleElement = findObject(objId) as Textbox | ArcText;

  const handleCharSpacing = handleElement.charSpacing
  const charSpacing = mode === '+' ? handleCharSpacing + 10 : handleCharSpacing - 10
  templatesStore.modifedElement(handleElement, {charSpacing})
}

// 替换图片（保持当前的样式）
const replaceImage = (objId: string, files: FileList) => {
  const handleElement = findObject(objId) as Image;

  const props = {src: files.fileLink};
  handleElement.setSrc(files.fileLink); //红就红吧type硬赋值了
  templatesStore.updateElement({id: handleElement.id, props});
};

onMounted(() => {
  // objects = canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));
  console.log(objects)
})

</script>

<style lang="scss" scoped>
:deep(.el-tabs__item) {
  padding: 0;
}

.layout-search {
  margin: 0 auto;
  width: 80%;
  padding: 20px 10px 10px;
}

.layout-upload {
  justify-content: center;
}

.layout-tabs {
  width: 90%;
  margin: 0 auto;
}

.layout-templates {
  display: flex;
  flex-wrap: wrap;
  padding: 2px;

  .thumbnail {
    display: flex;
    width: 124px;
    margin: 2px;
  }

  .thumbnail img {
    outline: 1px solid $borderColor;
    margin: 0 5px;
    cursor: pointer;

    &:hover {
      outline-color: $themeColor;
    }
  }
}

.col-img {
  height: 100px;

  img {
    max-height: 100%;
  }
}

.eleTitle {
  font-size: 1.0rem;
  font-weight: bold;
}

.eleLabel {
  font-size: 0.8rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.colorButton {
  margin-bottom: 5px;
}

.permRow {
  margin-top: 10px;
}

</style>