<template>
  <div class="bigBox pd10" :style="{ height: bigHeight }">
    <div class="dialog-footer tr mb10 mr20 flex just-between">
      <div style="color:#333" class="f16 strong pl15">
        {{ props.formValue.checklibName }}
      </div>
      <div>
        <el-button type="primary" @click="add">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
        <el-button @click="handleClose" type="primary">
          <el-icon>
            <DocumentDelete />
          </el-icon>
          <span>关闭</span>
        </el-button>
      </div>
    </div>
    <div class="flex ww99 just-between" style="margin: 0 auto;">
      <div class="tabBox_table">
        <el-table ref=" multipleTableRef" stripe :data="tableDataFather" v-loading="loadingFather" element-loading-text="数据加载中..." style="width: 100%" border>
          <el-table-column property="checklibName" label="排查项" width="100px" />
          <el-table-column property="itemName" label="排查内容" />
          <el-table-column property="yhLv" label="隐患等级" width="150px">
            <template #default="{ row }">
              <dict-tag :options="props.dict.D_DBZ_YHDJ" :value="row.yhLv" :tag="false"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150px">
            <template #default="scope">
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要应用?" @confirm="handleQuote(scope.row)">
                <template #reference>
                  <span class="operedit"><el-icon>
                      <EditPen />
                    </el-icon>应用</span>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination class="pagination" @size-change="handleSizeChangeFather" @current-change="handleCurrentChangeFather" :current-page="listQueryFather.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQueryFather.pageSize" layout="total, prev, pager, next, sizes, jumper" :total="totalFather"></el-pagination>
        </div>
      </div>
      <div class="tabBox_table">
        <el-table ref="multipleTableRef" stripe :data="tableDataSon" v-loading="loadingSon" element-loading-text="数据加载中..." style="width: 100%" border>
          <el-table-column property="itemName" label="排查内容" />
          <el-table-column property="yhLv" label="隐患等级" width="150px">
            <template #default="{ row }">
              <dict-tag :options="props.dict.D_DBZ_YHDJ" :value="row.yhLv" :tag="false"></dict-tag>
            </template>
          </el-table-column>
          <el-table-column property="yhNote" label="隐患说明">
          </el-table-column>
          <el-table-column label="操作" width="150px">
            <template #default="{row}">
              <span class="operedit" @click="handleEdit(row)"><el-icon>
                  <EditPen />
                </el-icon>修改</span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?" @confirm="handleDelete(row)">
                <template #reference>
                  <span span class="operdel"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-popconfirm>

            </template>
          </el-table-column>
        </el-table>
        <div class="fenye">
          <el-pagination class="pagination" @size-change="handleSizeChangeSon" @current-change="handleCurrentChangeSon" :current-page="listQuerySon.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="listQuerySon.pageSize" layout="total, prev, pager, next, sizes, jumper" :total="totalSon"></el-pagination>
        </div>
      </div>
    </div>
    <!-- 编辑排查项 -->
    <InnerDialog :title="title" :innerShow="innerShow" @changeVi="changeVi" :dict="{D_DBZ_YHDJ:props.dict.D_DBZ_YHDJ,NSFBXSCTP:props.dict.NSFBXSCTP, NYHBZ:props.dict.NYHBZ}" :formValue="InnerForm" />
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, defineEmits, watchEffect, defineProps } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import InnerDialog from "@/views/fxgk/components/innerDialog.vue";
import { ElMessage } from "element-plus";
// 数据
const bigHeight = ref(); //整个高度
const loadingFather = ref(false);
const loadingSon = ref(false)
const tableDataFather = ref([]);
const tableDataSon = ref([])
const InnerForm = ref(null)
// 父级分页
const listQueryFather = ref({
  pageCurrent: 1,
  pageSize: 10
});
// 子级分页
const listQuerySon = ref({
  pageCurrent: 1,
  pageSize: 10
});
const innerShow = ref(false)
const totalFather = ref(0)
const totalSon = ref(0)
const title = ref('新增排查项')
const props = defineProps({
  formValue: {
    type: Object,
    default: {}
  },
  dict: {
    type: Object,
    default: { D_DBZ_YHDJ: [], NSFBXSCTP: [], NYHBZ: [] }
  }
});
const emits = defineEmits(["close"])
// 初始化
onMounted(() => {
  bigHeightFn();
});
//新增
const add = () => {
  innerShow.value = true;
  InnerForm.value = props.formValue
}
// 编辑排查项回调弹窗
const changeVi = (val) => {
  innerShow.value = val;
  listQuerySon.value.pageCurrent = 1
  getCheckLibPageSon();
};
//关闭弹窗
const handleClose = () => {
  emits("close")
}
// 删除
const handleDelete = (row) => {
  postApi({}, `/mosty-jcgl/checklib/deletePcx/${row.id}`).then(res => {
    ElMessage.success("删除成功");
    getCheckLibPageSon();
  })
}
// 修改
const handleEdit = (row) => {
  innerShow.value = true;
  title.value = "修改排查项";
  InnerForm.value = { ...row };
};
// 应用
const handleQuote = (row) => {
  row = { ...row, parentId: row.id, parentChecklibId: row.checklibId, parentChecklibName: row.checklibName, checklibId: props.formValue.checklibId, checklibName: props.formValue.checklibName }
  postApi(row, "/mosty-jcgl/checklib/addPcx").then((res) => {
    ElMessage.success("应用成功");
    listQuerySon.value.pageCurrent = 1
    listQueryFather.value.pageCurrent = 1
    getCheckLibPageSon();
    getCheckLibPage()
  });
};
const bigHeightFn = () => {
  bigHeight.value = window.innerHeight - 147 + "px";
};
// 获取父级排查清单列表数据
const getCheckLibPage = () => {
  if (props.formValue.checklibId) {
    // let id = props.formValue.checklibId.replace(/(00)+$/, '')
    // id = id.substring(0, id.length - 2)
    // id = String(id).padEnd(12, '0')
    listQueryFather.value.id = props.formValue.checklibId
    loadingFather.value = true;
    getApi(listQueryFather.value, "/mosty-jcgl/checklib/getCheckLibPageNoUse").then((res) => {
      tableDataFather.value = res.records;
      totalFather.value = res.total;
    }).finally(() => {
      loadingFather.value = false;
    });
  }
};
// 获取子集排查清单列表数据
const getCheckLibPageSon = () => {
  if (props.formValue.checklibId) {
    listQuerySon.value.id = props.formValue.checklibId
    loadingSon.value = true;
    getApi(listQuerySon.value, "/mosty-jcgl/checklib/getCheckLibPage").then((res) => {
      tableDataSon.value = res.records;
      totalSon.value = res.total;
    }).finally(() => {
      loadingSon.value = false;
    });
  }
};


// 父级页码改变触发
const handleCurrentChangeFather = (currentPage) => {
  listQueryFather.value.pageCurrent = currentPage;
  getCheckLibPage();
};
// 父级pageSize 改变触发
const handleSizeChangeFather = (currentSize) => {
  listQueryFather.value.pageSize = currentSize;
  getCheckLibPage();
};
// 子级页码改变触发
const handleCurrentChangeSon = (currentPage) => {
  listQuerySon.value.pageCurrent = currentPage;
  getCheckLibPage();
};
// 子级pageSize 改变触发
const handleSizeChangeSon = (currentSize) => {
  listQuerySon.value.pageSize = currentSize;
  getCheckLibPage();
};
watchEffect(() => {
  getCheckLibPage()
  getCheckLibPageSon()
})
</script>

<style lang="scss" scoped>
.bigBox {
  display: unset !important;
}
.tabBox_table {
  height: calc(100vh - 195px);
  border-left: 0 !important;
  width: 49.7%;
  .el-table {
    height: 91%;
  }

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