<template>
  <div>
    <MOSTY.PageTree :pageTitle="'履职报告列表'" :searchType="'03'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" noDisabledDate @submit="onSearch" />

        <el-divider />
        <div class="btnBox">
          <el-button type="primary" @click="addUserHander">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>新增</span>
          </el-button>
        </div>
      </template>
      <template #table>
        <!-- 表格 -->
        <section class="eltab9">
          <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="tableData" :tableloading="tableloading"
            :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false">
            <template #type="{ row }">
              <dict-tag :options="D_BZ_WORKTYPE" :value="row.type" :tag="false" />
            </template>
            <template #yearType="{ row }">
              <dict-tag :options="D_BZ_WORD_YEAR_TYPE" :value="row.yearType" :tag="false" />
            </template>
            <template #actions="{ row }">
              <span class="operedit" @click="editClick(row)"><el-icon>
                  <EditPen />
                </el-icon>修改</span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
                @confirm="handledelete(row)">
                <template #reference>
                  <span class="operdel" size="small">
                    <el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-popconfirm>
              <span class="operesee" @click="seeClick(row)"><el-icon>
                  <Compass />
                </el-icon>查看</span>
            </template>
          </MOSTY.Table>
          <div class="fenye">
            <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange"
              @changeSize="handleSizeChange" />

          </div>
        </section>
      </template>
    </MOSTY.PageTree>
    <!-- 修改 -->
    <div v-if="comprehensiveShow" class="dialog-box">
      <EditLzbg @close="close" :title="title" :orgcode="orgcode" :rowData="rowData" :saveBtnShow="saveBtnShow" />
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, ref, watch } from "vue";
import { filterYear } from "@/utils/auth.js";
import { ElMessage } from "element-plus";
import EditLzbg from "./commponents/EditLzbg.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
// 数据
const comprehensiveShow = ref(false);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  year: new Date().getFullYear()
});
const saveBtnShow = ref(true);
const title = ref("新增");
// 树的数据
const tableData = ref([
]);
const searchArr = reactive([
  {
    showType: "input",
    prop: "username",
    width: '250px',
    placeholder: '请输入人员姓名查询'
  },
  {
    showType: "year",
    prop: "year",
    width: '250px',
    defaultVal: new Date().getFullYear().toString(),
    // options: filterYear(7),
  }
]);
const pageData = reactive({
  tableColumns: [
    {
      title: "姓名",
      prop: "username"
    },
    {
      title: "标题",
      prop: "reportname"
    },
    {
      title: "年度",
      prop: "year"
    },
    {
      title: "是否涉及安全内容",
      prop: "issafe"
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  },
})

function onSearch(obj) {
  listQuery.year = obj.year
  listQuery.username = obj.username
  listQuery.pageCurrent = 1;
  pageData.pageConfiger.pageCurrent = 1;
  getListData();
}
function close() {
  comprehensiveShow.value = false;
  getListData();
}

//获取列表数据
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  getApi(listQuery, "/mosty-jcgl/performanceReport/getPageList").then((res) => {
    if (res.records) {

      tableData.value = res.records;
      tableData.value.forEach((item) => {
        if (item.issafte == "1") {
          item.issafe = "是";
        } else {
          item.issafe = "否";
        }
      });
      pageData.pageConfiger.total = res.total
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageData.pageConfiger.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageData.pageConfiger.pageCurrent = currentPage;
  getListData();
};
//选择右侧部门
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  orgcode.value = val.id;
  listQuery.pageCurrent = 1;
  pageData.pageConfiger.pageCurrent = 1;
  getListData();
};
// 方法
const rowData = ref({});
//新增
const addUserHander = () => {
  title.value = "履职报告新增";
  comprehensiveShow.value = true;
  rowData.value = {
    year: new Date().getFullYear().toString(),
  };
  saveBtnShow.value = true;
};

// 编辑
const orgcode = ref("");
const editClick = (row) => {
  title.value = "履职报告修改";
  orgcode.value = listQuery.orgcode;
  comprehensiveShow.value = true;
  saveBtnShow.value = true;
  getApi(
    {},
    "/mosty-jcgl/performanceReport/getPerformanceReportById/" + row.id
  ).then((res) => {
    if (res) {
      rowData.value = res;


    }
  });
};
// 查看
const seeClick = (row) => {
  title.value = "履职报告详情";
  comprehensiveShow.value = true;
  getApi(
    {},
    "/mosty-jcgl/performanceReport/getPerformanceReportById/" + row.id
  ).then((res) => {
    if (res) {
      rowData.value = res;
    }
  });
  saveBtnShow.value = false;
};
//删除
const handledelete = (row) => {
  postApi({}, "/mosty-jcgl/performanceReport/del/" + row.id).then((res) => {
    ElMessage.success("删除成功");
    getListData();
  });
};


</script>

<style lang="scss" scoped>
.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>
