<template>
  <div class="form-item-box" :style="{ width: width }">
    <el-checkbox-group :model-value="localValue" @change="handleCheckAllChange">
      <el-checkbox
        v-for="item in checkList"
        :key="item.value"
        :label="item.value"
        >{{ item.label }}</el-checkbox
      >
    </el-checkbox-group>
  </div>
</template>

<script setup>
import { COMPONENT_WIDTH } from "@/constant";
import { ref, defineProps, defineEmits, defineExpose, watch } from "vue";
const props = defineProps({
  //获取组件传值
  placeholder: {
    default: "请填写手机号",
    type: String
  },
  modelValue: {
    default: [],
    type: Array
  },
  width: {
    default: COMPONENT_WIDTH,
    type: String
  },
  // 绑定的prop
  checkList: {
    default: "",
    type: String
  }
});

const localValue = ref(props.modelValue);

watch(
  () => props.modelValue,
  (val) => {
    localValue.value = val;
    console.log(val, "val");
  },
  { deep: true }
);

const emits = defineEmits(["update:modelValue"]);
const handleCheckAllChange = (e) => {
  localValue.value = e;
  emits("update:modelValue", e);
};
</script>
