<template>
  <div class="usermanage">
    <!-- 组织机构信息 -->
    <div class="top" v-show="!showPage">
      <div class="head">
        <div class="title">应急预案统计</div>
        <div class="year" style="color:gray;margin-right:20px;">
          <span class="shrink0">年份：</span>
          <el-date-picker v-model="listQuery.year" type="year" format="YYYY" value-format="YYYY" @change="search"
                          placeholder="请选择年份" />
        </div>
      </div>
      <div class="main">
        <div class="left">
          <div style="height: calc(100vh - 252px);">
            <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
                         :isSelect="true" :isSort="true">
              <template #actions="{ row }">
                <span class="operesee" @click="showInfo(row)">
                  <el-icon>
                    <Compass />
                  </el-icon>查看演练</span>
              </template>
            </MOSTY.Table>
          </div>
          <div class="fenye">
            <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize" />
          </div>
        </div>
        <div class="right">
          <right-box :id="id" :time="timestamp" @changePage="changePage" :showPage="showPages"></right-box>
        </div>
      </div>
    </div>
    <AddOrEdite v-if="showPage" :editObj="editObj" @changeShowPage="changeShowPage"></AddOrEdite>
  </div>
</template>
<script setup>
import * as MOSTY from "@/components/MyComponents/index"
import { ElMessage } from "element-plus"
import { reactive, ref, watch, onMounted } from "vue"
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js"
import RightBox from "../Toyanlian/index.vue"
import AddOrEdite from "../../yljh/AddOrEdite/index.vue"

const id = ref("")
let timestamp = ref("")
const showPages = ref(false)
const tableloading = ref(false)
const emit = defineEmits("changeShowPage")
const showPage = ref(false)
const editObj = ref(null)
// 查询参数
const listQuery = ref({
  pageCurrent: 1,
  pageSize: 20,
  total: 0,
  year: new Date().getFullYear() + ""
})
// 表格参数
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "预案名称",
      prop: "planname"
    },
    {
      title: "所属部门",
      prop: "deptname"
    },
    {
      title: "所属单位",
      prop: "orgname"
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ]

})
//监听详情页面返回
const changeShowPage = (val) => {
  showPages.value = !showPages.value
  showPage.value = false
}
// 切换分页
const changeNo = (val) => {
  listQuery.value.pageCurrent = val
  getTableData()
}
//切换每页显示的条数
const changeSize = (val) => {
  listQuery.value.pageSize = val
  getTableData()
}
//初始化
onMounted(() => {
  getTableData()
})

// 获取列表信息
function getTableData() {
  tableloading.value = true
  getApi(listQuery.value, `/mosty-jcgl/yjyl/countYjylByYear`).then((res) => {
    if (res.records) {
      data.tableData = res.records
      listQuery.value.total = res.total
      if (res.records.length > 0) {
        id.value = res.records[0].id
        timestamp.value = new Date().getTime()
      }
    } else {
      data.tableData = []
    }
  }).finally(() => {
    tableloading.value = false
  })
}

//获取子组件参数
function changePage(val) {
  showPage.value = true
  editObj.value = val
}

// 按时间搜索
const search = () => {
  listQuery.value.pageCurrent = 1
  getTableData()
}
// 点击展示详情
const showInfo = (row) => {
  id.value = row.id
  console.log(new Date().getTime())
  timestamp.value = new Date().getTime()
}
</script>
<style lang="scss" scoped>
.usermanage {
  .top {
    height: 100%;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;

    .main {
      display: flex;
      justify-content: center;

      > div {
        width: 50vw;
        height: 85vh;
        // border: 1px solid var(--el-color-primary);
      }

      .left {
        border-right: none;
      }
    }

    .head {
      display: flex;
      justify-content: space-between;

      .year {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .title {
        width: 100%;
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        color: #0f3916;
        display: flex;
        align-items: center;
      }
    }

    .fenye {
      top: 95%;
    }
  }
}
</style>
