<template>
  <div>
    <MOSTY.PageTree :searchType="'03'" @getDeptId="getdeptId">
      <template #serach>
        <el-divider v-if="showtabs" />
        <MOSTY.Search v-if="showtabs" :searchArr="searchArr" @submit="onSearch" />
        <el-divider />
        <section class="button">
          <el-button v-if="showtabs" type="primary" :loading="loadingshow" @click="onloadExcel">
            <el-icon>
              <Download />
            </el-icon>
            <span>导出</span>
          </el-button>
          <!-- 只有当前登录的安全部门可以新增 -->
          <el-button type="primary" @click="onAddys" v-if="showadds">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>新增</span>
          </el-button>
          <el-button type="primary" @click="onBlack" v-if="!showtabs">
            <el-icon>
              <ArrowLeft />
            </el-icon>
            <span>返回</span>
          </el-button>
        </section>
      </template>
      <template #table>
        <div v-if="showtabs">
          <section class="eltab9">
            <MOSTY.Table :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
              :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">
              <template #ctype="{ row }">
                <dict-tag v-if="row.ctype" :options="D_BZ_YSFYLB" :value="row.ctype" :tag="false" />
                <span v-else>无</span>
              </template>
              <template #actions="{ row }">
                <span class="operedit" @click="seefyInfo(row)" v-if='row.state == "1"'><el-icon>
                    <Edit />
                  </el-icon>费用使用</span>
                <span class="operesee" @click="seeInfotable(row)"><el-icon>
                    <View />
                  </el-icon>查看</span>
              </template>
            </MOSTY.Table>
          </section>
          <div class="fenye">
            <MOSTY.Pages :pageConfiger="pageConfiger" @changeSize="handleSizeChange" @changeNo="handleCurrentChange">
            </MOSTY.Pages>
          </div>
        </div>
        <div v-else>
          <section class="eltab8">
            <MOSTY.Table :table-columns="tableColumn2" :tableData="tableDatasy" :tableloading="tableloading"
              :isSelect="false" :isSort="true" @SortChange="SortChange" style="width: 100%;">

              <template #actions="{ row }">
                <span class="operedit" v-if="showadds" @click="xgsyje(row)"><el-icon>
                    <EditPen />
                  </el-icon>修改</span>
                <el-popconfirm v-if="showadds" confirm-button-text="是" cancel-button-text="否" icon-color="red"
                  title="确定要删除?" @confirm="scsyje(row)">
                  <template #reference>
                    <span class="operdel" size="small"><el-icon>
                        <Delete />
                      </el-icon>删除</span>
                  </template>
                </el-popconfirm>
                <span class="operesee" v-if="!showadds" @click="cksyye(row)"><el-icon>
                    <View />
                  </el-icon>查看</span>
              </template>
            </MOSTY.Table>
          </section>
          <div class="fenye">
            <MOSTY.Pages :pageConfiger="pageConfiger2" @changeSize="handleSizeChanges" @changeNo="handleCurrentChanges">
            </MOSTY.Pages>
          </div>
        </div>
      </template>
    </MOSTY.PageTree>

    <aqfysyinfo v-model="addplanShow" @changeAddVi="changeAddVi" :id="budgetid" :rowid="rowid" :title="title"
      v-if="addplanShow" />
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import aqfysyinfo from "./commponents/aqfysyinfo.vue";
import { numAdd } from "@/utils/tools.js";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { ElMessage } from "element-plus";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { filterYear } from "@/utils/auth.js";
const { proxy } = getCurrentInstance();
const { D_BZ_YSFYLB } = proxy.$dict("D_BZ_YSFYLB");
const addplanShow = ref(false);
const showadds = ref(false);
const loadingshow = ref(false);
const showtabs = ref(true);
const budgetid = ref('');
const tableloading = ref(false);
const title = ref(""); //弹窗标题
const rowid = ref(null);
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  years: new Date().getFullYear().toString(),
  orgid: null,
  ctype: null
});
const param = reactive({
  pageCurrent: 1,
  pageSize: 20,
  budgetid: null
});
const searchArr = reactive([
  {
    showType: "select",
    prop: "year",
    defaultVal: new Date().getFullYear(),
    width: '250px',
    options: filterYear(5),
  },
  {
    showType: "selectTree",
    prop: "ctype",
    width: '250px',
    options: 'D_BZ_YSFYLB',
    placeholder: '请选择预算类别'
  }
]);
const tableData = ref([]);
const tableDatasy = ref([]);
// 树的展开与折叠
const iconChange = ref(true);
const lfBoxWid = ref("300px");
const rgBoxWid = ref("calc(100% - 300px)");
const total = ref(0);
const tableColumn = ref([
  {
    title: "预算项目",
    prop: "budgettitle",
    sortable: true
  },
  {
    title: "预算类别",
    prop: "ctype",
    slot: true,
    sortable: true
  },
  {
    title: "年初批复数",
    prop: "budget",
    sortable: true
  },
  {
    title: "中期批复数",
    prop: "gkpf",
    sortable: true
  },
  {
    title: "年度批复数",
    prop: "ndgkpfs",
    sortable: true
  },
  {
    title: "总使用金额",
    prop: "costFee",
    sortable: true
  },
  {
    title: "可使用金额",
    prop: "ksyfree",
    sortable: true
  },
  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const tableColumn2 = ref([
  {
    title: "标题",
    prop: "costDetailTitle",
    sortable: true
  },
  {
    title: "使用金额",
    prop: "costFee",
    sortable: true
  },
  {
    title: "时间",
    prop: "xtCjsj",
    sortable: true
  },

  {
    title: "操作",
    prop: "actions",
    slot: true
  }
])
const pageConfiger2 = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
onMounted(() => {
});
//刷新
function resetTable(val) {
  listQuery.pageSize = 20;
  listQuery.pageCurrent = 1;
  listQuery.years = new Date().getFullYear().toString();
  getDataList();
}
//获取部门参数
const getdeptId = (val) => {
  showtabs.value = true;
  listQuery.orgid = val.id;
  listQuery.pageCurrent = 1;
  getDataList();
};
//查询
function onSearch(obj) {
  listQuery.pageCurrent = 1;
  listQuery.years = obj.year;
  listQuery.ctype = obj.ctype;
  getDataList();
}

//	安全投入统计统计列表
function getDataList() {
  tableloading.value = true;
  getApi(listQuery, "/mosty-jcgl/budgets/getNcBudgetsPage")
    .then((res) => {
      if (res.records) {
        tableloading.value = false;
        tableData.value = res.records;
        tableData.value.forEach(async (item) => {
          item.budget = item.budget ? item.budget : 0;
          item.gkpf = numAdd("add", 4, item.budget, item.gkshzj);
          item.ndgkpfs = numAdd("add", 4, item.gkpf, item.yeargkshzj);
          item.costFee = Number(item.costFee) ? Number(item.costFee) : 0;
          item.ksyfree = numAdd("reduce", 4, item.ndgkpfs, item.costFee);

        });
        pageConfiger.total = res.total;
      }
    }).catch(() => {
      tableData.value = [];
      tableloading.value = false;
    });
}

//新增安全预算使用
function onAddys() {
  title.value = "添加使用";
  rowid.value = null;
  addplanShow.value = true;
}
//修改使用金额
function xgsyje(val) {
  title.value = "修改预算";
  rowid.value = val.id;
  addplanShow.value = true;
}
//查看预算
function cksyye(val) {
  title.value = "查看预算";
  rowid.value = val.id;
  addplanShow.value = true;
}
//查看
function seeInfotable(val) {
  showtabs.value = false;
  showadds.value = false;
  param.budgetid = val.id;
  budgetid.value = val.id;
  getsyqklist();
}
//使用情况
function seefyInfo(val) {
  budgetid.value = val.id;
  showadds.value = true;
  showtabs.value = false;
  param.budgetid = val.id;
  getsyqklist();
}
//刷新
function changeAddVi(val) {
  addplanShow.value = val;
  getsyqklist();
}
//删除
function scsyje(val) {
  postApi({}, `/mosty-jcgl/budgetsCost/delCost/${val.id}`).then((res) => {
    ElMessage.success("删除成功");
    getsyqklist();
  });
}
//使用情况列表
function getsyqklist() {
  getApi(param, "	/mosty-jcgl/budgetsCost/getPageList")
    .then((res) => {
      if (res.records) {
        tableloading.value = false;
        tableDatasy.value = res.records;
        pageConfiger2.total = res.total;
      }
    })
}

//返回
function onBlack() {
  showtabs.value = true;
  resetTable();
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getDataList();
};
//分页
const handleSizeChanges = (currentSize) => {
  param.pageSize = currentSize;
  pageConfiger2.pageSize = currentSize;
  getsyqklist();
};
const handleCurrentChanges = (currentPage) => {
  param.pageCurrent = currentPage;
  pageConfiger2.pageCurrent = currentPage;
  getsyqklist();
};
//导出Excel
function onloadExcel() {
  loadingshow.value = true
  let title = {
    budgettitle: "预算项目",
    ctype: "预算类别",
    budget: "年初批复数",
    gkpf: "中期批复数",
    ndgkpfs: "年度批复数",
    costFee: "总使用金额",
    ksyfree: "可使用金额"
  };
  let obj = {
    pageCurrent: 1,
    pageSize: 100000,
    years: listQuery.years
  }
  getApi(obj, "/mosty-jcgl/budgets/getNcBudgetsPage").then(async (res) => {
    if (res) {
      let data = res.records;
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].ctype = proxy.$getDictVal(data[i].ctype, D_BZ_YSFYLB);
          data[i].budget = data[i].budget ? data[i].budget : 0;
          data[i].gkpf = numAdd("add", 4, data[i].budget, data[i].gkshzj);
          data[i].ndgkpfs = numAdd("add", 4, data[i].gkpf, data[i].yeargkshzj);
          data[i].costFee = Number(data[i].costFee) ? Number(data[i].costFee) : 0;
          data[i].ksyfree = numAdd("reduce", 4, data[i].ndgkpfs, data[i].costFee);
        }
        let tablename = "安全费用使用列表.xlsx";
        exportXlsx(title, data, '安全费用使用列表', tablename);
        // loadingshow.value = false
      }
    }
  }).finally(() => {
    loadingshow.value = false
  });
}
</script>

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

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

    .el-icon {
      cursor: pointer;
    }
  }

  .left {
    width: 300px;
    background: #ffffff;
    box-shadow: 0px 2px 10px 0px rgba(107, 107, 107, 0.1);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;

    .treeBox {
      overflow: auto;
    }
  }

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

  }
}


.button {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.sectabs3 {
  height: calc(100vh - 369px);
}
</style>
