<template>
  <div class="set_bar">
    <h2 class="title">重命名</h2>
    <DialogInputVue
      class="edit"
      v-model:value="editTitle"
      placeholder="请输入标题名"
      :disabled="rootState?.selectEditItemId.value === ''"
      :maxlength="10"
      @input="changeEdit"
    ></DialogInputVue>
    <h2
      class="title"
      v-show="
        !(
          selectTarget?.type === PropertyType.Unit ||
          selectTarget?.type === PropertyType.JSON ||
          selectTarget === null
        )
      "
    >
      选择表单类型
    </h2>
    <ul
      class="menu flex flex-wrap justify-between"
      v-show="
        !(
          selectTarget?.type === PropertyType.Unit ||
          selectTarget?.type === PropertyType.JSON ||
          selectTarget === null
        )
      "
    >
      <set-select-item
        label="单行输入"
        :selected="type === PropertyType.Input"
        :disabled="selectedDisabled"
        @click="handleSelect(PropertyType.Input)"
      >
      </set-select-item>
      <set-select-item
        label="外部链接"
        :selected="type === PropertyType.Link"
        :disabled="selectedDisabled"
        @click="handleSelect(PropertyType.Link)"
      >
      </set-select-item>
      <set-select-item
        label="文本域"
        :selected="type === PropertyType.TextArea"
        :disabled="selectedDisabled"
        @click="handleSelect(PropertyType.TextArea)"
      >
      </set-select-item>
      <set-select-item
        label="下拉框"
        :selected="type === PropertyType.Select"
        :disabled="selectedDisabled"
        @click="handleSelect(PropertyType.Select)"
      >
      </set-select-item>
      <set-select-item
        label="上传图片"
        :selected="type === PropertyType.Image"
        :disabled="selectedDisabled"
        @click="handleSelect(PropertyType.Image)"
      >
      </set-select-item>
      <set-select-item
        label="日期"
        :selected="type === PropertyType.Date"
        :disabled="selectedDisabled"
        @click="handleSelect(PropertyType.Date)"
      >
      </set-select-item>
      <set-select-item
        label="上传PDF"
        :selected="type === PropertyType.File"
        :disabled="selectedDisabled"
        @click="handleSelect(PropertyType.File)"
      >
      </set-select-item>
      <set-select-item
        label="上传视频"
        :selected="type === PropertyType.Video"
        :disabled="selectedDisabled"
        @click="handleSelect(PropertyType.Video)"
      >
      </set-select-item>
      <set-select-item
        label="上传语音"
        :selected="type === PropertyType.Audio"
        :disabled="selectedDisabled"
        @click="handleSelect(PropertyType.Audio)"
      >
      </set-select-item>
      <set-select-item
        label="图片链接"
        :selected="type === PropertyType.ImageUrl"
        :disabled="selectedDisabled"
        @click="handleSelect(PropertyType.ImageUrl)"
      >
      </set-select-item>
      <set-select-item
        label="文本数组"
        :selected="type === PropertyType.TextArray"
        :disabled="selectedDisabled"
        @click="handleSelect(PropertyType.TextArray)"
      >
      </set-select-item>
      <set-select-item
        label="编辑器"
        :selected="type === PropertyType.Editor"
        :disabled="selectedDisabled"
        @click="handleSelect(PropertyType.Editor)"
      >
      </set-select-item>
    </ul>
    <h2 class="title" v-if="showUpload">上传banner图</h2>
    <set-select-item
      v-if="showUpload"
      :selected="false"
      :disabled="false"
      label=""
      @click="$emit('uploadBanner')"
    >
      <img src="@/assets/img/upload.svg" style="margin-right: 4px" alt="" />
      点击上传
    </set-select-item>
  </div>
</template>

<script lang="ts" setup>
import { PropertyType } from "./types";
import { Property, Unit } from "./types2";
import SetSelectItem from "./SetSelectItem.vue";
import { computed, inject, nextTick, ref, watch, toRaw, unref, Ref } from "vue";
import { syDialogInput as DialogInputVue } from "cqk-sy-ui";
import { findSelectTarget } from "./ModifySelectTarget";

const props = defineProps<{
  selectTarget: Unit | Property | null;
  showUpload?: boolean;
  setSelectedItem: any;
}>();

const emit = defineEmits([
  "select-type",
  "add-child",
  "delete",
  "uploadBanner",
]);

const rootState = inject<{
  selectEditItemId: Ref<string>;
  rootUnitList: Ref<Unit[]>;
  setRootUnitList: (list: Unit[]) => void;
  focusedTarget: Ref<Unit>;
}>("editRootState");

const editTitle = ref(``);

const type = computed(() => {
  return rootState?.focusedTarget.value?.type;
});

