<template>
  <div>
    <div class="bigBox">
      <!-- 基础隐患排查 -->
      <div class="left" :style="{ width: lfBoxWid }">
        <div class="title">
          <div style="display: flex; align-items: center">
            <div style="padding-top: 5px; margin-right: 5px">
              <el-icon style="color: var(--el-color-primary) !important">
                <List />
              </el-icon>
            </div>
            <span class="zzjgxx" v-if="iconChange">基础隐患排查</span>
          </div>
          <el-icon @click="handleCollapse" v-show="iconChange">
            <DArrowLeft />
          </el-icon>
          <el-icon @click="handleCollapse" v-show="!iconChange">
            <DArrowRight />
          </el-icon>
        </div>
        <div class="treeBox" :style="{ height: treeHeight }">
          <el-tree ref="tree" node-key="id" :highlight-current="true" :data="treeData" :props="defaultProps"
            @node-click="handleNodeClick" />
        </div>
      </div>
      <div class="right" :style="{ width: rgBoxWid }">
        <div class="headBox" style="justify-content: space-between ">
          <div class="title">排查项</div>
        </div>
        <el-divider />
        <div class="btnBox">
          <el-button type="primary" @click="add">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>添加</span>
          </el-button>
        </div>
        <section class="eltab3">
          <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="loading" :isSelect="false"
            :isSort="false" :tableHeight="'100%'">
            <template #yhLv="{ row }">
              <dict-tag :options="D_DBZ_YHDJ" :value="row.yhLv" :tag="false"></dict-tag>
            </template>
            <template #yhFlag="{ row }">
              <dict-tag :options="NYHBZ" :value="row.yhFlag" :tag="false"></dict-tag>
            </template>
            <template #isPic="{ row }">
              <dict-tag :options="NSFBXSCTP" :value="row.isPic" :tag="false"></dict-tag>
            </template>
            <template #actions="{ 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 class="operdel" size="small">
                    <el-icon>
                      <Delete />
                    </el-icon>
                    删除</span>
                </template>
              </el-popconfirm>

            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
        </div>

      </div>
    </div>
    <!-- 编辑排查项 -->
    <InnerDialog :title="title" :innerShow="innerShow" @changeVi="changeVi" :dict="{ D_DBZ_YHDJ, NSFBXSCTP, NYHBZ }"
      :formValue="InnerForm" />
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
import InnerDialog from "../../components/innerDialog.vue";
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 loading = ref(false);
const treeData = ref([]); // 树的数据
const defaultProps = {
  children: "children",
  label: "zdmc"
};
const tableData = ref([]);
// 标识树
const tree = ref();
// 获取树节点的code
const treeId = ref("");
const treeName = ref("")
const treeLevel = ref(-1)
const InnerForm = ref(null)
// 分页
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10
});
const tableColumns = reactive([
  {
    title: "排查项",
    prop: "checklibName"
  },
  {
    title: "排查内容",
    prop: "itemName"
  },
  {
    title: "隐患等级",
    prop: "yhLv",
    slot: true
  },
  {
    title: "隐患说明",
    prop: "yhNote",

  },
  {
    title: "标红项",
    prop: "yhFlag",
  },
  {
    title: "是否必须上传图片",
    prop: "isPic",
    slot: true
  },
  {
    title: "动态情况",
    prop: "riskName",
    slot: true
  },
  {
    title: "责任部门",
    prop: "depname"
  },
  {
    title: "操作",
    prop: "actions",
    fixed: 'right',
    slot: true
  }
])
const innerShow = ref(false)
const title = ref('')
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");
// 初始化
onMounted(() => {
  getTreeData();
});
// 编辑排查项回调弹窗
const changeVi = (val) => {
  innerShow.value = val;
  getCheckLibPage();
};
// 添加排查分类
const add = () => {
  InnerForm.value = {
    checklibId: treeId.value,
    checklibName: treeName.value
  }
  innerShow.value = true;
  title.value = "新增排查项";

}
// 删除
const handleDelete = (row) => {
  postApi({}, `/mosty-jcgl/checklib/deletePcx/${row.id}`).then(res => {
    ElMessage.success("删除成功");
    getCheckLibPage()
  })
}
// 修改
const handleEdit = (row) => {
  innerShow.value = true;
  title.value = "修改排查项";
  InnerForm.value = { ...row };
};
// 方法
const handleCollapse = () => {
  iconChange.value = !iconChange.value;
  if (iconChange.value) {
    lfBoxWid.value = "300px";
    rgBoxWid.value = "calc(100% - 300px)";
  } else {
    lfBoxWid.value = "40px";
    rgBoxWid.value = "calc(100% - 40px)";
  }
};

// 请求基础管理的树的数据
const getTreeData = () => {
  getApi({}, "/mosty-jcgl/checklib/getBaseList").then((res) => {
    treeData.value = res;
    if (res[0].children.length > 0) {
      handleNodeClick(res[0].children[0]);
    } else {
      handleNodeClick(res[0]);
    }
    let id = res[0].id
    setTimeout(() => {
      tree.value.setCurrentKey(id);
    }, 200);
  });
};
// 点击树节点
const handleNodeClick = (e) => {
  treeId.value = e.dm
  treeName.value = e.zdmc
  treeLevel.value = e.level
  if (e.children.length === 0) getCheckLibPage();
};
// 获取排查清单列表数据
const getCheckLibPage = () => {
  listQuery.value.id = treeId.value
  loading.value = true;
  getApi(listQuery.value, "/mosty-jcgl/checklib/getCheckLibPage").then((res) => {
    tableData.value = res.records;
    listQuery.value.total = res.total;
    loading.value = false;
  }).finally(() => {
    loading.value = false;
  });
};

// 页码改变触发
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getCheckLibPage();
};
// pageSize 改变触发
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getCheckLibPage();
};
</script>

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

  .title {
    height: 39px;
    line-height: 39px;
    font-size: 18px;
    color: var(--el-color-primary);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    width: 300px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      height: calc(100vh - 164px);
      overflow: auto;
    }
  }

  .right {
    padding: 0 10px;
    margin: 0px 0 0 10px;
    background: #fff;

    .headBox {
      display: flex;
      align-items: center;
    }


  }
}

.eltab3 {
  height: calc(100vh - 310px);
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>