<template>
  <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="handleAdd">
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增随机抽查</span>
        </el-button>
      </div>
    </template>
    <template #table>
      <section class="eltab9">
        <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading" :isSelect="false"
          :isSort="true" @SortChange="SortChange" style="width: 100%">
          <template #ctype="{ row }">
            <dict-tag :options="D_TB_BMJCLX" :value="row.ctype" :tag="false"></dict-tag>
          </template>
          <template #checktype="{ row }">
            <dict-tag :options="D_BZ_YHLX" :value="row.checktype" :tag="false"></dict-tag>
          </template>

          <template #actions="{ row }">
            <span class="operesee" @click="configuration(row)">
              <el-icon>
                <EditPen />
              </el-icon>
              隐患详情
            </span>
            <span class="operesee" @click="gotoyhqd(row)">
              <el-icon>
                <EditPen />
              </el-icon>
              清单
            </span>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>

  <div v-if="comprehensiveShow" class="dialog-box">
    <Yhlb :pageCurrent="listQuery.pageCurrent" @close="closeEven" :rowid="rowId" :rowData="rowData" :jctype="'sjcc'"
      @refresh="backRefreshFn" />
  </div>
  <Yhqd v-if="yhqdShow" @changeVi2="changeGl" :rowid="rowId"></Yhqd>
  <FormDia :title="dialogTitle" v-if="formDialogShow" @close="formDialogShow = false" @refresh="getDataList"></FormDia>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue"
import { getApi } from "@/api/tobAcco_api.js"
import Yhlb from "./components/yhlb.vue"
import Yhqd from "./components/yhqd.vue"
import * as MOSTY from "@/components/MyComponents/index"
import { dateFormat } from "@/utils/tools.js"
import FormDia from "../components/sjcc/formDia.vue"
const { proxy } = getCurrentInstance()
const { D_BZ_YHLX, D_TB_BMJCLX } = proxy.$dict("D_BZ_YHLX", "D_TB_BMJCLX")
const yhqdShow = ref(false)
const comprehensiveShow = ref(false)

const rowId = ref({})
const rowData = ref({})
const searchArr = reactive([
  {
    showType: "daterange",
    prop: "daterange",
    width: "350px",
    defaultVal: [dateFormat({ type: "firstday" }), dateFormat()],
    placeholder: "开始时间"
  }
])
const tableColumns = ref([
  {
    title: "检查时间",
    prop: "addtime"
  },
  {
    title: "被检查的对象",
    prop: "objname"
  },
  {
    title: "类型",
    prop: "ctype",
    slot: true
  },
  {
    title: "所属部门",
    prop: "deptname"
  },
  {
    title: "所属单位",
    prop: "orgname"
  },
  {
    title: "检查类型",
    prop: "checktype",
    slot: true
  },
  {
    title: "检查人",
    prop: "username"
  },
  {
    title: "隐患数量",
    prop: "dangercount"
  },
  {
    title: "整改完成",
    prop: "finishCount"
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])

const tableData = ref([])
const tableloading = ref(false)
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
  total: 0,
  depid: "",
  startTime: dateFormat({ type: "firstday" }),
  endTime: dateFormat(),
  checkType: "8"
})
onMounted(() => {
  // getDataList();
})
function getdeptId(obj) {
  listQuery.depid = obj.id
  getDataList()
}
//查询
const onSearch = obj => {
  if (obj.daterange && obj.daterange.length) {
    listQuery.startTime = obj.daterange[0]
    listQuery.endTime = obj.daterange[1]
  } else {
    listQuery.startTime = dateFormat({ type: "firstday" })
    listQuery.endTime = dateFormat()
  }
  getDataList()
}
//隐患清单
function gotoyhqd(row) {
  rowId.value.id = row.id
  rowId.value.objid = row.objid

  yhqdShow.value = true
}
//关闭隐患清单
function changeGl() {
  rowId.value.id = null
  rowId.value.objid = null
  yhqdShow.value = false
}
//详情
const configuration = row => {
  rowId.value.id = row.id
  rowId.value.objid = row.objid
  comprehensiveShow.value = true
  rowData.value = row
}
//获取列表数据
function getDataList() {
  tableloading.value = true
  getApi(listQuery, "/mosty-jcgl/userChecklog/queryList")
    .then(res => {
      if (res.records) {
        tableloading.value = false
        tableData.value = res.records
        listQuery.total = res.total
      }
    })
    .catch(err => {
      tableData.value = []
      tableloading.value = false
    })
    .finally(() => {
      tableloading.value = false
    })
}
function closeEven() {
  comprehensiveShow.value = false
}

//分页
const handleSizeChange = currentSize => {
  listQuery.pageSize = currentSize
  getDataList()
}
const handleCurrentChange = currentPage => {
  listQuery.pageCurrent = currentPage
  getDataList()
}
// 新增弹窗标题
const dialogTitle = ref("")
// 随机检查表单控制
const formDialogShow = ref(false)
// 新增随机检查
const handleAdd = () => {
  formDialogShow.value = true
  dialogTitle.value = "新增随机检查"
}
// 返回刷新
const backRefreshFn = val => {
  listQuery.pageCurrent = val
  getDataList()
}
</script>

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

.el-table__body-wrapper is-scrolling-left {
  border: none;
}

.el-table__row {
  line-height: 21px;
}

.el-table th,
.el-table td {
  padding: 4px 8px;
}

.el-table__body-wrapper is-scrolling-left .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-dialog__headerbtn {
  margin-top: -6px !important;
}

.el-dialog__headerbtn .el-dialog__close {
  font-size: 27px !important;
}

::v-deep .el-date-editor .el-range-input {
  color: #000;
}
</style>
