<template>
  <!-- 运行控制数据 -->
  <div class="pubDataBox">
    <div class="title">
      <span class="text">{{ yxkzStatisticsData.title }}</span>
    </div>
    <div class="content">
      <div v-if="JSON.stringify(yxkzStatisticsData) != '{}'">
        <ul class="statistics" style='justify-content: start;'>
          <li v-for="item in yxkzStatisticsData.list" :key="item.title" style="margin: 7px 5.5px 0;"
            @click="changeShow(item.title, 0, item.item[0].val)">
            <div class="next" v-if="item.title == '综合检查'">
              <div class="title">{{ item.title }}</div>
              <div class="cont-item">
                <div :class="!item.item[0] ? 'items item' : 'item'">
                  <span class="numb">
                    {{ item.item[0].val }}
                  </span>
                  <br />{{ item.item[0].name }}
                </div>
                <div class="item" v-if="item.item[1]">
                  <span class="numb">
                    {{ item.item[1].val }}
                  </span>
                  <br />{{ item.item[1].name }}
                </div>
                <div class="item" v-if="item.item[2]">
                  <span class="numb">
                    {{ item.item[2].val }}
                  </span>
                  <br />{{ item.item[2].name }}
                </div>
                <div class="item" v-if="item.item[3]">
                  <span class="numb">
                    {{ item.item[3].val }}
                  </span>
                  <br />{{ item.item[3].name }}
                </div>
              </div>
            </div>
            <div v-else>
              <div class="title">{{ item.title }}</div>
              <div class="cont-item">
                <div :class="!item.item[1] ? 'items item' : 'item'">
                  <span class="numb" :class="{ ten_thousand: item.title == '安全投入' }">
                    {{ item.item[0].val }}
                  </span>
                  <br />{{ item.item[0].name }}
                </div>
                <div class="item" v-if="item.item[1]">
                  <span class="numb" :class="{ ten_thousand: item.title == '安全投入' }">
                    {{ item.item[1].val }}
                  </span>
                  <br />{{ item.item[1].name }}
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <aqrytable v-if="dataTitle == '安全人员'" :title="dataTitle" :visible="'visible'" @changeVi="changeVi" />
    <aqtrtable v-if="dataTitle == '安全投入'" :title="dataTitle" :visible="'visible'" @changeVi="changeVi" />
    <aqhytable v-if="dataTitle == '安全会议'" :title="dataTitle" :visible="'visible'" @changeVi="changeVi" />
    <yhsltable v-if="dataTitle == '隐患数量'" :title="dataTitle" :visible="'visible'" @changeVi="changeVi" />
    <pxsltable v-if="dataTitle == '培训数量'" :title="dataTitle" :visible="'visible'" @changeVi="changeVi" />
    <zrstable v-if="dataTitle == '责任书'" :title="dataTitle" :visible="'visible'" :num="listQuery.num"
      @changeVi="changeVi" />
    <yjyltable v-if="dataTitle == '应急演练'" :title="dataTitle" :visible="'visible'" :num="listQuery.num"
      @changeVi="changeVi" />
    <sgybtable v-if="dataTitle == '事故月报'" :title="dataTitle" :visible="'visible'" :num="listQuery.num"
      @changeVi="changeVi" />
    <gwdbtable v-if="dataTitle == '岗位达标'" :title="dataTitle" :visible="'visible'" :num="listQuery.num"
      @changeVi="changeVi" />
    <qycytable v-if="dataTitle == '全员参与'" :title="dataTitle" :visible="'visible'" :num="listQuery.num"
      @changeVi="changeVi" />
    <zhjctable v-if="dataTitle == '综合检查'" :title="dataTitle" :visible="'visible'" @changeVi="changeVi" />
  </div>
</template>

<script setup>
import { getApi, postApi } from "@/api/tobAcco_api.js";
import aqrytable from "./tables/yxkz/aqrytable.vue";
import aqtrtable from "./tables/yxkz/aqtrtable.vue";
import aqhytable from "./tables/yxkz/aqhytable.vue";
import yhsltable from "./tables/yxkz/yhsltable.vue";
import pxsltable from "./tables/yxkz/pxsltable.vue";
import zrstable from "./tables/yxkz/zrstable.vue";
import yjyltable from "./tables/yxkz/yjyltable.vue";
import sgybtable from "./tables/yxkz/sgybtable.vue";
import gwdbtable from "./tables/yxkz/gwdbtable.vue";
import qycytable from "./tables/yxkz/qycytable.vue";
import zhjctable from "./tables/yxkz/zhjctable.vue";
import { ref, defineProps, reactive, onMounted, nextTick } from "vue";
import { fakeYxkzStatisticsData } from "./fakeData";
// 引入导出Excel表格依赖
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";
onMounted(() => {
  return // 临时注释，后面打开 TODO:
  getAqhyTool();
  getPxslTool();
  getYhslTool();
  getZrsTool();
  getSgybTool();
  getZhjcTool();
  getAqryTool();
  getAqtrTool();
  getYjzylTool();
  getGwdbTool();
  getQycyTool();
  visible.value = false;
  popForm.value = false;
});

