<template>

  <div class="bigBox">
    <!-- <MOSTY.PageTree :searchType="'03'" @getDeptId="getdeptId">
      <template #table> -->
    <div class="titleBox flex just-between">
      <!-- <div class="title">安全费用统计（单位：万元）</div> -->
      <div class="btnBox">
        <el-date-picker v-model="listQuery.years" type="year" format="YYYY" value-format="YYYY" placeholder="请选择年份" />
        <el-button type="primary" @click="onSearch" class="ml10">
          <el-icon>
            <Search />
          </el-icon>
          <span>查询</span>
        </el-button>
      </div>
    </div>
    <!-- echarts -->
    <div class="charts">
      <div class="chartsBox">
        <!-- 饼图 -->
        <div class="pie">
          <pie ids="pieSafeFee" :pieNum="pieData" :keys="keys" v-if="pieData.length > 0"></pie>
        </div>
        <!-- 多柱状图 -->
        <div>
          <manyBars ids="barsSafeFee" v-if="barsTitle.length > 0 && barsNum" :keys="keyTwo" :barTitle="barsTitle"
            :barNum="barsNum">
          </manyBars>
        </div>
      </div>
      <el-button class="init-btn" type="primary" @click="initTable">重置表格</el-button>
    </div>
    <!-- 表格 -->
    <section class="eltab3">
      <MOSTY.Table ref="tableRef" :table-columns="tableColumn" :tableData="tableData" :tableloading="tableloading"
        :tableHeight="'100%'" :isSelect="false" style="width: 100%;" :isSort="false" showSummary
        :getSummaries="getSummaries" @headerDragend="setTableWidth">
        <template #orgname="{ row, $index, }">
          <span class="linkClick" @click="seeInfo(row, $index)">{{ row.orgname }}</span>
        </template>
        <template #budget="{ row }">
          <span :class="row.budget > 0 ? 'linkClick' : ''" @click="seepfInfo(row, '', 'budget')"> {{
            row.budget
          }}</span>
        </template>
        <template #ctype1_budget="{ row }">
          <span :class="row.ctype1_budget > 0 ? 'linkClick' : ''" @click="seepfInfo(row, '1', 'ctype1_budget')"> {{
            row.ctype1_budget
          }}</span>
        </template>
        <template #ctype1_costFee="{ row }">
          <span :class="row.ctype1_costFee > 0 ? 'linkClick' : ''" @click="seesyInfo(row, '1', 'ctype1_costFee')"> {{
            row.ctype1_costFee
          }}</span>
        </template>
        <template #ctype2_budget="{ row }">
          <span :class="row.ctype2_budget > 0 ? 'linkClick' : ''" @click="seepfInfo(row, '2', 'ctype2_budget')"> {{
            row.ctype2_budget
          }}</span>
        </template>
        <template #ctype2_costFee="{ row }">
          <span :class="row.ctype2_costFee > 0 ? 'linkClick' : ''" @click="seesyInfo(row, '2', 'ctype2_costFee')"> {{
            row.ctype2_costFee
          }}</span>
        </template>
        <template #ctype3_budget="{ row }">
          <span :class="row.ctype3_budget > 0 ? 'linkClick' : ''" @click="seepfInfo(row, '3', 'ctype3_budget')"> {{
            row.ctype3_budget }}</span>
        </template>
        <template #ctype3_costFee="{ row }">
          <span :class="row.ctype3_costFee > 0 ? 'linkClick' : ''" @click="seesyInfo(row, '3', 'ctype3_costFee')"> {{
            row.ctype3_costFee
          }}</span>
        </template>
        <template #ctype4_budget="{ row }">
          <span :class="row.ctype4_budget > 0 ? 'linkClick' : ''" @click="seepfInfo(row, '4', 'ctype4_budget')"> {{
            row.ctype4_budget }}</span>
        </template>
        <template #ctype4_costFee="{ row }">
          <span :class="row.ctype4_costFee > 0 ? 'linkClick' : ''" @click="seesyInfo(row, '4', 'ctype4_costFee')"> {{
            row.ctype4_costFee
          }}</span>
        </template>
        <template #ctype5_budget="{ row }">
          <span :class="row.ctype5_budget > 0 ? 'linkClick' : ''" @click="seepfInfo(row, '5', 'ctype5_budget')"> {{
            row.ctype5_budget }}</span>
        </template>
        <template #ctype5_costFee="{ row }">
          <span :class="row.ctype5_costFee > 0 ? 'linkClick' : ''" @click="seesyInfo(row, '5', 'ctype5_costFee')"> {{
            row.ctype5_costFee
          }}</span>
        </template>
        <template #ctype6_budget="{ row }">
          <span :class="row.ctype6_budget > 0 ? 'linkClick' : ''" @click="seepfInfo(row, '6', 'ctype6_budget')"> {{
            row.ctype6_budget }}</span>
        </template>
        <template #ctype6_costFee="{ row }">
          <span :class="row.ctype6_costFee > 0 ? 'linkClick' : ''" @click="seesyInfo(row, '6', 'ctype6_costFee')"> {{
            row.ctype6_costFee
          }}</span>
        </template>
        <template #ctype7_budget="{ row }">
          <span :class="row.ctype7_budget > 0 ? 'linkClick' : ''" @click="seepfInfo(row, '7', 'ctype7_budget')"> {{
            row.ctype7_budget }}</span>
        </template>
        <template #ctype7_costFee="{ row }">
          <span :class="row.ctype7_costFee > 0 ? 'linkClick' : ''" @click="seesyInfo(row, '7', 'ctype7_costFee')"> {{
            row.ctype7_costFee
          }}</span>
        </template>
        <template #ctype8_budget="{ row }">
          <span :class="row.ctype8_budget > 0 ? 'linkClick' : ''" @click="seepfInfo(row, '8', 'ctype8_budget')"> {{
            row.ctype8_budget }}</span>
        </template>
        <template #ctype8_costFee="{ row }">
          <span :class="row.ctype8_costFee > 0 ? 'linkClick' : ''" @click="seesyInfo(row, '8', 'ctype8_costFee')"> {{
            row.ctype8_costFee
          }}</span>
        </template>

        <template #ctype10_budget="{ row }">
          <span :class="row.ctype10_budget > 0 ? 'linkClick' : ''" @click="seepfInfo(row, '10', 'ctype10_budget')"> {{
            row.ctype10_budget }}</span>
        </template>
        <template #ctype10_costFee="{ row }">
          <span :class="row.ctype10_costFee > 0 ? 'linkClick' : ''" @click="seesyInfo(row, '10', 'ctype10_costFee')"> {{
            row.ctype10_costFee
          }}</span>
        </template>

        <template #ctype11_budget="{ row }">
          <span :class="row.ctype11_budget > 0 ? 'linkClick' : ''" @click="seepfInfo(row, '11', 'ctype11_budget')"> {{
            row.ctype11_budget }}</span>
        </template>
        <template #ctype11_costFee="{ row }">
          <span :class="row.ctype11_costFee > 0 ? 'linkClick' : ''" @click="seesyInfo(row, '11', 'ctype11_costFee')"> {{
            row.ctype11_costFee
          }}</span>
        </template>

        <template #ctype9_budget="{ row }">
          <span :class="row.ctype9_budget > 0 ? 'linkClick' : ''" @click="seepfInfo(row, '9', 'ctype9_budget')"> {{
            row.ctype9_budget }}</span>
        </template>
        <template #ctype9_costFee="{ row }">
          <span :class="row.ctype9_costFee > 0 ? 'linkClick' : ''" @click="seesyInfo(row, '9', 'ctype9_costFee')"> {{
            row.ctype9_costFee
          }}</span>
        </template>
        <template #costFee="{ row }">
          <span :class="row.costFee > 0 ? 'linkClick' : ''" @click="seesyInfo(row, '', 'costFee')"> {{
            row.costFee
          }}</span>
        </template>
      </MOSTY.Table>
    </section>
    <!-- </template> -->
    <!-- </MOSTY.PageTree> -->
  </div>
  <!-- 单位使用情况 -->
  <aqfytjinfo v-if='addplanShow' v-model="addplanShow" :titles="titles" @close="closeinfo" :saveBtnShow="saveBtnShow"
    :typetj="typetj" :orgid="orgid" :ctype="ctype" />


