<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="tag in baseSetInfo.hotwords">
          <el-tooltip
            class="item"
            effect="dark"
            :key="tag"
            :content="tag"
            v-if="tag.length > 6"
            placement="top-start"
          >
            <el-tag
              :key="tag"
              size="small"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >
              {{ `${tag.slice(0, 6)}...` }}
            </el-tag>
          </el-tooltip>
          <el-tag
            :key="tag"
            size="small"
            v-else
            closable
            :disable-transitions="false"
            @close="handleClose(tag)"
          >
            {{ tag }}
          </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="mt20">
        <p class="title mb20">空白打印材料展示数量</p>
        <el-input
          size="small"
          placeholder="请输入空白打印材料展示数量"
          v-model.number="baseSetInfo.printDisplay"
          style="width: 250px"
        >
          <template slot="suffix">个</template>
        </el-input>
      </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: "",
      baseSetInfo: {
        hotwords: [],
      },
    };
  },
  created() {
    this.getBaseSetInfo();
  },
  methods: {
    // 获取基础设置
    async getBaseSetInfo() {
      let res = await getBaseSetInfo({
        siteId: this.siteId,
      });
      if (res.data.code === 1) {
        if (res.data.data.data.length > 0) {
          this.baseSetInfo.hotwords = res.data.data.data[0].hotwords.split(",");
          this.baseSetInfo.printDisplay = res.data.data.data[0].printDisplay;
        }
      }
    },
    handleClose(tag) {
      this.baseSetInfo.hotwords.splice(
        this.baseSetInfo.hotwords.indexOf(tag),
        1
      );
    },

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

    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.baseSetInfo.hotwords.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
    },
    // 确定
    async handleOk() {
      let res = await saveBaseSet({
        ...this.baseSetInfo,
        hotwords: this.baseSetInfo.hotwords.join(","),
        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%;
  height: 100%;
  .title {
    font-size: 15px;
    color: #000;
  }
}
/deep/.el-card {
  height: 100%;
}
.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>