<template>
  <div class="headers">
    <h2>管理中心</h2>
    <div style="width: 200px">
      <el-select v-model="tenantId" @change="selectChange" placeholder="请选择租户">
        <el-option
          v-for="item in tenantList"
          :key="item.tenantId"
          :label="item.tenantName"
          :value="item.tenantId"
        />
      </el-select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTenantStore } from '@/stores/modules/tenant'

const tenantStore = useTenantStore()

const tenantList = computed(() => tenantStore.getTenantList)
const tenantId = computed(() => tenantStore.getTenantId)

const selectChange = (tenantId: any) => {
  tenantStore.setTenantId(tenantId || null)
}
</script>

<style scoped>
.headers {
  display: flex;
  align-items: center;
  height: 100%;
}
h2 {
  font-size: 20px;
  font-weight: bolder;
  color: #ffffff;
  width: 100px;
  text-align: justify;
  text-align-last: justify;
  margin-right: 80px;
}
</style>
