<template>
  <div>
    <MOSTY.PageTree :pageTitle="'安全论文列表'" :searchType="'03'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @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="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" @SortChange="SortChange" :actionsW="250" style="width: 100%;">
            <template #level="{ row }">
              <dict-tag :options="D_BZ_LWJB" :value="row.level" :tag="false" />
            </template>
            <template #findVerifyFlag="{ row }">
              <span :class="row.findVerifyFlag!=1?'cancel-flag-red':'cancel-flag-green'">{{row.findVerifyFlag!=1?'否':'是'}}</span>
            </template>
            <template #actions="{ row }">
              <span style="margin-left: 0;" 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>
                  <View />
                </el-icon>查看</span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" :title="`确定${row.findVerifyFlag == '1'?'取消':''}查证?`"
                @confirm="sheckClick(row)">
                <template #reference>
                  <span class="operedown" size="small">
                    {{ row.findVerifyFlag == '1' ? '取消' : '' }}查证</span>
                </template>
              </el-popconfirm>

            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange" />

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

<script setup>
// 引入
import { onMounted, reactive, ref, getCurrentInstance } from "vue";
import { filterYear } from "@/utils/auth.js";
import { ElMessage } from "element-plus";
import EditAqlwbz from "./commponents/EditAqlwbz.vue";
import * as MOSTY from "@/components/MyComponents/index";
import { postApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const { D_BZ_LWJB } = proxy.$dict("D_BZ_LWJB");
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    width: '250px',
    defaultVal: new Date().getFullYear(),
    options: filterYear(7),
  },
  {
    showType: "input",
    prop: "username",
    width: '250px',
    placeholder: '请输入人员姓名查询'
  }
]);
const tableColumn = ref([
  {
    title: "论文标题",
    prop: "titlename",
    sortable: true
  },
  {
    title: "摘要",
    prop: "zy",
    sortable: true
  },
  {
    title: "发布时间",
    prop: "time",
    sortable: true
  },
  {
    title: "发布机构",
    prop: "fbjg",
    sortable: true
  },
  {
    title: "作者",
    prop: "username",
    width: 80,
    sortable: true
  },
  {
    title: "年度",
    prop: "year",
    width: 110,
    sortable: true
  },
  {
    title: "级别",
    prop: "level",
    width: 80,
    slot: true,
    sortable: true,

  },
  {
    title: "是否查证",
    prop: "findVerifyFlag",
    width: 80,
    slot: true,
    // sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const comprehensiveShow = ref(false);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  type: '1',
  year: new Date().getFullYear(),
});
const rowId = ref(null);
const saveBtnShow = ref(true);
const title = ref("新增");
// 树的数据
const tableData = ref([
]);

function onSearch(obj) {
  listQuery.pageCurrent = 1
  listQuery.year = obj.year
  listQuery.username = obj.username
  getListData();
}

function close() {
  rowId.value = null
  comprehensiveShow.value = false
  getListData()
}
//获取列表数据
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  postApi(listQuery, "/mosty-jcgl/safetypaperCommend/getPageList").then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      pageConfiger.total = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}

//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getListData();
};
//选择右侧部门
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getListData();
};
//新增
const addUserHander = () => {
  title.value = "安全论文新增";
  orgcode.value = listQuery.orgcode
  comprehensiveShow.value = true;
  rowId.value = null;
  saveBtnShow.value = true;
};

// 编辑
const orgcode = ref("")
const editClick = (row) => {
  title.value = "安全论文修改";
  orgcode.value = listQuery.orgcode
  comprehensiveShow.value = true;
  saveBtnShow.value = true;
  rowId.value = row.id
};
// 查看
const seeClick = (row) => {
  title.value = "安全论文详情";
  comprehensiveShow.value = true;
  rowId.value = row.id
  saveBtnShow.value = false;
};
//删除
const handledelete = (row) => {
  postApi({}, `/mosty-jcgl/safetypaperCommend/del/${row.id}`).then(
    (res) => {
      ElMessage.success("删除成功");
      getListData();
    }
  );
};
/** 查证 */
const sheckClick = (row) => {
  let findVerifyFlag = row.findVerifyFlag == '1' ? '2' : '1' // 查证 1 是 2 否
  postApi({ id: row.id, findVerifyFlag }, `/mosty-jcgl/safetypaperCommend/findVerify`).then(
    (res) => {
      let successTxt = row.findVerifyFlag == '1' ? '取消查证成功':'查证成功'
      ElMessage.success(successTxt);
      getListData();
    }
  );
};

onMounted(() => {
});
</script>

<style lang="scss" scoped>
.bigBox {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    width: 300px;
    // height: 1030px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    // width: calc(100% - 300px);
    .headBox {
      height: 60px;
      display: flex;
      justify-content: space-between;
      position: relative;
      z-index: 2;

      .el-select {
        width: 150px;
      }

      .btnBox {
        display: flex;
        width: 600px;
        justify-content: space-between;
        align-items: center;

        .el-select {
          width: 150px;
        }

        .btn {
          margin-left: 10px;
          display: flex;
        }
      }
    }
  }
}
::v-deep .cancel-flag-green{
  color: green;
}
::v-deep .cancel-flag-red{
  color: red;
}
.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>