<template>
  <el-dialog :title="props.title" width="95%" v-model="dialogVisible" @close="onClose">
    <div class="flex just-between">
      <div>
        <el-form ref="formRef" label-width="110px" label-align="left" :model="querySelect" label-suffix=":"
          style="display: flex; flex-wrap: wrap">
          <el-form-item label="部位名称" prop="fsisName">
            <div style="width: 180px">
              <el-input v-model="querySelect.fsisName" clearable />
            </div>
          </el-form-item>
          <el-form-item label="火灾种类" prop="fsisFireTypeCode">
            <div style="width: 180px">
              <MOSTY.DictRidioAndSelect placeholder="请选择火灾种类" :dictData="D_BZ_XFZDBWHZLX"
                v-model="querySelect.fsisFireTypeCode" selectType="select" @getselect='onChangesblx' />
            </div>
          </el-form-item>
          <el-form-item label="危险等级" prop="fsisHazardLevelCode">
            <div style="width: 180px">
              <MOSTY.DictRidioAndSelect :dictData="D_BZ_XFZDBWWXDJ" placeholder="请选择危险等级"
                v-model="querySelect.fsisHazardLevelCode" selectType="select" @getselect='onChangesblx' />
            </div>
          </el-form-item>
          <el-form-item label="上报状态" prop="status">
            <el-select v-model="querySelect.status" style="width: 180px" @change="changeStatus">
              <el-option label="全部" value="" />
              <el-option label="已上报" value="1" />
              <el-option label="未上报" value="2" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div style="display: flex; gap: 1px">
        <el-button @click="searchs" class="mr10">
          <el-icon>
            <Search />
          </el-icon>搜索</el-button>
        <el-button @click="onRest" class="mr10">
          <el-icon>
            <Refresh />
          </el-icon>重置</el-button>

        <el-button v-if="dataTable.length > 0 && props.rowItem.status == '2' && isAuth" @click="onStagingReport"
          :disabled="gDisabled" class="mr10">
          <el-icon>
            <Upload />
          </el-icon>暂存上报</el-button>
        <!-- v-if="props.rowItem.status == '2' && isAuth" -->
        <el-button @click="onAdd" class="mr10">新增</el-button>
      </div>
    </div>

    <el-table ref="multipleTableRef" :row-key="keyid" border :data="dataTable" style="width: 100%; margin-bottom: 10px"
      v-loading="tableLoading" :header-cell-style="{ background: '#F6F6F6' }" height="50vh"
      @selection-change="onSelectionChange" @select="handleCheckBox" @select-all="handleCheckBox">
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="55" fixed />
      <el-table-column :prop="item.prop" :label="item.label" v-for="(item, index) in columnTable" :key="index">
      </el-table-column>
      <el-table-column prop="fsisFireTypeCode" label="火灾类型">
        <template #default="{ row }">
          <dict-tag :options="D_BZ_XFZDBWHZLX" :value="row.fsisFireTypeCode" :tag="false" />
        </template>
      </el-table-column>
      <el-table-column prop="fsisHazardLevelCode" label="危险等级">
        <template #default="{ row }">
          <dict-tag :options="D_BZ_XFZDBWWXDJ" :value="row.fsisHazardLevelCode" :tag="false" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140" fixed="right">
        <template #default="{ row }">
          <el-link type="primary" @click="onView(row)">查看</el-link>
          <!-- :disabled="gDisabled"
            v-if="props.rowItem.status == '2' && isAuth" -->
          <el-link type="primary" @click="onEdit(row)">编辑</el-link>
          <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
            @confirm="onDelete(row)">
            <template #reference>
              <el-link type="danger">删除</el-link>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div class="flex just-center">
      <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="querySelect.pageCurrent" :page-sizes="[2, 5, 10, 20]" :page-size="querySelect.pageSize"
        layout="total, prev, pager, next, sizes, jumper" :total="total"></el-pagination>
    </div>
  </el-dialog>
  <Detailcc @close="detailClose" :title="dialogTitle" :rowItem="rowItem" v-if="detailVisible" :detail="detail"
    :query="props.params" />
</template>

<script setup>
import { onMounted, ref, reactive, getCurrentInstance, nextTick, computed } from "vue"
import { Delete, Edit, Search, Share, Upload } from "@element-plus/icons-vue"
import { getApi, postApi } from "@/api/tobAcco_api.js"
import * as MOSTY from "@/components/MyComponents/index"
import Detailcc from "./Detailcc.vue"
import { getItem } from "@/utils/storage"
import { ElMessage } from "element-plus"
import { filterqx } from "@/utils/auth.js"

const { proxy } = getCurrentInstance()
const { D_BZ_XFZDBWHZLX, D_BZ_XFZDBWWXDJ } = proxy.$dict("D_BZ_XFZDBWHZLX", "D_BZ_XFZDBWWXDJ");
const props = defineProps({
  title: {
    type: String,
    default: ""
  },
  // isProvinces: Boolean,
  params: Object,
  orgCode: String,
  reportStatus: String,
  rowItem: Object,
})
const emits = defineEmits(["close"])
const dialogVisible = ref(true)
const detailVisible = ref(false)
const detail = ref(null)
const dialogTitle = ref("")
const formRef = ref()
const multipleTableRef = ref(null)
const columnTable = ref([
  { label: '公司名称', prop: 'orgName' },
  { label: '部位名称', prop: 'fsisName' },
  { label: '建筑面积(㎡)', prop: 'fsisBdArea' },
  { label: '从业人员数量', prop: 'fsisEmployPersonQty' },
  // { label: '火灾类型', prop: 'fsisFireTypeName' },
  // { label: '危险等级', prop: 'fsisHazardLevelName' },
])
//县级账号
const isTown = computed(() => {
  return filterqx("isaqbm") == "1" && filterqx("isgs") != "1" && filterqx("isSgs") != "1"
})
const isAuth = computed(() => {
  let code = props.orgCode
  return getItem("deptId").ssdwid == code.replace("XN", "")
})
const gDisabled = computed(() => {
  if (props.orgCode.includes("XN")) {
    return false
  } else if (isTown.value) {
    return props.rowItem.status === "2" ? false : true
  } else return true
})

