<template>
  <div class="setting-page">
    <BaseTable
      tableName="USER_STORAGE_TABLE"
      ref="baseTableRef"
      :api="listUserQuotaApi"
      fullHeight
      showCheckbox
      showIndex
      :actionList="actionList"
      @checkbox-all="checkboxChangeFun"
      @checkbox-change="checkboxChangeFun"
    >
      <template #leftOptions>
        <div>
          <el-button type="primary" @click="batchEditClickFun" :disabled="chosenData.length === 0">
            批量修改
          </el-button>
        </div>
      </template>
      <template #status="{ row }">
        <StatusDot
          :status="row.status === '正常' ? 'success' : row.status === '超限' ? 'error' : 'warning'"
          :title="row.status"
        />
      </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> -->
  <!-- 编辑配置对话框 -->
  <Dialog
    v-model="editDialogVisible"
    diaTitle="修改配置"
    width="400"
    show-footer
    @closed="closeDialogFun"
  >
    <template #default>
      <el-form :model="editform" label-width="auto">
        <el-form-item label="用户：" v-if="editType === 'single'">
          <el-input readonly class="w160" v-model="editform.userName"></el-input>
        </el-form-item>
        <el-form-item label="用户存储上限：">
          <el-input class="w80 mr5" v-model="editform.quotaValue" type="number"></el-input>
          <el-select class="w80" v-model="editform.quotaUnit">
            <el-option v-for="item in unitList" :label="item" :value="item" :key="item"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          :disabled="
            !editform.quotaValue ||
            (currentEditRow.quotaValueString.split(' ')[0] === editform.quotaValue &&
              currentEditRow.quotaValueString.split(' ')[1] === editform.quotaUnit)
          "
          @click="batchEditFun"
        >
          确定
        </el-button>
      </div>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import BaseTable from '@/components/common/table/baseTable.vue';
import StatusDot from '@/components/common/statusDot/index.vue';
import { ElMessage } from 'element-plus';
import { useI18n } from 'vue-i18n';
import Dialog from '@/components/common/dialog/index.vue';
import { batchUpdateUserQuotaApi, listUserQuotaApi } from '@/api/data/dataStorageAnalysis';

const chosenData = ref<any>([]);
const { t } = useI18n();

const baseTableRef = ref();

// const visible = ref(false);
const userName = ref('');
const filterFormData = reactive<any>({
  userName: '',
  quotaValue: '',
  quotaUnit: 'TB',
});
const checkboxChangeFun = (data: any) => {
  chosenData.value = data.records;
};
const currentEditRow = ref({
  userId: '',
  quotaValueString: '',
});
const actionList = computed(() => {
  return [
    {
      title: t('通用.编辑'),
      type: 'primary',
      click: (row: any) => {
        editType.value = 'single';
        currentEditRow.value = { ...row };
        editform.value.userName = row.nickName;
        editform.value.quotaValue = row.quotaValueString.split(' ')[0];
        editform.value.quotaUnit = row.quotaValueString.split(' ')[1];
        editDialogVisible.value = true;
      },
    },
  ];
});

// 新增配置的方法，暂时用不到
// const closeFun = () => {
//   visible.value = false;
// };

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

const editDialogVisible = ref(false);
const editType = ref('');
const unitList = ref(['TB', 'GB', 'MB', 'KB']);
const editform = ref({
  userName: '',
  quotaValue: '',
  quotaUnit: 'TB',
});
// 点击批量修改
const batchEditClickFun = () => {
  editType.value = 'batch';
  currentEditRow.value = { userId: '', quotaValueString: '' };
  editDialogVisible.value = true;
};
// 关闭弹窗时重置
const closeDialogFun = async () => {
  editform.value.quotaValue = '';
  editform.value.quotaUnit = 'TB';
};

const batchEditFun = async () => {
  if (!editform.value.quotaValue.length || !Number(editform.value.quotaValue)) {
    ElMessage.warning('请填写正确的存储空间大小');
    return;
  }
  const params =
    editType.value === 'batch'
      ? chosenData.value.map((item: any) => {
          return {
            userId: item.userId,
            quotaValue: editform.value.quotaValue,
            quotaUnit: editform.value.quotaUnit,
          };
        })
      : [
          {
            userId: currentEditRow.value?.userId,
            quotaValue: editform.value.quotaValue,
            quotaUnit: editform.value.quotaUnit,
          },
        ];

  const res: any = await batchUpdateUserQuotaApi(params);
  if (res && res.code === 200) {
    ElMessage.success('修改成功');
    searchFun();
    editDialogVisible.value = false;
  }
};
</script>

<style lang="scss" scoped>
.setting-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.w80 {
  width: 100px;
}
.w160 {
  width: 200px;
}
.mr5 {
  margin-right: 5px;
}
</style>
