<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="treeRef" class="filter-tree" :props="endProps" node-key="id" :load="loadNode" lazy
            :default-expanded-keys="treemrData" @node-collapse="handleNodeCollapse" @node-click="nodeClick"
            :filter-node-method="filterNode" :data="treeData" />
        </div>
      </div>
      <div class="right" :style="{ width: rgBoxWid }">
        <div class="headBox" style="justify-content: space-between ">
          <div class="title">应急资源管理</div>
        </div>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <div class="btnBox">
          <el-button @click="addInfo"><el-icon size="small">
              <Plus />
            </el-icon>新增</el-button>
          <el-button type="primary" @click="export2Excel" v-loading="excelLoading">
            <el-icon>
              <Download />
            </el-icon>
            <span>导出</span>
          </el-button>
        </div>
        <section class="eltab3">
          <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
            :isSelect="true" :isSort="true">
            <!-- 用途 -->
            <template #emuses="{ row }">
              <dict-tag v-if="row.emuses" :options="D_TB_YJWZYT" :value="row.emuses" :tag="false" />
              <span v-else>无</span>
            </template>
            <!-- 操作 -->
            <template #actions="{ row }">
              <span class="operedit" @click="editInfo(row)"><el-icon>
                  <Compass />
                </el-icon>修改</span>
              <span class="operesee" @click="seeInfo(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="data.pageConfiger" @changeNo="changeNo" @changeSize="changeSize"></MOSTY.Pages>
        </div>

      </div>
    </div>
  </div>
</template>

<script setup>
// 引入
import { onMounted, ref, reactive, getCurrentInstance } from "vue";
import { getItem } from "@/utils/storage"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import { exportXlsx } from "@/excel/Export2Excel.js"
import * as MOSTY from "@/components/MyComponents/index";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance()
const { D_TB_YALX } = proxy.$dict("D_TB_YALX")
const emit = defineEmits("changePage")
const endProps = {
  children: "childDeptList",
  value: "id",
  label: "name",
  isLeaf: "leaf"
};
const loadingShow = ref(false)
const searchArr = reactive([
  {
    showType: "input",
    prop: "emname",
    width: '250px',
    placeholder: "请输入应急物资名称"
  }
]);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "预案名称",
      prop: "planname",
    },
    {
      title: "所属单位",
      prop: "orgname",
    },
    {
      title: "所属部门",
      prop: "deptname",
    },
    {
      title: "预案类型",
      prop: "plantype",
      slot: true
    },
    {
      title: "编制小组名称",
      prop: "compilegroup",
    },
    {
      title: "编制组长",
      prop: "groupusername",
    },
    {
      title: "编制组长所属部门",
      prop: "groupdeptname",
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  pageConfiger: {
    pageSize: 20,
    pageCurrent: 1,
    total: 0
  }
})
const tableloading = ref(false);
const excelLoading = ref(false)
const treeData = ref([]); // 树的数据
const node_had = ref([]);
const resolve_had = ref([]);
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");
const treemrData = ref([]);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20
})
const treeQuery = ref({
  parentid: "",
  type: '01',
});
// 初始化
onMounted(() => {
  getTreeData();
});
//获取场所树数据
function getTreeData() {
  getApi(treeQuery.value, "/mosty-jcgl/site/querySceneTree").then((res) => {
    if (res.length == 1) {
      res.forEach((element) => {
        treemrData.value.push(element.id);
      });
    }
    for (let i = 0; i < res.length; i++) {
      res[i].leaf = !res[i].hasChildren;
    }
    if (res.length > 0) treeData.value = res;

  });
}
//懒加载方法
async function loadNode(node, resolve) {
  treeQuery.value.parentid = node.data.id;
  treeQuery.value.type = node.data.type;
  if (node.level === 0) {
    node_had.value = node;
    resolve_had.value = resolve;
    getTreeData();
  }
  if (node.level >= 1) {
    getApi(treeQuery.value, "/mosty-jcgl/site/querySceneSiteTree").then(
      (res) => {
        for (let i = 0; i < res.length; i++) {
          res[i].leaf = !res[i].hasChildren;
        }
        resolve(res);
      }
    );
  }
}
const filterNode = (value, data) => {
  if (!value) return true;
  return data.name.includes(value);
};
const handleNodeCollapse = (nodeData, node) => {

}
const nodeClick = (node) => {
  const id = node.id;
  listQuery.orgcode = id;
  listQuery.pageCurrent = 1;
  getTableData();

};
// 方法
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 onSearch = (obj) => {
  listQuery.emname = obj.emname;
  getTableData();
};

//导出表格
const export2Excel = () => {
  excelLoading.value = true
  let title = {
    planname: '预案名称',
    emname: '名称',
    emspeamod: '规格型号',
    emcount: '数量',
    conditionsofuse: '使用条件',
    emstorage: '存放位置',
    emuses: '用途',
    ys: '运输',
    responsperson: '管理责任人',
    responsperphe: '联系电话',
    cycle: '维护周期',
    duty: '责任人职责'
  }
  let qyery = { ...listQuery }
  postApi(qyery, '/mosty-jcgl/emergencysupplies/excelData').then((res) => {
    if (res) {
      let data = res
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].emuses = proxy.$getDictVal(data[i].emuses, D_TB_YJWZYT);
          data[i].ys = '供应商运输到指定地点'
          data[i].cycle = '每月一次'
          data[i].duty = '按维护周期定期开展检查'
        }
        let tablename = `${listQuery.orgname}应急物资清单.xlsx`
        exportXlsx(title, data, `${listQuery.orgname}应急物资清单`, tablename);
        excelLoading.value = false
      }
      excelLoading.value = false
    }
  })
};
// 查询表格数据
function getTableData() {
  tableloading.value = true
  postApi(listQuery, `/mosty-jcgl/yabz/queryYabz`).then(res => {
    if (res.records) {
      data.tableData = res.records
      tableloading.value = false
      data.pageConfiger.total = res.total
    } else {
      data.tableData = []
      tableloading.value = false
    }
  }).finally(() => {
    tableloading.value = false
  })
}
//新增
const addInfo = () => {
  let arr = {
    title: "新增应急资源",
    saveBtnShow: true,
    wbjlShow: false,
    jcrzShow: false
  };
  emit("changePage", "AddOrEdite", arr);
};
//修改
const editInfo = (row) => {
  let arr = {
    title: "编辑应急资源",
    saveBtnShow: true,
    wbjlShow: true,
    jcrzShow: false,
    id: row.id ? row.id : null
  };
  emit("changePage", "AddOrEdite", arr);
};
const seeInfo = (row) => {
  let arr = {
    title: "查看应急资源",
    saveBtnShow: false,
    wbjlShow: true,
    jcrzShow: false,
    id: row.id ? row.id : null
  };
  emit("changePage", "AddOrEdite", arr);
}
//删除
const handledelete = (row) => {
  postApi({}, "/mosty-jcgl/emergencysupplies/deleteEmergencysuppliesOne/" + row.id).then(() => {
    ElMessage.success("删除成功");
    getTableData();
  });
};
</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 - 380px);
}

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