<template lang="">
  <div>
    <div class="title_div" @click="goBack">
      <el-icon><ArrowLeftBold /></el-icon>
      <div style="margin-left: 0.3125rem">选择你所在的企业</div>
    </div>

    <div class="scroll-container">
      <div class="list" v-for="(item, index) in companyList" :key="index">
        <div
          class="list_item"
          :class="selectedId == item.id ? 'list_item_active' : 'list_item'"
          @click="selectCompany(item.id)"
        >
          <div class="list_item_logo">
            <img src="@/assets/images/city_logo.png" class="list_item_logo_img" />
            <div class="list_item_name">{{ item.companyName }}</div>
          </div>

          <div class="list_item_arrow" @click="godashboard(item.id)">
            <el-icon><Right /></el-icon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
import { useUserStore } from '@/store/modules/user'
import { chooseCompany } from '@/api/login'
import {useRouter} from 'vue-router'
const userStore = useUserStore()
const router = useRouter()
const emit = defineEmits(['goBack'])

const companyList = ref([])
console.log(userStore.departmentList)
companyList.value=userStore.departmentList
const selectedId = ref(1)
const selectCompany = id => {
  selectedId.value = id
  console.log(selectedId.value)
}
const godashboard = (id) => {
  console.log('godashboard')
  chooseCompany(id).then(res => {
    console.log(res)
    if(res.data.code==200){

      router.push('/dashboard')
    }
  })
}

//返回
const goBack = () => {
  console.log('back')
  emit('goBack')
}
</script>
<style lang="scss">
.title_div {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  color: #1d2129;
  font-size: 1.375rem;
  margin-bottom: 34px;
  font-weight: bold;
}
.scroll-container {
  height: 340px; /* 根据需要调整容器高度 */
  overflow-y: auto; /* 允许垂直滚动 */
}
.list_item {
  display: flex;
  align-items: center;
  height: 70px;
  background: #f2f2f6;
  border-radius: 8px 8px 8px 8px;
  margin-bottom: 16px;
  padding: 0 13px;
  justify-content: space-between;
}
.list_item_active {
  background: #e8f3ff !important;
}
.list_item_logo {
  display: flex;
  align-items: center;
}
.list_item_logo_img {
  width: 48px;
  height: 48px;
  background: #a1c6fb;
  border-radius: 6px 6px 6px 6px;
}
.list_item_name {
  margin-left: 10px;
  color: #181a1d;
  font-size: 14px;
}
.list_item_arrow{
  .el-icon{
    color: #4E5969;
  }
}
</style>
