<template>
  <MOSTY.PageTree :pageTitle="'职业危害场所列表'" :searchType="'01'" @getDeptId="getdeptId">
    <template #header>
      <div class="toggle" :class="{ active: isOpen }" @click="handleClick">
        <span>统计</span>
        <el-icon>
          <DArrowLeft />
        </el-icon>
      </div>
    </template>
    <template #serach>
      <div ref="heightWive">
        <div v-if="isOpen">
          <BaseTag :items="countlist" :num="4" />
        </div>
      </div>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    </template>
    <template #table>
      <el-divider />
      <div style="text-align: right; padding-bottom: 13px">
        <el-button @click="addInfo">
          <el-icon>
            <Plus />
          </el-icon>
          <span>新增</span>
        </el-button>
        <MOSTY.ExportExcel :exportSheets="exportSheets" :exportInfo="exportInfo" @getSheets="getSheets"
          :ditData="{ D_TB_ZYJK_WHYS }" />
      </div>
      <section :style="{ height: totalHeight }">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :isSelect="true" :isSort="true" :actionsW="300">
          <!-- 插槽 -->
          <template #hazardousfactors="{ row }">
            <dict-tag v-if="row.hazardousfactors" :options="D_TB_ZYJK_WHYS" :value="row.hazardousfactors" :tag="true" />
            <span v-else>无</span>
          </template>
          <!-- 操作 -->
          <template #actions="{ row }">
            <span class="operedit" @click="xiugai(row)" size="small"><el-icon>
                <EditPen />
              </el-icon>修改</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="del(row)">
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="edit(row)" size="small"><el-icon>
                <View />
              </el-icon>查看</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import { ElMessage } from "element-plus"
import { reactive, ref, onMounted, getCurrentInstance, watch, nextTick } from "vue"
import BaseTag from "@/views/dataReportWork/org/components/baseTag"
const { proxy } = getCurrentInstance()
const { D_TB_ZYJK_WHYS, D_TB_JCZQ } = proxy.$dict("D_TB_ZYJK_WHYS", "D_TB_JCZQ")
const emit = defineEmits("changePage")
const isOpen = ref(false)
const tableloading = ref(false)
const multipleTableRef = ref(null)
const currentDeptName = ref("")
const countlist = reactive([
  { name: "噪声场所", count: 0, dm: "1", icon: 'zywhcs/icon_01.png' },
  { name: "高温场所", count: 0, dm: "2", icon: 'zywhcs/icon_02.png' },
  { name: "震动场所", count: 0, dm: "3", icon: 'zywhcs/icon_03.png' },
  { name: "射频辐射场所", count: 0, dm: "4", icon: 'zywhcs/icon_04.png' },
  { name: "紫外线场所", count: 0, dm: "5", icon: 'zywhcs/icon_05.png' },
  { name: "激光场所", count: 0, dm: "6", icon: 'zywhcs/icon_06.png' },
  { name: "粉尘场所", count: 0, dm: "7", icon: 'zywhcs/icon_07.png' },
  { name: "毒物场所", count: 0, dm: "8", icon: 'zywhcs/icon_08.png' }
])
const searchArr = reactive([
  {
    showType: "select",
    prop: "hazardousfactors",
    width: '250px',
    options: D_TB_ZYJK_WHYS,
    placeholder: '请输入危害因素'
  }
])
const listQuery = reactive({
  orgcode: "",
  hazardousfactors: [],
  pageCurrent: 1,
  pageSize: 10, total: 0
})
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "单位",
      prop: "orgname",
    },
    {
      title: "所在部门",
      prop: "deptname",
    },
    {
      title: "场所名称",
      prop: "sitename",
    },
    {
      title: "危害因素",
      prop: "hazardousfactors",
      slot: true
    },
    {
      title: "登记日期",
      prop: "xtCjsj",
    },
    {
      title: "最近一次检测日期",
      prop: "xtZhgxsj",
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],

})


