<template>
  <div class="d-flex" :style="{ 'z-index': isPage ? '' : 999 }" :class="isPage ? 'hasPageCard' : 'floatCard'" @mouseleave="handleMouseLeave">
    <v-card class="card">
      <div class="leftCard">
        <div
          class="leftCardItem" :class="{'leftIndexAct': index === leftIndex, 'elevation-5': (index === leftIndex && isPage)}"
          v-for="(item, index) in items" :key="item.id"
          @mouseover="handleMouseOver(item, index)"
        >
          <div class="rowItem d-flex">
            <span class="categoryName">{{ item.nameCn }}</span>
            <div class="jobItemsBox">
              <div class="outerCovering" v-if="isPage && item.children?.length && item.children[0].children.length">
                <div class="jobItems" v-for="val in item.children[0].children" :key="val.id" @click="handleJobClick(val)">{{ val.nameCn }}</div>
              </div>
            </div>
            <span class="mdi mdi-menu-right"></span>
          </div>
        </div>
        <!-- <v-divider vertical></v-divider> -->
        <!-- 分页 -->
        <div v-if="isPage" class="mt-2" @mouseover.stop="handleMouseLeave" style="border-top: 1px dashed #e6e6e6; position: absolute; bottom: 4px; width: 100%;">
          <div class="d-flex justify-space-between align-center mx-4" style="height: 40px">
            <div style="color: var(--v-primary-base); font-size: 14px;">
              {{ pageInfo.current }} / {{ pageCount }}
            </div>
            <div>
              <v-btn @click="previous" size="x-small" class="ml-2" color="primary" variant="tonal" style="font-size: 20px;"><v-icon icon="mdi-menu-left" size="x-small"></v-icon></v-btn>
              <v-btn @click="nextPage" size="x-small" class="ml-2" color="primary" variant="tonal" style="font-size: 20px;"><v-icon icon="mdi-menu-right" size="x-small"></v-icon></v-btn>
            </div>
          </div>
        </div>
      </div>
    </v-card>
    <v-card v-if="rightObj.show" class="card rightCardBox">
      <div class="rightCard">
        <div class="categoryName">{{ rightObj.data.nameCn }}</div>
        <div v-for="(item, index) in rightObj.data.children" :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" @click="handleJobClick(val)">{{ val.nameCn }}</div>
            </div>
          </div>
        </div>
      </div>
    </v-card>
    <v-card height="392px" v-if="isPage && !rightObj.show" class="card rightCardBox">
      <v-carousel show-arrows="hover" cycle>
        <v-carousel-item v-for="(item, i) in carouselList" :key="i">
          <div style="height: 392px; overflow: hidden;">
            <v-img :src="item.src" cover style="height: 100%; overflow: hidden;"></v-img>
          </div>
        </v-carousel-item>
      </v-carousel>
    </v-card>
  </div>
</template>

<script setup>
// import { getPositionTreeClick } from '@/api/common/index'
import { getDict } from '@/hooks/web/useDictionaries'
import { reactive, ref, defineEmits } from 'vue';
import { useRoute, useRouter } from 'vue-router'
defineOptions({ name:'common-components-jobTypeCard'})

const route = useRoute(); const router = useRouter()
const emits = defineEmits(['handleJobClick'])// 定义一个或多个自定义事件

const props = defineProps({
  page: { // 左侧数据是否分页（首页有分页）
    type: Boolean,
    default: false
  },
})
const isPage = props.page

// 职位点击
const handleJobClick = async (val) => {
  const path = '/recruit/position'
  if (path === route.path) emits('jobClick', val)
  else router.push({ path, query: { ...val, jumpType: 1 } })
  // await getPositionTreeClick({ id: val.id })
}

// 翻页数据
const pageInfo = reactive({ current: 1, size: 8 })
let pageCount = ref(0)
let defaultItems = ref()

let items = ref()
// 翻页
const getPageItems = () => {
  const startIndex = (pageInfo.current - 1) * pageInfo.size
  const endIndex = Math.min(startIndex + pageInfo.size, defaultItems.value.length)
  items.value = defaultItems.value.slice(startIndex, endIndex)
}
getDict('positionTreeData', null, 'positionTreeData').then(({ data }) => {
  data = data?.length && data || []
  if (isPage) { // 有翻页
    defaultItems.value = data
    if (defaultItems.value?.length) {
      pageCount.value = Math.ceil(defaultItems.value.length / pageInfo.size)
      getPageItems()
    } else pageInfo.current = 0
  } else {
    items.value = data
  }
})

