<template>
  <div>
    <el-dialog :title="title + props.params.year + '年'" width="90%" v-model="props.chooseUserVisible" @close="closed">
      <div class="treeBox2 ww100">
        <section class="mb12" style="display: flex;align-items: center;justify-content: space-between;"
          v-if="props.isShowDec">
          <el-form ref="formRef" label-width="110px" label-align="left" :model="listQuery" label-suffix=":"
            style="display: flex; flex-wrap: wrap">
            <el-form-item label="上报状态" prop="status">
              <el-select v-model="listQuery.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>
            <el-button class="mr10" v-if="pageData.tableData.length > 0 && props.rowItem.status == '2' && isbgs"
              @click="onStagingReport" :disabled="gDisabled">
              <el-icon>
                <Upload />
              </el-icon>暂存上报</el-button>
            <el-button type="primary" v-if="props.isShowDec && props.rowItem.status == '2' && isbgs || true"
              @click="onAdd">新增</el-button>
          </div>
        </section>
        <el-table ref="multipleTableRef" v-loading="loading" :row-key="keyid" :data="pageData.tableData" border
          @select="handleCheckBox" @select-all="handleCheckBox" style="width: 100%" @selection-change="onTableChange"
          height="50vh">
          <el-table-column align="center" type="selection" :reserve-selection="true" width="55"
            :selectable="handleDisable" v-if="props.isShowDec" />
          <el-table-column v-for="(item, index) in pageData.tableColumn" :key="index" :prop="item.prop"
            :label="item.label">
            <template #default="{ row }" v-if="item.prop == 'conHydrantSysFlag'">
              <span>{{ row.conHydrantSysFlag == '1' ? '是' : '否' }}</span>
            </template>
            <template #default="{ row }" v-if="item.prop == 'conAlarmSysFlag'">
              <span>{{ row.conAlarmSysFlag == '1' ? '是' : '否' }}</span>
            </template>
            <template #default="{ row }" v-if="item.prop == 'conOutfireSysFlag'">
              <span>{{ row.conOutfireSysFlag == '1' ? '是' : '否' }}</span>
            </template>
            <template #default="{ row }" v-if="item.prop == 'ssbmmc'">
              <span>{{ row.orgName + '-' + row.ssbmmc }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="baOrgName" label="所属单位" width="250" />
          <el-table-column align="center" label="操作" width="170" fixed="right">
            <template #default="{ row }">
              <el-link type="primary" @click="handleClickDetail(row)">详情</el-link>
              <el-link type="primary" v-if="props.isShowDec && props.rowItem.status == '2' && isbgs"
                @click="editDetail(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>
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="handleCurrentChange" @changeSize="handleSizeChange">
        </MOSTY.Pages>
      </div>
    </el-dialog>
    <SubLevel :title="props.isShowDec ? pageTitle : '上报历史'" v-if="isShowSubLevel" :id="currId" @close="closexq"
      :savebtn="savebtn" :info="pageData.currItem" :rowItem="props.rowItem" />
  </div>
</template>
<script setup>
// 引入
import { ref, reactive, onMounted, computed } from "vue";
import SubLevel from './SubLevel'
import { getItem } from "@/utils/storage"
import { postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import { filterqx } from "@/utils/auth.js";
const pageData = reactive({
  tableData: [],
  tableColumn: [
    { label: '建筑名称', prop: 'bdName' },
    { label: '建筑类别', prop: 'bdCategoryName' },
    { label: '火灾危险性分类', prop: 'fireHazardClassifiesName' },
    { label: '耐火等级', prop: 'bdRefractoryRatingName' },
    { label: '是否配置消火栓系统', prop: 'conHydrantSysFlag' },
    { label: '是否配置火灾自动报警系统', prop: 'conAlarmSysFlag' },
    { label: '是否配置自动灭火系统', prop: 'conOutfireSysFlag' },
    { label: '责任部门', prop: 'ssbmmc' },

  ],
  orgCodes: [],
  params: {},
  currItem: {},
  ids: [],
  notReportIds: []
});
const isbgs = ref(true)
const savebtn = ref(false)
const pageTitle = ref(null)
const loading = ref(false);
const isShowSubLevel = ref(false)
const multipleTableRef = ref(null);
const byTime = ref('')
const currId = ref(null)
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 10,
  total: 0,
});
const props = defineProps({
  chooseUserVisible: {
    type: Boolean,
    default: true,
  },
  orgId: String,
  currCode: String,
  isAuth: Boolean,
  params: {
    type: Object,
    default: () => { }
  },
  rowItem: {
    type: Object,
    default: () => { }
  },
  isReport: {
    type: Boolean,
  },
  isShowDec: {
    type: Boolean,
    default: true
  },
  title: {
    type: String,
    default: ''
  },
  ywId: String
});
const multipleSelection = ref([])

