<template>
  <v-card class="card rightCardBox">
      <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" v-for="val in item.children" :key="val.id">{{ val.nameCn }}</div>
            </div>
          </div>
        </div>
      </div>
    </v-card>
</template>

<script setup>
import { getDict } from '@/hooks/web/useDictionaries'
import { ref } from 'vue';
defineOptions({ name:'common-components-industryTypeCard'})

let items = ref()
getDict('industryTreeData', null, 'industryTreeData').then(({ data }) => {
  data = data?.length && data || []
  items.value = data
})
</script>
<style lang="scss" scoped>
.card { border-radius: 12px; }
.rightCard {
  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: #333333; }
  .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>
