<template>
  <div class="usermanage">
    <!-- 组织机构信息 -->
    <div class="zzjgleft" :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 }">
        <MOSTY.DepartmentTree width="100%" placeholder="管理部门ID" clearable filterable :searchType="'01'"
          @getdeptData="getdeptId" />
      </div>
    </div>
    <div class="right" :style="{ width: rgBoxWid }">
      <div class="head">
        <div class="title">消防设施列表</div>
        <div class="search">
          <Search :searchArr="searchArr" @submit="onSearch">
            <el-button @click="addInfo"><el-icon size="small">
                <Plus />
              </el-icon>新增</el-button>
            <el-button type="primary" @click="export2Excel" v-loading="loadingShow">
              <el-icon>
                <Download />
              </el-icon>
              <span>导出</span>
            </el-button>
          </Search>
        </div>
      </div>
      <div class="bottom">
        <div class="bottomright">
          <div class="table" id="table_xfss">
            <MyTable :tableData="data.tableData" :tableColumn="data.tableColumn" :tableloading="tableloading"
              :tableConfiger="data.tableConfiger" @chooseData="chooseData">
              <template #devtype="{ row }">
                <dict-tag v-if="row.devtype" :options="XFSSTYPE" :value="row.devtype" :tag="false" />
                <span v-else>无</span>
              </template>
              <!-- 操作 -->
              <template #controls="{ row }">
                <span class="operesee" @click="seeInfo(row)">
                  <el-icon>
                    <Compass />
                  </el-icon>查看</span>
                <span class="operedit" @click="editInfo(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>
            </MyTable>
          </div>
          <div class="fenye">
            <Pages :pageConfiger="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize"></Pages>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import Search from "@/components/aboutTable/Search/index.vue";
import MyTable from "@/components/aboutTable/MyTable/index.vue";
import { getSysDictByCode } from "@/api/sysDict"; //引入封装数字字典接口
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";

import Pages from "@/components/aboutTable/Pages/index.vue";
import { ElMessage } from "element-plus";
import { exportXlsx, downloadImg } from "@/excel/Export2Excel.js";
import * as XLSX from "xlsx";
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
const emit = defineEmits("changePage");
const lfBoxWid = ref("300px");
const { proxy } = getCurrentInstance();
const { XFSSTYPE } = proxy.$dict("XFSSTYPE");
// 树的展开与折叠
const iconChange = ref(true);
const loadingShow = ref(false);
const searchArr = reactive([
  {
    showType: "input",
    prop: "name",
    placeholder: "请输入设备名称"
  }
]);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      label: "消防设施名称",
      prop: "devtype",
      showOverflowTooltip: true,
      sortable: false,
      showSolt: true
    },
    {
      label: "场所名称",
      prop: "sitename",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "部位名称",
      prop: "partname",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "安装时间",
      prop: "azsj",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "内部编号",
      prop: "nbbh",
      showOverflowTooltip: true,
      sortable: false
    },
    // {
    //   label: "维保单位",
    //   prop: "wbdw",
    //   showOverflowTooltip: true,
    //   sortable: false
    // },
    // {
    //   label: "维保联系人",
    //   prop: "wblxr",
    //   showOverflowTooltip: true,
    //   sortable: false
    // },
    // {
    //   label: "维保人电话",
    //   prop: "wbrdh",
    //   showOverflowTooltip: true,
    //   sortable: false
    // },
    {
      label: "登记日期",
      prop: "xtCjsj",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "责任部门",
      prop: "zrbmname",
      showOverflowTooltip: true,
      sortable: false
    },
    {
      label: "责任人",
      prop: "zrrname",
      showOverflowTooltip: true,
      sortable: false
    }
  ],
  tableConfiger: {
    showIndex: false,
    loading: false,
    height: '71vh',
    rowHeight: 32
  },
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  }
});
const rgBoxWid = ref("calc(100% - 300px)");
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 changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
const searchvalue = ref();
// 查询数据
const onSearch = (obj) => {
  listQuery.name = obj.name;
  getTableData();
};
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  catalogid: "311"
});
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  getTableData();
};

//导出表格
const export2Excel = () => {
  loadingShow.value = true;
  let title = {
    devtype: "消防设施名称",
    sitename: "场所名称",
    partname: "部位名称",
    azsj: "安装时间",
    nbbh: "内部编号",
    xtCjsj: "登记日期",
    zrbmname: "责任部门",
    zrrname: "责任人"
  };
  const params = {
    pageCurrent: 1,
    pageSize: 10999,
    orgcode: listQuery.orgcode
  };
  postApi(params, "/mosty-jcgl/equipment/queryEquipment").then(
    (res) => {
      if (res.records) {
        let data = res.records;
        if (data) {
          for (let i = 0; i < data.length; i++) {
            data[i].devtype = proxy.$getDictVal(data[i].devtype, XFSSTYPE);
          }
          let tablename = "消防设施列表.xlsx";
          exportXlsx(title, data, '消防设施列表', tablename);
        }
      }
    }
  ).finally(() => {
    loadingShow.value = false
  })
};
const tableloading = ref(false);
function getTableData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/equipment/queryEquipment`).then((res) => {
    if (res.records) {
      data.tableData = res.records;
      tableloading.value = false;
      data.pageConfiger.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  });
}
//新增
const addInfo = () => {
  console.log('查询')
  let arr = {
    title: "新增",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  };
  emit("changePage", "Details", arr);
};
//修改
const editInfo = (row) => {
  let arr = {
    title: "编辑",
    saveBtnShow: true,
    wbjlShow: true,
    jcrzShow: false,
    id: row.id ? row.id : null
  };
  emit("changePage", "Details", arr);
};
//查看
const seeInfo = (row) => {
  let arr = {
    title: "查看",
    saveBtnShow: false,
    wbjlShow: true,
    jcrzShow: true,
    id: row.id ? row.id : null
  };
  emit("changePage", "Details", arr);
};

//删除
const handledelete = (row) => {
  postApi({}, `/mosty-jcgl/equipment/deleteEquipmentOne/${row.id}`).then(
    (res) => {
      ElMessage.success("删除成功");
      getTableData();
    }
  );
};
const treeHeight = ref(""); // 树高度
// 树高度计算
const treeHeightFn = () => {
  treeHeight.value = window.innerHeight - 187 + "px";
};
onMounted(() => {
  treeHeightFn();
  window.onresize = function () {
    treeHeightFn();
  };
});
</script>

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

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }



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

    .head {
      display: flex;
      justify-content: space-between;
    }

    .fenye {
      top: 95%;
    }
  }
}

.bottom {
  height: 96%;
  overflow-y: scroll;
}
</style>