<template>
  <div class="setting-page">

    <BaseTable
      tableName="USER_STORAGE_TABLE"
      ref="baseTableRef"
      :api="listUserQuotaApi"
      :params="{
        userName
      }"
      showCheckbox
      showIndex
    >
      <template #leftOptions>
        <div>
          <el-form :inline="true" class="filter-form" :model="filterFormData">
            <el-form-item label="用户名：">
              <el-input v-model="filterFormData.userName"></el-input>
            </el-form-item>
            <el-form-item label="用户初始存储：">
              <el-input class="w80 mr5" v-model="filterFormData.quotaValue"></el-input>
              <el-select class="w80" v-model="filterFormData.quotaUnit">
                <el-option v-for="item in unitList" :label="item" :value="item" :key="item"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item >
              <el-button @click="searchFun">搜索</el-button>
              <el-button type="primary" @click="batchEditFun">批量修改</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>

      <template #operate="{row}">
        <el-button type="primary" link @click="editUserStorageFun(row)"> 编辑</el-button>
      </template>
    </BaseTable>
  </div>

  <el-drawer
    v-model="visible"
    title="新增用户配额"
    :size="400"
    :close-on-click-modal="false"
    @close="closeFun"
  >
    <div class="content">
      <TableForm ref="tableFormRef" tableName="USER_STORAGE_TABLE" />
    </div>
    <template #footer>
      <div>
        <el-button @click="closeFun">关闭</el-button>
        <el-button type="primary" @click="submitFun">确定</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import { listUserQuotaApi, batchUpdateUserQuotaApi } from '@/api/data/data';
import TableForm from '@/components/common/table/tableForm.vue';
import { ElMessage } from 'element-plus';

const baseTableRef = ref();

const visible = ref(false);
const tableFormRef = ref();
const userName = ref('');
const filterFormData = reactive<any>({
  userName: '',
  quotaValue: '',
  quotaUnit: 'TB',
});

const unitList = ref(['TB', 'GB', 'MB', 'KB']);

const editUserStorageFun = (row:any) => {
  visible.value = true;
  tableFormRef.value.setFormDataFun(row);

};

const closeFun = () => {
  visible.value = false;
};

const submitFun = () => {

};

const searchFun = () => {
  userName.value = filterFormData.userName;
};

const batchEditFun = async () => {

  const checkList:any = baseTableRef.value?.tableRef?.getCheckboxRecords() || [];

  if (!filterFormData.quotaValue.length || !Number(filterFormData.quotaValue)) {
    ElMessage.warning('请填写正确的存储空间大小');
    return;

  }

  if (checkList.length) {

    const params = checkList.map((item:any) => {
      return {
        userId: item.uuid,
        quotaValue: filterFormData.quotaValue,
        quotaUnit: filterFormData.quotaUnit,
      };
    });

    const res:any = await batchUpdateUserQuotaApi(params);
    if (res && res.code === 200) {
      searchFun();
    }

  } else {
    ElMessage.warning('请选择用户后进行修改');
  }

};

</script>

<style lang="scss" scoped>

.setting-page{
  width: 100%;
  height: 100%;

  .filter-form{

    .el-form-item{
      margin-bottom: 0 !important;

      .w80{
        width: 80px;
      }

      .mr5{
        margin-right: 5px;
      }
    }
  }

}
</style>
