<template>
  <div>
    <div class="panel-fieldset">
      <h4 class="panel-legend">热词设置</h4>
      <el-form-item label="热词分类：">
        <el-checkbox-group v-model="extend.hotWordCatagory" @change="handleCheckedChange">
          <el-checkbox :label="o.ID" v-for="o in hotWordKindsSelection" :key="o.ID" :style="{margin:'0px 4px!important'}">{{o.kinds}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </div>

  </div>
</template>
<script>

export default {
  data() {
    return {
      hotWordKindsSelection: []
    }
  },
  computed: {
    extend: {
      get() {
        return this.extends
      },
      set(val) {
        this.$emit('update:extends', val)
      }
    }
  },
  created() {
    this.loadCanUseHotWords()
  },
  methods: {
    handleCheckedChange(val) {},
    async loadCanUseHotWords() {
      let res = await axios.get('/ui/hotwordkinds', {
        params: {
          siteID: this.siteID
        }
      })
      this.hotWordKindsSelection = res.data.data
    }
  },
  watch: {
    extends(val) {
      let ids = this.hotWordKindsSelection.map(row => row.ID)
      if (val.hotWordCatagory && val.hotWordCatagory.length) {
        val.hotWordCatagory = val.hotWordCatagory.filter(id => id && id.trim())// 去除为空字符串
        if (val.hotWordCatagory && val.hotWordCatagory.length) {
          val.hotWordCatagory = val.hotWordCatagory.map(id => +id)// 字符串转为整型
        }
        val.hotWordCatagory = val.hotWordCatagory.filter(id => ids.includes(id))// 过滤掉已经不存在的热词
      }
    }
  },
  props: {
    extends: {
      type: Object,
      default: function () {
        return {
          hotWordCatagory: []// 热词分类
        }
      }
    },
    siteID: {
      type: [String, Number]
    },
    disabled: {
      type: Boolean
    }
  }
}
</script>
