<template>
  <div>
    <MOSTY.PageTree :searchType="'03'" @getDeptId="getdeptId" :isShowLeftTree="false">
      <template #titleright>
        <div class="toggle" :class="{ active: isOpen }" @click="isOpen = !isOpen">
          <span>统计</span>
          <el-icon>
            <DArrowLeft />
          </el-icon>
        </div>
      </template>
      <template #serach>
        <section v-show='isOpen' ref="getHeight">
          <section class="box-sjtj">
            <MOSTY.Assort :title="'安全预算统计'" style="padding: 0;" />
            <section class="flex">
              <section class="left-tj">
                <Sjtj :info="countlist" :isShowTip="false" :isShowBottom="false" :width="400" mb="6px" />
              </section>
            </section>
          </section>
        </section>
        <el-divider />
        <MOSTY.Search :searchArr="searchArr" @submit="onSearch" :noDisabledDate='true' @reset="searchReset">
          <template #searbox>
            <!-- <el-select style="width:250px" v-model="listQuery.cwkm" placeholder="请选择财务类别" @change="cwkmSearchChange">
              <el-option v-for="item in D_TB_YSCWKU" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select> -->
            <el-select style="width:250px;margin-left: 20px;" v-model="listQuery.ctype" placeholder="请选择预算类别"
              @change="ctypeSearchChange">
              <el-option v-for="item in D_BZ_YSFYLB" :key="item.value" :label="item.label" :value="item.value">
                <span style="float: left;">{{ item.label }}</span>
                <el-popover :popper-style="{ color: 'rgb(0, 116, 87)' }" placement="top-start" :width="590"
                  trigger="hover" :title="ctypeObj && ctypeObj[item.value] || ''">
                  <template #reference>
                    <el-icon style="float: right;height: 32px;line-height: 32px;" :size="16">
                      <Warning />
                    </el-icon>
                  </template>
                </el-popover>
              </el-option>
            </el-select>
          </template>
        </MOSTY.Search>
        <el-divider />
        <div class="btnBox">
          <!-- 只有当前登录的安全部门可以新增（） -->
          <!-- <el-button v-if="isHalfYear" type="primary" @click="onAddys('ncadd', '年度预算调整新增')">
            <el-icon>
              <CirclePlus />
            </el-icon>

            <span>年度预算调整新增</span>
          </el-button> -->
          <el-button type="primary" @click="onAddys('nzadd', '中期预算调整新增')">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>预算调整新增</span>
          </el-button>
          <el-button v-if="isShowAuditBtn" type="primary" @click="AuditClick">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>提交审核</span>
          </el-button>
          <!-- <el-button type="primary" @click="onAddys('ndadd', '年度预算调整新增')"
            v-if="ssdept.orgBizType == '04' || ssdept.orgBizType == '52'">
            <el-icon>
              <CirclePlus />
            </el-icon>
            <span>年度预算调整新增</span>
          </el-button> -->
          <el-button type="primary" v-loading="loadingShow" @click="onloadExcel">
            <el-icon>
              <Download />
            </el-icon>
            <span>导出</span>
          </el-button>
        </div>
      </template>
      <template #table>
        <section :style="{ 'height': totalHeight }">
          <MOSTY.Table :table-columns="tableColumns" :tableData="tableData" :tableloading="tableloading"
            :isSelect="false" :isSort="false" :tableHeight="'100%'" @SortChange="SortChange" :actionsW="280">
            <template #ctype="{ row }">
              <dict-tag v-if="row.ctype" :options="D_BZ_YSFYLB" :value="row.ctype" :tag="false" />
              <span v-else>无</span>
            </template>
            <template #cwkm="{ row }">
              <dict-tag v-if="row.cwkm" :options="D_TB_YSCWKU" :value="row.cwkm" :tag="false" />
              <span v-else>无</span>
            </template>
            <template #costFee="{ row }">
              {{ row.costFee || 0 }}
            </template>
            <template #state="{ row }">
              <dict-tag v-if="row.state" :options="stateOpt" :value="row.state" :tag="true" />
              <span v-else>无</span>
            </template>
            <template #actions="{ row }">
              <!-- 如果中期调整过： 那么只能是0（未上报）；中期未调整：6审核通过，且是年初（年度）新增 -->
              <!-- <span v-if="row.adjust == 1 ? (row.state == '0') : (row.state == '6' && row.type == '01')"
                class="operesee" @click="ysshbtn(row, 'nztz')"><el-icon>
                  <Edit />
                </el-icon>中期调整</span> -->
              <span v-if="row.adjust == 1 ? (row.state == '0') : (row.type == '01')" class="operesee"
                @click="ysshbtn(row, 'nztz')"><el-icon>
                  <Edit />
                </el-icon>中期调整</span>
              <!-- <span class="operesee"
                v-if="row.middlestate == '2' && row.yearstate != '2' && row.verifyuserid == USERID"
                @click="ysshbtn(row, 'ndsh')"><el-icon>
                  <Edit />
                </el-icon>年度预算调整审核
              </span> -->
              <span v-if="row.adjust != 1 && (row.state == 0 || row.state == 5)" class="operedit"
                @click="xgInfo(row)"><el-icon>
                  <EditPen />
                </el-icon>修改</span>
              <el-popconfirm confirm-button-text="是" cancel-button-text="否" icon-color="red"
                title="删除预算项目时，会同时删除预算项目下的使用记录。" @confirm="handledelete(row)">
                <template #reference>
                  <span class="operdel" size="small"><el-icon>
                      <Delete />
                    </el-icon>删除</span>
                </template>
              </el-popconfirm>
              <span class="operesee" @click="seeInfo(row)">
                <el-icon>
                  <View />
                </el-icon>查看</span>
            </template>
          </MOSTY.Table>
        </section>
        <div class="fenye">
          <MOSTY.Pages :pageConfiger="pageConfiger" @changeNo="handleCurrentChange" @changeSize="handleSizeChange" />
        </div>
      </template>
    </MOSTY.PageTree>
    <!-- 新增 -->
    <div class="dialog-box" v-if="addysShow">
      <aqyslbinfo v-if="addysShow" @close="addysShow = false;" @resttab="resetTable" :saveBtnShow="saveBtnShow"
        :title="title" :sybmlist="sybmlist" :type="type" :id="rowid" :orgcode="orgids" />
    </div>
    <div class="dialog-box" v-if="addplanShow">
      <aqyslnd @close="addplanShow = false; type = null" @resttab='resetTable' :saveBtnShow="saveBtnShow" :title="title"
        :type="type" :id="rowid" :sybmlist="sybmlist" />
    </div>
  </div>
