<template>
  <div class="container">
    <el-card class="form-container" shadow="hover">

      <el-row>
        <el-col :span="6">
          <el-text class="mx-1" type="primary">租户名称</el-text>
        </el-col>
        <el-col :span="18">
          <el-input v-model="name" placeholder="请输入名称" />
        </el-col>
      </el-row>

      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <el-text class="mx-1" type="primary">租户标识</el-text>
        </el-col>
        <el-col :span="18">
          <el-input v-model="symbol" placeholder="请输入标识" />
        </el-col>
      </el-row>

      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <el-text class="mx-1" type="primary">联系人</el-text>
        </el-col>
        <el-col :span="18">
          <el-input v-model="contact" placeholder="请输入联系人" />
        </el-col>
      </el-row>

      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <el-text class="mx-1" type="primary">手机号码</el-text>
        </el-col>
        <el-col :span="18">
          <el-input v-model="phone" placeholder="请输入手机号码" />
        </el-col>

      </el-row>
      <el-row style="margin-top: 20px;">
        <el-col :span="6">
          <el-text class="mx-1" type="primary">管理员</el-text>
        </el-col>
        <el-col :span="18">
          <el-input v-model="manager" placeholder="请输入管理员" />
        </el-col>
      </el-row>

      <el-row style="margin-top: 20px;">
        <el-col :offset="6" :span="18">
          <el-button type="primary" @click="addFinished">确认新增</el-button>
        </el-col>
      </el-row>

    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import tenantService from "../../services/tenantService.js";

const manager = ref<String>('');
const phone = ref<String>('');
const contact = ref<String>('');
const name = ref<String>('');
const symbol = ref<String>('');


const addFinished = () => {
  const tenant = {
    symbol: symbol.value,
    name: name.value,
    contact: contact.value,
    manager: manager.value,
    phone: phone.value,
  };
  tenantService.addTenant(tenant);
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5; /* 设置背景色为浅色 */
}

.form-container {
  background-color: #333; /* 深色背景 */
  color: white; /* 确保文本颜色与深色背景有对比 */
  padding: 20px;
  border-radius: 10px;
  width: 400px;
}

.el-text {
  color: white; /* 确保文本颜色与深色背景有对比 */
}

.el-input {
  width: 100%;
}
</style>
