<template>
  <div>
    <MOSTY.PageTree :pageTitle="'消防重点部位列表'" :searchType="'03'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
        <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="loadingShow">
            <el-icon>
              <Download />
            </el-icon>
            <span>导出表格</span>
          </el-button>
        </div>
      </template>
      <template #table>
        <section :style="{ height: totalHeight }">
          <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading" :isSelect="true"
            :isSort="true" @SortChange="SortChange">
            <template #partname="{ row }">
              <div class="cell-content">{{ row.partname ? row.partname : row.qtmc }}</div>
            </template>
            <template #checktype="{ row }">
              <dict-tag v-if="row.checktype" :options="D_TB_JCYWLX" :value="row.checktype" :tag="false" />
              <span v-else>无</span>
            </template>
            <template #fireresisrating="{ row }">
              <dict-tag v-if="row.fireresisrating" :options="D_TB_NHDJ" :value="row.fireresisrating" :tag="false" />
              <span v-else>无</span>
            </template>
            <template #putUpFlag="{ row }">
              <dict-tag v-if="row.putUpFlag" :options="D_BZ_SF" :value="row.putUpFlag" :tag="false" />
              <span v-else>无</span>
            </template>

            <template #actions="{ row }">
              <span class="operedit" @click="handlexg(row)" v-if="isAuth">
                <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="handleSee(row)">
                <el-icon>
                  <View />
                </el-icon>查看</span>
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
        </div>
      </template>
    </MOSTY.PageTree>
    <!-- 新增 -->
    <div v-if="comprehensiveShow" class="dialog-box">
      <Xfzdbwxq :formData="formData" :zdlist="{
        D_BZ_SF, D_BZ_XFZDBWHZLX, D_BZ_XFZDBWWXDJ, D_BZ_QLYY
        , D_TB_NHDJ, D_BZ_HZQK
      }" :type="type" @changePage="saveSuccess" />
    </div>

  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { exportXlsx } from "@/excel/Export2Excel.js";
import Xfzdbwxq from "@/views/yxkzgl/xfaq/commonds/xfzdbwxq.vue";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getAuth } from "@/utils/tools.js";
import { useRouter } from "vue-router";
import { getItem } from "@/utils/storage";
const router = useRouter();
const { proxy } = getCurrentInstance();
const type = ref('add')
const { D_BZ_SF, D_BZ_XFZDBWHZLX, D_BZ_XFZDBWWXDJ, D_BZ_QLYY
  , D_TB_NHDJ, D_BZ_HZQK, D_TB_JCYWLX } = proxy.$dict("D_BZ_SF",
    "D_BZ_XFZDBWHZLX", "D_BZ_XFZDBWWXDJ", "D_BZ_QLYY", "D_TB_NHDJ", 'D_BZ_HZQK', "D_TB_JCYWLX");
const totalHeight = ref()
const comprehensiveShow = ref(false);
//查询条件
const searchArr = reactive([
  {
    showType: "input",
    prop: "partname",
    width: '250px',
    placeholder: '请输入部位名称进行查询'
  }
]);
const loadingShow = ref(false);
//查询条件
const formData = ref({
  title: ""
});

const tableData = ref([]);
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  type: '3' // 消防重点部位
});

