<template>
  <div>
    <layout-card>
      <layout-table
        v-model:pagination="pagination"
        :data="list"
        @get-data="fnGetData"
      >
        <el-table-column label="序号" width="60">
          <template #default="{ $index }">
            {{ serialNumber(pagination, $index) }}
          </template>
        </el-table-column>
        <el-table-column prop="USERNAME" label="姓名" />
        <el-table-column prop="SIGNTYPENAME" label="签字人员类型" />
        <el-table-column label="签字图片">
          <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="签字录入时间" />
        <el-table-column label="操作" width="150">
          <template #default="{ row }">
            <el-button
              type="primary"
              text
              link
              @click="fnAdd(row.USERSIGNID, 'edit')"
            >
              编辑
            </el-button>
            <el-button
              type="primary"
              text
              link
              @click="fnAdd(row.USERSIGNID, 'view')"
            >
              查看
            </el-button>
            <el-button
              type="primary"
              text
              link
              @click="fnDelete(row.USERSIGNID)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
        <template #button>
          <el-button type="primary" @click="fnAdd('', 'add')"> 新建 </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"
      @get-data="fnResetPagination"
    />
  </div>
</template>

<script setup>
import { serialNumber } from "@/assets/js/utils.js";
import useListData from "@/assets/js/useListData.js";
import { nextTick, reactive } from "vue";
import {
  getSignUserGoEdit,
  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 data = reactive({
  addOrEditDialog: {
    visible: false,
    type: "",
    form: {
      USERNAME: "",
      USERSIGNTYPE: "",
      DUTIES: "",
      SIGNTYPE: "",
      SIGN_PICTURE: "",
      SIGN_PICTURE_2: [],
    },
  },
});
const { list, pagination, fnGetData, fnResetPagination } =
  useListData(getSignUserList);

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