//县级账号
const isTown = computed(() => {
  return filterqx("isaqbm") == "1" && filterqx("isgs") != "1" && filterqx("isSgs") != "1"
})

const keyid = (row) => {
  return row.sourceId;
};
const gDisabled = computed(() => {
  // return props.orgCode.includes("XN") || isTown.value ? false : true
  if (props.currCode.includes("XN")) {
    return false
  } else if (isTown.value) {
    return props.rowItem.status === "2" ? false : true
  } else return true
})
//回显示  需要给出row-key相同的数据
const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      if (row.status == '1') {
        multipleTableRef.value?.toggleRowSelection(row, true)
      } else {
        multipleTableRef.value?.toggleRowSelection(row, false)
      }
    })
  } else {
    multipleTableRef.value?.clearSelection()
  }
}

const handleDisable = (row) => {
  return true
}
const onStagingReport = () => {
  let obj = {
    bn: props.params.bn,
    year: props.params.year,
    ids: pageData.ids,
    notReportIds: pageData.notReportIds,
    orgCode: props.currCode
  }
  postApi(obj, "/mosty-jcgl/data/buildSafe/buildSafeReportData").then(res => {
    if (res) {
      ElMessage({
        message: "暂存上报数据成功",
        type: "success"
      })
      getListData()
    }
  })
}
// 详情
const handleClickDetail = (row) => {
  pageTitle.value = '详情查看'
  savebtn.value = false
  pageData.currItem = row
  currId.value = row.sourceId
  isShowSubLevel.value = true
}
//修改
function editDetail(row) {
  pageTitle.value = '修改'
  savebtn.value = true
  pageData.currItem = row
  currId.value = row.sourceId
  isShowSubLevel.value = true
}
function onDelete(row) {
  postApi([row.sourceId], "/mosty-jcgl/data/buildSafe/delBuildSafeData").then(res => {
    if (res) {
      ElMessage({
        message: "删除成功",
        type: "success"
      })
      getListData()
    }
  })
}
function onAdd() {
  pageTitle.value = '新增'
  savebtn.value = true
  pageData.currItem = {}
  currId.value = null
  isShowSubLevel.value = true
}
//表格选择
const onTableChange = val => {
  multipleSelection.value = val
}

