<template>
  <MOSTY.PageTable heightnum="65vh" :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading"
    page-title="隐患排查治理报告" :search-type="'01'" @getDeptId="getorgcode">
    <template #serach>
      <el-button style="margin-left: 10px" type="primary" @click="addUserHander">
        <el-icon>
          <CirclePlus />
        </el-icon>
        <span>新增</span>
      </el-button>
    </template>
    <template #reportFrequency="{ row }">
      <dict-tag :options="D_BZ_QUARTER" :value="row.reportFrequency" :tag="false" />
    </template>
    <template #actions="{ row }">

      <span class="operedit" @click="handlexg(row)"><el-icon>
          <!-- v-if='row.userid == getItem("USERID")' -->
          <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="configuration(row)">
        <el-icon>
          <EditPen />
        </el-icon>
        查看
      </span>
    </template>
    <template #fenye>
      <div class="fenye">
        <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="listQuery.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.pageSize"
          layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
      </div>
    </template>
  </MOSTY.PageTable>
  <div v-if="dialogVisible" class="dialog-box">
    <Addpczl @close="handleClose" :id="rowId" :title="title" :saveBtnShow="saveBtnShow" />
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, watch, ref, getCurrentInstance } from "vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { filterYear } from "@/utils/auth.js";
import { getItem } from "@/utils/storage";
import { ElMessage } from "element-plus";
import Addpczl from "./components/addPczl.vue";
import * as MOSTY from "@/components/MyComponents/index";
// 数据
//查询条件
const { proxy } = getCurrentInstance();
const saveBtnShow = ref(true)
const rowId = ref(null)
const title = ref('隐患排查治理报告上传')
const { D_BZ_QUARTER } = proxy.$dict("D_BZ_QUARTER");
const dialogVisible = ref(false);
const tableHeight = ref();
const bigHeight = ref(); //整个高度
const showAdd = ref(false); //展示新增弹窗
const total = ref(0);
// const username = ref(localStorage.getItem("USERNAME"))//当前登录用户
const tableColumns = ref([
  {
    title: "所属单位",
    prop: "orgName"
  },
  {
    title: "所属部门",
    prop: "xtCjbmmc"
  },
  {
    title: "报告名称",
    prop: "reportName"
  },
  {
    title: "年度",
    prop: "reportYear"
  },
  {
    title: "报告频次",
    prop: "reportFrequency",
    slot: true

  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
]);

const PztableData = ref([]);
const tableData = ref([]);
const ssdept = getItem("deptId");
const tableloading = ref(false);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
});

//查看
const configuration = (row) => {
  rowId.value = row.id
  title.value = '隐患排查治理报告查看'
  saveBtnShow.value = false
  dialogVisible.value = true
};
//修改
function handlexg(row) {
  rowId.value = row.id
  title.value = '隐患排查治理报告修改'
  saveBtnShow.value = true
  dialogVisible.value = true
}
//删除
function handledelete(row) {
  getApi({ id: row.id }, '/mosty-jcgl/treatmentreport/deleteTreatmentReport').then(res => {
    ElMessage.success("删除成功");
    getDataList()
  })
}
//获取列表数据
function getDataList() {
  tableloading.value = true;
  postApi(listQuery, "/mosty-jcgl/treatmentreport/queryTreatmentReport")
    .then((res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        total.value = res.total;
      }
    })
    .catch((err) => {
      tableData.value = [];
      tableloading.value = false;
    });
}
// 表格高度计算
const tabHeightFn = () => {
  tableHeight.value = window.innerHeight - 210;
};
const addUserHander = () => {
  dialogVisible.value = true;
};

const getorgcode = (val) => {
  listQuery.code = val;
  listQuery.pageCurrent = 1;
  getDataList();
};
onMounted(() => {
  tabHeightFn();
});
function handleClose() {
  dialogVisible.value = false;
  saveBtnShow.value = true
  rowId.value = null;
  getDataList();
}


//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getDataList();
};
</script>

<style lang="scss" scoped>
.el-table__body-wrapper is-scrolling-left {
  border: none;
}

.el-table__row {
  line-height: 21px;
}

.el-table th,
.el-table td {
  padding: 4px 8px;
}

.el-table__body-wrapper is-scrolling-left .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-dialog__headerbtn {
  margin-top: -6px !important;
}

.el-dialog__headerbtn .el-dialog__close {
  font-size: 27px !important;
}

.bigBox {
  display: flex;
  background-color: #f0f3f4;

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

    .zzjgxx {
      font-size: 18px;
      font-weight: 400;
      color: #0f3916;
      line-height: 24px;
    }

    .el-icon {
      cursor: pointer;
    }
  }

  .cent {
    width: 100%;
    text-align: center;

    .el-form {
      margin-left: 27%;
    }
  }

  .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 {
    // width: calc(100% - 300px);
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

    .headBox {
      height: 60px;
      display: flex;
      justify-content: space-between;
      position: relative;
      z-index: 2;

      .el-select {
        width: 150px;
      }

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

.xzmb_box {
  display: flex;
  justify-content: space-between;
  padding: 10px;

  >div {
    width: 48%;

    .titles {
      text-align: center;
      font-size: 18px;
      font-weight: 500;
      line-height: 35px;
    }
  }
}

.tabBox {
  height: calc(100% - 70px);
  border-left: 0 !important;

  .el-table {
    height: 91%;
  }

  .fenye {
    top: 95%;
  }
}

.btn {
  padding: 10px;
  float: right;
}
</style>
