<template>
  <div>
    <div class="bigBox mr14">
      <MOSTY.FromPage title="安全方针历史修改记录" @closeDialog="closeDialog">
        <template #content>
          <section class="eltabs3">
            <MOSTY.Table :table-columns="pageData.tableColumns" :tableData="pageData.tableData"
              :tableloading="tableloading" :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="true"
              @handleSelecTable="handleSelecTable">
              <template #actions="{ row }">
                <span class="operesee" @click="handleSee(row)">
                  <el-icon>
                    <View />
                  </el-icon>查看</span>
              </template>
            </MOSTY.Table>
            <div class="fenye">
              <MOSTY.Pages :pageConfiger="searchForm" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />

            </div>
          </section>
        </template>
        <template #footer>
          <el-button @click="closeDialog" type="primary">
            <el-icon>
              <DocumentDelete />
            </el-icon>
            <span>关闭</span>
          </el-button>
        </template>
      </MOSTY.FromPage>
    </div>
  </div>
  <!-- 查看信息 -->
  <div v-if="addShow" class="dialog-box">
    <UpdateAqfz @close="close" :title="title" :isShow="isShow" :obj="formData" :isHistory="true" />
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, defineProps, watch } from "vue";
import { getApi } from "@/api/tobAcco_api.js";
import UpdateAqfz from './updateAqfz.vue'
import * as MOSTY from "@/components/MyComponents/index";
const emits = defineEmits(["closeHistory"]);
const props = defineProps({
  obj: Object
});
const tableloading = ref(false)
const addShow = ref(false)
const title = ref('')
const isShow = ref(true)
const formData = ref({})
const searchForm = reactive({
  orgid: '',
  pageCurrent: 1,
  pageSize: 20,
  total: 0
})
const pageData = reactive({
  tableColumns: [

    {
      title: "安全方针",
      prop: "policy"
    },
    {
      title: "安全滚动标语",
      prop: "slogan"
    },
    {
      title: "发布时间",
      prop: "updateTime"
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],

  tableData: []
})
watch(
  () => props.obj,
  (val) => {
    if (val && val.orgid) {
      searchForm.orgid = val.orgid
      getList()
    }
  },
  { deep: true, immediate: true }
);
// 初始化
onMounted(() => {
});

//分页
const handleSizeChange = (currentSize) => {
  searchForm.pageSize = currentSize;
  getList();
};
const handleCurrentChange = (currentPage) => {
  searchForm.pageCurrent = currentPage;
  getList();
};
const close = () => {
  addShow.value = false;
  formData.value = null
  getList()
};
const handleSee = (row) => {
  title.value = "查看安全方针、滚动标语";
  formData.value = { ...row }
  addShow.value = true
  isShow.value = true
}
// 查询列表
function getList() {
  tableloading.value = true
  getApi(searchForm, "/mosty-jcgl/safetyPolicy/getJlList").then(res => {
    pageData.tableData = res.records
    searchForm.total = res.total
    tableloading.value = false

  }).finally(() => {
    tableloading.value = false
  })
}
//关闭综合配置表
const closeDialog = () => {
  emits("closeHistory");
};
</script>

<style lang="scss" scoped>
.eltabs3 {
  height: calc(100vh - 300px);
}

.bigBox {
  display: black;

}

.fenye {
  margin-top: 10px;
}
</style>