<template>
  <MOSTY.PageTree :pageTitle="'危险作业场所登记列表'" :searchType="'03'" @getDeptId="getdeptData">
    <template #serach>
      <div class="tab-container">
        <el-tabs v-model="activeTab" type="card" @tab-click="onTabClick">
          <el-tab-pane :label="item.label" :name="item.value" v-for="(item, i) in D_BZ_WXZYCSLX" :key="i" />
        </el-tabs>
      </div>
      <el-divider style="margin-top:none !important;" />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />

      <section class="button">
        <el-button @click="addInfo"><el-icon size="small">
            <Plus />
          </el-icon>新增</el-button>
      </section>
    </template>
    <template #table>
      <section style="height: calc(100vh - 435px);">
        <MOSTY.Table :tableData="tableData" :table-columns="tableColumn" :tableloading="tableloading"
          :tableConfiger="tableConfiger">
          <template #type="{ row }">
            <span>{{ row.type == '01' ? '场所' : '设备' }}</span>
          </template>
          <template #spaceHazardFactors="{ row }">
            <span>{{ changeDanger(row) }}</span>
          </template>
          <template #stifleWay="{ row }">
            <dict-tag v-if="row.stifleWay" :options="D_BZ_XZFS" :value="row.stifleWay" :tag="false" />
          </template>
          <template #sblx="{ row }">
            <dict-tag v-if="row.sblx" :options="D_BZ_WXZYCSSBLX" :value="row.sblx" :tag="false" />
          </template>
          <template #spaceAccidentType="{ row }">
            <dict-tag v-if="row.spaceAccidentType" :options="D_BZ_KNZCDSGLB" :value="row.spaceAccidentType"
              :tag="false" />
          </template>
          <template #spaceType="{ row }">
            <dict-tag v-if="row.spaceType" :options="D_BZ_YXKJLB" :value="row.spaceType" :tag="false" />
          </template>

          <!--操作-->
          <template #actions="{ row }">
            <span class="operedit" @click="handleEdit(row)">
              <el-icon>
                <EditPen />
              </el-icon>编辑</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="handleDel(row)">
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>
                  删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="handleSee(row, 'see')"><el-icon>
                <Compass />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
      </div>
    </template>
  </MOSTY.PageTree>
  <!-- 新增 -->
  <div v-if="isAddEditShow" class="dialog-box">
    <AddEdit :saveBtnShow="saveBtnShow" :editObj="editObj.editObj" @close="close" :type="activeTab"
      :title="editObj.title" />
  </div>
</template>
<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import AddEdit from "./addEdit.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getItem } from "@/utils/storage";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const { D_BZ_XZFS, D_BZ_WXZYCSLX, D_BZ_WXZYCSSBLX, D_BZ_KNZCDSGLB, D_BZ_YXKJLB, D_TB_YHWHYS } = proxy.$dict("D_BZ_XZFS", "D_BZ_WXZYCSLX", "D_BZ_WXZYCSSBLX", "D_BZ_KNZCDSGLB", "D_BZ_YXKJLB", "D_TB_YHWHYS");
const searchArr = reactive([
  {
    showType: "input",
    prop: "name",
    placeholder: "请输入危险作业场所名称"
  }
])
const activeTab = ref('01')

const tableColumn1 = reactive([
  {
    title: "作业场所",
    prop: "name",
  },
  {
    title: "危险作业场所类型",
    prop: "type",
    slot: true
  },
  // {
  //   title: "设备名称",
  //   prop: "sbmc",
  // },
  {
    title: "可能造成的事故类别",
    prop: "spaceAccidentType",
    slot: true
  },
  {
    title: "有限空间类别",
    prop: "spaceType",
    slot: true
  },
  {
    title: "危害因素",
    prop: "spaceHazardFactors",
    slot: true
  },


  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const tableColumn2 = reactive([
  {
    title: "作业场所",
    prop: "name",
  },
  {
    title: "危险作业场所类型",
    prop: "type",
    slot: true
  },
  {
    title: "作业人员数",
    prop: "stiflePeopleCount",
  },
  {
    title: "作业周期",
    prop: "stifleRate",
  },
  {
    title: "熏蒸方式",
    prop: "stifleWay",
    slot: true
  },
  {
    title: "相关方",
    prop: "stifleRelatedName",
  },

  // {
  //   title: "设备类型",
  //   prop: "sblx",
  // },

  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
/** 表格列 */
let tableColumn = reactive([...tableColumn1])
// 新增编辑（查看）弹窗
const isAddEditShow = ref(false);
const onTabClick = (tab) => {
  tableColumn = activeTab.value === '01' ? tableColumn1 : tableColumn2
  getListData()
}
//查询条件
const editObj = reactive({
  deptname: "",
  title: "",
  savebtn: true,
  seeimg: true,
  editObj: {},
  formData: {}
});
const tableData = ref([]);
// 分页
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  orgid: getItem("deptId").ssbmid,
  // type: activeTab.value
});
//获取部门数据
const getdeptData = (val) => {
  listQuery.orgid = val.id;
  listQuery.pageCurrent = 1;
  getListData();
};
const tableloading = ref(false);
const saveBtnShow = ref(true);
const examineshow = ref(false);
const rwid = ref("");
const route = useRoute();
// 初始化
onMounted(() => {
  // examinel();
});
function onSearch(obj) {
  listQuery.name = obj.name;
  listQuery.pageCurrent = 1;
  getListData()
}
/**获取表格数据 */
function getListData() {
  tableloading.value = true; // /hazardousSite/getPageList
  getApi({ ...listQuery, type: activeTab.value }, `/mosty-jcgl/hazardousSite/getPageList`).then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      listQuery.total = res.total;
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}
// 处理危险因素代码
const changeDanger = (row) => {
  let strData = []
  row.spaceHazardFactors.split(',').forEach((item) => {
    strData.push(D_TB_YHWHYS.value[parseInt(item) - 1].label)
  })
  let str = strData.join(',')
  return str
}
/**弹窗关闭 */
const close = () => {
  isAddEditShow.value = false;
  examineshow.value = false;
  getListData();
};
/**获取详情 */
const getmain = (id) => {
  if (id) {
    getApi({}, "/mosty-jcgl/wxzy/getWxzyById/" + id).then((res) => {
      if (res) {
        editObj.editObj = res || {};
      }
    });
  }
};
/**新增 */
function addInfo() {
  editObj.editObj = {};
  isAddEditShow.value = true;
  saveBtnShow.value = true;
  editObj.title = "危险作业场所登记新增";
}
//编辑
function handleEdit(row) {
  editObj.title = "危险作业场所登记编辑";
  examineshow.value = false
  editObj.editObj = {
    id: row.id
  };
  // getmain(row.id);
  isAddEditShow.value = true;
  saveBtnShow.value = true;
}
/**删除 */
function handleDel(row) { // /hazardousSite/del/{id}
  postApi({}, `/mosty-jcgl/hazardousSite/del/${row.id}`).then(res => {
    ElMessage.success("删除成功");
    // emits("searchChange", 'hzzdbj');
    getListData()
  })
}
//详情
function handleSee(row) {
  editObj.title = "危险作业详情";
  // examineshow.value = false
  getmain(row.id);
  isAddEditShow.value = true;
  saveBtnShow.value = false;
}
/**分页 */
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  getListData();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  getListData();
};

</script>

<style lang="scss" scoped>
@import "@/views/dutyBook/jgryandzz/talentPool/tabContainer.scss";


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