<template>
  <div>
    <div class="panel-fieldset short-label">
      <h4 class="panel-legend">多维分类选择</h4>
      <el-form-item label="多维分类">
        <el-checkbox-group v-model="checkedData"  @change="handleCheckedChange">
          <el-checkbox v-for="o in dimensionCatalogs" :label="o.ID" :key="o.ID" :style="{margin:'0px 4px!important'}">{{o.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    extendsData: {
      type: Object,
      default: function() {
        return {
          dimensionCatalog: ''
        }
      }
    },
    catalogId: [Number, String]
  },
  data() {
    return {
      checkedData: [], //  已选中的多维分类
      dimensionCatalogs: [] //   多维分类列表
    }
  },
  watch: {
    extendsData: function(val) {
      this.checkedData = []
      if (val.dimensionCatalog && val.dimensionCatalog.length > 0) {
        let ids = val.dimensionCatalog.split(',')
        ids.forEach(row => {
          this.checkedData.push(parseInt(row, 10))
        })
      }
    }
  },
  created() {
    this.loadCanUseDimensions()
  },
  methods: {
    async loadCanUseDimensions() {
      let res = await axios.get('/ui/catalogs/canusedimensions')
      this.dimensionCatalogs = res.data.data
    },
    handleCheckedChange(value) {
      this.extendsData.dimensionCatalog = value.join()
    }
  }
}
</script>
<style scoped>

</style>
