<template>
  <div v-if="extendsData.contentType==='Article'||!extendsData.contentType" class="panel-fieldset short-label">
    <div class="panel-legend">热词设置</div>
    <el-form-item label="热词分类">
      <el-checkbox-group v-model="checkedData" @change="handleCheckedChange">
        <el-checkbox :label="o.ID" v-for="o in hotwords" :key="o.ID" :style="{margin:'0px 4px!important'}">{{o.kinds}}</el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </div>
</template>
<script>
export default {
  props: {
    extendsData: {
      type: Object,
      default: function() {
        return {
          hotWordCatagory: '' //  热词分类
        }
      }
    },
    catalogId: [Number, String]
  },
  data() {
    return {
      hotwords: [], //   热词分类
      checkedData: [] //  选中的热词分类
    }
  },
  watch: {
    extendsData: function(val) {
      this.checkedData = []
      let allHotWordIds = this.hotwords.map(val => val.ID)
      if (val.hotWordCatagory && val.hotWordCatagory.length > 0) {
        let ids = val.hotWordCatagory.split(',')
        ids = ids.filter(id => id && id.trim())
        if (ids && ids.length) {
          ids = ids.map(id => +id)
          this.checkedData = ids.filter(id => allHotWordIds.includes(id))
        }
      }
    }
  },
  created() {
    this.loadCanUseHotWords()
  },
  methods: {
    async loadCanUseHotWords() {
      let res = await axios.get('/ui/hotwordkinds/selectcatagorybysite')
      this.hotwords = res.data.data
    },
    handleCheckedChange(value) {
      this.extendsData.hotWordCatagory = value.join()
    }
  }
}
</script>
