<template>
  <div>
    <div class="bigBox" :style="{ height: bigHeight }">

      <div class="right">
        <!-- 头部 -->
        <div class="titleBox">
          <div class="title">综合检查模板</div>
          <div class="btnBox">
            <el-input v-model="listQuery.tname" placeholder="请输入模板名称" />
            <el-button style="margin-left: 10px" type="primary" @click="searchHander">
              <el-icon>
                <Search />
              </el-icon>
              <span>查询</span>
            </el-button>
            <el-button type="primary" @click="addHander">
              <el-icon>
                <CirclePlus />
              </el-icon>
              <span>新增</span>
            </el-button>
            <el-button type="primary" @click="CloseEvent">
              <el-icon>
                <Back />
              </el-icon>
              <span>返回</span>
            </el-button>
          </div>
        </div>

        <!-- 表格 -->
        <div class="tabBox">
          <el-table ref="multipleTableRef" :data="tableData" stripe style="width: 100%"
            @selection-change="handleSelectionChange" border>
            <el-table-column label="模板名称" property="tname"></el-table-column>
            <el-table-column label="配置人" property="xtZhgxr"></el-table-column>
            <el-table-column label="基础数量" property="jccount"></el-table-column>
            <el-table-column label="配置时间" property="xtZhgxsj"></el-table-column>
            <el-table-column label="操作">
              <template #default="scope">
                <span class="operate" @click="handleManage(scope.$index, scope.row)"
                  style="color: yellowgreen">检查内容配置</span>
                <span class="operate" @click="handleEdit(scope.$index, scope.row)" style="color: yellowgreen">修改</span>
                <popperConfirm :delContent="delContent" :delTitle="delTitle" @Delete="Delete(scope.$index, scope.row)">
                </popperConfirm>
              </template>
            </el-table-column>
          </el-table>

          <div class="fenye">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="listQuery.page" :page-sizes="[2, 5, 10, 20]" :page-size="listQuery.size"
              layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- <littleDialog :title="title" :diaShow="subDiaShow" @changeVi="changeVi" @save="save" :xgName="xgName">
    </littleDialog> -->
    <!-- <subDialog2 :diaShow="subDiaShow2" @changeVi2="changeVi2" :glId="glId"></subDialog2> -->
    <!-- 综合编辑配置 -->
    <div v-if="comprehensiveShow" class="dialog-box">
      <Configuration @close="close" :tabId="tabId" />
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, nextTick } from "vue";
// import littleDialog from "../components/littleDialog.vue";
// import subDialog2 from "../components/subDialog2.vue";
import popperConfirm from "../components/popperConfirm.vue";
import Configuration from "./components/configuration.vue";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";

const emits = defineEmits(["close"]);

// 数据
const bigHeight = ref(); //整个高度
const tabId = ref("");
const defaultHighlightedKey = ref("1");
const tableData = ref([]);
const comprehensiveShow = ref(false);
// 标识树
const tree = ref();
// 获取树节点的code
const treeCode = ref("JCGLYH-207");
// 控制外层新增弹出框的可见与可不见
const subDiaShow = ref(false);
// 控制表格里管理弹出框可见与不可见
const subDiaShow2 = ref(false);
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
  tname: ""
});
const total = ref(0);
const title = ref("");
const xgName = ref("");
// 外层修改时的id
const xgId = ref("");
// 管理ID
const glId = ref("");
// 是否删除
const delTitle = ref("是否确认删除当前项?");
const delContent = ref("删除");
// 分页
const handleSizeChange = (val) => {
  listQuery.value.pageSize = val;
  getPcData();
};
// 分页码
const handleCurrentChange = (cur) => {
  listQuery.value.pageCurrent = cur;
  getPcData();
};
const token = ref("");

// 关闭页面
const close = () => {
  comprehensiveShow.value = false;
};
// 方法
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};

//关闭综合配置表
const CloseEvent = () => {
  emits("close");
};

// 获取排查清单列表数据
const getPcData = () => {
  postApi(listQuery.value, "/mosty-jcgl/overalltemplateitem/getListPc").then(
    (res) => {
      tableData.value = res.records;
      total.value = res.total;
    }
  );
};
// 查询
const searchHander = () => {
  getPcData();
};
// 获取排查清单列表数据
const getMbData = () => {
  postApi(
    { Authorization: token.value, pageSize: 10, pageCurrent: 1 },
    "/mosty-jcgl/overalltemplateitem/getListPc"
  ).then((res) => {
    // tableData.value = res;
  });
};
// 外层新增
const addHander = () => {
  title.value = "新增";
  subDiaShow.value = true;
};
// 接收外层新增保存
const save = (val) => {
  if (title.value === "新增") {
    postApi(
      { tname: val },
      "/mosty-jcgl/overalltemplateitem/addNameConfirm"
    ).then((res) => {
      getPcData(treeCode.value);
    });
  }
  if (title.value === "修改") {
    postApi(
      { tname: val },
      "/mosty-jcgl/overalltemplateitem/addNameConfirm"
    ).then((res) => {
      getPcData();
    });
  }
};
// 关闭弹窗(在子组件可以修改父组件的值)
const changeVi = (val) => {
  subDiaShow.value = val;
  xgName.value = "";
};
const changeVi2 = (val) => {
  subDiaShow2.value = val;
};
// 管理
const handleManage = (index, row) => {
  tabId.value = row.id;
  comprehensiveShow.value = true;
};

// 修改
const handleEdit = (index, row) => {
  title.value = "修改";
  subDiaShow.value = true;
  xgName.value = row.tname;
  xgId.value = row.id;
};
// 删除排查清单的某一项(传给子组件)
const Delete = (index, row) => {
  deleteApi({}, `/mosty-jcgl/pcqd/delPcqd/${row.id}`).then((res) => {
    getPcData(treeCode.value);
  });
};

onMounted(() => {
  bigHeightFn();
  getPcData();
  getMbData();
  token.value = localStorage.getItem("token");
});
</script>

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

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
  }

  .left {
    width: 300px;
    // height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--el-color-primary);

    .treeBox {
      margin-top: 15px;
    }
  }

  .right {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
  }

  .btnBox {
    display: flex;
  }
}

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

  .el-table {
    height: 91%;
  }

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