<template>
  <div v-show="!isShow" class="layout-no-cols right-detail-toolbar">
    <el-toolbar>

      <el-col :span="10" class="search-box-r tool-search-box-r">
        <el-input v-model="searchName" @keyup.enter.native="searchClickHandler" placeholder="请输入热词" class="search-bar-algin-toolbar"></el-input>
        <span class="search-icon"><i class="fa fa-search" @click="searchClickHandler" title="查询"></i></span>
      </el-col>

    </el-toolbar>
    <div class="hot-word-kind-tags">
      全部分类：
      <el-tag
        v-for="kind in hotWordKinds"
        :key="kind.ID"
        :disable-transitions="false"
        :type="kind.ID===kindId?'danger':''"
        :closable="hotWordPriv"
        @close="delClickHandler(kind)">

        <el-tooltip  placement="bottom" effect="light">
          <div slot="content">
            <div class="content-btn">
              <el-button size="mini" type="text" @click.stop="showHotWordTypeDialog(kind)" priv="WordManage.Hot">
                <i class="fa fa-edit"></i>编辑
              </el-button>
            </div>
          </div>
          <span @click.stop="loadhotWords(kind)">{{kind.kinds}}</span>
        </el-tooltip>

      </el-tag>
      <el-input
        class="input-add-kind"
        v-if="inputVisible"
        v-model="tmpHotWordKinds.kinds"
        ref="saveTagInput"
        size="small"
        @keyup.enter.native="handleInputConfirm"
        @blur="handleInputConfirm"
      >
      </el-input>
      <el-button v-else class="button-add-kind" size="small" @click="showInputClickHandler" priv="WordManage.Hot">
        <i class="fa fa-plus-circle"></i> 新建
      </el-button>
    </div>
    <div class="detail-panel margin-top-bottom hot-word-tags" >
      <el-tag
        v-for="(hotWord,index) in hotWords"
        :key="hotWord.ID"
        :disable-transitions="true"
        :type="['','success','info','warning'][index%4]">
        <el-tooltip  placement="bottom" effect="light">
          <div slot="content">
            <div class="content-tip">
              <span>热词: </span> {{hotWord.hotWord}}
            </div>
            <div class="content-tip">
              <span>链接地址: </span> {{hotWord.linkUrl}}
            </div>
            <div class="content-tip">
              <span>打开方式: </span> {{hotWord.linkTargetName}}
            </div>
            <div class="content-tip">
              <span>链接说明: </span> {{hotWord.linkAlt}}
            </div>
            <div class="content-btn">
                <el-button size="mini" type="text" @click="editClickHandler(hotWord)" priv="WordManage.Hot">
                  <i class="fa fa-edit"></i>编辑
                </el-button>
                <el-button size="mini" type="text" @click="del2ClickHandler(hotWord)" priv="WordManage.Hot">
                  <i class="fa fa-times"></i>删除
                </el-button>
            </div>
          </div>
          <el-button type="text">{{hotWord.hotWord}}</el-button>
        </el-tooltip>
      </el-tag>
      <el-button size="small" class="button-add-hot-word" v-if="kindId" @click="addHotWordClickHandler" priv="WordManage.Hot">
        <i class="fa fa-plus-circle"></i> 新建热词
      </el-button>
    </div>

    <hot-word-dialog :add-hot-word-dialog.sync="addHotWordDialog" :tmp-hot-word="tmpHotWord" @callback="loadhotWords"></hot-word-dialog>

    <el-dialog title="修改热词分类" :visible.sync="hotwordsTypeDialogVisible" class="hot-wordtype-dialog">
      <el-form :model="tmpHotWordTypeForm" ref="hotWordTypeForm" label-width="100px">
        <el-form-item prop="kinds" label="热词分类：" :verify="['NotNull','Length<15']">
          <el-input type="text" v-model="tmpHotWordTypeForm.kinds"  auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="hotwordsTypeDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveHotWordType">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import util from '@src/common/util.js'