</template>

<script setup>
// 引入
import { reactive, onMounted, ref, getCurrentInstance, nextTick, watch, computed } from 'vue'
import aqyslbinfo from "./commponents/aqyslbinfo.vue";
import { ElMessage } from "element-plus";
import * as MOSTY from "@/components/MyComponents/index";
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import aqyslnd from "./commponents/aqyslnd.vue";
import { exportXlsx, downloadImg } from "@/excel/Export2Excel.js";
import { getItem } from "@/utils/storage";
import { filterYear } from "@/utils/auth.js";
import { numAdd } from "@/utils/tools.js";
import Sjtj from '@/views/dataReportWork/aqjypx/components/sjtj.vue'
import Big from "@/utils/big.js"
import { ctypeObj } from "./commponents/dict.js"


import {
  getDept
} from "@/api/user-manage";
const { proxy } = getCurrentInstance();
const { D_BZ_YSFYLB, D_TB_YSCWKU } = proxy.$dict("D_BZ_YSFYLB", "D_TB_YSCWKU");
const sybmlist = ref([])
const addplanShow = ref(false);
const addysShow = ref(false);
/** 当前时间是否是上半年 */
const isHalfYear = ref(new Date().getMonth() < 6);
const searchArr = reactive([
  {
    showType: "year",
    prop: "years",
    width: '250px',
    defaultVal: new Date().getFullYear().toString(),

  },
  // {
  //   showType: "selectTree",
  //   prop: "cwkm",
  //   width: '250px',
  //   options: 'D_TB_YSCWKU',
  //   placeholder: '请选择财务科目'
  // },
  // {
  //   showType: "selectTree",
  //   prop: "ctype",
  //   width: '250px',
  //   options: 'D_BZ_YSFYLB',
  //   placeholder: '请选择预算类别'
  // },
  // {
  //   showType: "select",
  //   prop: "state",
  //   width: '250px',
  //   //审批状态（0-未上报 1-县公司安全部门负责人 2-市州公司安全部门负责人审批 3-省局公司安全部门负责人审批 4-审批通过 5-被驳回
  //   options: [
  //     {label:'未上报',value:'0'},
  //     {label:'县公司安全部门负责人',value:'1'},
  //     {label:'市州公司安全部门负责人审批',value:'2'},
  //     {label:'省局公司安全部门负责人审批',value:'3'},
  //     {label:'审批通过',value:'4'},
  //     {label:'被驳回',value:'5'},
  //   ],
  //   placeholder: '请选择审核状态'
  // },

]);
const isShowAuditBtn = ref(false);
// const tableColumnsFilter = computed(() => {
//   let arr = []
//   if (listQuery.cwkm) {
//     // listQuery.
//     arr = tableColumns.filter((item) => {
//       return item.prop !== 'cwkm'
//     })
//   } else {
//     arr = tableColumns.filter((item) => {
//       return item.prop !== 'ctype'
//     })
//   }
//   return arr
// })
const stateOpt = [
  { label: '未上报', value: '0', elTagType: 'ysshpf-oper-red' },
  { label: '部门已上报', value: '1' },
  { label: '县安全部门负责人审批', value: '2' },
  { label: '市安全部门负责人汇总', value: '3' },
  { label: '市安全部门负责人审核', value: '4' },
  { label: '省安全部门负责人审核', value: '5' },
  { label: '审批通过', value: '6' },
];
const countlist = reactive([
  { title: '总预算', num: 0.0000 + '万元', dm: 'budgetmoney', icon: 'ccss/icon_02.png' },
  { title: '总使用', num: 0.0000 + '万元', dm: 'totalcost', icon: 'ccss/icon_03.png' },
  { title: '总剩余', num: 0.0000 + '万元', dm: 'symoney', icon: 'ccss/icon_04.png' }
])
const loadingShow = ref(false);
const tableloading = ref(false)
const USERID = getItem("USERID")
const ssdept = getItem("deptId")
const title = ref('');//弹窗标题
const type = ref('01');//控制弹窗参数(01:年初预算调整审核新增)
const rowid = ref(null)
const listQuery = reactive({
  pageCurrent: 1,
  pageSize: 20,
  years: new Date().getFullYear().toString(),
  orgid: null,
  ctype: null
});
const isOpen = ref(false);
/**
 * @typedef {Object} TableItem
 * @property {string} budgettitle 预算项目
 * @property {string} cwkm 财务科目
 * @property {string} ctype 预算类别
 * @property {string} deptname 使用部门
 * @property {number} costFee 使用金额(万元)
 * @property {number} symoney 剩余金额(万元)
 * @property {number} budgetmoney 年初预算调整金额(万元)
 * @property {number} budget 年初批复
 * @property {number} tzzj 中期调整增减数
 * @property {number} gkshzj 中期归口审核增减数
 * @property {number} yeartzzj 年度调整增减数
 * @property {number} yeargkshzj 年度归口审核增减数
 * @property {string} state 状态
 */

