<!-- 表格里的管理弹出框 -->
<template>
  <div>
    <el-dialog v-model="props.diaShow" title="排查库管理" :before-close="closeDialog" width="1200px" draggable>
      <template #default>
        <div class="tabBox" style="margin-top: 40px">
          <el-table :data="tableData" stripe border>
            <el-table-column type="index" width="50" label="序号" />
            <el-table-column property="subclassName" label="排查内容" />
            <el-table-column property="count" label="隐患等级" />
            <el-table-column property="count" label="分类" />
            <el-table-column property="count" label="隐患类别" />
            <el-table-column label="操作">
              <template #default="scope">
                <span class="operate" @click="handleEdit(scope.$index, scope.row)" style="color: yellowgreen">修改</span>
                <span class="operate" @click="handleManage(scope.$index, scope.row)"
                  style="color: yellowgreen">删除</span>
              </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>
      </template>
      <template #footer>
        <div class="dialog-footer">

          <el-button class="newAdd" type="primary" @click="handleAdd">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>新增</span>
          </el-button>
          <el-button @click="handleClose" type="primary">
            <el-icon>
              <Close />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 新增排查库管理 -->
    <AddpckDialog :title="title" :diaShow="litDiaShow" @changeVi="changeVi" @save="save">
    </AddpckDialog>
    <pcSon :glShow="glShow" @changeGl="changeGl"></pcSon>
  </div>
</template>

<script setup>
// 引入
import { ref, onMounted, defineProps, defineEmits, watch } from "vue";
import AddpckDialog from "./AddpckDialog.vue";
import pcSon from "./pcSon.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";

// 数据

const props = defineProps({
  diaShow: {
    type: Boolean,
    default: false
  },
  glId: {
    type: String,
    default: ""
  }
});
const emits = defineEmits(["closeEvent"]);
const tableData = ref([]);
// 分页
const listQuery = ref({
  pageNum: 1,
  pageSize: 20,
  riskPointId: ""
});
const total = ref(0);
const title = ref("新增子项");
const litDiaShow = ref(false);
const glShow = ref(false);

// 方法

const closeDialog = () => {
  emits("closeEvent");
};
// 关闭
const handleClose = () => {
  emits("closeEvent");
};
// 修改
const handleEdit = () => {
  litDiaShow.value = true;
  title.value = "排查库修改";
};
// 新增
const handleAdd = () => {
  litDiaShow.value = true;
  title.value = "排查库新增";
};
const changeVi = (val) => {
  litDiaShow.value = val;
};
// 管理
const handleManage = () => {
  glShow.value = true;
};
const changeGl = (val) => {
  glShow.value = val;
};

// 新增和修改保存
const save = (val) => {
  if (title.value === "新增") {
    postApi(
      { id: props.glId, subclassName: val },
      "/mosty-jcgl/checkLib/addXczx"
    ).then((res) => {
      getTabData();
    });
  }
  if (title.value === "修改") {
    getApi({ id: props.glId, subclassName: val, sortNum: 0 }).then((res) => {
    });
  }
};

// 子项管理列表数据
const getTabData = () => {
  listQuery.value.riskPointId = props.glId;
  getApi(listQuery.value, `/mosty-jcgl/yhpcCell/pckglList`).then((res) => {
    tableData.value = res.list;
  });
};

watch(
  () => props.glId,
  (val) => {
    getTabData();
  },
  {
    deep: true
  }
);

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

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 500px;
}

::v-deep .el-dialog__footer {
  margin-top: 45px !important;
}

.newAdd {
  position: absolute;
  top: 60px;
  right: 20px;
}

.el-table {
  border-left: 1px solid green;
  border-right: 1px solid green;

  height: 100%;
}

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