<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.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="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="mt20">
        <p class="title mb20">新闻来源</p>
        <el-radio-group v-model="baseSetInfo.newsSource" size="medium">

          <el-radio
              v-for='($label, $value) in newSourceEnumData'
              :key='$value'
              :label="$value"
          >{{ $label }}
          </el-radio>

        </el-radio-group>
      </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("writeSiteId")
          ? local.getLocal("writeSiteId")
          : "",
      inputVisible: false,
      inputValue: "",
      newSourceEnumData: {},
      baseSetInfo: {
        hotwords: [],
        newsSource: "1",
        printDisplay: "20",
      },
    };
  },
  created() {
    this.getBaseSetInfo();
  },
  methods: {
    // 获取基础设置
    async getBaseSetInfo() {
      let res = await getBaseSetInfo({
        siteId: this.siteId,
      });
      console.log("res:", res)
      console.log("res lens:", res.data.data.data.length)
      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;
          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;
      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%;
  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>
