//多选子组件
<template>
  <div class="multiple-choice">
    <el-checkbox class="no1" v-if="isShowAllBtn" :indeterminate="isIndeterminate1" v-model="checkAll1" border :style="{borderColor:isIndeterminate1?'#3886FF':''}" @change="handleCheckAllChange">全选</el-checkbox>
    <el-checkbox-group v-model="checkedCities1" @change="handleCheckedCitiesChange1">
      <el-checkbox v-for="(city,index1) in cities" :label="city" :key="city" border :disabled="isDisabled?checkedCities1.length==8&&!checkedCities1.includes(city):false" style="margin-right: 10px;" :style="{marginLeft:index1==0&&isShowAllBtn?'90px':''}">{{city}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
export default {
  props: {
    isShowAllBtn: {
      type: Boolean,
      default: true,
    },
    cityOptions: {
      type: Array,
      default: [],
    },
    checkAll: {
      type: Boolean,
      default: true,
    },
    isIndeterminate: {
      type: Boolean,
      default: false,
    },
    checkedCities: {
      type: Array,
      default: () => [],
    },
    numberData: {
      type: Array,
      default: () => [],
    },
    isDisabled: {
      //是否有禁用的功能使用，比如最多只能选择8个的限制等
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      checkAll1: this.checkAll,
      checkedCities1: this.checkedCities,
      cities: this.cityOptions,
      isIndeterminate1: this.isIndeterminate,
    };
  },
  created() {
    // this.$emit('getChecked',this.checkedCities1)
  },
  methods: {
    // 多选
    handleCheckAllChange(val) {
      this.checkedCities1 = val ? this.cityOptions : [];
      this.isIndeterminate1 = false;
      this.$emit("getChecked", this.checkedCities1);
    },
    // 点击按钮
    handleCheckedCitiesChange1(value) {
      let checkedCount = value.length;
      this.checkAll1 = checkedCount === this.cities.length;
      this.isIndeterminate1 =
        checkedCount > 0 && checkedCount < this.cities.length;
      if (this.isDisabled) {
        if (value.length == 8) {
          this.$message({
            showClose: true,
            message: "最多只能同时选中8个指标",
            iconClass: "warning-icon-class",
            customClass: "el-message--warning",
          });
        }
      }
      this.$emit("getChecked", value);
    },
  },
};
</script>
  
<style lang="scss" scoped>
.multiple-choice {
  display: flex;
  align-items: start;
  // position: relative;
  margin-top: -6px;
  .no1 {
    position: absolute;
    z-index: 999;
  }
  .el-checkbox {
    height: 32px;
    line-height: 32px;
    margin-right: 0;
    margin-bottom: 10px;
  }
  .el-checkbox-group {
    line-height: 32px;
    margin-left: 10px;
    // position: absolute;
    margin-left: 0;
    display: flex;
    flex-wrap: wrap;
  }
  .el-checkbox.is-bordered.el-checkbox--medium {
    padding: 0px 13px 0px 13px;
    display: flex;
    align-items: center;
  }
  .el-checkbox.is-bordered.is-checked {
    border-color: #3886ff;
  }
}
::v-deep .el-checkbox__input.is-indeterminate .el-checkbox__inner,
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #3886ff;
  border-color: #3886ff;
}
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0px;
  margin-right: 10px;
}
::v-deep .el-checkbox:hover {
  border-color: #3886ff;
  .el-checkbox__input {
    .el-checkbox__inner {
      border-color: #3886ff;
    }
  }
  .el-checkbox__label {
    color: #3886ff;
  }
}
</style>
  

//引用多选的父组件
<multipleChoice :cityOptions="cityOptions" :checkAll='checkAll' :isIndeterminate="isIndeterminate" :checkedCities="checkedCities" :isShowAllBtn="isShowAllBtn" @getChecked='getChecked'></multipleChoice>
import multipleChoice from "@/components/multipleChoice.vue";
components: {
    multipleChoice,
},
data(){
	return{
		cityOptions: [
         	"PH值",
         	"水温",
         	"溶解氧",
         	"电导率",
         	"浊度",
         	"COD",
         	"氨氮",
         	"高锰酸盐",
         	"总磷",
         	"总氮",
         	"氟化物",
      	],
      	checkedCities: [
        	"PH值",
         	"水温",
         	"溶解氧",
         	"电导率",
         	"浊度",
         	"COD",
         	"氨氮",
         	"高锰酸盐",
         	"总磷",
         	"总氮",
         	"氟化物",
      	],
      	checkAll: true,
        isIndeterminate: false,
        isShowAllBtn: true,
	}
},
methods: {
	getChecked(valArr) {
		consoloe.log("多选返回",valArr)   
	},
}