<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('add', null)" v-if='isAuth'>
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
        <el-button type="primary" @click="export2Excel" v-loading="loadingShow">
          <el-icon>
            <Download />
          </el-icon>
          <span>导出表格</span>
        </el-button>
      </div>
      <section class="eltab9">
        <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="false" @SortChange="SortChange" style="width: 100%;">
          <template #firebrigadetype="{ row }">
            <dict-tag v-if="row.firebrigadetype" :options="D_BZ_XFDLX" :value="row.firebrigadetype" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #actions="{ row }">
            <span class="operedit" v-if='isAuth' @click="addInfo('exit', row.id)" size="small"><el-icon>
                <EditPen />
              </el-icon>修改</span>
            <el-popconfirm v-if='isAuth' confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="delInfo(row)">
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="addInfo('see', row.id)" size="small"><el-icon>
                <View />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>
  <!-- 新增 -->
  <div v-if="comprehensiveShow" class="dialog-box">
    <Addcfdgl v-if="comprehensiveShow" :saveBtnShow="saveBtnShow" :rowId="editObj.id"
      :tbFireMembersList="editObj.tbFireMembersList" :deptData="deptData" @close="close" :title="editObj.title" />
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { exportXlsx } from "@/excel/Export2Excel.js";
import Addcfdgl from "@/views/yxkzgl/xfaq/commonds/addcfdgl.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getItem } from "@/utils/storage";
import { ElMessage } from "element-plus";
import Search from "@/components/aboutTable/Search/index.vue";
import Pages from "@/components/aboutTable/Pages/index.vue";
import { getAuth } from "@/utils/tools.js";
const { proxy } = getCurrentInstance();
// 数据
const { D_BZ_XFDLX } = proxy.$dict("D_BZ_XFDLX");
const comprehensiveShow = ref(false);
const loadingShow = ref(false);
const isAuth = ref(false)
//查询条件
const searchArr = reactive([
  {
    showType: "input",
    prop: "firebrigadename",
    width: '250px',
    placeholder: '请输入消防队名称进行查询'
  }
]);
const editObj = reactive({
  deptname: "",
  title: "",
  savebtn: true,
  seeimg: true,
  id: null,
  tbFireMembersList: [] //消防队成员
});
const tableData = ref([]);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
});
const tableColumn = ref([
  {
    title: "消防队名称",
    prop: "firebrigadename",
  },
  {
    title: "消防队类型",
    prop: "firebrigadetype",
    slot: true
  },
  {
    title: "消防队单位",
    prop: "orgname"
  },
  {
    title: "成立时间",
    prop: "establishtime"
  },
  {
    title: "最近调整时间",
    prop: "adjusttime",
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const total = ref(0);
const saveBtnShow = ref(true);
const fssbShow = ref(true);
onMounted(() => {
  isAuthorize()
});
// 是否可以操作
const isAuthorize = async () => {
  isAuth.value = await getAuth()
}
const deptData = ref({})
//获取部门数据
const getdeptId = (val) => {
  deptData.value = {
    orgid: val.id,
    orgname: val.orgname,
  }
  listQuery.orgid = val.id;
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  getListData();
};

function onSearch(obj) {
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  listQuery.firebrigadename = obj.firebrigadename;
  getListData();
}

// 获取表格数据
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  postApi(listQuery, `/mosty-jcgl/fireInformation/queryFireInformation`).then(
    (res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        pageConfiger.total = res.total;
      } else {
        tableData.value = [];
        tableloading.value = false;
      }
    }
  ).finally(() => {
    tableloading.value = false;
  });
}
//弹窗关闭
const close = () => {
  comprehensiveShow.value = false;
  getListData();
};


//新增
function addInfo(type, id) {
  if (type == 'add') {
    editObj.id = null;
    fssbShow.value = true;
    saveBtnShow.value = true;
    editObj.title = "消防队新增";
  } else if (type == 'exit') {
    editObj.title = "消防队修改";
    fssbShow.value = false;
    saveBtnShow.value = true;
    editObj.id = id
  } else {
    editObj.title = "消防队详情";
    editObj.id = id
    saveBtnShow.value = false;
  }
  comprehensiveShow.value = true;
}
//删除
function delInfo(row) {
  postApi(
    {},
    "/mosty-jcgl/fireInformation/deleteFireInformationOne/" + row.id
  ).then((res) => {
    ElMessage.success("删除成功");
    getListData();
  });
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getListData();
};
//导出表格
const export2Excel = () => {
  loadingShow.value = true;
  let title = {
    firebrigadename: "消防队名称",
    firebrigadetype: "消防队类型",
    orgname: "消防队单位",
    ssszname: "所属单位",
    establishtime: "成立时间",
    adjusttime: "最近调整时间"
  };
  const params = {
    pageCurrent: 1,
    pageSize: 10999,
    orgid: listQuery.orgid
  }
  postApi(params, "/mosty-jcgl/fireInformation/queryFireInformation").then(
    (res) => {
      if (res.records) {
        let data = res.records;
        if (data) {
          for (let i = 0; i < data.length; i++) {
            data[i].firebrigadetype = proxy.$getDictVal(
              data[i].firebrigadetype,
              D_BZ_XFDLX
            );
          }
          let tablename = "消防队管理列表.xlsx";
          exportXlsx(title, data, '消防队管理列表', tablename);
        }
      }
    }
  ).finally(() => {
    loadingShow.value = false
  })
};

</script>

<style lang="scss" scoped>
.from_box {
  display: flex;
  justify-content: space-between;

  .from_left {
    width: 25%;
  }
}

.el-form {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.bigBox {
  display: flex;

  .zy-right {
    margin-left: 14px;
    background: #fff;
  }
}

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