/**
 * @type {Array<TableItem>} tableData.value
 */
const tableData = ref([])

const pageConfiger = reactive({
  pageSize: 20,
  pageCurrent: 1,
  total: 0
})
const tableColumns = reactive([
  {
    title: "预算项目",
    prop: "budgettitle",
    fixed: 'left',
    width: '180',
  },

  {
    title: "预算类别",
    prop: "ctype",
    width: '200',
    slot: true
  },
  {
    title: "使用部门",
    prop: "deptname",
    width: '180',
  },
  {
    title: "年初批复预算",
    prop: "firstApprovedBudget", //  budgetmoney
  },
  {
    title: "中期调整增减数",
    prop: "tzzj",
  },
  {
    title: "预算金额",
    prop: "budget",
  },
  {
    title: "使用金额(万元)",
    prop: "costFee",
    width: '120',
    slot: true
  },
  {
    title: "剩余金额(万元)",
    prop: "budgetmoney",
  },
  /*   {
      title: "年初预算调整金额(万元)",
      prop: "budgetmoney",
      width: '120',
    },

    {
      title: "年初批复",
      prop: "budget",
      width: '120',
    }, */


  // {
  //   title: "中期归口审核增减数",
  //   prop: "gkshzj",
  // },
  // {
  //   title: "年度调整增减数",
  //   prop: "yeartzzj",
  //   width: '200',
  // },
  // {
  //   title: "年度归口审核增减数",
  //   prop: "yeargkshzj",
  //   width: '200',
  // },
  // {
  //   title: "状态",
  //   prop: "state",
  //   fixed: 'right',
  //   slot: true
  // },
  {
    title: "操作",
    prop: "actions",
    fixed: 'right',
    slot: true
  }
])