const emits = defineEmits(["close"]);
const closed = () => {
  emits("close");
};
function closexq(params) {
  isShowSubLevel.value = false
  getListData()
}
onMounted(() => {
  if (props.rowItem.orgCode == getItem("deptId").ssdwid) {
    isbgs.value = true
  } else {
    isbgs.value = true
  }
  getListData()
})
const changeStatus = e => {
  getListData()
}
//获取列表
const getListData = (_id) => {
  let _url = null
  loading.value = true
  let params = {}
  params.orgCode = props.currCode
  params.bn = props.params.bn
  params.year = props.params.year
  if (props.isShowDec) {
    params.pageCurrent = listQuery.value.pageCurrent;
    params.pageSize = listQuery.value.pageSize;
    params.status = listQuery.value.status || '';
    _url = '/mosty-jcgl/data/buildSafe/queryDataBuildSafeData'
  } else {
    params.sbcs = props.sbcs ? props.sbcs : '0'

    _url = '/mosty-jcgl/data/BuildSafeStat/queryReportingHistoryStatLogDetails'
  }
  postApi(params, _url).then(res => {
    if (res) {
      if (props.isShowDec) {
        pageData.tableData = res.records
        listQuery.value.total = res.total
      } else {
        pageData.tableData = res
      }
      pageData.ids = []
      pageData.notReportIds = []
      multipleTableRef.value?.clearSelection()
      toggleSelection(res.records)
      byTime.value = res?.length ? res[0].updateTime : ""
    }
  }).finally(() => {
    loading.value = false
  })
}
const handleCheckBox = (selection, row) => {
  if (row) {
    //单选
    const index = pageData.ids.indexOf(row.sourceId)
    const index2 = pageData.notReportIds.indexOf(row.sourceId)
    if (index === -1 && index2 === -1) {
      if (row.status == '1') {
        pageData.notReportIds.push(row.sourceId)
      } else {
        pageData.ids.push(row.sourceId)
      }
    } else {
      if (index !== -1) {
        pageData.ids.splice(index, 1)
      }
      if (index2 !== -1) {
        pageData.notReportIds.splice(pageData.notReportIds.indexOf(row.sourceId), 1)
      }
    }
  } else {
    if (selection.length > 0) {
      pageData.ids = selection.map(item => item.sourceId)
      pageData.notReportIds = []
    } else {
      pageData.notReportIds = pageData.tableData.map(item => item.sourceId)
      pageData.ids = []
    }
  }
}

/**
 * 页码改变触发
 */
const handleCurrentChange = (currentPage) => {
  listQuery.value.pageCurrent = currentPage;
  getListData();
};
/**
 * pageSize 改变触发
 */
const handleSizeChange = (currentSize) => {
  listQuery.value.pageSize = currentSize;
  getListData();
};

</script>

<style lang="scss" scoped>
@import "@/assets/css/layout.scss";
@import "@/assets/css/element-plus.scss";

::v-deep .el-form--inline {
  padding-left: 0 !important;
}

::v-deep .el-radio__label {
  display: none !important;
}

.table-box-radio .el-table1__header-wrapper .el-checkbox {
  display: none !important;
}

:v-deep .el-tree-node {
  .is-leaf+el-checkbox .el-checkbox__inner {
    display: inline-block;
  }
}

::v-deep .el-overlay-dialog {
  overflow: hidden !important;
}

:v-deep .el-checkbox .el-checkbox__inner {
  display: none;
}

:v-deep .wrap .el-checkbox__input.is-disabled {
  display: none;
}

.el-form {
  margin-top: 10px;
  display: flex;
  //   flex-wrap: wrap;
  justify-content: space-between;
}

.search {
  width: 300px;
  display: flex;
  position: absolute;
  right: 20px;
  top: 20px;
}

.el-form-item {
  text-align: center;
  width: 400px;
}

.flx {
  display: flex;
  width: 100%;

  .el-button {
    margin-left: 10px;
  }
}

.box {
  width: 100%;
  height: 516px;
  overflow-y: hidden;
  border: 1px solid var(--el-color-primary);
  display: flex;
  justify-content: space-between;
}

.treeBox2 {
  overflow: auto;
}

.cskbox {
  width: 40px;
  padding: 107px 0;
  margin-right: 20px;

  .el-icon {
    width: 4em !important;
    height: 6em !important;
  }

  .el-icon svg {
    width: 3em !important;
    height: 3em !important;
  }
}

.listbox {
  border: 1px solid var(--el-color-primary);
  width: 45%;
  overflow-y: scroll;

  ul>li {
    padding: 4px 10px;
    box-sizing: border-box;
  }

  .activ {
    background-color: var(--el-color-primary);
  }
}

.bot_font {
  width: 100%;
  text-align: center;
  font-size: 16px;
  color: #ffff;
  margin-top: 10px;
}

.fenye {
  margin-top: 10px;
}

::v-deep .el-dialog__body {
  overflow: auto !important;
  height: 600px !important;
}
</style>
