<script lang="ts" setup>
import { ref, watch } from 'vue'

interface OceanCheckboxItem {
  value: string
  label: string
}
interface Props {
  CheckboxList: OceanCheckboxItem[]
  Title: String
  CheckedList: Array<''>
}
const props = defineProps<Props>()

const OceanActive = ref(['OceanShipments'])
const CheckedList = ref(props.CheckedList)
const CheckboxList = ref(props.CheckboxList)
watch(
  () => props.CheckboxList,
  (current) => {
    CheckboxList.value = current
  }
)
watch(
  () => props.CheckedList,
  (current) => {
    CheckedList.value = current
  }
)

const emit = defineEmits(['ChangeCheckRules'])
const selectedLables = ref([])
const CheckChange = (val: any) => {
  selectedLables.value = []
  // 遍历选中的value值，找到对应的label值
  val.forEach((value) => {
    const option = CheckboxList.value.find((item) => item.value === value)
    if (option) {
      selectedLables.value.push(option.label)
    }
  })
  emit('ChangeCheckRules', selectedLables.value, CheckedList.value)
}
const hadleclose = (val:any) => {
  selectedLables.value = []
  // 遍历选中的value值，找到对应的code值
  const option = CheckboxList.value.find((item) => item.label === val)
  CheckedList.value = CheckedList.value.filter((item) => item !== option.value)
}
defineExpose({
  hadleclose
})
</script>
<template>
  <div class="Ocean_collapse">
    <el-collapse v-model="OceanActive">
      <el-collapse-item name="OceanShipments">
        <template #title>
          <div class="Rules_Title OceanTitle">{{ props.Title }}</div>
        </template>
        <div class="oceanCheckbox">
          <el-checkbox-group @change="CheckChange" v-model="CheckedList">
            <el-checkbox
              v-for="item in CheckboxList"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            />
          </el-checkbox-group>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-checkbox-group) {
  border: 1px solid var(--color-system-border);
  border-radius: 5px;
}
:deep(.el-checkbox) {
  width: 100%;
  background-color: var(--color-system-body-bg);
  border-bottom: 1px solid var(--color-system-border);
  padding: 8px;
}
:deep(.el-checkbox:first-child) {
  border-radius: 6px 6px 0 0;
}
:deep(.el-checkbox:last-child) {
  border-radius: 0 0 6px 6px;
  border-bottom: none;
}
.oceanCheckbox {
  max-height: 321px;
  overflow-x: hidden;
  margin-bottom: 8px;
  overflow-y: scroll;
}
</style>