<!-- 表格里的管理弹出框 -->
<template>
  <div>
    <el-dialog v-model="props.diaShow" :before-close="handleClose" width="60%" draggable>
      <template #default>
        <div class="tabBox">
          <!-- <div class="tabBox" style="margin-top: 48px"> -->
          <el-table :data="tableData" border stripe>
            <el-table-column type="index" width="50" label="序号" />
            <el-table-column property="subclassName" label="子项名称" />
            <el-table-column property="sortNum" label="排查项数量">
            </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.row)"
                  style="color: yellowgreen"
                  >修改</span
                > -->
                <popperConfirm></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>
        <LittleDialogTwo :title="title" :diaShow="innerShow" @changeVi="changeVi" :formValue="InnerForm" />
        <!-- <LittleDialogxc :title="title" :diaShow="litDiaShow" @changeVi="changeVi" /> -->
      </template>
      <template #title>
        <div>子项管理</div>
        <div @click="handleClose">
          <el-button type="primary">
            <el-icon>
              <Close />
            </el-icon>
          </el-button>
        </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>
        </div>
      </template> -->
    </el-dialog>
    <SubDialogxc :diaShow="subDiaShow2" @changeVi2="closeDialog" :glId="childId" />
  </div>
</template>

<script setup>
import SubDialogxc from "./subDialogxc";
// 引入
import {
  ref,
  onMounted,
  defineProps,
  defineEmits,
  getCurrentInstance,
  watch
} from "vue";
import LittleDialogTwo from "./littleDialogTwo.vue";
import popperConfirm from "./popperConfirm.vue";
import { getApi, deleteApi, putApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();

const { D_DBZ_YHDJ, D_BZ_SF, NSFBXSCTP, NJCXLY, NYHBZ } = proxy.$dict(
  "D_DBZ_YHDJ",
  "D_BZ_SF",
  "NSFBXSCTP",
  "NJCXLY",
  "NYHBZ"
);
const subDiaShow2 = ref(false);
// 数据
const props = defineProps({
  diaShow: {
    type: Boolean,
    default: true
  },
  glId: {
    type: String,
    default: ""
  }
});
const InnerForm = ref({});
// 点击管理的id
const childId = ref("");
const emits = defineEmits(["close"]);
const tableData = ref([]);
// 分页
const listQuery = ref({
  pageNum: 1,
  pageSize: 20
});
const total = ref(0);
const innerShow = ref(false);
// 控制"序号"
const innerStatus = ref(false);
const title = ref("");
// 管理
const handleManage = (index, row) => {
  subDiaShow2.value = true;
  childId.value = row.id;
};
// 方法
// 关闭弹窗
const closeDialog = () => {
  subDiaShow2.value = false;
};
// 关闭
const handleClose = () => {
  emits("close");
};
// 修改子组件的值
const changeVi = (val) => {
  innerShow.value = val;
  innerStatus.value = val;
};
const handleAdd = () => {
  innerShow.value = true;
  title.value = "新增排查项";
};
// 修改
const handleEdit = (row) => {

  innerShow.value = true;
  innerStatus.value = true;
  title.value = "修改";
  InnerForm.value = row;
};
// 获取排查项列表
const getPcxData = (id) => {
  getApi({ id: id }, "/mosty-jcgl/checkLib/getXczxList").then((res) => {

    tableData.value = res;
  });
};
watch(
  () => props.glId,
  (val) => {
    if (val) {
      getPcxData(val);
    }
  },
  {
    deep: true
  }
);
onMounted(() => {
  getPcxData(props.glId);
});
</script>

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

.newAdd {
  margin-top: 6px;
  position: absolute;
  right: 20px;
}

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

  height: 100%;
}

.fenye {
  top: 100%;
}

::v-deep .el-dialog__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
}
</style>