<template>
  <div id="we">
    <ul>
      <li v-for="i in labels" :key="i.labelNameId">
        <CheckboxGroup v-model="disabledGroup" @on-change="change">
          <Checkbox
            v-for="item in i.labelValves"
            :label="i.labelNameId + ':' + item.labelId"
            :key="item.labelId"
          >{{item.labelValue}}</Checkbox>
        </CheckboxGroup>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      disabledGroup: [],
      selectLabels: [],
      selectLabelsInfo: [],
      labels: [
        {
          labelName: "配置一",
          labelNameId: 1,
          labelValves: [
            { labelId: 101, labelValue: "一一" },
            { labelId: 102, labelValue: "一二" }
          ]
        },
        {
          labelName: "配置二",
          labelNameId: 2,
          labelValves: [
            { labelId: 201, labelValue: "二一" },
            { labelId: 202, labelValue: "二二" }
          ]
        },
        {
          labelName: "配置三",
          labelNameId: 3,
          labelValves: [{ labelId: 301, labelValue: "三一" }]
        }
      ]
    };
  },
  methods: {
    change(data) {
      let obj = {};
      this.selectLabels = [];
      this.disabledGroup = data;
      data.map(label => {
        this.labels.forEach(i => {
          let valArr = [];
          if (label.split(":")[0] === i.labelNameId + "") {
            i.labelValves.forEach(l => {
              if (label.split(":")[1] === l.labelId + "") {
                valArr.push(l);
              }
            });
            obj = {
              labelName: i.labelName,
              labelNameId: i.labelNameId,
              labelValves: valArr
            };
            this.selectLabels.push(obj);
          }
        });
      });
      let temp = {};
     let  newArry = [];

      this.selectLabels.map(i => {
        var key = i.labelNameId;
        if (temp[key]) {
          let arr = temp[key].labelValves.concat(i.labelValves);
          temp[key].labelValves = arr;
          temp[key].labelNameId = i.labelNameId;
          temp[key].labelName = i.labelName;
        } else {
          temp[key] = {};
          temp[key].labelValves = i.labelValves;
          temp[key].labelNameId = i.labelNameId;
          temp[key].labelName = i.labelName;
        }
      });
      for (var k in temp) {
        newArry.push(temp[k]);
      }
      this.selectLabelsInfo = newArry.slice(0, newArry.length);
    }
  }
};
</script>