<template>
  <div>
    <!-- 检测记录查询 -->
    <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 #actions="{ row }">
          <span class="operesee" @click="setFn(row)">
            <el-icon>
              <Compass />
            </el-icon>
            查看
          </span>
        </template>
        <template #fenye>
          <div class="fenye" :style="{ top: tableHeight + 'px' }">
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
              :current-page="pageData.listQuery.pageCurrent" background :page-sizes="[10, 20, 50, 100]"
              :page-size="pageData.listQuery.pageSize" layout="total,  prev, pager, next, sizes, jumper"
              :total="total"></el-pagination>
          </div>
        </template>
      </MOSTY.Table>
    </div>
  </div>
  <!--检测记录-->
  <div v-if="addjcjlShow" class="dialog-box">
    <Addjcjlindex :formData="formData" @changePage="changePage" :type="type" />
  </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import Addjcjlindex from "@/components/dialog/Addjcjlindex.vue";
import { reactive, ref, defineProps } from "vue"
const emits = defineEmits(["handleChange", 'searchChange']);
const tableloading = ref(false);
const addjcjlShow = ref(false);
const total = ref(0)
const formData = ref({
  title: "",
  saveBtnShow: true,
});
const props = defineProps({

})
const pageData = reactive({
  listQuery: {
    pageCurrent: 1,
    pageSize: 10
  },
  tableColumns: [
    {
      title: "检测日期",
      prop: "orgname"
    },
    {
      title: "检测机构",
      prop: "checkcount"
    },
    {
      title: "检测描述",
      prop: "factcount"
    },
    {
      title: "有效期限",
      prop: "checkRate"
    },
    {
      title: "检测结论",
      prop: "totalCount"
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],
  tableData: []
})
//新增
function addUserHander() {
  formData.value.title = '检测记录新增';
  formData.value.saveBtnShow = true;
  addjcjlShow.value = true
}
//关闭
function changePage() {
  formData.value = {}
  addjcjlShow.value = false
}
//查询
function Searchdata() {
  emits("searchChange", pageData.listQuery);
}
//页码发生变化
const handleCurrentChange = (val) => {
  pageData.listQuery.pageCurrent = val;
  emits("searchChange", pageData.listQuery);
};
//查询条数发生变化
const handleSizeChange = (val) => {
  pageData.listQuery.pageSize = val;
  emits("searchChange", pageData.listQuery);
};
</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>