const aqhyTool = ref(2);
const yxkzStatisticsData = ref({
  //运行控制
  title: "运行控制",
  list: [
    {
      title: "安全人员",
      item: [
        {
          val: 0,
          name: "总数"
        },
        {
          val: 0,
          name: "专职"
        }
      ]
    },
    {
      title: "安全投入",
      item: [
        {
          val: 0,
          name: "预算"
        },
        {
          val: 0,
          name: "投入"
        }
      ]
    },
    {
      title: "安全会议",
      item: [
        {
          val: 0,
          name: "总数"
        }
      ]
    },

    {
      title: "隐患数量",
      item: [
        {
          val: 0,
          name: "总数"
        }
      ]
    },
    {
      title: "培训数量",
      item: [
        {
          val: 0,
          name: "计划内"
        },
        {
          val: 0,
          name: "计划外"
        }
      ]
    },
    {
      title: "责任书",
      item: [
        {
          val: 0,
          name: "应签"
        },
        {
          val: 0,
          name: "未签"
        }
      ]
    },
    {
      title: "应急演练",
      item: [
        {
          val: 0,
          name: "计划"
        },
        {
          val: 0,
          name: "演练"
        }
      ]
    },
    {
      title: "事故月报",
      item: [
        {
          val: 0,
          name: "应报"
        },
        {
          val: 0,
          name: "未报"
        }
      ]
    },
    {
      title: "岗位达标",
      item: [
        {
          val: 0,
          name: "总数"
        },
        {
          val: 0,
          name: "达标"
        }
      ]
    },
    {
      title: "全员参与",
      item: [
        {
          val: "0",
          name: "总数"
        }
      ]
    },
    {
      title: "综合检查",
      item: [
        {
          val: 0,
          name: "综合"
        },
        {
          val: 0,
          name: "专项"
        },

        {
          val: 0,
          name: "其他"
        },
        {
          val: 0,
          name: "总数"
        }
      ]
    }
  ]
});
// 设置假数据1 start=====
yxkzStatisticsData.value = fakeYxkzStatisticsData()
// 设置假数据1 end =====

//  接收子组件传过来的事件
const changeVi = (val) => {
  visible.value = val;
  dataTitle.value = "";
};

const popForm = ref(false);
const visible = ref(false);
// const num=ref(0)    //0为总数，1为使用，作为标记
const dataTitle = ref("");
const listQuery = ref({
  num: 1,
  pagers: 1
});

//控制图表是否显示
function changeShow(e, num, pagers) {
  // if (!['全员参与', '安全投入', '安全会议', '责任书', '综合检查'].includes(e)) {
  visible.value = true;
  dataTitle.value = e; //这里存储的dataTitle主要是用来excel表格导出的时候进行区分
  listQuery.value.num = num;
  listQuery.value.pagers = pagers;
  // }

}
//安全人员总数接口
const getAqryTool = () => {
  getApi({}, "/mosty-jcgl/aqy/staff").then((res) => {
    var arr = res;
    var aqysum = arr.aqyCount;
    var zzaqy = arr.zzCount;

    getDataVal("安全人员", [
      {
        val: aqysum,
        name: "总数"
      },
      {
        val: zzaqy,
        name: "专职"
      }
    ]);
  });
};
//安全投入总数接口
const getAqtrTool = () => {
  getApi({}, "/mosty-jcgl/budgets/getNcBudgetsSum").then((res) => {
    var arr = res;
    var trsum = arr.budgetmoney;
    var yssum = arr.budget;
    getDataVal("安全投入", [
      {
        val: yssum,
        name: "预算"
      },
      {
        val: trsum,
        name: "投入"
      }
    ]);
  });
};
// 请求安全会议总数接口
const getAqhyTool = () => {
  getApi({}, "/mosty-jcgl/meeting/selectSum").then((res) => {
    aqhyTool.value = res.sum;
    getDataVal("安全会议", [
      {
        val: res.sum,
        name: "总数"
      }
    ]);
  });
};
// 请求全员参与接口
const getQycyTool = () => {
  getApi({}, "/mosty-jcgl/miniapp/getTake").then((res) => {
    getDataVal("全员参与", [
      {
        val: res
      }
    ]);
  });
};

