<!-- 排查项列表里的管理功能 -->
<template>
  <div>
    <el-dialog v-model="props.glShow" 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="itemName" label="排查内容项" />
            <el-table-column property="yhLv" label="隐患等级">

            </el-table-column>
            <el-table-column property="sm" label="隐患说明" />
            <el-table-column property="red" label="标红项" />
            <el-table-column property="pic" label="是否必须上传图片" />
            <el-table-column property="other" label="是否其它" />
            <el-table-column label="操作">
              <template #default="scope">
                <span class="operedit" @click="handleEdit(scope.$index, scope.row)" style="color: yellowgreen"><el-icon>
                    <EditPen />
                  </el-icon>修改</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>
      </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>

    <innerDialog :innerShow="innerShow" :innerStatus="innerStatus" :title="title" @changeVi="changeVi"></innerDialog>
  </div>
</template>

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

const props = defineProps({
  glShow: {
    type: Boolean,
    default: false
  },
  rowid: {
    type: String,
    default: null
  }
});
const emits = defineEmits(["changeGl"]);
const tableData = ref([]);
// 分页
const listQuery = ref({
  pageNum: 1,
  pageSize: 20
});
const total = ref(0);
const title = ref("");
const innerShow = ref(false);
const innerStatus = ref(false);

watch(() => props.rowid,
  (val) => {
    getTabData()
  }, {
  deep: true
}
)
const getTabData = () => {
  getApi({ id: props.rowid }, `/mosty-jcgl/checkLib/getXczxPcx`)
    .then((res) => {
      if (res) {
        tableData.value = res
      } else {
        tableData.value = []
      }

    })
}
const closeDialog = () => {
  emits("changeGl", false);
};
// 关闭
const handleClose = () => {
  emits("changeGl", false);
};
// 修改
const handleEdit = (index, row) => {
  innerShow.value = true;
  title.value = "修改";
  innerStatus.value = true;
};
// 新增
const handleAdd = () => {
  innerShow.value = true;
  title.value = "新增加排查项";
};
const changeVi = (val) => {
  innerShow.value = val;
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__body {
  height: 500px !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>