<template>
  <div>
    <ul class="top_ul">
      <li v-for="it in pageData.countlist" :key="it">
        <MOSTY.Account :item="it" />
      </li>
    </ul>
    <!-- 隐患清单查询 -->
    <div class='tabox'>
      <div class="headBox3">
        <el-input placeholder="请输入隐患描述进行查询" v-model="pageData.listQuery.username" clearable
          style='width:400px'></el-input>
        <el-button type="primary" @click="Searchdata">
          <el-icon>
            <Search />
          </el-icon>
          <span>查询</span>
        </el-button>
      </div>
      <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData" :tableloading="tableloading"
        :tableHeight="'40vh'">
        <template #pitfallType="{ row }">
          <dict-tag v-if="row.pitfallType" :options="D_BZ_YHLX" :value="row.pitfallType" :tag="false" />
          <span v-else>无</span>
        </template>
        <template #pitfallLevel="{ row }">
          <dict-tag v-if="row.pitfallLevel" :options="D_DBZ_YHDJ" :value="row.pitfallLevel" :tag="false" />
          <span v-else>无</span>
        </template>
        <template #actions="{ row }">
          <span class="operesee" @click="setFn(row)">
            <el-icon>
              <Compass />
            </el-icon>
            查看
          </span>
        </template>
      </MOSTY.Table>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="pageData.pageConfiger" @changeNo="handleCurrentChange"
          @changeSize="handleSizeChange" />
      </div>
    </div>
  </div>
  <!--隐患清单-->
  <div v-if="showdialogjzw" class="dialog-box">
    <Addyhqd :id="id" @saveSuccess="saveSuccess" />
  </div>
</template>
<script setup>
import { getImgUrl } from "@/utils/tools.js"
import * as MOSTY from "@/components/MyComponents/index";
import Addyhqd from "@/components/dialog/Addyhqd.vue";
import { reactive, ref, onMounted, getCurrentInstance } from "vue"
import { getApi } from "@/api/tobAcco_api.js";
const { proxy } = getCurrentInstance();
const { D_BZ_YHLX, D_DBZ_YHDJ } = proxy.$dict("D_BZ_YHLX", 'D_DBZ_YHDJ');
const emits = defineEmits(["handleChange", 'searchChange']);
const tableloading = ref(false);
const showdialogjzw = ref(false);
const id = ref(null)
const props = defineProps({
  obj: {
    default: () => { },
    type: Object
  },
  type: {
    default: '',
    type: String
  }
});
const pageData = reactive({
  countlist: [
    { title: '历史总隐患数', num: 0, icon: getImgUrl('img/icon_lszyh.png') },
    { title: '现有隐患数', num: 0, icon: getImgUrl('img/icon_cszs.png') },
    { title: '严重隐患数', num: 0, icon: getImgUrl('img/icon_yzyhs.png') },
    { title: '一般隐患A类', num: 0, icon: getImgUrl('img/icon-sycssl.png') },
    { title: '一般隐患B类', num: 0, icon: getImgUrl('img/icon_xyyhs.png') }
  ],
  listQuery: {
    pageCurrent: 1,
    pageSize: 10,
    objid: props.obj.zbid ? props.obj.zbid : props.obj.id,
    keywords: ''
  },
  pageConfiger: {
    pageCurrent: 1,
    pageSize: 10,
    total: 0
  },
  tableColumns: [
    {
      title: "隐患名称",
      prop: "pitfallName"
    },
    {
      title: "隐患类型",
      prop: "pitfallType",
      slot: true
    },
    {
      title: "隐患级别",
      prop: "pitfallLevel",
      slot: true
    },
    {
      title: "隐患部位",
      prop: "partName"
    },
    {
      title: "隐患描述",
      prop: "pitfallDescribe"
    },
    {
      title: "责任部门",
      prop: "belongDeptname"
    },

    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableData: []
})
onMounted(() => {
  getbgsbsscount(props.obj.zbid ? props.obj.zbid : props.obj.id)
  getTableData()
})
function getbgsbsscount(objid) {
  getApi({ objid }, '/mosty-jcgl/dynamic/yhStatistics').then(res => {
    if (res) {
      pageData.countlist[0].num = res.countY;
      pageData.countlist[1].num = res.countW;
      pageData.countlist[2].num = res.countD;
      pageData.countlist[3].num = res.countA;
      pageData.countlist[4].num = res.countB;
    }
  })
}
const getTableData = () => {
  tableloading.value = true
  getApi(pageData.listQuery, '/mosty-jcgl/dynamic/yhList').then(res => {
    tableloading.value = false
    pageData.tableData = res.records
      ? res.records : [];
    pageData.pageConfiger.total = res.total
  })
}
function setFn(row) {
  id.value = row.id
  showdialogjzw.value = true
}
const saveSuccess = (val) => {
  showdialogjzw.value = false
}
//查询
function Searchdata() {
  getTableData()
}
//页码发生变化
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val;
  pageData.pageConfiger.pageCurrent = val;
  getTableData()
};
//查询条数发生变化
const handleSizeChange = (val) => {
  pageData.listQuery.pageSize = val;
  pageData.pageConfiger.pageSize = val;
  getTableData()
};
</script>

<style lang="scss" scoped>
.headBox3 {
  display: flex;
  justify-content: end;
  width: 100%;
  margin-bottom: 10px;
}

.top_ul {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;

  >li {
    width: 15%;
    height: 83px;
    margin: 6px 32px;
  }
}
</style>
