<template>
  <!-- 运行控制数据 -->
  <div class="pubDataBox">

    <!-- 运行控制弹窗 -->
    <el-dialog center ref="dialog" :title="dataTitle" :show-close="false" modal :destory-on-close="true"
      class="dialogClass" :append-to-body="true" width="90%" custom-class="custom-dialog" v-model="isShow">
      <section class="button">
        <el-button @click="exportExcels">导出</el-button>
        <el-button v-if="popForm" @click="backbtn">返回</el-button>
        <el-button @click="closeDialog">关闭</el-button>
      </section>

      <!-- 运行控制的数据统计表 -->
      <!-- 安全投入 -->
      <!-- <div class="binBox">
        <div class="left" style="width:100%;">
          <BinBar :barTitle="barTitle" :barNum="barNum" :loadingshow="binshow" />
        </div>
        <div class="right">
          <BinBar2
            :barTitle="barTitleright"
            :barNum="barNumright"
            :loadingshow="binshow"
          />
        </div>
      </div> -->

      <div>
        <el-table show-summary :summary-method="getSummaries" v-if="!popForm" stripe height="340px" border
          :data="controldata" id="out-table" @cell-dblclick="editData">
          <el-table-column property="comName" label="单位名称" width="250"></el-table-column>
          <el-table-column property="trsum" label="申报总预算"></el-table-column>
          <el-table-column property="yssum" label="审核总预算"></el-table-column>
          <el-table-column property="employ" label="总使用"></el-table-column>
          <el-table-column property="remain" label="总剩余"></el-table-column>

          <!-- 临时注释 start-->
          <!-- <el-table-column label="操作" v-if="!popForm" fixed="right">
            <template #default="scope">
              <span class="operesee" @click="handleClick(scope.$index, scope.row)"><el-icon>
                  <View />
                </el-icon>详情</span>
            </template>
</el-table-column> -->
          <!-- 临时注释 end-->

        </el-table>
        <el-table show-summary :summary-method="getSummarie" v-else-if="popForm" stripe height="333px" border
          :data="controldatatwo" id="out-table">
          <el-table-column property="budgettitle" label="预算项目" width="250"></el-table-column>
          <el-table-column property="ctype" label="预算类型" :formatter="ystype"></el-table-column>
          <el-table-column property="budgetmoney" label="预算金额"></el-table-column>
          <el-table-column property="costFee" label="使用金额"></el-table-column>
          <el-table-column property="residue" label="剩余金额"></el-table-column>
        </el-table>
      </div>

    </el-dialog>
  </div>
</template>

<script setup>

import BinBar from "../../charts/binBar.vue";
// import BinBar2 from "../../charts/binBar2.vue";
import { exportExcel, getSummaries } from "@/utils/tools";
import { getApi } from "@/api/tobAcco_api.js";
import { ref, defineProps, onMounted, nextTick, defineEmits } from "vue";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { fakeAqtrData } from "../../fakeData.js";
const props = defineProps({
  title: String,
  isShow: Boolean
});
//运行控制的数据
const controldata = ref([]);
const controldatatwo = ref([]);
const emit = defineEmits(['changeVi'])
// const datalist = ref([]);
const binshow = ref(false);
// 柱状图数据安全投入左边
const barTitle = ref(["警卫消防费用", "安监设施费", "房屋鉴定中介费", "其他"]);
const barNum = ref([30, 50, 70, 100]);
const popForm = ref(false);
const isShow = ref(false);
const dataTitle = props.title;
const listQuery = ref({
});
const code = ref('')
/**合计数组 */
const sumData = ref([])
onMounted(() => {

  // TODO: 临时注释 start ========
  controldata.value = fakeAqtrData()
  isShow.value = true;
  return
  // end ===========

  //运行控制数据
  getAqtrData();
  isShow.value = true;
  binshow.value = true;
  popForm.value = false;

});
//导出
const exportExcels = () => {
  const titleObj = {
    comName: '单位名称',
    trsum: '申报总预算',
    yssum: '审核总预算',
    employ: '总使用',
    remain: '总剩余'
  }
  const sumObj = {
    comName: sumData.value[0],
    trsum: sumData.value[1],
    yssum: sumData.value[2],
    employ: sumData.value[3],
    remain: sumData.value[4]
  }
  const data = structuredClone([...controldata.value, sumObj])
  exportXlsx(titleObj, data, '安全投入', '安全投入.xlsx')
}
//安全投入接口数据
const getAqtrData = () => {
  controldata.value = []
  getApi({}, "/mosty-jcgl/budgets/getAytrList").then((res) => {
    controldata.value = res.List ? res.List : []
  })
}
//查看详情按钮
const handleClick = (index, row) => {
  code.value = row.cityCode;
  getAqtrxqData(code.value)
  popForm.value = true; //显示返回按钮
};
//安全投入详情接口数据
const getAqtrxqData = (cityCode) => {
  controldatatwo.value = []
  getApi({ cityCode: cityCode }, "/mosty-jcgl/budgets/getAytrDetails/{cityCode}").then((res) => {
    controldatatwo.value = res ? res : []
  })
}

// 预算类型
function ystype(row, column, cellvalue) {
  if (cellvalue == '1') {
    return '警卫消防费用'
  } else if (cellvalue == '2') {
    return '安监设施费'
  } else if (cellvalue == '3') {
    return '房屋危险等级鉴定中介费'
  }
}
//点击返回
const backbtn = () => {
  popForm.value = false;
};


//公司名称双击事件
function editData(row, column) {
  //双击单位名称获取城市编号
  if (column.property == 'comName') {
  }
  // popForm.value = true; //显示返回按钮
}
//关闭弹窗事件
function closeDialog() {
  emit("changeVi", false)
  popForm.value = false;
  // currentPage.value = 1;
}
//表格合计
function getSummarie(param) {
  const { columns, data } = param;
  const sums = [];
  columns.forEach((column, index) => {
    if (index === 0) {
      sums[index] = "甘肃省局(合计)";
      return;
    }
    const values = data.map((item) => Number(item[column.property]));
    if (!values.every((value) => isNaN(value))) {
      sums[index] = values.reduce((prev, curr) => {
        const value = Number(curr);
        if (!isNaN(value)) {
          return prev + curr;
        } else {
          return prev;
        }
      }, 0);
      if (index === 1) {
        sums[index] = "N/A"
      }
    } else {
      sums[index] = "N/A";
    }
  });
  sumData.value = sums // 赋值给sumData
  return sums;
}
</script>
<style lang="scss" scoped>
@import "~@/assets/css/element-plus.scss";
// @import "~@/assets/css/system/yxkztab.scss";

.binBox .right {
  width: 50%;
  position: relative;

  .rate {
    position: absolute;
    top: 50%;
    left: 70%;
    color: #fff;
    font-size: 20px;
  }
}

.el-dialog--center .el-dialog__body {
  padding: 0px;
}
</style>
