<template>
  <MOSTY.PageTree :pageTitle="'职业危害作业人员列表'" :searchType="'03'" @getDeptId="getdeptData">
    <template #titleright>
      <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.split(',')"
              :tag="true" />
            <span v-else>无</span>
          </template>
          <template #peopletype="{ row }">
            <dict-tag v-if="row.peopletype" :options="D_BZ_RYLB_NEW" :value="row.peopletype" :tag="false" />
            <span v-else>-</span>
          </template>
          <template #ill="{ row }">
            <dict-tag v-if="row.ill" :options="D_BZ_SF" :value="row.ill" :tag="false" />
            <span v-else>无</span>
          </template>
          <!-- 操作 -->
          <template #actions="{ row }">
            <span class="operedit" @click="editInfo(row)"><el-icon>
                <Edit />
              </el-icon>修改</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="delInfo(row)">
              <template #reference>
                <span class="operdel">
                  <el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
            <span class="operesee" @click="showInfo(row)"><el-icon>
                <View />
              </el-icon>查看</span>
            <span class="operedown" @click="tjjltabs(row)"><el-icon>
                <Compass />
              </el-icon>体检记录表</span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>
  <zywhryadd v-if="addUserShow" :saveBtnShow="saveBtnShow"
    :zdlist="{ D_BZ_RYLB_NEW, D_BZ_SF, D_TB_ZYJK_WHYS, D_TB_JCZQ }" :addUserShow="addUserShow" :title="usertitle"
    :rowId="rowId" :listQuery="listQuery" @changePage="closeuser">
  </zywhryadd>
  <tjjltab v-if="dialogTjjltab" v-model="dialogTjjltab" :title="'体检记录表'" @changeclosetj="handleClose"
    :userId="userId" />
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { postApi } from "@/api/tobAcco_api.js"
import zywhryadd from "../../zywhcs/Details/zywhryadd.vue"
import tjjltab from "../../zywhcs/Details/tjjltab.vue"
import { reactive, ref, onMounted, getCurrentInstance, watch, nextTick } from "vue"
import BaseTag from "@/views/dataReportWork/org/components/baseTag"
import { ElMessage } from "element-plus";
const { proxy } = getCurrentInstance()
const { D_BZ_RYLB_NEW, D_BZ_SF, D_TB_ZYJK_WHYS, D_TB_JCZQ } =
  proxy.$dict("D_BZ_RYLB_NEW", "D_BZ_SF", "D_TB_ZYJK_WHYS", "D_TB_JCZQ")
const userId = ref("")
const emit = defineEmits("changePage")

const tableloading = ref(false)
const saveBtnShow = ref(false)
const listQuery = reactive({
  orgcode: "",
  hazardousfactors: [],
  pageCurrent: 1,
  pageSize: 10,
  total: 0
})
const dialogTjjltab = ref(false)
const usertitle = ref("职业危害人员详情")
const addUserShow = ref(false)
const currentDeptName = ref("")
const rowId = ref(null)
const searchArr = reactive([
  {
    showType: "select",
    prop: "hazardousfactors",
    width: '250px',
    options: D_TB_ZYJK_WHYS,
    placeholder: '请输入危害类型'
  },
  {
    showType: "input",
    prop: "username",
    width: '250px',
    placeholder: '作业人员姓名'
  }
])
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "所属单位",
      prop: "orgname",
    },
    {
      title: "部门",
      prop: "deptname",
    },
    {
      title: "人员姓名",
      prop: "username",
    },
    {
      title: "身份证号",
      prop: "idCard",
    },
    {
      title: "人员类别",
      prop: "peopletype",
      slot: true
    },
    {
      title: "是否有职业病",
      prop: "ill",
      slot: true
    },
    {
      title: "接触危害因素",
      prop: "hazardousfactors",
      slot: true
    },
    {
      title: "作业场所",
      prop: "hazardsitename",
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }

  ],

})
const isOpen = ref(false)

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 exportInfo = reactive({
  name: "职业危害人员",
  loading: false,
  disabled: false
})

const exportSheets = reactive([
  {
    name: "导出台账",
    sblx: "200101010000",
    index: true,
    title: "",
    column: [
      { title: "单位", prop: "orgname" },
      { title: "部门", prop: "deptname" },
      { title: "人员姓名", prop: "username" },
      { title: "身份证号", prop: "idCard" },
      { title: "危害类型", prop: "hazardousfactors", slot: true },
      { title: "作业场所", prop: "hazardsitename" }
    ],
    data: []
  }
])

const getSheets = go => {
  exportInfo.loading = true
  exportSheets[0].title = `${currentDeptName.value}职业危害人员台账`
  let { orgcode, hazardousfactors } = listQuery
  postApi({ orgcode, hazardousfactors, pageCurrent: 1, pageSize: 5e4 }, "/mosty-jcgl/occHazardOpr/getPageList").then(res => {
    if (!res) exportInfo.loading = false
    exportSheets[0].data = res.records
    exportInfo.loading = false
    go()
  })
}

const onStat = () => {
  postApi(listQuery, `/mosty-jcgl/occHazardOpr/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 = (numbers) => {
  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 }
// )
//获取部门数据
function getdeptData(val) {
  listQuery.orgcode = val.id
  listQuery.pageCurrent = 1
  currentDeptName.value = val.orgname
  getTableData()
  onStat()
}
function tjjltabs(row) {
  userId.value = row.userid
  dialogTjjltab.value = true
}
function handleClose() {
  dialogTjjltab.value = false
}

const changeNo = val => {
  listQuery.pageCurrent = val
  getTableData()
}
const changeSize = val => {
  listQuery.pageSize = val
  getTableData()
}
// 查询数据
const onSearch = (boj) => {
  listQuery.hazardousfactors = boj.hazardousfactors ? [boj.hazardousfactors] : []
  listQuery.username = boj.username
  listQuery.pageCurrent = 1
  getTableData()
  onStat()
}
const handleRest = () => {
  listQuery.username = ""
  listQuery.orgcode = ""
  listQuery.hazardousfactors = []
  getTableData()
  onStat()
}
// 编辑
const editInfo = row => {
  usertitle.value = "职业危害人员编辑"
  rowId.value = row.id
  addUserShow.value = true
  saveBtnShow.value = true
}
//详情
const showInfo = row => {
  usertitle.value = "职业危害人员详情"
  rowId.value = row.id
  addUserShow.value = true
  saveBtnShow.value = false
}

//删除
const delInfo = row => {
  postApi({}, "/mosty-jcgl/occHazardOpr/del/" + row.id).then(
    () => {
      ElMessage.success("删除成功");
      getTableData();
    }
  );
}

const addInfo = () => {
  usertitle.value = "新增职业危害人员"
  addUserShow.value = true
  saveBtnShow.value = true
}

function closeuser() {
  rowId.value = null
  addUserShow.value = false
  getTableData()
}

//获取列表数据
function getTableData() {
  tableloading.value = false
  postApi(listQuery, "/mosty-jcgl/occHazardOpr/getPageList").then(res => {
    if (res.records) {
      tableloading.value = false
      data.tableData = res.records
      listQuery.total = res.total
    } else {
      data.tableData = []
      tableloading.value = false
    }
  })
}



</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>
