<template>
  <ModuleBase :type="data.type">
    <template #content>
      <div class="tag-edit">
        <el-tag
          v-for="(tag, i) in data.dynamicTags"
          :key="i"
          closable
          :style="{ color: tag.color }"
          @close="handleClose(i)"
        >
          {{ tag.text }}
        </el-tag>
        <el-input
          v-if="inputVisible"
          ref="saveTagInput"
          v-model="inputValue"
          class="input-new-tag"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        />
        <el-button v-else class="button-new-tag" @click="showInput">+ 添加标签</el-button>
      </div>
      <hr style="margin: 16px 0; border-top: 1px solid #ededed" />
      <div class="tag-manager">
        <div class="tag-manager-box">
          <span class="tag-manager-title">常用标签</span>
          <SvgIcon icon-class="setup" size="14" />
          <span class="tag-manager-text" @click="editCommonTags()">管理</span>
        </div>
        <div class="tag-manager-common tag-edit">
          <el-tag
            v-for="(tag, i) in commonTags"
            :key="i"
            effect="plain"
            size="medium"
            :closable="closable"
            style="cursor: pointer"
            @close="handleCloseCommonTag(i)"
            @click="viewToDynamicTags(i)"
          >
            {{ tag.text }}
          </el-tag>
        </div>
      </div>
    </template>
  </ModuleBase>
</template>
<script>
import { getLabelData, labelColorList } from '@/views/book/courseware/data/label';
import ModuleMixin from '../../common/ModuleMixin';
export default {
  name: 'LabelPage',
  mixins: [ModuleMixin],
  data() {
    return {
      labelColorList,
      data: getLabelData(),
      inputVisible: false,
      inputValue: '',
      closable: false,
      commonTags: [], // 常用标签
    };
  },
  created() {
    const storedData = localStorage.getItem('commonTags');
    if (storedData) {
      this.commonTags = JSON.parse(storedData);
    }
  },
  methods: {
    // 随机显示颜色
    getRandomColor() {
      let randomIndex = Math.floor(Math.random() * (this.labelColorList.length - 1)) + 1;
      return this.labelColorList[randomIndex].value;
    },
    // 删除标签
    handleClose(i) {
      this.data.dynamicTags.splice(i, 1);
    },
    // 显示编辑标签图标
    editCommonTags() {
      this.closable = !this.closable;
    },
    // 删除常用标签
    handleCloseCommonTag(i) {
      this.commonTags.splice(i, 1);
      this.saveToLocalStorage();
    },
    // 显示新增标签
    showInput() {
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    // 新增标签
    handleInputConfirm() {
      let inputValue = this.inputValue;
      let label_color = this.data.property.label_color;
      if (label_color === 'random') label_color = this.getRandomColor();
      if (inputValue) {
        this.data.dynamicTags.push({
          text: inputValue,
          color: label_color,
        });
        this.commonTags.push({
          text: inputValue,
          color: label_color,
        });
      }
      this.inputVisible = false;
      this.inputValue = '';
      this.saveToLocalStorage();
    },
    // 点击常用标签显示到动态标签里
    viewToDynamicTags(index) {
      this.data.dynamicTags.push(this.commonTags[index]);
    },
    // 常用标签存储
    saveToLocalStorage() {
      // 将数据保存到localStorage中
      localStorage.setItem('commonTags', JSON.stringify(this.commonTags));
    },
  },
};
</script>

<style lang="scss" scoped>
.tag-edit {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  :deep .el-tag {
    height: 32px;
    padding: 0 10px;
    line-height: 30px;
    color: var(--color1);
    background-color: #fff;
    border-color: var(--color1);
    border-radius: 2px;

    .el-tag__close:hover {
      // color: #fff;
      background-color: #ddd;
    }

    .el-tag__close {
      color: var(--color1);
    }
  }

  .button-new-tag {
    height: 32px;
    background-color: #f2f3f3;
    border: 1px dashed #c9cdd4;
  }

  .input-new-tag {
    width: 90px;
  }
}

.tag-manager {
  display: flex;
  flex-direction: column;
  row-gap: 10px;

  .tag-manager-box {
    display: flex;
    column-gap: 4px;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    cursor: pointer;

    .tag-manager-title {
      margin-right: 6px;
      color: rgba(0, 0, 0, 65%);
      cursor: text;
    }
  }
}
</style>
