<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">
      <!-- 组织机构信息 -->
      <div class="left" :style="{ width: lfBoxWid }">
        <div class="title">
          <div style="display: flex; align-items: center;">
            <div style="padding-top: 5px; margin-right: 5px">
              <el-icon style="color: var(--el-color-primary) !important">
                <List />
              </el-icon>
            </div>

            <span class="zzjgxx" v-if="iconChange">组织机构信息</span>
          </div>
          <el-icon @click="handleCollapse" v-show="iconChange">
            <DArrowLeft />
          </el-icon>
          <el-icon @click="handleCollapse" v-show="!iconChange">
            <DArrowRight />
          </el-icon>
        </div>
        <div class="treeBox" :style="{ height: treeHeight }">
          <MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" clearable filterable :searchType="'03'" @getdeptData="getdeptId" />
        </div>
      </div>
      <div class="right" :style="{ width: rgBoxWid }">
        <!-- 头部 -->
        <div class="headBox">
          <div class="title">安全论文表彰</div>
          <div class="btnBox">
            <el-select v-model="listQuery.year" filterable>
              <el-option v-for="item in filterYear(7)" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <div class="btn">
              <el-input placeholder="请输入人员姓名查询" v-model="listQuery.username"></el-input>
              <el-button type="primary" @click="Searchdata">
                <el-icon>
                  <Search />
                </el-icon>
                <span>查询</span>
              </el-button>
              <el-button type="primary" @click="reset">
                <span>重置</span>
              </el-button>
              <el-button type="primary" @click="addUserHander">
                <el-icon>
                  <CirclePlus />
                </el-icon>
                <span>新增</span>
              </el-button>
            </div>
          </div>
        </div>

        <!-- 表格 -->
        <div class="tabBox">
          <el-table ref="multipleTableRef" v-loading="tableloading" :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange" border>
            <el-table-column label="姓名" property="username"></el-table-column>
            <el-table-column label="加分标题" property="titlename"></el-table-column>
            <el-table-column label="加分类型" property="Type"></el-table-column>
            <el-table-column label="级别" property="Level"></el-table-column>
            <el-table-column label="年度" property="year"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <span class="operedit" @click="editClick(scope.row)"><el-icon>
                    <EditPen />
                  </el-icon>修改</span>
                <span class="operesee" @click="seeClick(scope.row)"><el-icon>
                    <Compass />
                  </el-icon>查看</span>
                <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?" @confirm="handledelete(scope.row)">
                  <template #reference>
                    <span class="operdel" size="small">
                      <el-icon>
                        <Delete />
                      </el-icon>删除</span>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>

          <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>
        </div>
      </div>
    </div>
    <!-- 修改 -->
    <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, watch } 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 { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
// 数据
const comprehensiveShow = ref(false);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  year: new Date().getFullYear(),
});
const rowId = ref(null);
const saveBtnShow = ref(true);
const title = ref("新增");
const bigHeight = ref(); //整个高度
// 树的数据
const tableData = ref([
]);
// 选择框
watch(
  () => listQuery.year,
  (val) => {
    if (val) {
      getListData();
    }
  }
);
function Searchdata () {
  listQuery.pageCurrent = 1
  getListData();
}
function reset () {
  listQuery.username = ''
  listQuery.year = new Date().getFullYear()
  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;
      tableData.value.forEach((item) => {
        if (item.type == '1') {
          item.Type = '安全论文'
        } if (item.type == '2') {
          item.Type = '表彰'
        }
        if (item.level == '1') {
          item.Level = '省部级'
        }
        if (item.level == '2') {
          item.Level = '地市级'
        }
        if (item.level == '3') {
          item.Level = '县局级'
        }
      })
      total.value = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  });
}
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");

// 分页
const total = ref(0);
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getListData();
};
//选择右侧部门
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.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 treeHeight = ref(""); // 树高度
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
  treeHeight.value = window.innerHeight - 187 + "px";
};

const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 300px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};

onMounted(() => {
  bigHeightFn();
});
</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 {
          display: flex;
        }
      }
    }
  }
}

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

  .el-table {
    height: 91%;
  }

  .fenye {
    top: 95%;
  }
}
</style>