<!-- 下拉选择筛选 -->
<template>
  <el-dropdown ref="dropdown" :hide-on-click="false" trigger="contextmenu">
    <span class="el-dropdown-link" @click="dropData.show">
      {{title}}<el-icon class="el-icon--right"><arrow-down /></el-icon>
    </span>
    <template #dropdown>
      <div class="space-between" style="width: 120px; padding: 10px 20px">
        <el-checkbox
          v-model="dropData.checkAll"
          :indeterminate="dropData.isIndeterminate"
          @change="dropData.handleCheckAllChange"
          >全选</el-checkbox
        >
        <el-button type="primary" size="small" @click="dropData.confirm">确定</el-button>
      </div>
      <div style="height: 400px;width: 160px; overflow: auto">
        <el-checkbox-group
          v-model="dropData.checkedList"
          @change="dropData.handleCheckedChange"
        >
          <el-dropdown-menu>
            <el-dropdown-item v-for="(item, index) in list" :key="index">
              <el-checkbox :label="item">
                <div class="over1">
                  {{item[prop]}}
                </div>
              </el-checkbox>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-checkbox-group>
      </div>
    </template>
  </el-dropdown>
</template>

<script lang="ts">
import { reactive, ref } from 'vue'
export default {
  name: 'DropDownCheck',
  props: {
    modValue: {
      type: Array,
      default: null,
      required: true
    },
    title: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default: null
    },
    prop: {
      type: String,
      default: ''
    }
  },
  setup(props, context) {
    const dropdown = ref()
    const dropData = reactive({
      checkAll: false,
      isIndeterminate: true,
      checkedList: props.modValue,
      handleCheckAllChange: (val: boolean) => {
        dropData.checkedList = val ?  props.list : []
        dropData.isIndeterminate = false
        context.emit('update:modValue', dropData.checkedList)
      },
      handleCheckedChange: (value: string[]) => {
        const checkedCount = value.length
        dropData.checkAll = checkedCount === props.list.length
        dropData.isIndeterminate = checkedCount > 0 && checkedCount < props.list.length
        context.emit('update:modValue', dropData.checkedList)
      },
      show: () => {
        dropdown.value.handleOpen()
      },
      confirm: () => {
        dropdown.value.handleClose()
        context.emit('onConfirm', props.title)
      }
    })

    return {
      dropData,
      dropdown
    }
  }
}
</script>

<style>

</style>