const deptid = ref(null)
const orgids = ref(null)
const totalHeight = ref(null)
const getHeight = ref(null)
watch(() => isOpen.value, (val) => {
  nextTick(() => {
    if (val) {
      totalHeight.value = `calc(100vh - ${379 + getHeight.value.offsetHeight}px)`
      return
    }
    totalHeight.value = `calc(100vh - 379px)`
  })
}, {
  deep: true,
  immediate: true
})
const setAuditBtn = () => {
  // getApi({ years: listQuery.years }, "/mosty-jcgl/ys/checkDeptAudit").then((res) => {
  //   isShowAuditBtn.value = !!res;
  // })
}
onMounted(() => {
  nextTick(() => {
    totalHeight.value = `calc(100vh - ${379 + getHeight.value.offsetHeight}px)`
  })

  getDataList()
  // setAuditBtn()
  // getTotaldata()
})
//获取年初查询年初统计
function getTotaldata() {
  getApi(listQuery, "/mosty-jcgl/budgets/getNcBudgetsSum").then((res) => {
    countlist[0].num = res.budget ? `${Number(res.budget).toFixed(4)}万元` : `${0.0000}万元`;
    countlist[1].num = res.totalcost ? `${Number(res.totalcost).toFixed(4)}万元` : `${0.0000}万元`;
    countlist[2].num = res.budget != 0 ? `${numAdd("reduce", 4, res.budget, res.totalcost)}万元` : `${0.0000}万元`;
  });
}
//刷新
function resetTable(val) {
  listQuery.pageSize = 20
  listQuery.pageCurrent = 1
  listQuery.orgid = orgids.value;
  listQuery.ctype = ''
  deptid.value = ''
  listQuery.years = new Date().getFullYear().toString()
  getDataList();
  getTotaldata()
  setAuditBtn()
}
//获取部门参数
const getdeptId = (val) => {
  listQuery.orgid = val.id;
  orgids.value = val.id
  listQuery.pageCurrent = 1
  getDataList();
  getTotaldata()
}
//查询
function onSearch(obj) {
  listQuery.pageCurrent = 1
  listQuery.years = obj.years;
  // listQuery.ctype = obj.ctype;
  // listQuery.cwkm = obj.cwkm;
  getDataList();
  // getTotaldata()
}
function searchReset() {
  listQuery.ctype = undefined;
  listQuery.cwkm = undefined;
}
function cwkmSearchChange(val) {
  // 改变时清空预算类别
  listQuery.ctype = undefined;
}
function ctypeSearchChange(val) {
  // 清空财务科目
  listQuery.cwkm = undefined;
}
//ALL_查询安全投入列表
function getDataList() {
  tableloading.value = true
  getApi(listQuery, '/mosty-jcgl/ys/getYsPage').then((res) => {
    if (res.records) {
      tableloading.value = false;
      tableData.value = res.records;
      tableData.value.forEach(async (itemObj) => {
        /** @type {TableItem} item */
        const item = itemObj || {};
        item.budget = item.budget ? item.budget : 0;
        item.budgetmoney = item.budgetmoney ? item.budgetmoney : 0;
        item.tzzj = item.tzzj ? item.tzzj : 0;
        item.gkshzj = item.gkshzj ? item.gkshzj : 0;
        item.yeargkshzj = item.yeargkshzj ? item.yeargkshzj : 0;
        item.yeartzzj = item.yeartzzj ? item.yeartzzj : 0;
        item.pfjeall = numAdd("add", 4, item.budget, item.gkshzj, item.yeargkshzj)
        /** 剩余金额 = 年初批复 + 中期调整数 +  中期归口审核增减数 - 使用金额 */
        item.symoney = new Big(item.budget).add(item.tzzj).add(item.gkshzj).minus(item.costFee || 0).round(4).toString()
      })
      pageConfiger.total = res.total;
    }
  }).catch((err) => {
    tableData.value = []
    tableloading.value = false;
  }).finally(() => {
    tableloading.value = false;
  })
}
//添加预算
function onAddys(types, val) {

  title.value = val;
  type.value = types;
  rowid.value = null;
  if (types == 'ndadd') {
    addplanShow.value = true
  } else {
    addysShow.value = true;
  }

}
//年初预算调整审核
function ysshbtn(val, types) {
  type.value = types;
  rowid.value = val.id;
  if (types == 'ncsh') {
    title.value = "年度审核预算"; // “年初”改为“年度”， 年度去掉
    addysShow.value = true;
  } else if (types == 'nzsh') {
    title.value = "中期审核预算";
    addysShow.value = true;
  } else if (types == 'nztz') {
    title.value = "中期调整";
    addysShow.value = true;
  } else {
    // title.value = '年度预算调整审核';
    // addplanShow.value = true
  }
}

