<template>
  <div class="bottom">
    <el-divider />
    <MOSTY.Search :searchArr="searchArr" @submit="onSearch" />
    <el-divider />
    <div class="btnBox">
      <el-button type="primary" @click="addInfo('add')" v-if='isAuth'>
        <el-icon>
          <CirclePlus />
        </el-icon>
        <span>新增</span>
      </el-button>
      <el-button type="primary" @click="onloadExcel" v-loading="loading">
        <el-icon>
          <Download />
        </el-icon>
        <span>导出</span>
      </el-button>
    </div>
    <section class="eltab3">
      <MOSTY.Table :table-columns="data.tableColumn" :tableData="data.tableData" :tableloading="tableloading"
        :isSelect="true" :isSort="true" @SortChange="SortChange" style="width: 100%;">
        <!-- 操作 -->
        <template #actions="{ row }">
          <span class="operedit" v-if='isAuth' @click="addInfo('exit', row.id)" size="small"><el-icon>
              <EditPen />
            </el-icon>修改</span>
          <el-popconfirm v-if='isAuth' 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>
          <span class="operesee" @click="addInfo('see', row.id)" size="small"><el-icon>
              <View />
            </el-icon>查看</span>
        </template>
      </MOSTY.Table>
    </section>
    <div class="fenye">
      <MOSTY.Pages :pageConfiger="listQuery" @changeNo="changeNo" @changeSize="changeSize">
      </MOSTY.Pages>
    </div>
  </div>
  <div v-if="AddShowdia" class="dialog-box">
    <Addldfh v-if="AddShowdia" :obj="rowObj" @onChange="onClose" />
  </div>
</template>

<script setup>
import * as MOSTY from "@/components/MyComponents/index";
import { filterYear } from "@/utils/auth.js";
import Addldfh from "../Details/Addldfh.vue";
import { ElMessage } from "element-plus";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { getItem } from "@/utils/storage";
import { getAuth } from "@/utils/tools.js";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { reactive, ref, watch, onMounted, getCurrentInstance } from "vue";
const emit = defineEmits("changePage");
const { proxy } = getCurrentInstance();
const { D_BZ_WPDW } = proxy.$dict("D_BZ_WPDW");
const props = defineProps({ orgCode: String, orgname: String })
const tableloading = ref(false);
const isAuth = ref(false)
const rowObj = ref({
  title: '劳动防护用品新增',
  saveBtn: true,
  id: null,
})
const AddShowdia = ref(false)
const loading = ref(false)
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 10,
  total: 0
});
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    defaultVal: new Date().getFullYear(),
    width: '250px',
    options: filterYear(5),
  }
]);
const data = reactive({
  searchObj: {},
  tableData: [],
  tableColumn: [
    {
      title: "单位名称",
      prop: "orgname",
      sortable: true
    },
    {
      title: "部门名称",
      prop: "deptname",
      sortable: true
    },
    {
      title: "发放日期",
      prop: "time",
      sortable: true
    },
    {
      title: "发放防护用品内容",
      prop: "content",
      sortable: true
    },
    {
      title: "操作",
      prop: "actions",
      slot: true,
      sortable: true
    }
  ],


});
watch(
  () => props.orgCode,
  (newValue) => {
    if (props.orgCode) {
      listQuery.pageCurrent = 1
      getTableData()
    }

  },
  { deep: true, immediate: true }
);
onMounted(() => {
  isAuthorize()
});
// 是否可以操作
const isAuthorize = async () => {
  isAuth.value = await getAuth()
}
//排序
function SortChange(prop, order) {
  if (prop == 'orgname') {
    listQuery.sortField = 'orgid'
  } else if (prop == 'deptname') {
    listQuery.sortField = 'deptid'
  } else {
    listQuery.sortField = prop
  }
  listQuery.sortOrder = order
  getTableData()
}
const onSearch = (obj) => {
  listQuery.year = obj.year;
  listQuery.pageCurrent = 1;
  getTableData()
};
//获取列表数据
function getTableData() {
  tableloading.value = true;
  listQuery.orgid = props.orgCode
  data.deptname = getItem("deptId").ssbmid;
  getApi(
    listQuery,
    "/mosty-jcgl/labourGoods/getPageList"
  ).then((res) => {
    if (res.records) {
      data.tableData = res.records;
      listQuery.total = res.total;
    } else {
      data.tableData = [];

    }
  }).finally(() => {
    tableloading.value = false;
  });
}

const changeNo = (val) => {
  listQuery.pageCurrent = val;
  getTableData();
};
const changeSize = (val) => {
  listQuery.pageSize = val;
  getTableData();
};


//点击新增
function addInfo(type, id) {
  if (type == 'add') {
    rowObj.value.title = '劳动防护用品新增'
    rowObj.value.saveBtn = true
    rowObj.value.id = null
  } else if (type == 'exit') {
    rowObj.value.title = '劳动防护用品修改'
    rowObj.value.saveBtn = true
    rowObj.value.id = id
  } else {
    rowObj.value.title = '劳动防护用品详情'
    rowObj.value.saveBtn = false
    rowObj.value.id = id
  }
  AddShowdia.value = true
}
function onClose() {
  AddShowdia.value = false
  getTableData();
}
//删除
const del = (val) => {
  postApi(
    {},
    `/mosty-jcgl/labourGoods/delete/${val.id}`
  ).then((res) => {
    ElMessage.success("删除成功");
    getTableData();
  });
};
//导出Excel
function onloadExcel() {
  let title = {
    orgname: '单位名称',
    deptname: '部门名称',
    name: '防护用品名称',
    model: '型号',
    count: '数量',
    unit: '计量单位',
    person: '领取人',
    position: '领取人岗位',
    time: '领取日期日期',
  }
  loading.value = true
  getApi(listQuery, '/mosty-jcgl/labourGoods/exportData').then((res) => {
    if (res) {
      let data = res
      if (data.length > 0) {
        data.forEach(el => {
          el.unit = proxy.$getDictVal(el.unit, D_BZ_WPDW);
        });
        let tablename = '劳动防护用品发放领用清单.xlsx'
        exportXlsx(title, data, `${props.orgname} 劳动防护用品发放领用清单`, tablename);
        loading.value = false

      } else {
        ElMessage.warning('暂无数据');
        loading.value = false
      }
    }

  }).catch(err => {
    loading.value = false
  })
}
</script>

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

.usermanage {
  display: flex;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 18px;
    color: #0f3916;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }



  .right {
    padding: 0 10px;
    margin: 0px 14px;
    background: #fff;

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

    .fenye {
      top: 95%;
    }
  }
}

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