<template>
  <div class="basics-set">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>样表基础设置</span>
      </div>
      <div class="header">
        <span class="mr15 title">热门搜索词汇</span>
        <span class="tips"
          >点击热门词汇，自动检索。系统默认展示搜索量最多的10个词，每个词展示6个汉字，支持手动修改。</span
        >
      </div>
      <!-- 标签 -->
      <div class="mt20">
        <template v-for="item in baseSetInfo.hotwords">
          <el-tooltip
            class="item"
            effect="dark"
            :key="item.id"
            :content="item.hotwords"
            v-if="item.hotwords && item.hotwords.length > 6"
            placement="top-start"
          >
            <el-tag
              :key="item.id"
              size="small"
              closable
              :disable-transitions="false"
              @close="handleClose(item.hotwords)"
            >
              {{ `${item.hotwords.slice(0, 6)}...` }}
            </el-tag>
          </el-tooltip>
          <el-tag
            :key="item.id"
            size="small"
            v-else
            closable
            :disable-transitions="false"
            @close="handleClose(item.hotwords)"
          >
            {{ item.hotwords }}
          </el-tag>
        </template>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="mini"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="mini" @click="showInput"
          >+ 添加词汇
        </el-button>
      </div>
      <div class="mt50">
        <el-button size="small" type="primary" @click="handleOk"
          >确定
        </el-button>
        <el-button size="small" @click="handleReset">重置</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getBaseSetInfo, saveBaseSet } from "@/api/baseSet";
import local from "@/utils/local";

export default {
  data() {
    return {
      siteId: local.getLocal("sampleSiteId")
        ? local.getLocal("sampleSiteId")
        : "",
      inputVisible: false,
      inputValue: "",
      newSourceEnumData: {},
      baseSetInfo: {
        hotwords: [],
        newsSource: "1",
        printDisplay: "20",
      },
    };
  },
  created() {
    this.getBaseSetInfo();
  },
  methods: {
    // 获取基础设置
    async getBaseSetInfo() {
      let res = await getBaseSetInfo({
        siteId: this.siteId,
      });
      if (res.data.code === 1) {
        this.newSourceEnumData = res.data.dict.newsSource;
        if (res.data.data.data.length > 0) {
          this.baseSetInfo.hotwords = res.data.data.data[0].hotwordList.slice(
            0,
            10
          );
          this.baseSetInfo.printDisplay = res.data.data.data[0].printDisplay;
          this.baseSetInfo.newsSource = res.data.data.data[0].newsSource + "";
        }
      }
    },
    handleClose(tag) {
      //删除当前词汇
      this.baseSetInfo.hotwords = this.baseSetInfo.hotwords.filter(
        (i) => i.hotwords != tag
      );
    },

    showInput() {
      if (this.baseSetInfo.hotwords.length >= 10) {
        return;
      }
      this.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm() {
      let inputValue = this.inputValue.replaceAll(" ", "");
      if (inputValue) {
        let list = this.baseSetInfo.hotwords.filter(
          (i) => i.hotwords === inputValue
        );

        if (list.length == 0) {
          let obj = {};
          obj.hotwords = inputValue;
          obj.siteId = this.siteId;
          obj.searchCount = 0;
          obj.wordsSource = 1;
          this.baseSetInfo.hotwords.push(obj);
        }
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    // 确定
    async handleOk() {
      let res = await saveBaseSet({
        ...this.baseSetInfo,
        hotwordList: this.baseSetInfo.hotwords,
        siteId: this.siteId,
      });
      let { code, msg } = res.data;
      if (code === 1) {
        this.$message.success(msg);
      } else {
        this.getBaseSetInfo();
      }

      //保存热门词汇
    },
    // 重置
    handleReset() {
      this.baseSetInfo.hotwords = [];
      this.baseSetInfo.printDisplay = "";
    },
  },
};
</script>

<style lang="less" scoped>
.basics-set {
  width: 100%;
  min-height: 100%;
  display: flex;
  .title {
    font-size: 15px;
    color: #000;
  }
}

:deep(.el-card) {
  height: auto;
}

.header {
  .tips {
    font-size: 14px;
    color: #999;
  }
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.el-tag {
  cursor: default;
}

:deep(.el-input__suffix) {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
