<template>
  <div class="tenantPage">
    <div class="search-bar">
      <el-input
        v-model="searchParams.tenantName"
        clearable
        placeholder="请输入租户名称"
        @keyup.enter="loadTenantTable"
      />
      <el-button type="primary" @click="loadTenantTable">
        <template #icon>
          <el-icon>
            <SearchOutlined />
          </el-icon>
        </template>
        查询
      </el-button>
    </div>

    <div class="tenant-content">
      <el-button type="primary" @click="openAddTenantDrawer('add')">
        <template #icon>
          <el-icon>
            <FileAddOutlined />
          </el-icon>
        </template>
        添加租户
      </el-button>

      <el-table :data="tenantTable" class="tenant-info-table" row-key="id" default-expand-all>
        <el-table-column prop="tenantName" label="租户名称" />
        <el-table-column prop="tenantCode" label="租户编码" align="center" />
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <!-- <div class="">
              {{ TENANT_STATUS_LABEL[scope.row.isDisabled] }}
            </div> -->

            <el-tag v-if="scope.row.isDisabled === 0" type="success">启用</el-tag>
            <el-tag v-else type="danger">禁用</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="生效时间" align="center" />
        <el-table-column prop="endTime" label="失效时间" align="center" />
        <el-table-column align="center" width="200" label="操作">
          <template #default="scope">
            <div class="operations">
              <div
                v-if="scope.row.parentId === -1 || scope.row.parentId === null"
                class="add-next-level"
                @click="openAddTenantDrawer('add', scope.row)"
              >
                添加下一级
              </div>

              <div
                v-if="scope.row.parentId === -1 || scope.row.parentId === null"
                class="separator"
              >
                |
              </div>

              <img
                class="operation-img"
                src="@/assets/icons/edit.png"
                @click="openAddTenantDrawer('edit', scope.row)"
              />

              <img
                class="operation-img"
                src="@/assets/icons/delete.png"
                @click="handleDelete(scope.row.id)"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <AddTenantDrawer
      :showAddTenantDrawer="showAddTenantDrawer"
      :mode="tenantDrawerMode"
      :tenantForm="tenantForm"
      @closeDrawer="closeTenantDrawer"
      @loadTenantTable="loadTenantTable"
    />
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { ElInput, ElButton, ElIcon, ElTable, ElTableColumn, ElTag } from 'element-plus';
  import { ElMessageBox, ElMessage } from 'element-plus';
  import { FileAddOutlined, SearchOutlined } from '@vicons/antd';
  import {
    TenantInfoTreeType,
    TENANT_STATUS_LABEL,
    tenantDrawerModeType,
    tenantFormType,
  } from '@/types/tenant/type';
  import AddTenantDrawer from './components/AddTenantDrawer.vue';
  import { queryTenantTreeApi, deleteTenantApi } from '@/api/tenant/index';

  const tenantTable = ref<TenantInfoTreeType>();

  // drawer相关变量
  const showAddTenantDrawer = ref<boolean>(false);
  const tenantDrawerMode = ref<tenantDrawerModeType>('add');
  // 添加/编辑租户的表单
  const tenantForm = reactive<tenantFormType>({
    parentId: 0,
    parentName: '',
    tenantName: '',
    tenantCode: '',
    startTime: '',
    endTime: '',
  });

  // 搜索租户变量
  const searchParams = reactive({
    tenantName: '',
    tenantCode: '',
  });

  function loadTenantTable() {
    queryTenantTreeApi(searchParams).then((res) => {
      tenantTable.value = res;
    });
  }

  function handleDelete(tenantId: number) {
    ElMessageBox.confirm('是否删除租户，删除后该租户无法继续使用平台！', '删除租户', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      deleteTenantApi(tenantId).then(() => {
        loadTenantTable();
        ElMessage({
          type: 'success',
          message: '删除成功',
        });
      });
    });
  }

  function openAddTenantDrawer(newTenantDrawerMode: tenantDrawerModeType, row?) {
    showAddTenantDrawer.value = true;
    tenantDrawerMode.value = newTenantDrawerMode;
    // 添加子租户
    if (newTenantDrawerMode === 'add' && row) {
      tenantForm.parentId = row.id;
      tenantForm.parentName = row.tenantName;
    } else if (newTenantDrawerMode === 'edit') {
      tenantForm.id = row.id;
      tenantForm.parentId = undefined;
      tenantForm.parentName = undefined;
      tenantForm.tenantName = row.tenantName;
      tenantForm.tenantCode = row.tenantCode;
      tenantForm.startTime = row.startTime;
      tenantForm.endTime = row.endTime;
    }
    // 添加父租户
    else {
      tenantForm.parentId = -1; //-1表示顶层父租户
      tenantForm.parentName = '顶级租户';
    }
  }

  function resetTenantForm() {
    tenantForm.id = 0;
    tenantForm.parentId = 0;
    tenantForm.parentName = '';
    tenantForm.tenantName = '';
    tenantForm.tenantCode = '';
    tenantForm.startTime = '';
    tenantForm.endTime = '';
  }

  function closeTenantDrawer() {
    showAddTenantDrawer.value = false;
    resetTenantForm();
  }

  onMounted(() => {
    loadTenantTable();
  });
</script>

<style lang="scss" scoped>
  .tenantPage {
    height: calc(100vh - 100px);
    .search-bar {
      margin-bottom: 10px;
      padding: 16px;
      background-color: #fff;
      .el-input {
        width: 320px;
        margin-right: 8px;
      }
    }

    .tenant-content {
      min-height: calc(100% - 60px);
      padding: 16px;
      background-color: #fff;

      .el-button {
        margin-bottom: 10px;
      }
      .tenant-info-table {
        .operations {
          display: flex;
          justify-content: right;
          align-items: center;
          margin-right: 10%;

          .add-next-level {
            height: 22px;
            font-size: 14px;
            color: #1890ff;
            line-height: 22px;
            cursor: pointer;
            margin-right: 14px;
          }

          .separator {
            width: 1px;
            color: #e9e9e9;
            margin-right: 14px;
          }

          .operation-img {
            height: 16px;
            width: 16px;
            margin-right: 10px;
            cursor: pointer;
          }
        }
      }
    }
  }
</style>
