<template>
  <v-card class="card rightCardBox">
      <div v-if="showSelect" class="pa-3 currentSelect">
        <span>已选择：</span>
        <v-chip 
          class="mr-3" 
          label
          size="small"
          color="primary"
          closable
          v-for="k in currentSelect" 
          :key="k.id"
          @click:close="handleClick(k)"
        >{{ k.nameCn }}</v-chip>
      </div>
      <div class="rightCard">
        <div v-for="item in items" :key="item.id">
          <!-- <v-divider v-if="index" class="divider"></v-divider> -->
          <div class="rowItem d-flex">
            <div class="categoryName2">{{ item.nameCn }}</div>
            <div class="rightContent">
              <div v-if="!item.children?.length"></div>
              <div
                v-else
                :class="['jobItem', {'active': idChecked.includes(val.id)}]"
                v-for="val in item.children" :key="val.id"
                @click="handleClick(val)"
              >{{ val.nameCn }}</div>
            </div>
          </div>
        </div>
      </div>
    </v-card>
</template>

<script setup>
import { getDict } from '@/hooks/web/useDictionaries'
import { ref } from 'vue'
import Snackbar from '@/plugins/snackbar'
defineOptions({ name:'common-components-industryTypeCard'})
const emits = defineEmits(['handleClickIndustry'])
const props = defineProps({
  limit: { // 限制最大可选择数量, 不限制传false或者0
    type: [Number, Boolean],
    default: 3
  },
  select: {
    type: Array,
    default: () => []
  },
  showSelect: {
    type: Boolean,
    default: false
  },
  currentData: {
    type: Array,
    default: () => []
  }
})

let items = ref()
let idChecked = ref([])
let currentSelect = ref([])
// 回显
if (props.currentData.length) currentSelect.value = props.currentData
if (props.select.length) idChecked.value = props.select.map(e => e + '') // 数据中的id是字符串

getDict('industryTreeData', null, 'industryTreeData').then(({ data }) => {
  data = data?.length && data || []
  items.value = data
})

// 设置选中ids
const handleClick = (val) => {
  const isExist = idChecked.value.includes(val.id)
  if (!isExist) {
    // 添加
    if (props.limit === 1) {
      currentSelect.value = [val]
      idChecked.value = [val.id]
    } else {
      if (props.limit === idChecked.value.length) return Snackbar.warning(`最多可选${props.limit}个行业`)
      currentSelect.value.push(val)
      idChecked.value.push(val.id)
    }
  } else {
    // 删除
    currentSelect.value = currentSelect.value.filter(e => e.id !== val.id)
    idChecked.value = idChecked.value.filter(e => e !== val.id)
  }
  emits('handleClickIndustry', idChecked.value, currentSelect.value)
}
</script>

<style lang="scss" scoped>
.currentSelect {
  position: sticky;
  background-color: var(--color-f2f4f7);
}
.card { border-radius: 12px; }
.rightCard {
  position: relative;
  height: 384px;
  width: 786px;
  margin: 4px 0;
  padding: 0 16px;
  overflow-y: auto;
  // .categoryName { font-size: 16px; line-height: 28px; margin-top: 6px; color: var(--v-primary-base)}
  .categoryName2 { font-size: 14px; color: #000; width: 150px; margin-right: 4px;}
  .jobItem { font-size: 14px; color: var(--color-333); }
  .active { color: var(--v-primary-base); font-weight: 700; }
  .rowItem {
    padding: 8px 0;
  }
  .divider {
    margin-left: 150px;
  }
  .rightContent {
    flex: 1;
    div {
      margin: 4px 28px 2px 0;
      float: left;
      cursor: pointer;
      // color: #000;
      &:hover {
        color: var(--v-primary-base);
      }
    }
  }
}

::-webkit-scrollbar {
  width: 4px;
  height: 10px;
  // display: none;
}
::-webkit-scrollbar-thumb, .temporaryAdd ::-webkit-scrollbar-thumb, .details_edit ::-webkit-scrollbar-thumb {
  // 滚动条-颜色
  background: #c3c3c379;
}
::-webkit-scrollbar-track, .temporaryAdd ::-webkit-scrollbar-track, .details_edit ::-webkit-scrollbar-track {
  // 滚动条-底色
  background: #e5e5e58f;
}
</style>
