<template>
  <MOSTY.PageTree :pageTitle="'消防控制室列表'" :searchType="'03'" @getDeptId="getdeptId">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    </template>
    <template #table>
      <el-divider />
      <div class="btnBox">
        <el-button type="primary" @click="addInfo" v-if='isAuth'>
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
        <el-button type="primary" @click="export2Excel" v-loading="exportLoading">
          <el-icon>
            <Download />
          </el-icon>
          <span>{{ exportLoading ? "导出中" : "导出表格" }}</span>
        </el-button>
      </div>
      <section :style="{ height: totalHeight }">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="false" @SortChange="SortChange" style="width: 100%;">
          <template #partname="{ row }">
            {{ row.qtmc || row.partname }}
          </template>
          <template #actions="{ row }">
            <span class="operedit" v-if='isAuth' @click="editInfo('edit', row)"><el-icon>
                <EditPen />
              </el-icon>修改</span>
            <span class="operesee" @click="editInfo('see', row)">
              <el-icon>
                <View />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
        </MOSTY.Pages>
      </div>

    </template>
  </MOSTY.PageTree>
  <!-- 新增 -->
  <div v-if="comprehensiveShow" class="dialog-box">
    <positionDialog :formData="formData" @saveSuccess="saveSuccess" :type="'wxkzs'" />
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref } from "vue";
import positionDialog from "@/components/dialog/positionindex.vue";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getItem } from "@/utils/storage";
import { getAuth } from "@/utils/tools.js";
const comprehensiveShow = ref(false);
const isAuth = ref(false)
const exportLoading = ref(false)
const totalHeight = ref()
const formData = ref({
  title: ""
});
const tableColumn = ref([
  {
    title: "所属单位",
    prop: "orgname",
  },
  {
    title: "所属部门",
    prop: "deptname"
  },
  {
    title: "控制室名称",
    prop: "partname",
    slot: true
  },
  {
    title: "责任人",
    prop: "postusername"
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const tableData = ref([]);
// 分页
const listQuery = reactive({
  type: '1',
  pageCurrent: 1,
  pageSize: 20
});
//查询条件
const searchArr = reactive([
  {
    showType: "input",
    prop: "partname",
    width: '250px',
    placeholder: '请输入消防控制室名称进行查询'
  }
]);
// 初始化
onMounted(() => {
  totalHeight.value = `calc(100vh - 380px)`
  isAuthorize()
});
// 是否可以操作
const isAuthorize = async () => {
  isAuth.value = await getAuth()
}
//获取部门数据
const getdeptId = (val) => {
  listQuery.orgcode = val.id;
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getListData();
};
//导出表格
const export2Excel = () => {
  exportLoading.value = true
  let title = {
    orgname: "所属单位",
    deptname: "所属部门",
    partname: "控制室名称",
    postusername: "责任人姓名",
  };
  postApi(listQuery, "/mosty-jcgl/part/queryXfAndWxByOrgcode").then(
    (res) => {
      if (res.records) {
        let data = res.records;
        if (data) {
          let tablename = "消防控制室列表.xlsx";
          exportXlsx(title, data, '消防控制室列表', tablename);
          exportLoading.value = false
        }
      }
    }
  ).finally(() => {
    exportLoading.value = false
  });
};

function onSearch(obj) {
  listQuery.pageCurrent = 1
  pageConfiger.pageCurrent = 1
  listQuery.partname = obj.partname
  getListData()
}
// 获取表格数据
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/part/queryXfAndWxByOrgcode`).then(
    (res) => {
      if (res.records) {
        tableData.value = res.records;
        pageConfiger.total = res.total;
      } else {
        tableData.value = [];
      }
    }
  ).finally(() => {
    tableloading.value = false;
  });
}
//新增
function addInfo() {
  formData.value = {}
  formData.value.deptname = getItem("deptId").ssbmmc;
  formData.value.deptid = getItem("deptId").ssbmid;
  formData.value.checktype = '100105020000';
  formData.value.type = 'wxkzs';
  formData.value.title = '消防控制室新增';
  formData.value.saveBtnShow = true
  comprehensiveShow.value = true;
}
//修改
function editInfo(type, row) {
  getApi({ id: row.id }, "/mosty-jcgl/part/queryScenePartById").then((res) => {
    if (res) {
      formData.value = res;
      formData.value.type = 'wxkzs';
      if (res.sfcq == '1') {
        formData.value.publicarea = '1'
      }
      if (type == 'edit') {
        formData.value.title = "消防控制室修改";
        formData.value.saveBtnShow = true
      }
      else {
        formData.value.title = "消防控制室详情";
        formData.value.saveBtnShow = false
      }
      comprehensiveShow.value = true;
    }
  }).finally(() => {
    comprehensiveShow.value = true;
  });
}
// 新增成功
const saveSuccess = () => {
  formData.value = {}
  comprehensiveShow.value = false;
  getListData();
};
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getListData();
};
</script>

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