//修改预算
function xgInfo(val) {
  rowid.value = val.id
  if (val.type == '01') {
    title.value = "年度修改预算"; // “年初”改为“年度”， 年度去掉
    type.value = "ncexit";
    addysShow.value = true;
  } else if (val.type == '02') {
    title.value = '中期预算调整调整修改';
    type.value = 'nzexit';
    addysShow.value = true;
  } else if (val.middlestate == '2' && val.yearstate != '2') {

    // title.value = '年度预算调整调整修改';
    // type.value = 'ndexit';
    // addplanShow.value = true
  }
}

//查看预算
function seeInfo(val) {
  rowid.value = val.id
  if (val.type == '01') {
    title.value = "年度预算调整详情"; // “年初”改为“年度”， 年度去掉
    type.value = "ncdetails";
    addysShow.value = true;
  } else if (val.type == '02') {
    title.value = '中期预算调整详情';
    type.value = 'nzdetails';
    addysShow.value = true;
  }

}

//删除
function handledelete(val) {
  postApi({}, `/mosty-jcgl/ys/del/${val.id}`).then((res) => {
    ElMessage.success("删除成功");
    resetTable();
  });
}
//分页
const handleSizeChange = (currentSize) => {
  listQuery.pageSize = currentSize;
  pageConfiger.pageSize = currentSize;
  getDataList();
};
const handleCurrentChange = (currentPage) => {
  listQuery.pageCurrent = currentPage;
  pageConfiger.pageCurrent = currentPage;
  getDataList();
};
function AuditClick() {
  proxy.$modal.confirm('确认提交审核？')
    .then(() => {
      submitAudit()
    }).catch(() => { })
}
function submitAudit() {
  postApi({}, `/mosty-jcgl/ys/deptAudit?years=${listQuery.years}`).then((res) => {
    ElMessage.success("提交审核成功");
    setAuditBtn()
    getDataList()
  });
}
//导出Excel
function onloadExcel() {
  let title = {
    budgettitle: '预算项目',
    // cwkm: '财务科目',
    ctype: '预算类别',
    deptname: '使用部门',
    firstApprovedBudget: '年初批复预算',
    tzzj: '中期调整增减数',
    budget: '预算金额',
    costFee: '使用金额',
    budgetmoney: '剩余金额',
    gkshzj: '中期归口审核增减数',
    state: '状态',
    // yeartzzj: '年度调整增减数',
    // yeargkshzj: '年度归口审核增减数',
  }
  let obj = { ...listQuery };
  obj.pageSize = 10000
  loadingShow.value = true
  getApi(obj, '/mosty-jcgl/ys/exportYsList').then(async (res) => {
    if (res) {
      /** @type {Array<TableItem>} 导出的数组*/
      let data = res
      if (data) {
        for (let i = 0; i < data.length; i++) {
          data[i].deptname = data[i].deptname || ''
          data[i].ctype = proxy.$getDictVal(data[i].ctype, D_BZ_YSFYLB);
          data[i].cwkm = proxy.$getDictVal(data[i].cwkm, D_TB_YSCWKU);
          data[i].budget = data[i].budget ? data[i].budget : 0
          data[i].budgetmoney = data[i].budgetmoney ? data[i].budgetmoney : 0
          data[i].tzzj = data[i].tzzj ? data[i].tzzj : 0
          data[i].gkshzj = data[i].gkshzj ? data[i].gkshzj : 0
          data[i].state = stateOpt.find(item => item.value == data[i].state)?.label || ''
          data[i].yeartzzj = data[i].yeartzzj ? data[i].yeartzzj : 0
          data[i].yeargkshzj = data[i].yeargkshzj ? data[i].yeargkshzj : 0
          // data[i].pfjeall = numAdd("add", 4, data[i].budget, data[i].totalcost, data[i].yeargkshzj)
          /** 剩余金额 = 年初批复 + 中期调整数 +  中期归口审核增减数 - 使用金额 */
          // data[i].symoney = new Big(data[i].budget).add(data[i].tzzj).add(data[i].gkshzj).minus(data[i].costFee || 0).round(4).toString()
        }
        let tablename = "预算填报列表.xlsx"
        exportXlsx(title, data, '预算填报列表', tablename);
        loadingShow.value = false
      }
    }

  }).catch(err => {
    loadingShow.value = false
  })
}



</script>

<style lang="scss" scoped>
.btnBox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.toggle {
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: #0f3916;

  .el-icon {
    transform: rotate(90deg);
    transition: all 0.25s ease;
  }

  &.active {
    .el-icon {
      transform: rotate(-90deg);
    }
  }
}
</style>
