<template>
  <div>
    <layout-card>
      <layout-table
        ref="tableRef"
        v-model:pagination="pagination"
        :data="list"
        @get-data="fnGetData"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column label="序号" width="150">
          <template #default="{ $index }">
            {{ serialNumber(pagination, $index) }}
          </template>
        </el-table-column>
        <el-table-column prop="SIGNTYPENAME" label="签字人员类型" width="350" />
        <el-table-column label="签字图片" width="350">
          <template #default="{ row }">
            <img
              v-viewer
              :src="FILE_URL + row.SIGN_PICTURE"
              alt=""
              width="80"
              height="50"
            />
          </template>
        </el-table-column>
        <el-table-column prop="CREATTIME" label="签字录入时间" width="350" />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-button type="primary" text link @click="fnAdd(row.USERSIGNID)">
              编辑
            </el-button>
            <el-divider direction="vertical" />
            <el-button
              type="primary"
              text
              link
              @click="fnAdd(row.USERSIGNID, 'view')"
            >
              查看
            </el-button>
            <el-divider direction="vertical" />
            <el-button
              type="primary"
              text
              link
              @click="fnDelete(row.USERSIGNID)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
        <template #button>
          <el-button type="primary" @click="fnAdd('')"> 新建 </el-button>
        </template>
      </layout-table>
    </layout-card>
    <sign-add
      v-model:visible="data.addOrEditDialog.visible"
      v-model:form="data.addOrEditDialog.form"
      :type="data.addOrEditDialog.type"
      :usersignid="data.addOrEditDialog.USERSIGNID"
    />
  </div>
</template>

<script setup>
import { serialNumber } from "@/assets/js/utils.js";
import useListData from "@/assets/js/useListData.js";
import { reactive, ref } from "vue";
import {
  getSignUserList,
  setSignUserDelete,
} from "@/request/training_archive_management.js";
import { debounce } from "throttle-debounce";
import { ElMessage, ElMessageBox } from "element-plus";
import SignAdd from "./components/sign_add.vue";

const FILE_URL = import.meta.env.VITE_FILE_URL;
const tableRef = ref(null);
const data = reactive({
  addOrEditDialog: {
    visible: false,
    form: {},
    type: "",
    USERSIGNID: "",
  },
});
const { list, pagination, fnGetData, fnResetPagination } =
  useListData(getSignUserList);

const fnAdd = (USERSIGNID, type) => {
  data.addOrEditDialog.visible = true;
  data.addOrEditDialog.USERSIGNID = USERSIGNID;
  data.addOrEditDialog.type = type;
};
const fnDelete = debounce(
  1000,
  async (USERSIGNID) => {
    await ElMessageBox.confirm("确定要删除吗？", {
      type: "warning",
    });
    await setSignUserDelete({ USERSIGNID });
    ElMessage.success("删除成功");
    fnResetPagination();
  },
  { atBegin: true }
);
</script>
<style scoped></style>