// 翻页按钮
const previous = () => { if (pageInfo.current > 1) pageInfo.current--; getPageItems() }
const nextPage = () => { if (pageInfo.current < pageCount.value) pageInfo.current++; getPageItems() }

// 右侧职位信息
const leftIndex = ref(null)
const rightObj = reactive({ show: false, data: {} })

const handleMouseOver = (val, index) => { // 鼠标移入
  leftIndex.value = index
  rightObj.data = val
  rightObj.show = true
}
const handleMouseLeave = () => { // 鼠标移出
  rightObj.show = false // true false
  leftIndex.value = null
}
// 轮播图片
const carouselList = ref([
  { src: 'https://img.kinpan.com/Files/design/detailimages/20161228/6361853956839262507798973.jpg', },
  { src: 'https://img0.baidu.com/it/u=3769341087,3426515789&fm=253&fmt=auto&app=138&f=JPEG?w=1180&h=472', },
])

</script>

<style lang="scss" scoped>
:deep(.v-window) {
  height: 392px !important;
}
.floatCard {
  .leftIndexAct { color: var(--v-primary-base); }
  .leftCard {
    height: 242px;
    width: 172px;
    margin: 4px 0;
    overflow-y: auto;
    .leftCardItem {
      height: 36px;
      line-height: 36px;
      padding: 0 16px;
      cursor: pointer;
      &:hover {
        color: var(--v-primary-base);
        background-color: #f8f8f8;
      }
      .categoryName { font-size: 14px; font-family: 微软雅黑; }
    }
    .rowItem { justify-content: space-between; }
  }
  .rightCardBox { margin-left: 4px; }
  .rightCard {
    height: 242px;
    width: 525px;
    margin: 4px 0;
    padding: 0 16px;
    overflow-y: auto;
    .categoryName { font-size: 16px; line-height: 28px; margin-top: 6px;}
    .categoryName2 { font-size: 14px; color: #666666; width: 110px; margin-right: 4px;}
    .jobItem { font-size: 14px; color: #333333; }
    .rowItem {
      padding: 8px 0;
    }
    .divider {
      margin-left: 110px;
    }
    .rightContent {
      flex: 1;
      div {
        margin: 4px 28px 2px 0;
        float: left;
        cursor: pointer;
        color: #333333;
        &:hover {
          color: var(--v-primary-base);
        }
      }
    }
  }
}
.hasPageCard {
  width: 100%;
  .card { border-radius: 12px; }
  .leftIndexAct {
    height: 48px;
    margin: 0 4px;
    border-radius: 12px;
    // background-color: var(--v-primary-base);
  }
  justify-content: center; // 后面的flex会继承
  .leftCard {
    height: 384px;
    width: 380px;
    margin: 4px 0;
    overflow-x: hidden;
    overflow-y: auto;
    .leftCardItem {
      height: 42px;
      line-height: 42px;
      padding: 0 16px;
      .title { font-size: 14px; }
      .mdi-menu-right { font-size: 20px; }
    }
    .jobItemsBox {
      flex: 1;
      padding:0 8px;
      .outerCovering {
        display: flex;
        flex-wrap: wrap; /* 允许换行 */
        width: 100%; /* 设置容器宽度 */
        height: 42px;
        overflow: hidden;
        // border: 1px solid red; /* 可视化边界 */
        .jobItems {
          font-size: 14px;
          margin-left: 12px;
          cursor: pointer;
          color: #666666;
          font-family: 微软雅黑; 
          &:hover {
            color: var(--v-primary-base);
            // background-color: #f8f8f8;
          }
        }
      }
    }
  }
  .rightCardBox { flex: 1; margin-left: 12px;}
  .rightCard {
    height: 384px;
    // min-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: #666666; width: 110px; margin-right: 4px;}
    .jobItem { font-size: 14px; color: #333333; }
    .rowItem {
      padding: 8px 0;
    }
    .divider {
      margin-left: 110px;
    }
    .rightContent {
      flex: 1;
      div {
        margin: 4px 28px 2px 0;
        float: left;
        cursor: pointer;
        color: #333333;
        &:hover {
          color: var(--v-primary-base);
        }
      }
    }
  }
}
// ::v-deep {
  ::-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>