<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessageBox } from "element-plus";
import type { DrawerProps, FormItemProps, FormProps } from "element-plus";
// const itemLabelPosition = ref<FormItemProps["labelPosition"]>("");
import { getQuotaLogInfo } from "@/api/indexDefine";
import dayjs from "dayjs";
const drawer = ref(false);
const quotaId = ref();
const direction = ref<DrawerProps["direction"]>("rtl");
const logList = ref([]);
const getQuotaLogInfoApi = async () => {
  const { code, data } = await getQuotaLogInfo(quotaId.value);
  console.log(data);
  if (code === 200) {
    logList.value = data;
  }
};
function cancelClick() {
  drawer.value = false;
}
const open = row => {
  quotaId.value = row.id;
  getQuotaLogInfoApi();
  drawer.value = true;
};
defineExpose({
  open
});
const timer = ref("");
</script>

<template>
  <div>
    <el-drawer v-model="drawer" :direction="direction">
      <template #header>
        <h4>指标日志</h4>
      </template>
      <template #default>
        <div>
          <div v-for="(item, index) in logList" :key="index" class="w-full">
            <div>
              <el-text class="font-semibold">操作用户</el-text>
              <div
                class="bg-gray-100 pl-3 pb-2 pt-2 rounded text-sm text-gray-500"
              >
                {{ item.updateUser }}
              </div>
            </div>
            <div class="mt-4">
              <el-text class="font-semibold">更新时间</el-text>
              <div
                class="bg-gray-100 pl-3 pb-2 pt-2 rounded text-sm text-gray-500"
              >
                {{ dayjs(item.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
              </div>
            </div>
            <div class="mt-4">
              <el-text class="font-semibold">更新内容</el-text>
              <div
                class="bg-gray-100 pl-3 pr-3 pb-2 pt-2 rounded text-sm text-gray-500"
              >
                {{ item.updateContent }}
              </div>
              <el-divider />
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div>
          <el-button @click="cancelClick">关闭</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>
