<template>
  <div class="layout" v-if="isShow">
    <el-icon class="close" @click="handleClose">
      <Close />
    </el-icon>
    <el-form :inline="true" :model="form" label-width="auto">
      <el-form-item label="内容">
        <el-input type="input" :maxlength="40" v-model="form.text" />
      </el-form-item>

      <el-form-item label="字号：">
        <el-select
          v-model="form.fontsize"
          placeholder="选择字号"
          style="width: 200px"
        >
          <el-option
            v-for="item in fontSizeOptions"
            v-bind="item"
            :key="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="颜色：">
        <el-color-picker
          v-model="form.color"
          color-format="rgba"
          show-alpha
          :predefine="predefineColors"
        />
      </el-form-item>
      <el-form-item label="删除：">
        <el-button type="primary" @click="handleDel">删除</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup>
import { reactive, ref, watch } from "vue";

const isShow = ref(false);
const props = defineProps({ show: Boolean, data: Object });
const emit = defineEmits(["update", "del", "close"]);

const predefineColors = [
  "#ff0f00",
  "#ffbe00",
  "#1a9bff",
  "#1aad19",
  "#000000",
  "#ffffff",
  "#666666",
];

watch(
  props,
  ({ show, data }) => {
    isShow.value = show;
    form.text = data.text;
    form.id = data.id;
    form.type = data.type;
    form.pos = data.pos;
    form.fontsize = data.fontsize || 12;
    console.log("data", data);
  },
  {
    deep: true,
  }
);

// do not use same name with ref
const defaultfrom = {
  id: "",
  text: "",
  fontsize: 12,
  type: null,
  pos: null,
  color: "#000000",
};
let form = reactive(defaultfrom);

watch(
  form,
  () => {
    handleUpdate();
  },
  {
    deep: true,
  }
);

const fontSizeRange = [8, 30];
const fontSizeOptions = [];
for (let i = fontSizeRange[0]; i <= fontSizeRange[1]; i++) {
  fontSizeOptions.push({ value: i, label: i.toString() });
}

const handleClose = () => {
  isShow.value = false;
  emit("close", form);
  form = reactive(defaultfrom);
};
const handleUpdate = () => {
  emit("update", form);
};

const handleDel = () => {
  isShow.value = false;
  emit("del", form);
  form = reactive(defaultfrom);
};
</script>

<style>
.layout {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  right: 0;
  background: #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 25px 0 10px;
  width: fit-content;
  /* width: 300px; */
}
.layout .el-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  max-width: 300px;
}
.layout .el-form-item {
  margin-left: 10px;
  margin-right: 10px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}
.close {
  align-self: start;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  position: absolute !important;
  right: 10px;
  top: 10px;
  cursor: pointer;
}
</style>