const total = ref(0)
const dataTable = ref([])
const querySelect = reactive({
  pageCurrent: 1,
  pageSize: 10,
  uimsProName: "",
  ecpBuildStatusCode: '',
  year: props.params.year,
  orgCode: props.orgCode,
  bn: props.params.bn,
  status: props.reportStatus || ''
})
const multipleSelection = ref([])
const currentCode = getItem("deptId").ssdwid
const pageData = reactive({
  ids: [],
  notReportIds: []
})
const handleCheckBox = (selection, row) => {
  // 
  // 
  // if (row) {
  //   const index = pageData.ids.indexOf(row.sourceId)
  //   if (index === -1) {
  //     pageData.ids.push(row.sourceId)
  //     pageData.notReportIds.splice(pageData.notReportIds.indexOf(row.sourceId), 1)
  //   } else {
  //     pageData.notReportIds.push(row.sourceId)
  //     pageData.ids.splice(pageData.ids.indexOf(row.sourceId), 1)
  //   }
  // } else {
  //   pageData.ids = selection.map(item => item.sourceId)
  //   pageData.notReportIds = dataTable.value.filter(item => !selection.some(s => s.sourceId === item.sourceId)).map(item => item.sourceId)
  // }
}
const tableLoading = ref(false)
onMounted(() => {
  getDataList()
})

// 获取表格数据
const getDataList = () => {
  dataTable.value = []
  postApi(querySelect, "/mosty-jcgl/data/importantPart/queryImportantPartData").then(res => {
    if (res) {
      dataTable.value = res.records
      nextTick(() => {
        dataTable.value.forEach(item => {
          if (item.status === "1") multipleTableRef.value.toggleRowSelection(item)
        })
      })

      tableLoading.value = false
      total.value = res.total
    }
  })
}
const onDelete = row => {
  postApi([row.sourceId], "/mosty-jcgl/data/importantPart/delImportantPartInfo").then(res => {
    if (res) {
      ElMessage({
        message: "删除成功",
        type: "success"
      })
      getDataList()
    }
  })
}
// 点击操作
const onView = data => {
  detail.value = data
  dialogTitle.value = `消防重点部位详情`
  detailVisible.value = true
}
const onAdd = () => {
  detail.value = {}
  // formData.value.deptname = getItem("deptId").ssbmmc;
  // formData.value.deptid = getItem("deptId").ssbmid;
  dialogTitle.value = `消防重点部位新增`
  detailVisible.value = true
}
const onEdit = data => {
  detail.value = data
  dialogTitle.value = `消防重点部位编辑`
  detailVisible.value = true
}
// 选择锅炉类型
const onChangesblx = e => {
  getDataList()
}

const keyid = row => {
  return row.sourceId
}
//搜索
function searchs() {
  querySelect.pageCurrent = 1
  querySelect.pageSize = 10
  total.value = 0
  getDataList()
}
// 重置
const onRest = () => {
  querySelect.pageCurrent = 1
  querySelect.pageSize = 10
  querySelect.fsisName = ""
  querySelect.fsisFireTypeCode = ""
  querySelect.fsisHazardLevelCode = ""
  querySelect.status = ""
  total.value = 0
  getDataList()
}
// 关闭弹窗
const onClose = () => {
  emits("close", true)
}
//关闭详情弹窗
const detailClose = val => {
  if (val) {
    getDataList()
  }
  detailVisible.value = false
}
// 切换条数
const handleSizeChange = val => {
  querySelect.pageSize = val
  getDataList()
}
// 切换分页
const handleCurrentChange = val => {
  querySelect.pageCurrent = val
  getDataList()
}
const onSelectionChange = val => {
  multipleSelection.value = val
  // 已选未选设置
  pageData.ids = val.map(item => item.sourceId)
  pageData.notReportIds = dataTable.value.filter(item => !pageData.ids.includes(item.sourceId)).map(item => item.sourceId)
}
const onStagingReport = () => {
  postApi({ ids: pageData.ids, notReportIds: pageData.notReportIds, ...props.params, orgCode: props.orgCode, status: querySelect.status }, "/mosty-jcgl/data/importantPart/stagingReportData").then(res => {
    if (res) {
      ElMessage({
        message: "暂存上报数据成功",
        type: "success"
      })
      getDataList()
    }
  })
}
const changeStatus = e => {
  getDataList()
}
</script>

<style lang="scss" scoped>
::v-deep .el-link.el-link--primary.is-disabled {
  color: #808596;
  cursor: not-allowed;
}

.content {
  .topper {
    display: flex;

    .sub-le {
      flex: 1;
      padding: 15px 15px 5px 15px;
      border-right: 1px solid #ebeef5;
    }
  }

  .bottom {
    padding: 0 15px 10px 15px;
  }
}
</style>
