<template>
  <el-dialog :title="props.title" width="1400px" v-model="dialogVisible" @close="onClose">
    <el-button @click="onAdd" v-if="props.title.includes('编辑')" style="margin-bottom: 10px; float: right">
      <el-icon>
        <Plus />
      </el-icon>新增</el-button>
    <el-table border :data="dataTable" style="width: 100%" v-loading="tableLoading" :height="'500px'"
      :header-cell-style="{ background: '#F6F6F6' }">
      <el-table-column :prop="item.prop" :label="item.label" v-for="(item, i) in tableColumn" :key="i">
      </el-table-column>
      <el-table-column align="center" label="操作" width="170">
        <template #default="{ row }">
          <el-link type="primary" @click="handleDetail(row, 'edit')" v-if="props.isEdit">编辑</el-link>
          <el-link type="primary" @click="handleDetail(row, 'view')">查看</el-link>
          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
            @confirm="onDel(row)">
            <template #reference>
              <el-link style="color: red;">删除</el-link>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex just-center" v-if="total > 0">
      <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="query.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="query.pageSize"
        layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
    </div>
  </el-dialog>
  <DetailDialog v-if="detailVisible" @closeDetail="detailDialogClose" :id="rowId" :title="detailTitle"
    :isDetail="props.isDetail" :rowItem="props.rowItem" :query="props.query" />
</template>

<script setup>
import { onMounted, ref, reactive } from "vue"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import * as MOSTY from "@/components/MyComponents/index"
import DetailDialog from "./dialog.vue"
import { ElMessage } from "element-plus"
const props = defineProps({
  item: Object,
  title: String,
  isDetail: {
    type: Boolean,
    default: false
  },
  isEdit: {
    type: Boolean,
    default: true
  },
  rowItem: Object,
  query: Object
})
const emits = defineEmits(["close"])
const dialogVisible = ref(true)
const detailVisible = ref(false)
const detailTitle = ref("")
const dataTable = ref([])
const rowId = ref(null)
const query = ref({
  pageCurrent: 1,
  pageSize: 10
})
const total = ref(0)
const tableColumn = ref([
  { label: "企业名称", prop: "baOrgName" },
  // investigationStartDate: [{ required: true, message: "请选择隐患排查开始日期", trigger: "change" }],
  // investigationEndDate: [{ required: true, message: "请选择隐患排查结束日期", trigger: "change" }],
  // investigationMethodCode: [{ required: true, message: "请选择隐患排查方式", trigger: "change" }],
  // riskEnterpriseHeadFlag: [{ required: true, message: "请选择企业主要负责人参加检查标识", trigger: "change" }],
  // categoryCode: [{ required: true, message: "请选择隐患类别", trigger: "change" }],
  // levelCode: [{ required: true, message: "请选择隐患级别", trigger: "change" }],
  // rectificationStatusCode: [{ required: true, message: "请选择隐患整改状态", trigger: "change" }],
  // hdExistOrgCode: [{ required: true, message: "请选择隐患所在组织机构", trigger: "change" }],
  // extendFlag: [{ required: true, message: "请选择继承标识", trigger: "change" }],
  // operationType: [{ required: true, message: "请选择操作标识符", trigger: "change" }],
  // newestRectificationFlag: [{ required: true, message: "请选择最新隐患整改标识", trigger: "change" }]
  { label: "隐患排查开始日期", prop: "investigationStartDate" },
  { label: "隐患排查结束日期", prop: "investigationEndDate" },
  { label: "隐患排查方式", prop: "investigationMethodName" },
  { label: "隐患类别", prop: "categoryName" },
  { label: "隐患级别", prop: "levelName" },
  { label: "隐患整改状态", prop: "rectificationStatusName" },
  { label: "隐患描述", prop: "describe" },
])
const tableLoading = ref(false)
const onClose = () => {
  emits("close", true)
}
const detailDialogClose = val => {
  detailVisible.value = false
  if (val) {
    getDataList()
  }
}
const getDataList = () => {
  dataTable.value = []
  tableLoading.value = true
  let _url = props.isDetail ? "getDetailList" : "getLsjlList"
  postApi({ ...query.value, ...props.item }, `/mosty-jcgl/data/hazardInvestigation/getDetailList`).then(res => {
    if (res) {
      dataTable.value = props.isDetail ? res.records : res
      tableLoading.value = false
      total.value = Number(res.total || 0)
      total.value = props.isDetail ? res.total : 0
    }
  })
}
const onDel = e => {
  getApi({ id: e.sourceId }, `/mosty-jcgl/data/hazardInvestigation/delDetailById`).then(res => {
    ElMessage.success("删除成功")
    getDataList()
  })
}
const handleDetail = (row, type) => {
  detailTitle.value = (type === "edit" ? "编辑" : "查看") + row.baOrgName
  rowId.value = row.sourceId
  detailVisible.value = true
}
const onAdd = () => {
  detailTitle.value = '新增' + props.rowItem.baOrgName
  rowId.value = null
  detailVisible.value = true
}
// 切换条数
const handleSizeChange = val => {
  query.value.pageSize = val
  getDataList()
}
// 切换分页
const handleCurrentChange = val => {
  query.value.pageCurrent = val
  getDataList()
}
onMounted(() => {
  getDataList()
})
</script>

<style lang="scss" scoped></style>