</template>

<script setup>
// 引入
import { reactive, onMounted, ref, nextTick } from "vue";
import pie from "../components/charts/pie.vue";
import manyBars from "../components/charts/manyBars.vue";
import aqfytjinfo from "./commponents/aqfytjinfo.vue";
import { getApi } from "@/api/tobAcco_api.js";
import * as MOSTY from "@/components/MyComponents/index";
// 数据
const addplanShow = ref(false);
const keys = ref(1);
const keyTwo = ref(1);
const orgid = ref(null);
const tableloading = ref(false);
/**table组件 */
const tableRef = ref();
const listQuery = reactive({
  years: new Date().getFullYear().toString(),
  orgid: null
});
const typetj = ref('dw')
const titles = ref('使用情况')
// 饼图数据
const pieData = reactive([
  { value: 0, name: "未使用费用（单位：万元）" },
  { value: 0, name: "总使用费用（单位：万元）" }
]);
const loadingshow = ref(false);

// 柱状图数据
const barsTitle = ref([]);
const barsNum = reactive([
  {
    name: "已使用（单位：万元）",
    data: [0, 0, 0],
    color: "#7BA87B"
  },
  {
    name: "未使用（单位：万元）",
    data: [0, 0, 0],
    color: "#748EDE"
  }
]);
const ctype = ref('')
const tableData = ref([
]);
const tableColumn = ref([
  {
    title: "单位名称",
    prop: "orgname",
    slot: true,
    width: '300',
    fixed: 'left',

  },
  {
    title: "批复金额",
    prop: "budget",
    slot: true,
    width: '130',
    fixed: 'left',

  },
  {
    title: "安全设施费用",
    suntab: [
      {
        title: "批复",
        prop: "ctype1_budget",
        slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype1_costFee",
        slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "应急救援费用",
    suntab: [
      {
        title: "批复",
        prop: "ctype2_budget",
        slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype2_costFee",
        slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "安全防护用品费用",
    suntab: [
      {
        title: "批复",
        prop: "ctype3_budget",
        slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype3_costFee",
        slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "安全信息化",
    suntab: [
      {
        title: "批复",
        prop: "ctype4_budget",
        slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype4_costFee",
        slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "安全生产宣传教育培训支出",
    suntab: [
      {
        title: "批复",
        prop: "ctype5_budget",
        slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype5_costFee",
        slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "隐患奖励",
    suntab: [
      {
        title: "批复",
        prop: "ctype6_budget",
        slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype6_costFee",
        slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "安全保险",
    suntab: [
      {
        title: "批复",
        prop: "ctype7_budget",
        slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype7_costFee",
        slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "安全咨询服务",
    suntab: [
      {
        title: "批复",
        prop: "ctype8_budget",
        slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype8_costFee",
        slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "消防警卫费",
    suntab: [
      {
        title: "批复",
        prop: "ctype10_budget",
        slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype10_costFee",
        slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "安全管理人员薪酬",
    suntab: [
      {
        title: "批复",
        prop: "ctype11_budget",
        slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype11_costFee",
        slot: true,
        width: '130',
      }
    ]
  },
  {
    title: "其他",
    suntab: [
      {
        title: "批复",
        prop: "ctype9_budget",
        slot: true,
        width: '130',
      },
      {
        title: "已执行",
        prop: "ctype9_costFee",
        slot: true,
        width: '130',
      }
    ]
  },

  {
    title: "使用金额",
    prop: "costFee",
    slot: true,
    fixed: 'right',
  },
  {
    title: "执行率",
    prop: "syl",
    fixed: 'right',
  },
])
const getdeptId = (val) => {
  console.log('val: ', val);
  listQuery.orgid = val.id;
  // listQuery.pageCurrent = 1
  // onSearch();
  loadingshow.value = true;
  aqtrBin()
  aqtrBar()
  gettjList()
  setTableTotalWidth()
}
//查询
function onSearch() {
  aqtrBin()
  aqtrBar()
  gettjList()
}
// 方法
onMounted(() => {
  loadingshow.value = true;
  aqtrBin()
  aqtrBar()
  gettjList()
  setTableTotalWidth()

});
//安全投入统计饼图
function aqtrBin() {
  getApi(listQuery, '/mosty-jcgl/budgetsCost/aqtrtjOne').then((res) => {
    if (res) {
      pieData[0].value = res.budget - res.costFee
      pieData[1].value = res.costFee
      keys.value++
    }
  })
}
//安全投入统计柱状图
function aqtrBar() {
  getApi(listQuery, '/mosty-jcgl/budgetsCost/aqtrtjTwo').then((res) => {
    if (res) {
      barsTitle.value = res.dictList;
      barsNum[0].data = res.list.map(item => {
        return item.costFee
      })
      barsNum[1].data = res.list.map(item => {
        return item.budget - item.costFee
      })
      keyTwo.value++
    }
  })
}
function initTable() {
  gettjList()
}
//	安全投入统计统计列表
function gettjList(orgcode) {
  let params = {
    ...listQuery,
  }
  // if (orgcode) {
  //   params.orgcode = orgcode
  // }
  tableloading.value = true
  getApi(params, '/mosty-jcgl/budgetsCost/aqtrtjList').then((res) => {
    if (res) {
      tableData.value = res
      res.forEach((item) => {
        item.budget = item.budget ? item.budget : 0
        item.costFee = item.costFee ? item.costFee : 0
        item.ctype1_budget = item.ctype1_budget ? item.ctype1_budget : 0
        item.ctype1_costFee = item.ctype1_costFee ? item.ctype1_costFee : 0
        item.ctype2_budget = item.ctype2_budget ? item.ctype2_budget : 0
        item.ctype2_costFee = item.ctype2_costFee ? item.ctype2_costFee : 0
        item.ctype3_budget = item.ctype3_budget ? item.ctype3_budget : 0
        item.ctype3_costFee = item.ctype3_costFee ? item.ctype3_costFee : 0

        item.ctype4_budget = item.ctype4_budget ? item.ctype4_budget : 0
        item.ctype4_costFee = item.ctype4_costFee ? item.ctype4_costFee : 0

        item.ctype5_budget = item.ctype5_budget ? item.ctype5_budget : 0
        item.ctype5_costFee = item.ctype5_costFee ? item.ctype5_costFee : 0

        item.ctype6_budget = item.ctype6_budget ? item.ctype6_budget : 0
        item.ctype6_costFee = item.ctype6_costFee ? item.ctype6_costFee : 0

        item.ctype7_budget = item.ctype7_budget ? item.ctype7_budget : 0
        item.ctype7_costFee = item.ctype7_costFee ? item.ctype7_costFee : 0

        item.ctype8_budget = item.ctype8_budget ? item.ctype8_budget : 0
        item.ctype8_costFee = item.ctype8_costFee ? item.ctype8_costFee : 0

        item.ctype9_budget = item.ctype9_budget ? item.ctype9_budget : 0
        item.ctype9_costFee = item.ctype9_costFee ? item.ctype9_costFee : 0
        if (item.costFee > 0 && item.budget > 0) {
          item.syl = Math.round(item.costFee / item.budget * 100 * 100) / 100 + "%"
        } else {
          item.syl = 0 + "%"
        }
        // item.executeRate = (item.costFee / item.budget).toFixed(4) * 100 + "%"
      })
    }
  }).finally(() => {
    tableloading.value = false
  })
}

const getSummaries = (param) => {
  const { columns, data } = param;
  const sums = [];
  const totalObj = {}
  columns.forEach((column, index) => {
    /** 列表属性 */
    let property = column.property;
    if (index === 0) {
      sums[index] = '总计';
      return;
    }
    const values = data.map(item => Number(item[column.property]));
    // 使用率特殊处理// 执行率 = 使用金额/批复金额
    if (property == 'syl') {
      if (totalObj.costFee > 0 && totalObj.budget > 0) {
        sums[index] = Math.round(totalObj.costFee / totalObj.budget * 100 * 100) / 100 + "%"
      } else {
        sums[index] = 0 + "%"
      }
    } else 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);
      // 收位两位数
      sums[index] = Math.round(sums[index] * 10000) / 10000;
      totalObj[property] = sums[index]
    } else {
      sums[index] = '';
    }
  });

  return sums;
}

const seeInfo = (row, index) => {
  if (row.orglevel == '20' && index !== 0) {
    const orgid = row.orgid
    gettjList(orgid)
  } else {
    typetj.value = 'dw'
    titles.value = `${row.orgname}使用情况`
    orgid.value = row.orgid
    addplanShow.value = true;
  }

};
/**
 *
 * @param row 行数据
 * @param type 类型
 * @param key 当前行key值
 */
function seepfInfo(row, type, key) {
  let val = row?.[key]
  if (key && (row[key] == 0 || row[key] == null)) return
  ctype.value = type
  typetj.value = 'pf'
  titles.value = `${row.orgname}批复详情`
  orgid.value = row.orgid
  addplanShow.value = true;
}
function seesyInfo(row, type, key) {
  let val = row?.[key]
  console.log('val: ', val);
  if (key && (row[key] == 0 || row[key] == null)) return
  ctype.value = type
  typetj.value = 'sy'
  titles.value = `${row.orgname}使用详情`
  orgid.value = row.orgid
  addplanShow.value = true;
}
function closeinfo() {
  addplanShow.value = false
  orgid.value = null
}

/** 设置小计表格宽度 */
const setTableWidth = (table, from) => {
  nextTick(() => {
    setTimeout(() => {
      if (!table) return
      const tableRefs = table.$refs
      if (!tableRefs) return
      let { footerWrapper, tableBody } = tableRefs || {}
      if (!footerWrapper) return
      if (!tableBody) return
      let columnsEl = tableBody.children[0]?.children
      let footCol = footerWrapper.children?.[0]?.childNodes?.[1]?.children?.[0]?.children
      if (columnsEl.length) {
        for (let i = 0; i < columnsEl.length; i++) {
          const col = columnsEl[i];
          const width = col.offsetWidth || col.width || 0

          if (footCol[i]) footCol[i].style.width = width + 'px'
          if (footCol[i]) footCol[i].style.overFlow = 'hidden'
          if (footCol[i]) footCol[i].width = width + 'px'
        }
      }
    }, 200);
  })


}
/** 设置小计的宽度 */
const setTableTotalWidth = (from) => {
  nextTick(() => {
    let table = tableRef.value || {}
    if (typeof table.getTableRef !== 'function') return
    let elTalbe = table.getTableRef()
    if (elTalbe) setTableWidth(elTalbe, from)

  })
}
</script>

<style lang="scss" scoped>
.bigBox {
  background-color: #fff;
  padding: 10px;
}

.charts {
  position: relative;
  border-top: 1px dashed green;

  .init-btn {
    position: absolute;
    left: 20px;
    bottom: 10px;
  }

  .chartsBox {
    margin-top: 20px;
    display: flex;
    height: 270px;
    justify-content: space-around;
    width: calc(100% - 40px);

    &>div {
      width: calc(48% - 50px);
    }
  }
}

.titleBox {
  height: 60px;
}

.linkClick {
  color: var(--el-color-primary);
  cursor: pointer;
  text-decoration: underline;
}

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