<template>
<div v-if="showPirvGroups">
  <el-form-item label="浏览权限">
    <el-checkbox-group v-model="selectedPrivGroups">
      <el-checkbox  v-for="priv in allBrowsePrivGroups"
      :key="priv.ID" :label="priv.ID" @change="browsePrivChange(priv.ID)">{{priv.name}}</el-checkbox>
    </el-checkbox-group>
  </el-form-item>
</div>
</template>

<script>
import util from '@src/common/util.js'
export default {
  data() {
    return {
      contentID: 0,
      showPirvGroups: false,
      allBrowsePrivGroups: [],
      selectedPrivGroups: []
    }
  },
  methods: {
    async initContentEditExtend() {
      let res = await axios.get('/ui/browsepriv/initcontenteditextend', {
        params: {
          contentID: this.contentID,
          contentType: this.content.contentType,
          catalogID: this.content.catalogID
        }
      })
      if (res.data.status === 1) {
        if (res.data.data) {
          this.showPirvGroups = res.data.data.showPirvGroups || false
          if (this.showPirvGroups) {
            this.$emit('callback')
          }
          let privs = res.data.data.browsePrivGroups
          if (privs) {
            privs.split(',').forEach(v => {
              if (v) {
                this.selectedPrivGroups.push(Number.parseInt(v))
              }
            })
          }
        }
      } else {
        util.showErrorMessageBox(res.data.message)
      }
    },
    async getPrivGroups() {
      let res = await axios.get(`/ui/browsepriv/privgroups?catalogID=${this.content.catalogID}`)
      if (res.data.status === 1) {
        this.allBrowsePrivGroups = res.data.data
      } else {
        util.showErrorMessageBox(res.data.message)
      }
    },
    browsePrivChange(id) {
      let val = this.selectedPrivGroups.join(',')
      this.content.browsePrivGroups = val
      this.$emit('update:content', this.content)
    }
  },
  watch: {
    content: async function() {
      this.contentID = this.content.contentID || this.content.ID
      await this.getPrivGroups()
      await this.initContentEditExtend()
    },
    deep: true
  },
  props: {
    content: {
      type: Object,
      default: function() {
        return {}
      }
    }
  }
}
</script>