// 请求培训数量总数接口
const getPxslTool = () => {
  getApi({}, "/mosty-jcgl/training/selectSum").then((res) => {
    var suc = res[0];
    var jhn = suc.jhn;
    var jhw = suc.jhw;
    getDataVal("培训数量", [
      {
        val: jhn,
        name: "计划内"
      },
      {
        val: jhw,
        name: "计划外"
      }
    ]);
  });
};
//隐患数量接口
const getYhslTool = () => {
  getApi({}, "/mosty-jcgl/yhb/selectSum").then((res) => {
    var yhslTool = res.sum;
    getDataVal("隐患数量", [
      {
        val: yhslTool,
        name: "总数"
      }
    ]);
  });
};
//责任书总数接口
const getZrsTool = () => {
  getApi({}, "/mosty-jcgl/zrs/dataStatistics").then((res) => {
    var suc = res;
    var signed = suc.all;
    var notsigned = suc.wqd;
    getDataVal("责任书", [
      {
        val: signed,
        name: "应签"
      },
      {
        val: notsigned,
        name: "未签"
      }
    ]);
  });
};

// 岗位达标
const getGwdbTool = () => {
  getApi({}, "/mosty-jcgl/gwdb/selectSum").then((res) => {
    var joinPersonSum = res.joinPersonSum;
    var dbPerson = res.dbPerson;
    getDataVal("岗位达标", [
      {
        val: joinPersonSum,
        name: "总数"
      },
      {
        val: dbPerson,
        name: "达标"
      }
    ]);
  });
};
//事故月报总数接口
const getSgybTool = () => {
  getApi({}, "/mosty-jcgl/sgyb/selectSum").then((res) => {
    var reported = res[0].ysb;
    var notreported = res[0].wsb;
    getDataVal("事故月报", [
      {
        val: reported,
        name: "应报"
      },
      {
        val: notreported,
        name: "未报"
      }
    ]);
  });
};
///综合检查总数数据接口
const getZhjcTool = () => {
  getApi({}, "/mosty-jcgl/overallcheck/selectSum").then((res) => {
    var arr = res.zhjc[0];
    var zhCurls = arr.zhCurls;
    var zxCheck = arr.zxCheck;
    var qtCheck = arr.qtCheck;
    var totalCheckNum = arr.totalCheckNum;
    getDataVal("综合检查", [
      {
        val: zhCurls,
        name: "综合"
      },
      {
        val: zxCheck,
        name: "专项"
      },
      {
        val: qtCheck,
        name: "其他"
      },
      {
        val: totalCheckNum,
        name: "总数"
      }
    ]);
  });
};
//应急演练总条数
const getYjzylTool = () => {
  getApi({}, "/mosty-jcgl/yjyl/selectSum").then((res) => {
    //
    var ylsum = res.yl;
    var jhsum = res.jh;
    getDataVal("应急演练", [
      {
        val: jhsum,
        name: "计划"
      },
      {
        val: ylsum,
        name: "演练"
      }
    ]);
  });
};
// 遍历数据修改统计数量
const getDataVal = (name, arrnum) => {
  for (let item of yxkzStatisticsData.value.list) {
    if (item.title === name) {
      item.item = arrnum;
    }
  }
};
</script>
<style lang="scss">
@import "~@/assets/css/system/newsystem.scss";

// @import '~@/assets/css/element-plus.scss';

.el-icon-download {
  color: aliceblue !important;
}

.binBox {
  height: 200px;
  width: 100%;
  display: flex;
  margin-bottom: 20px;
}

.binBox .left {
  width: 50%;
}

.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;
}

.excel-btn {
  position: absolute;
  top: 19px;
  right: 5%;
  background: #025c29;
  color: #0ecd0f;
  border-color: #025c29;
}

.square {
  width: 180px;
  height: 180px;
  background-color: rgb(43, 100, 62);
  border-radius: 20px;
  text-align: center;
  color: #fff;

  h3 {
    font-size: 18px;
    line-height: 1;
    padding: 0;
  }

  h1 {
    font-size: 100px;
    line-height: 1;
    margin: 0;
    padding: 0;
  }
}
</style>
