<template>
  <div>
    <div class="search flex justify-between bg-white rounded-md">
      <el-form :inline="true" class="demo-form-inline" size="default">
        <el-form-item>
          <el-date-picker
            v-model="form_query.sl_datetime"
            type="date"
            placeholder="开始时间"
            value-format="YYYY-MM-DD"
            clearable
            @change="initData"
          />
          <!-- <el-date-picker v-model="form_query.sl_datetime" type="datetime" placeholder="开始时间" :size="size" value-format="YYYY-MM-DD HH:mm:ss" /> -->
        </el-form-item>
      </el-form>
      <div>
        <el-button type="primary" @click="initData"> 查询 </el-button>
      </div>
    </div>
    <div class="bg-white rounded-md mt-4 px-23px py-16px">
      <div class="flex justify-between pb-4 btn">
        <div>
          <el-button type="primary" @click="exportAll" class="mr-32px"
            >导出</el-button
          >
          <el-button
            type="danger"
            @click="handleMulDelete()"
            :disabled="multipleSelection.length == 0"
            >删除</el-button
          >
        </div>
        <div class="flex content-center">
          <el-input
            v-model="form_query.keyword"
            class="w-40 mx-2"
            size="small"
            placeholder="请输搜索关键词"
            :suffix-icon="Search"
            clearable
          />
          <el-button type="primary" @click="initData">搜索</el-button>
        </div>
      </div>
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="sl_id" label="ID" width="100"></el-table-column>
        <el-table-column
          prop="user_name"
          label="账号"
          width="200"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column
          prop="user_realname"
          label="姓名"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="sl_datetime"
          label="时间"
          width="200"
        ></el-table-column>
        <el-table-column label="操作记录" show-overflow-tooltip>
          <template #default="scope">
            <div v-html="scope.row.sl_content" />
          </template>
        </el-table-column>
      </el-table>
      <div class="flex justify-end my-10">
        <el-pagination
          v-model:current-page="form_query.page"
          v-model:page-size="form_query.limit"
          layout="total,sizes, prev, pager, next, jumper"
          :total="total"
          :background="true"
          :prev-icon="PrevIcon"
          :next-icon="NextIcon"
          @current-change="initData"
          :hide-on-single-page="false"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { Search } from "@element-plus/icons-vue";
import { czrz_list, czrz_del } from "./api";
import { user } from "@/store/index";
let multipleSelection = $ref([]);
let total = $ref(10);
let form_query = $ref({
  page: 1,
  limit: 6,
  keyword: "",
  sl_datetime: "",
});

let tableData = $ref([]);
function handleSelectionChange(val) {
  multipleSelection = [];
  val.forEach((item) => {
    multipleSelection.push(item.sl_id);
  });
}
function initData() {
  const data = {
    ...form_query,
  };
  czrz_list(data).then((res) => {
    if (res.code === "1") {
      tableData = res.data.page_data;
      total = res.data.total_rows * 1;
    }
  });
}
initData();
// 批量删除
function handleMulDelete() {
  ElMessageBox.confirm("确认删除这些数据?", "", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let data = { sl_id: multipleSelection };
      czrz_del(data).then((res) => {
        if (res.code == 1) {
          ElMessage({
            message: "删除成功",
            type: "success",
          });
          initData();
        } else {
          ElMessage({
            message: res.msg,
            type: "error",
          });
        }
      });
    })
    .catch(() => {});
}
function exportAll() {
  const link = `${window.GLOBAL_CONFIG.api}/system/log/index?api=xls&page=1&limit=10000&token=${user.value.token}&checkedidstring=${multipleSelection}`;
  window.open(link, "_blank");
}
</script>

<style lang="scss" scoped>
.search {
  height: 72px;
  line-height: 85px;
  padding: 0 29px;
}
.btn {
  border-bottom: 1px solid #e3e3e3;
}
</style>