<template>
  <el-card class="mt20" :header="title" shadow="never">
    <el-checkbox-group :model-value="modelValue" @update:model-value="emit('update:modelValue', $event)">
      <el-checkbox v-for="item in showData" :label="item[prop.value]" :key="item[prop.value]">
        <el-text :title="item[prop.label]" truncated>
          {{ item[prop.label] }}
        </el-text>
      </el-checkbox>
    </el-checkbox-group>
    <div class="footer" v-if="data.length > maxCount">
      <el-button class="expand-collapse-button" link @click="isExpand = !isExpand">
        {{ isExpand ? "收起" : "展开更多" }}
        <el-icon class="ml5">
          <ArrowUp v-if="isExpand" />
          <ArrowDown v-else />
        </el-icon>
      </el-button>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import { ref, defineProps, defineEmits, withDefaults, computed } from "vue";
import { ArrowDown } from "@element-plus/icons-vue";

interface Props {
  title: string;
  modelValue: number[];
  data: any[];
  maxCount: number;
  prop: {
    label: string;
    value: string;
  };
}
const props = withDefaults(defineProps<Props>(), {
  data: () => [],
  maxCount: 6,
  prop: () => ({
    label: "dictLabel",
    value: "dictCode"
  })
});
const emit = defineEmits(["update:modelValue"]);

// ref
// 是否展开
const isExpand = ref(false);

// computed
const showData = computed(() => {
  return isExpand.value ? props.data : props.data.slice(0, props.maxCount);
});
</script>
<style lang="scss" scoped>
.footer {
  padding: 0 20px;
  text-align: center;
  .expand-collapse-button {
    margin-bottom: -20px;
    font-size: 12px;
    color: var(--el-color-primary);
  }
}
.el-checkbox {
  width: 100%;
  :deep(.el-checkbox__label) {
    width: 100%;
  }
}
</style>
