<template>
  <div>
    <MOSTY.PageTree :searchType="'03'" @getDeptId="getdeptId">
      <template #serach>
        <div style="padding-top: 15px;">
          <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
          <el-divider />
          <div class="btnBox">
            <el-button type="primary" @click="handleAdd">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
          </div>
        </div>
      </template>
      <template #table>
        <section ref="tableSectionRef" :style="{ height: `calc(100vh - ${tableOffsetHeight}px)` }">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
            <template #actions="{ row }">
              <span class="operedit" @click="handlexg(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="handleSee(row)">
                <el-icon>
                  <Compass />
                </el-icon>查看</span>
            </template>

          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
          </MOSTY.Pages>
        </div>
      </template>
    </MOSTY.PageTree>
    <!-- 新增分析报告 -->
    <div v-if="addplanShow" class="dialog-box">
      <syqktjinfo :saveBtnShow="saveBtnShow" :editObj="editObj.editObj" @close="addplanShow = false" @ok="addEditOk" />
    </div>
  </div>
</template>

<script setup>
// 引入
import syqktjinfo from "./commponents/syqktjinfo.vue";
import { reactive, onMounted, ref, nextTick } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { filterYear } from "@/utils/auth.js";
import { ElMessage } from "element-plus";
import { postApi } from "@/api/tobAcco_api.js";
// 数据
const addplanShow = ref(false);
const tableloading = ref(false);
const tableData = ref([]);
let editObj = reactive({
  editObj: null
})
/** table 偏移量 */
const tableOffsetHeight = ref(354)
const tableSectionRef = ref(null)
const searchArr = reactive([
  {
    showType: "input",
    prop: "keywords",
    width: '250px',
    placeholder: "请输入关键字"
  },
  {
    showType: "select",
    prop: "year",
    width: '250px',
    defaultVal: new Date().getFullYear().toString(),
    options: filterYear(7),
  },
]);
const tableColumn = ref([
  {
    title: "报告名称",
    prop: "name",
  },
  {
    title: "年份",
    prop: "year",
  },

  {
    title: "单位",
    prop: "orgName",
  },
  {
    title: "报告频次",
    prop: "frequency",
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 10,
  pageCurrent: 1,
  total: 0
})
const saveBtnShow = ref(true);
const getdeptId = (val) => {
  listQuery.orgId = val.id;
  listQuery.pageCurrent = 1
  getDataList();
}
/** 查询参数 */
const listQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  orgId: JSON.parse(window.localStorage.getItem("deptId")).ssdwid,
});
const total = ref(0);
const addEditOk = () => {
  addplanShow.value = false;
  getDataList()
}
const handlexg = (row) => {
  saveBtnShow.value = true;
  addplanShow.value = true;
  if (row) {
    editObj.editObj = row
  } else {
    editObj.editObj = null
  }
}
const handledelete = (row) => {
  postApi([row.id], '/mosty-jcgl/securityCostReport/delSecurityCostReport').then((res) => {
    if (res) ElMessage.success('删除成功')
    getDataList()
  })
}
const handleAdd = () => {
  saveBtnShow.value = true;
  addplanShow.value = true;
}
const handleSee = (row) => {
  saveBtnShow.value = false;
  addplanShow.value = true;
  if (row) {
    editObj.editObj = row
  } else {
    editObj.editObj = null
  }
}
/** 设置table偏移量  */
const setTableOffsetHeight = () => {
  nextTick(() => {
    if (!tableSectionRef.value) return
    tableOffsetHeight.value = 66 + tableSectionRef.value.getBoundingClientRect().top
  })
}
onMounted(() => {
  // bigHeightFn();
  getDataList()
  setTableOffsetHeight()
});
const onSearch = (obj) => {
  listQuery.keywords = obj.keywords
  listQuery.year = obj.year
  getDataList()
}
//	查询安全预算使用列表
function getDataList() {
  tableloading.value = true
  postApi(listQuery, '/mosty-jcgl/securityCostReport/querySecurityCostReportInfoPage').then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      total.value = res.total;
    }
  }).catch(() => {
    tableData.value = []
    tableloading.value = false;
  }).finally(() => {
    tableloading.value = false;
  })
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getDataList();
};
</script>

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

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

  }
}

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