<template lang="">
    <div>
        <el-dialog
    v-model="centerDialogVisible"
    width="500"
    align-center
    :show-close="false"
  >

  <template #header="{ close}">
      <div class="my-header">
   切换企业
        <el-icon @click="close"><Close /></el-icon>
      </div>
    </template>


    <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="confCompany(item.id)">
            <el-icon><Right /></el-icon>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
    </div>
</template>
<script setup>
import { ref} from 'vue'
import { getInfo,chooseCompany } from '@/api/login'
import { useUserStore } from '@/store/modules/user'
const changeCompany=()=>{
  centerDialogVisible.value=true
}
const userStore = useUserStore()

const centerDialogVisible = ref(false)

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 confCompany = (id) => {
  chooseCompany(id).then(res => {
    if(res.data.code==200){
      centerDialogVisible.value = false
      getInfo()
    }
  })
}
const close=()=>{
  centerDialogVisible.value=false
}
defineExpose({
  changeCompany
});
</script>
<style lang="scss">
    //切换企业有关样式
.my-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  color: #1d2129;

  font-size: 18px;
    font-weight: bold;
    margin: 16px 0 24px;
}

.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>