<template>
  <div>

    <MOSTY.PageTree :pageTitle="null" :searchType="'03'" @getDeptId="changedept">
      <template #serach>

      </template>
      <template #table>
        <div style="display: flex;">
          <div class="tabBox" style="width: 40%;">
            <div class="titleBox">
              <div class="btnBox">
                <div>
                  <div v-if="ssdwmc" style="color:blue">
                    <span>{{ ssdwmc }}</span>
                  </div>
                </div>
              </div>
            </div>
            <section class="eltab3">
              <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading"
                :isSelect="false" :isSort="false" :tableHeight="'100%'" @SortChange="SortChange">
                <template #actions="{ row }">
                  <span class="operesee" @click="cangeli(row)">
                    <el-icon>
                      <View />
                    </el-icon>
                    查看
                  </span>

                </template>
              </MOSTY.Table>
            </section>
          </div>
          <div class="tabBox ml10" style="width: 60%;">
            <div class="titleBox">
              <div class="btnBox">
                <div>
                  <div v-if="orgname" style="color:blue">
                    <span>{{ orgname }}</span>
                    <span>——</span>
                    <span>负责区域/设备</span>
                  </div>
                </div>
              </div>
            </div>
            <section class="eltab4">
              <MOSTY.Table :table-columns="tableColumns2" :tableData="tableData2" :tableloading="tableloading2"
                :isSelect="false" :isSort="false" :tableHeight="'100%'" @SortChange="SortChange">
                <template #actions="{ row }">
                  <span class="operesee" @click="changepz(row)">
                    <el-icon>
                      <EditPen />
                    </el-icon>
                    配置
                  </span>
                </template>
              </MOSTY.Table>
            </section>
            <div class="fenye">
              <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
            </div>
          </div>
        </div>

      </template>
    </MOSTY.PageTree>

    <!-- 详情 -->
    <div v-if="comprehensiveShow" class="dialog-box">
      <BmTemplate @close="closeEven" :Row="lival" :orgcode="listQuery.orgid" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, getCurrentInstance } from "vue";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi } from "@/api/tobAcco_api.js";
import BmTemplate from "./components/bmTemplate.vue";
import { getItem } from "@/utils/storage";
const { proxy } = getCurrentInstance();
const { D_TB_BMJCLX } = proxy.$dict("D_TB_BMJCLX");
const comprehensiveShow = ref(false);
const deptId = ref(getItem("deptId").ssdwid)
const bigHeight = ref();
const orgname = ref(null)
const ssdwmc = ref(null)
const tableColumns = reactive([
  {
    title: "部门",
    prop: "orgName"
  },
  {
    title: "场所",
    prop: "cs"
  },
  {
    title: "部位",
    prop: "ps",
  },
  {
    title: "办公区域",
    prop: "bgqy",

  },
  {
    title: "设备",
    prop: "sb",
  },
  {
    title: "操作",
    prop: "actions",
    fixed: 'right',
    slot: true
  }
])
const tableColumns2 = reactive([
  {
    title: "名称",
    prop: "objname"
  },
  {
    title: "部位类别",
    prop: "zdmc"
  },
  {
    title: "负责人",
    prop: "username",
  },
  {
    title: "公司标准",
    prop: "count",

  },
  {
    title: "自定义标准",
    prop: "zdyCount",
  },
  {
    title: "操作",
    prop: "actions",
    fixed: 'right',
    slot: true
  }
])
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  orgid: "",
});
const tableloading = ref(false);
const tableloading2 = ref(false);
const tableData = ref([]);
const tableData2 = ref([]);
const lival = ref(null);
// 初始化
onMounted(() => {
  getTableData(deptId.value);
});

function changedept(val) {
  ssdwmc.value = val.orgname
  getTableData(val.id.replace("XN", ""));
}
// 分页查询列表
function getTableData(orgcode) {
  tableloading.value = true;
  getApi({ orgcode }, "/mosty-jcgl/deptCheck/getList").then((res) => {
    if (res) {
      tableloading.value = false;
      tableData.value = res;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
function cangeli(row) {
  orgname.value = row.orgName
  listQuery.orgid = row.id
  tableloading2.value = true;
  getRightData()
}
// 获取右侧数据
function getRightData() {
  getApi(listQuery, '/mosty-jcgl/deptCheck/getInfo').then(res => {
    if (res) {
      tableData2.value = res.records
      listQuery.total = res.total
    }
  }).finally(() => {
    tableloading2.value = false;
  });
}
//配置
function changepz(val) {
  lival.value = val;
  comprehensiveShow.value = true;
}

function closeEven() {
  comprehensiveShow.value = false;
  getRightData()
}
//分页
const handleSizeChange = (val) => {
  listQuery.pageSize = val;
  getRightData();
};
const handleCurrentChange = (val) => {
  listQuery.pageCurrent = val;
  getRightData();
};
</script>

<style lang="scss" scoped>
.eltab3 {
  height: calc(100vh - 200px);
}

.eltab4 {
  height: calc(100vh - 237px);
}
</style>