import hotWordDialog from './hotWordDialog.vue'
import Privilege from '@src/common/privilege.js'
export default {
  components: {
    'hot-word-dialog': hotWordDialog
  },
  props: {
    showPage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 热词分类列表
      hotWordKinds: [],
      hotWordPriv: false,
      tmpHotWord: {},
      tmpHotWordTypeForm: {},
      addHotWordDialog: false,
      // 热词列表数据
      hotWords: [],
      searchHotWord: {
        hotWord: ''
      },
      searchName: '',
      kindId: 0,
      tmpHotWordKinds: {},
      inputVisible: false,
      hotwordsTypeDialogVisible: false
    }
  },
  computed: {
    isShow: {
      get() {
        return this.showPage
      },
      set(val) {
        this.$emit('update:showPage', val)
      }
    }
  },
  beforeMount() {
    this.hotWordPriv = Privilege.hasPriv('WordManage.Hot')
  },
  methods: {
    async saveHotWordType() {
      if (!this.tmpHotWordTypeForm.kinds || !this.tmpHotWordTypeForm.kinds.trim()) {
        this.$alert('请输入热词分类', '提示')
        return
      }
      if (this.tmpHotWordTypeForm.kinds.length > 15) {
        this.tmpHotWordTypeForm.kinds = this.tmpHotWordTypeForm.kinds.substring(0, 15)
      }

      let res = await axios.put(`/ui/hotwordkinds/${this.tmpHotWordTypeForm.ID}`, this.tmpHotWordTypeForm)
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.hotwordsTypeDialogVisible = false
        this.loadhotWordKinds()
      }
    },
    showHotWordTypeDialog(obj) {
      !!obj && Object.assign(this.tmpHotWordTypeForm, obj)
      this.hotwordsTypeDialogVisible = true
    },
    showInputClickHandler() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    async handleInputConfirm() {
      if (this.tmpHotWordKinds.kinds && this.tmpHotWordKinds.kinds.trim()) {
        if (this.tmpHotWordKinds.kinds.length > 15) {
          this.tmpHotWordKinds.kinds = this.tmpHotWordKinds.kinds.substring(0, 15)
        }
        let res = await axios.post('/ui/hotwordkinds', this.tmpHotWordKinds)
        util.showResponseMessage(res.data)
        if (res.data.status === 1) {
          this.inputVisible = false
          this.tmpHotWordKinds = {}
          this.loadhotWordKinds()
        }
      } else {
        this.inputVisible = false
      }
    },
    // 删除热词分类
    async delClickHandler(kind) {
      if (!kind || !kind.ID) {
        return
      }
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/hotwordkinds/${kind.ID}`)
        if (res.data.status === 1) {
          this.hotWordKinds.splice(this.hotWordKinds.indexOf(kind), 1)
          this.kindId = ''
          this.loadhotWords()
          util.showMessage(res)
        } else {
          util.showErrorMessageBox(res.data.message)
        }
      } catch (e) {

      }
    },
    // 新建热词列表事件
    addHotWordClickHandler() {
      // 热词列表form表单定义
      this.tmpHotWord = {
        hotWord: '',
        linkUrl: 'http://',
        linkTarget: '_blank',
        linkAlt: '',
        kindID: this.kindId
      }
      this.addHotWordDialog = true
    },
    // 编辑热词
    editClickHandler(row) {
      this.tmpHotWord = Object.assign({}, row)
      this.addHotWordDialog = true
    },
    // 删除热词
    async del2ClickHandler(row) {
      if (!row || !row.ID) {
        return
      }
      try {
        await this.$confirm('确定删除吗？删除后无法恢复。是否继续删除？', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        let res = await axios.delete(`/ui/hotwords/${row.ID}`)
        if (res.data.status === 1) {
          util.showMessage(res)
          this.loadhotWords()
        } else {
          util.showErrorMessageBox(res.data.message)
        }
      } catch (e) {

      }
    },
    searchClickHandler() {
      this.loadhotWords()
    },
    // 热词列表数据加载
    async loadhotWords(kind) {
      if (kind && kind.ID) {
        // 第一次点击选中，再次点击已选中的则取消选中
        if (this.kindId === kind.ID) {
          this.kindId = ''
        } else {
          this.kindId = kind.ID
        }
      }
      let data = await axios.get('/ui/hotwords', {
        params: {
          word: encodeURIComponent(this.searchName),
          kindID: this.kindId
        }
      })
      this.hotWords = data.data.data
    },
    // 刷新表格数据
    init() {
      this.kindId = 0
      this.loadhotWordKinds()
      this.loadhotWords()
    },
    // 热词分类数据加载
    async loadhotWordKinds() {
      let data = await axios.get('/ui/hotwordkinds')
      this.hotWordKinds = data.data.data
    }
  }
}
</script>
<style scope>
.content-tip {
  padding: 8px;
  font-size: 13px;
}
.content-btn {
  text-align: right;
  margin: 0;
}
.el-tag + .el-tag {
  margin-bottom: 5px;
}
/* 在一般情况下dialog宽为450像素，在逻辑分辨率480像素以下dialog宽为96% */
.hot-wordtype-dialog .el-dialog {
  width: 450px;
}
@media (max-width: 480px) {
  .hot-wordtype-dialog .el-dialog {
    width: 96%;
  }
}
</style>
<style>
.hot-word-kind-tags .el-tag + .el-tag,
.hot-word-tags .el-tag + .el-tag {
  margin-left: 10px;
}
.hot-word-kind-tags .button-add-kind {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.hot-word-kind-tags .input-add-kind {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.hot-word-tags .button-add-hot-word {
  margin-left: 10px;
  height: 32px;
  line-height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  width: 100px;
}
</style>
