<template>
  <div class="element-permission">
    <div class="mb-2">
      <b>客户可编辑项</b>
    </div>
    <div class="mb-2">
      <el-checkbox-group v-if="eleType == 'text'" v-model="handleElement.permissionsConfig" size="small">
        <el-row v-for="perm in textPerms">
          <el-col :span="10">
            <el-checkbox :key="perm.code" :value="perm.code"
                         @change="eleChange">
              {{ perm.name }}
            </el-checkbox>
          </el-col>
          <el-col v-if="perm.code == '3' &&  handleElement.permissionsConfig?.includes('3')" :span="13">
            <el-tag
                v-for="item in handleElement.userSelectableColors"
                :key="item"
                :color="item"
                closable
                size="small"
                effect="dark"
                @close="onDeleteUserColor(item)"
                class="colorTag"
            />
            <el-color-picker v-model="initColor" size="small" @change="addUserSelectableColor"/>
          </el-col>
        </el-row>
      </el-checkbox-group>

      <el-checkbox-group v-if="eleType == 'image'" v-model="handleElement.permissionsConfig" size="small">
        <el-row v-for="perm in imagePerms">
          <el-col :span="10">
            <el-checkbox :key="perm.code" :value="perm.code"
                         @change="eleChange">
              {{ perm.name }}
            </el-checkbox>
          </el-col>
        </el-row>
      </el-checkbox-group>
    </div>
    <el-divider style="margin: 12px 0"/>

    <template v-if="eleType == 'text' && handleElement.permissionsConfig?.includes('0')">
      <el-row>
        <el-col :span="7" class="slider-name">预设文案：
        </el-col>
        <el-col :span="1"></el-col>
        <el-col :span="14">
          <el-select v-model="value" @change="eleTextChange">
            <el-option v-for="(item, index) in handleElement.userPresetTexts" :key="index" :label="item.text" :value="item.text">
              <span style="float: left">{{ item.text }}</span>
              <el-button size="small" style="float: right" @click.stop="delUserPresetText(item)" :icon="Delete"/>
            </el-option>
            <template #footer>
              <el-button v-if="!isAddingText" text bg size="small" @click="isAddingText = true">
                添加文案
              </el-button>
              <template v-else>
                <el-input
                    v-model="toAddText"
                    class="option-input"
                    placeholder="输入文案"
                    size="small"
                />
                <el-button type="primary" size="small" @click="addUserPresetText">
                  确认
                </el-button>
                <el-button size="small" @click="cancelAddText">取消</el-button>
              </template>
            </template>
          </el-select>
        </el-col>
      </el-row>
      <el-divider style="margin: 12px 0"/>
    </template>

    <el-row>
      <el-col :span="7" class="slider-name">元素名称：
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="14">
        <el-input v-model="handleElement.itemName" @change="itemNameChange">
        </el-input>
      </el-col>
    </el-row>
    <el-divider style="margin: 12px 0"/>
  </div>
</template>

<script lang="ts" setup>
import {computed, ref, watch} from "vue";
import {storeToRefs} from "pinia";
import {useMainStore, useTemplatesStore} from "@/store";
import useCanvas from "@/views/Canvas/useCanvas";
import {CanvasElement} from "@/types/canvas";
import {CheckboxValueType, ElMessage} from "element-plus";
import {Delete} from "@icon-park/vue-next";

const props = defineProps({
  eleType: {
    type: String,
    required: true,
  },
});

const textPerms = [
  {
    "name": "文字内容",
    "code": "0"
  },
  {
    "name": "字号",
    "code": "1"
  },
  {
    "name": "字体",
    "code": "2"
  },
  {
    "name": "颜色",
    "code": "3"
  },
  {
    "name": "字间距",
    "code": "4"
  },
  {
    "name": "元素尺寸",
    "code": "5"
  },
  {
    "name": "元素位置",
    "code": "6"
  }
]

const imagePerms = [
  {
    "name": "上传图片",
    "code": "0"
  },
  {
    "name": "图片尺寸",
    "code": "1"
  },
  {
    "name": "图片位置",
    "code": "2"
  }
]

const isAddingText = ref(false)
const toAddText = ref("")
const value = ref("")

const initColor = ref("#ffffff")

// const userSelectableColors = ref([])
const templatesStore = useTemplatesStore();


const [canvas] = useCanvas();
const {canvasObject} = storeToRefs(useMainStore());

const handleElement = computed(() => canvasObject.value as CanvasElement);

const eleChange = () => {
  if (!handleElement.value) return;
  canvas.renderAll();
}

//修改文字信息
const eleTextChange = (text) => {
  if (handleElement.value.isEditing) {
    handleElement.value.setSelectionStyles({text})
  } else {
    templatesStore.modifedElement(handleElement.value, {text})
  }
  canvas.renderAll()
}

const itemNameChange = () => {
  if (!handleElement.value) return;
  const objects = canvas.getObjects().filter((object) => !["WorkSpaceMaskType", "WorkSpaceClipType", "WorkSpaceSafeType", "WorkSpaceClipType"].includes(object.id));
  if (objects.findIndex((object) => (object.itemName == handleElement.value.itemName) && (object.id != handleElement.value.id)) >= 0) {
    ElMessage.error('元素名称重复,请设置新的元素名称')
    return
  }
}

const addUserPresetText = () => {
  if (!handleElement.value) return;
  if (!toAddText.value) return;

  if (!handleElement.value.userPresetTexts) handleElement.value.userPresetTexts = []
  handleElement.value.userPresetTexts.push({
    text: toAddText.value
  });
  cancelAddText();
  canvas.renderAll();
}

const delUserPresetText = (item) => {
  if (!handleElement.value) return;
  handleElement.value.userPresetTexts.splice(handleElement.value.userPresetTexts.indexOf(item), 1)
}

const cancelAddText = () => {
  toAddText.value = ''
  isAddingText.value = false
}

const addUserSelectableColor = (color: string) => {

  if (!handleElement.value) return;

  handleElement.value.userSelectableColors.push(color);
  // handleElement.value.set({userSelectableColors: userSelectableColors.value})
  canvas.renderAll();
}

const onDeleteUserColor = (tag: string) => {
  if (!handleElement.value) return;
  handleElement.value.userSelectableColors.splice(handleElement.value.userSelectableColors.indexOf(tag), 1)
  // handleElement.value.set({userSelectableColors: userSelectableColors.value})
  canvas.renderAll();
}

onMounted(() => {
  if (!handleElement.value.userSelectableColors)
    handleElement.value.userSelectableColors = []
  // userSelectableColors.value = handleElement.value.userSelectableColors;
})

</script>

<style lang="scss" scoped>
.row {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.switch-wrapper {
  text-align: right;
}

.slider {
  flex: 3;
}

.slider-name {
  display: flex;
  align-items: center;
}

.slider-num {
  display: flex;
  align-items: center;
  justify-content: center;
}

.colorTag {
  margin-bottom: 13px;
}

.option-input {
  width: 100%;
  margin-bottom: 8px;
}
</style>