const tableColumn = ref([
  {
    title: "部位名称",
    prop: "partname",
    slot: true,
    sortable: true
  },
  {
    title: "部位类型",
    prop: "checktype",
    sortable: true,
    slot: true
  },
  {
    title: "部位面积",
    prop: "area",
    sortable: true,
  },
  {
    title: "耐火等级",
    prop: "fireresisrating",
    slot: true,
    sortable: true,
  },
  {
    title: "是否张贴重点部位标志",
    prop: "putUpFlag",
    slot: true,
    sortable: true,
  },
  {
    title: "责任部门",
    prop: "deptname",
    sortable: true,
  },
  {
    title: "岗位负责人",
    prop: "postusername",
    sortable: true,
  },

  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const isAuth = ref(false)

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();
};
function onSearch(obj) {
  listQuery.pageCurrent = 1;
  pageConfiger.pageCurrent = 1;
  listQuery.partname = obj.partname;
  getListData();
}
//排序
function SortChange(prop, order) {
  if (prop == 'partname') {
    listQuery.sortField = 'id'
  } else {
    listQuery.sortField = prop
  }

  listQuery.sortOrder = order
  getListData();
}
//导出表格
const export2Excel = () => {
  loadingShow.value = true;
  let title = {
    partname: "部位名称",
    szwz: "所在位置",
    checktype: "部位类型",
    area: "部位面积",
    practitioner: "从业人员数量",
    firetype: "火灾种类",
    dangerlevel: "危险等级",
    fireresisrating: "耐火等级",
    establishreason: "确立消防重点部位原因",
    putUpFlag: "是否张贴重点部位标志",
    sourceOfDanger: "危险源情况",
    sourceOfFire: "火种情况",
    fsqcmeasures: "消防安全管理措施",
    postusername: "岗位负责人",
    deptname: "责任部门",
    contactnumber: "岗位负责人电话"
  };

  getApi(listQuery, "/mosty-jcgl/importantPart/exportData").then(
    async (res) => {
      if (res) {
        let data = res;
        if (data) {
          for (let i = 0; i < data.length; i++) {
            data[i].szwz = `${data[i].sitename ? data[i].sitename : ''}${data[i].buildingname ? '-' + data[i].buildingname : ''}${data[i].floorname ? '-' + data[i].floorname : ''}${data[i].partname ? '-' + data[i].partname : ''}`;
            data[i].checktype = proxy.$getDictVal(data[i].checktype, D_TB_JCYWLX);
            data[i].firetype = proxy.$getDictVal(data[i].firetype, D_BZ_XFZDBWHZLX);
            data[i].dangerlevel = proxy.$getDictVal(data[i].dangerlevel, D_BZ_XFZDBWWXDJ);
            data[i].fireresisrating = proxy.$getDictVal(data[i].fireresisrating, D_TB_NHDJ);
            data[i].establishreason = proxy.$getDictVal(data[i].establishreason, D_BZ_QLYY);
            data[i].putUpFlag = proxy.$getDictVal(data[i].putUpFlag, D_BZ_SF);
            data[i].sourceOfFire = proxy.$getDictVal(data[i].sourceOfFire, D_BZ_HZQK);
            if (typeof data[i].postusername === 'string') {
              data[i].postusername = data[i].postusername.replace('（null）', '')
            }
          }
          let tablename = "消防重点部位列表.xlsx";
          exportXlsx(title, data, '消防重点部位列表', tablename);
        } else {
          ElMessage.warning('暂无数据');
        }
      }
    }
  ).finally(() => {
    loadingShow.value = false
  })
};
// 获取表格数据
const tableloading = ref(false);
function getListData() {
  tableloading.value = true;
  getApi(listQuery, `/mosty-jcgl/importantPart/getPageList`).then(
    (res) => {
      if (res.records) {
        tableData.value = res.records.map(item => {

          if (typeof item.postusername === 'string') {
            item.postusername = item.postusername.replace('（null）', '')
          }
          return item
        });
        pageConfiger.total = res.total;
      } else {
        tableData.value = [];

      }
    }
  ).finally(() => {
    tableloading.value = false;
  });
}

//弹窗关闭
const close = () => {
  comprehensiveShow.value = false;
  getListData();
};
const close2 = () => {
  sbssShow.value = false;
  getListData();
};

//新增
function addInfo() {
  formData.value = {}
  type.value = 'add'
  formData.value.deptname = getItem("deptId").ssbmmc;
  formData.value.deptid = getItem("deptId").ssbmid;
  formData.value.title = '消防重点部位新增';
  formData.value.saveBtnShow = true
  comprehensiveShow.value = true;
}
// 新增成功
const saveSuccess = () => {
  formData.value = {}
  comprehensiveShow.value = false;
  getListData();
};
//修改
function handlexg(row) {
  type.value = 'exit'
  formData.value.id = row.id;
  formData.value.title = "消防重点部位修改";
  formData.value.saveBtnShow = true
  comprehensiveShow.value = true;
}
//详情
function handleSee(row) {
  type.value = 'see'
  formData.value.id = row.id;
  formData.value.title = "消防重点部位详情";
  formData.value.saveBtnShow = false
  comprehensiveShow.value = true;
}

//删除
function delInfo(row) {
  postApi(
    {},
    `/mosty-jcgl/importantPart/del/${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();
};

</script>

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