<template>
  <MOSTY.PageTree :pageTitle="'职业危害管理'" :isShowLeftTree="false">
    <template #serach>
      <el-divider />
      <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
      <el-divider />
      <div class="btnBox">
        <el-button type="primary" @click="addInfo" v-if='isAuth'>
          <el-icon>
            <CirclePlus />
          </el-icon>
          <span>新增</span>
        </el-button>
      </div>
    </template>
    <template #table>
      <section class="eltab9">
        <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
          :isSelect="false" :isSort="false" @SortChange="SortChange" style="width: 100%;">
          <template #type="{ row }">
            <dict-tag v-if="row.type" :options="D_BZ_ZYWHGL" :value="row.type" :tag="false" />
            <span v-else>无</span>
          </template>
          <template #actions="{ row }">
            <span class="operesee" v-if="row.fileid" @click="handlesjjd(row)" size="small"><el-icon>
                <Compass />
              </el-icon>下载附件</span>
            <span class="operedit" @click="xiugai(row)" size="small"><el-icon>
                <EditPen />
              </el-icon>修改</span>
            <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red" title="确定要删除?"
              @confirm="del(row)">
              <template #reference>
                <span class="operdel" size="small">
                  <el-icon>
                    <Delete />
                  </el-icon>删除</span>
              </template>
            </el-popconfirm>
          </template>
        </MOSTY.Table>
      </section>
      <div class="fenye">
        <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize">
        </MOSTY.Pages>
      </div>
    </template>
  </MOSTY.PageTree>

</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { createAndClickLink } from "@/utils/tools.js";
import { reactive, ref, watch, onMounted, getCurrentInstance } from "vue";
import { getAuth } from "@/utils/tools.js";
const { proxy } = getCurrentInstance();
const { D_BZ_ZYWHGL } = proxy.$dict("D_BZ_ZYWHGL");
const emit = defineEmits("changePage");
const tableloading = ref(false);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
  total: 0,
  year: new Date().getFullYear().toString()
});
const isAuth = ref(false)
const searchArr = reactive([
  {
    showType: "input",
    prop: "whglname",
    placeholder: "请输入文件名称"
  },
  {
    showType: "year",
    prop: "year",
    placeholder: "请选择年份"
  }
]);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "文件名",
      prop: "whglname",
    },
    {
      title: "类型",
      prop: "type",
      slot: true
    },
    {
      title: "所属单位",
      prop: "orgname"
    },
    {
      title: "年份",
      prop: "year"
    },
    {
      title: "操作",
      prop: "actions",
      slot: true
    }
  ],

});
onMounted(() => {
  getTableData();
  isAuthorize()
});
// 是否可以操作
const isAuthorize = async () => {
  isAuth.value = await getAuth()
}

const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};
// 查询数据
const onSearch = (obj) => {
  listQuery.whglname = obj.whglname;
  listQuery.year = obj.year ? obj.year : new Date().getFullYear().toString();
  listQuery.pageCurrent = 1;
  getTableData();
};
//获取列表数据
function getTableData() {
  tableloading.value = true;
  postApi(
    listQuery,
    "/mosty-jcgl/occupationalHazardManagement/queryOccupationalHazardManagement"
  ).then((res) => {
    if (res.records) {
      tableloading.value = false;
      data.tableData = res.records;
      listQuery.total = res.total;
    } else {
      data.tableData = [];
      tableloading.value = false;
    }
  }).finally(() => {
    tableloading.value = false;
  });
}

//获取详情
function gtdataxq(id, title, saveBtn) {
  getApi(
    {},
    `/mosty-jcgl	/occupationalHazardManagement/getOccupationalHazardManagementById/${id}`
  ).then((res) => {
    let obj = {
      title, //表单标题
      saveBtn, //是否展示保存按钮
      zdlist: { D_BZ_ZYWHGL },
      row: res //列表内容
    };
    emit("changePage", "Details", obj);
  });
}
//详情
const handlesjjd = (row) => {
  getApi({}, `/mosty-base/minio/file/download/${row.fileid}`).then((res) => {
    handledlon(res);
  });
};
//下载文件
function handledlon(val) {
  createAndClickLink(val.url, val.originalName)
}
//修改
const xiugai = (row) => {
  gtdataxq(row.id, "修改职业危害", true);
};
//点击新增
function addInfo() {
  let obj = {
    title: "添加职业危害", //表单标题
    saveBtn: true, //是否展示保存按钮
    zdlist: { D_BZ_ZYWHGL },
    row: {} //列表内容
  };
  emit("changePage", "Details", obj);
}
//删除
const del = (val) => {
  postApi(
    {},
    `/mosty-jcgl/occupationalHazardManagement/deleteOccupationalHazardManagementOne/${val.id}`
  ).then((res) => {
    ElMessage.success("删除成功");
    getTableData();
  });
};
</script>

<style lang="scss" scoped>
.search {
  display: flex;
}

::v-deep .el-input__suffix {
  margin-top: -5px;
}

::v-deep .el-input__prefix {
  margin-top: -5px;
}

.bigBox {
  display: block;
}

.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}
</style>