<template>
  <div class="panel-fieldset middle-label">
    <h4 class="panel-legend">浏览权限配置 (多个权限组之间为'或者'的关系)</h4>
    <el-form-item label="栏目列表页不限制浏览权限">
      <el-switch v-model="extendsData.staticize" active-value="Y" inactive-value="N" :disabled="catalogId===0"></el-switch>
    </el-form-item>
    <el-form-item style="margin-left:-160px">
      <el-checkbox-group v-model="checkedBrowers" @change="handleCheckedChange">
        <el-checkbox :disabled="catalogId===0" :style="{margin:'0px 4px!important'}" v-for="item in browsePrivs" :key="item.ID" :label="item.ID" >{{item.name}}</el-checkbox>
      </el-checkbox-group>
      <div v-if="browsePrivs.length === 0">还未进行浏览权限组的配置</div>
    </el-form-item>
  </div>
</template>
<script>
export default {
  props: {
    extendsData: {
      type: Object,
      default: function() {
        return {
          catalogBrowsePriv: '' //  浏览权限
        }
      }
    },
    catalogId: [Number, String]
  },
  data() {
    return {
      browsePrivs: [], // 浏览权限
      checkedBrowers: []// 选中的权限
    }
  },
  watch: {
    extendsData: function(val) {
      this.checkedBrowers = []
      if (val.catalogBrowsePriv && val.catalogBrowsePriv.length > 0) {
        let ids = val.catalogBrowsePriv.split(',')
        ids.forEach(row => {
          this.checkedBrowers.push(parseInt(row, 10))
        })
      }
    }
  },
  async created() {
    let res = await axios.get('/ui/browsepriv/list')
    if (res.data.status === 1) {
      this.browsePrivs = res.data.data
    }
  },
  methods: {
    handleCheckedChange(val) {
      this.extendsData.catalogBrowsePriv = val.join()
    }
  }
}
</script>