const exportInfo = reactive({
  name: "职业危害场所",
  loading: false,
  disabled: false
})
const exportSheets = reactive([
  {
    name: "导出台账",
    sblx: "200101010000",
    index: true,
    title: "",
    column: [
      { title: "单位", prop: "orgname" },
      { title: "场所名称", prop: "sitename" },
      { title: "危害因素", prop: "hazardousfactors", slot: true },
      { title: "所在部门", prop: "deptname" },
      { title: "职业危害人数", prop: "peopleCount" },
      { title: "最近一次检测日期", prop: "xtCjsj" }
    ],
    data: []
  }
])
const getSheets = go => {
  exportInfo.loading = true
  exportSheets[0].title = `${currentDeptName.value}职业危害场所台账`
  let { orgcode, hazardousfactors } = listQuery
  postApi({ orgcode, hazardousfactors }, "/mosty-jcgl/occupationalHazard/selectAll").then(res => {
    if (!res) exportInfo.loading = false
    exportSheets[0].data = res
    exportSheets[0].data.forEach(list => {
      if (list.floorname) {
        list.sitename = list.sitename + (list.buildingname ? "-" + list.buildingname : "") + "-" + list.floorname + (list.partname ? "-" + list.partname : "")
      } else {
        list.sitename = list.sitename + (list.buildingname ? "-" + list.buildingname : "") + (list.partname ? "-" + list.partname : "")
      }
    })
    exportInfo.loading = false
    go()
  })
}
const onStat = () => {
  postApi(listQuery, `/mosty-jcgl/occupationalHazard/stat`).then(res => {
    if (!res) return
    countlist[0].count = res.zsCount
    countlist[1].count = res.gwCount
    countlist[2].count = res.zdCount
    countlist[3].count = res.spfsCount
    countlist[4].count = res.zwxCount
    countlist[5].count = res.jgCount
    countlist[6].count = res.fcCount
    countlist[7].count = res.dwCount
  })
}
const totalHeight = ref()
const heightWive = ref()
const handleClick = () => {
  isOpen.value = !isOpen.value
  nextTick(() => {
    if (isOpen.value) {
      return totalHeight.value = `calc(100vh - ${380 + heightWive.value.offsetHeight}px)`
    } else {
      return totalHeight.value = `calc(100vh - 380px)`
    }
  })
}
// 初始化
onMounted(() => {
  totalHeight.value = `calc(100vh - 380px)`
  onStat()
})


// watch(
//   () => isOpen.value,
//   (n, o) => {
//     nextTick(() => {
//       multipleTableRef.value.tableWh = `calc(100vh - ${n ? 532 : 360}px)`
//     })
//   },
//   { immediate: true, deep: true }
// )

//获取部门数据
const getdeptId = val => {
  listQuery.deptid = val.id
  listQuery.pageCurrent = 1
  currentDeptName.value = val.orgname
  getTableData()
}
const changeNo = val => {
  listQuery.pageCurrent = val
  getTableData()
}
const changeSize = val => {
  listQuery.pageSize = val
  getTableData()
}
// 查询数据
const onSearch = (obj) => {
  listQuery.hazardousfactors = obj.hazardousfactors ? [obj.hazardousfactors] : []
  onStat()
  getTableData()
}
//获取详情
function gtdataxq(id, title, saveBtn) {
  getApi({ id: id }, `/mosty-jcgl/occupationalHazard/queryById`).then(res => {
    res.hazardousfactors = res.hazardousfactors ? res.hazardousfactors.split(",") : null

  })
}
//详情
const edit = row => {
  let obj = {
    title: '职业危害场所详情', //表单标题
    saveBtn: false, //是否展示保存按钮
    zdlist: { D_TB_ZYJK_WHYS, D_TB_JCZQ },
    rowId: row.id //列表内容
  }
  emit("changePage", "Details", obj)
}
//修改
const xiugai = row => {
  let obj = {
    title: '职业危害场所修改', //表单标题
    saveBtn: true, //是否展示保存按钮
    zdlist: { D_TB_ZYJK_WHYS, D_TB_JCZQ },
    rowId: row.id //列表内容
  }
  emit("changePage", "Details", obj)
}
//删除
const del = val => {
  postApi({}, `/mosty-jcgl/occupationalHazard/del/${val.id}`).then(() => {
    ElMessage.success("删除成功")
    getTableData()
  })
}

function getTableData() {
  tableloading.value = true
  postApi(listQuery, "/mosty-jcgl/occupationalHazard/selectPage").then(res => {
    if (res.records) {
      tableloading.value = false
      res.records.forEach(el => {
        el.hazardousfactors = el.hazardousfactors ? el.hazardousfactors.split(",") : null
      })
      data.tableData = res.records
      data.tableData.forEach(list => {
        if (list.floorname) {
          list.sitename = list.sitename + (list.buildingname ? "-" + list.buildingname : "") + "-" + list.floorname + (list.partname ? "-" + list.partname : "")
        } else {
          list.sitename = list.sitename + (list.buildingname ? "-" + list.buildingname : "") + (list.partname ? "-" + list.partname : "")
        }
      })
      listQuery.total = res.total
    } else {
      data.tableData = []
      tableloading.value = false
    }
  }).finally(() => {
    tableloading.value = false
  })
}

const addInfo = () => {
  let obj = {
    title: "职业危害场所新增", //表单标题
    saveBtn: true, //是否展示保存按钮
    zdlist: { D_TB_ZYJK_WHYS, D_TB_JCZQ },
    rowId: null//列表内容
  }
  emit("changePage", "Details", obj)
}
</script>

<style lang="scss" scoped>
.toggle {
  height: 32px;
  cursor: pointer;
  position: absolute;
  z-index: 9;
  top: 10px;
  right: 0;
  align-items: center;
  color: #0f3916;

  .el-icon {
    transform: rotate(90deg);
    transition: all 0.25s ease;
  }

  &.active {
    .el-icon {
      transform: rotate(-90deg);
    }
  }
}
</style>