watch(
  () => props.selectTarget,
  (newV: any) => {
    if (newV) {
      editTitle.value = newV.title || newV.label || "";
    } else {
      editTitle.value = "";
    }
  }
);

const changeEdit = () => {
  nextTick(() => {
    if (props.selectTarget) {
      if (Object.prototype.hasOwnProperty.call(props.selectTarget, "title"))
        if (editTitle.value.length >= 1) {
          (props.selectTarget as Unit).title = editTitle.value;
        }
      if (Object.prototype.hasOwnProperty.call(props.selectTarget, "label"))
        if (editTitle.value.length >= 1) {
          (props.selectTarget as Property).label = editTitle.value;
        }
    }
  });
};

const selectedDisabled = computed(() => {
  return (
    props.selectTarget?.type === PropertyType.Unit ||
    props.selectTarget?.type === PropertyType.None ||
    props.selectTarget?.type === PropertyType.JSON ||
    props.selectTarget?.parent?.type === PropertyType.JSON
  );
});

const handleSelect = (val: PropertyType) => {
  if (selectedDisabled.value) return;
  const { item, list } = findSelectTarget(
    toRaw(unref(rootState!.rootUnitList)),
    toRaw(unref(rootState!.selectEditItemId))
  );
  if (item) {
    item.type = val;
    (item as any).value = "";
    rootState?.setRootUnitList(list);
  }
};
</script>
<style scoped lang="scss">
.set_bar {
  position: relative;
  height: 100%;
}
.editor {
  width: 125px;
  vertical-align: middle;
  display: inline-block;
  background: white;
  vertical-align: middle;
  box-sizing: border-box;
  margin-left: 10px;
  display: inline-block;
  height: 35px;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  color: rgba(53, 53, 53, 0.4);
  font-size: 12px;
}
.edit {
  width: 100%;
  margin-top: 16px;
  :deep(.el-input__inner) {
    font-size: 12px;
    &::-webkit-input-placeholder {
      /* WebKit browsers */
      font-size: 12px;
    }
    &::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      font-size: 12px;
    }
  }
}
.g-btn_primary {
  border: none;
  background: var(--sy-blue);
  font-size: 14px;
  color: #fff;
  outline: none;
  cursor: pointer;
  border-radius: 8px;
}
.title {
  font-size: 14px;
  font-weight: 500;
  margin-top: 9px;
  margin-bottom: 14px;
  color: var(--sy-black);
}

.menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.menu-item {
  padding-left: 23px;
  line-height: 35px;
  font-size: 0;
  margin-top: 18px; /* todo ui间距不统一,文字非对齐 */
}

.menu-item-icon_check {
  vertical-align: middle;
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 1px solid #d1d1d1;
  border-radius: 50%;
  cursor: pointer;
}

.menu-item_icon_check_active {
  vertical-align: middle;
  color: #50b74d;
  font-size: 17px;
}

.menu-item-name {
  vertical-align: middle;
  display: inline-block;
  width: 56px;
  margin-left: 9px;
  font-size: 14px;
}

.menu-item-name_active {
  color: #4fb64c;
}

.menu-item-example {
  vertical-align: middle;
  box-sizing: border-box;
  margin-left: 10px;
  display: inline-block;
  height: 35px;
  border: 1px solid #e7e7e7;
  border-radius: 4px;
  color: rgba(53, 53, 53, 0.4);
  font-size: 12px;
}

.menu-item-example_input {
  width: 125px;
  padding-left: 13px;
  height: 25px;
  background: white;
  line-height: 25px;
}

.menu-item-example_input_half {
  width: 58px;
  padding-left: 13px;
  height: 25px;
  background: white;
  line-height: 25px;
}

.menu-item-example_select {
  width: 125px;
  padding: 0 5px 0 12px;
  height: 25px;
  line-height: 25px;
  background: white;
  i {
    float: right;
    font-size: 12px;
    transform: scale(0.46);
  }
}

.menu-item-example_image {
  width: 25px;
  height: 25px;
  text-align: center;
  background: white;
  line-height: 23px;
  font-size: 12px;
  i {
    font-size: 12px;
  }
}
.menu-item-example_up {
  width: 35px;
  height: 25px;
  background: rgba(255, 255, 255, 1);
  border-radius: 4px;
  text-align: center;
  line-height: 25px;
  border: 1px solid rgba(231, 231, 231, 1);
}
.menu-item-example_date {
  width: 125px;
  padding: 0 8px 0 12px;
  height: 25px;
  line-height: 25px;
  background: white;
  & i {
    float: right;
    font-size: 13px;
  }
}

.btn_wrapper {
  position: absolute;
  right: 0;
  bottom: 39px;
  left: 0;
  text-align: center;

  & > button {
    margin-top: 20px;
    width: 220px;
    height: 35px;
  }
}

.js-btn_disabled {
  background: #c5cfe8;
  cursor: not-allowed;
}
</style>
