<script setup lang="ts">
defineOptions({
  name: "evaluateChangeMould"
});
import { ref, reactive, markRaw } from "vue";
import { useNav } from "@/layout/hooks/useNav";
import { useRouter } from "vue-router";
import { Search } from "@element-plus/icons-vue";
import copyMould from "./mould/copyMould.vue";
import { getTemplateInfoList, getDeleteTemplate } from "@/api/templateInfo";
import { Delete, Check } from "@element-plus/icons-vue";
import { useAppStoreHook } from "@/store/modules/app";
import editExam from "./manage/addExam.vue";
import { ElMessage, ElMessageBox } from "element-plus";
import dayjs from "dayjs";
const { toggleSideBar } = useNav();
// 编辑
const editExamRef = ref();
const addExamShow = ref(false);
// 复制
const copyMouldRef = ref();
const copyMouldShow = ref(false);
const router = useRouter();
const newAdd = () => {
  router.push("/evaluate/children/change/components/newAdd");
  useAppStoreHook().toggleSideBar(false, "关闭");
};
const setEdit = (row: any) => {
  router.push({ name: "evaluateNewAdd", query: { ...row } });
  useAppStoreHook().toggleSideBar(false, "关闭");
};
// 删除
const setDelete = (row: any) => {
  ElMessageBox.confirm("确定删除该考核模板吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    icon: markRaw(Delete)
  })
    .then(async () => {
      const { code } = await getDeleteTemplate(row.id);
      if (code === 200) {
        getTemplateInfoListApi();
        ElMessage.success("删除成功");
      }
    })
    .catch(() => {});
};
// 复制
const setCopy = (row: any) => {
  copyMouldRef.value.open(row);
};
const data = reactive({
  params: {
    pageNumber: 1,
    pageSize: 10,
    // records: {
    tpName: ""
    // }
  },
  total: 0,
  records: []
});

// 分页
const tableLoading = ref(false);
const getTemplateInfoListApi = async () => {
  tableLoading.value = true;
  const res = await getTemplateInfoList(data.params);
  if (res.code == 200) {
    tableLoading.value = false;
    data.records = res.data.records;
    data.total = res.data.totalRow;
  }
};
getTemplateInfoListApi();
const handleSizeChange = (val: number) => {
  data.params.pageSize = val;
  getTemplateInfoListApi();
};
const handleCurrentChange = (val: number) => {
  data.params.pageNumber = val;
  getTemplateInfoListApi();
};
// 更新时间返回值
const formattedTime = time => {
  if (time) {
    return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
  } else {
    return "无效日期";
  }
};
</script>

<template>
  <div class="w-[100%]">
    <!-- 编辑 -->
    <editExam ref="editExamRef" v-model="addExamShow" />
    <copyMould
      ref="copyMouldRef"
      v-model="copyMouldShow"
      @addTemplateApi="getTemplateInfoListApi"
    />
    <div class="mb-2 flex gap-2 justify-between flex-wrap">
      <div class="flex mt-2">
        <div class="flex mr-2">
          <el-input
            v-model="data.params.tpName"
            style="width: 500px"
            placeholder="搜索考核模板"
            :prefix-icon="Search"
            clearable
            @change="getTemplateInfoListApi()"
          />
        </div>
      </div>
      <div class="flex pt-2 mr-6">
        <Auth :value="['新建考核模板']">
          <el-button type="primary" class="mr-2" @click="newAdd"
            >新建考核模板</el-button
          >
        </Auth>
      </div>
    </div>
    <div class="mt-8">
      <el-table
        v-loading="tableLoading"
        :data="data.records"
        style="width: 100%"
      >
        <el-table-column prop="tpName" label="考核模板" />
        <el-table-column
          prop="updateTime"
          label="更新时间"
          width="160"
          sortable
        >
          <template #default="{ row }">
            <div v-if="row.updateTime">
              {{ formattedTime(row.updateTime) }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="createUser" label="创建人" width="150" />
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <!-- <el-button link :icon="Edit" /> -->
            <Auth :value="['复制']">
              <el-dropdown trigger="click">
                <span class="el-dropdown-link navbar-bg-hover select-none">
                  <el-icon @click="setEdit(row)">
                    <Edit />
                  </el-icon>
                </span>
              </el-dropdown>
            </Auth>
            <el-dropdown class="ml-2" trigger="click">
              <span class="el-dropdown-link navbar-bg-hover select-none">
                <el-icon>
                  <More />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu class="setting">
                  <Auth :value="['删除']">
                    <el-dropdown-item @click="setDelete(row)">
                      <el-text type="danger">删除</el-text>
                    </el-dropdown-item>
                  </Auth>
                  <Auth :value="['复制']">
                    <el-dropdown-item @click="setCopy(row)">
                      复制
                    </el-dropdown-item>
                  </Auth>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- <div class="float-right mt-8 mr-8">
      <el-pagination
        v-model:current-page="data.params.pageNumber"
        v-model:page-size="data.params.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div> -->
    <div class="flex justify-between item-center">
      <div class="float-left mt-5 ml-2 total">共{{ data.total }}条数据</div>
      <div class="float-right mt-5 mr-8">
        <el-pagination
          v-model:current-page="data.params.pageNumber"
          v-model:page-size="data.params.pageSize"
          background
          layout="prev, pager, next"
          :total="data.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<style scoped>
.total {
  font-size: 14px;

  /* font-family: PingFangSC-Regular; */
  font-weight: 400;
  line-height: 22px;
  color: #0009;
  letter-spacing: 0;
}
</style>
