<template>
  <div class="box">
    <div class="titleBox">
      <div class="title">设备设施</div>
      <div class="btnBox">
        <el-button type="primary" v-if="addplanShow" @click="CloseEvent">
          <el-icon>
            <ArrowLeft />
          </el-icon>
          <span>返回</span>
        </el-button>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            功能菜单<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item v-for="(item, index) in list" :key="index" @click="gotoher(item.routepath)">{{
          item.lable
        }}</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>

    <!-- charts -->
    <div class="titl">
      <div class="title">{{ title ? title : '设备设施状态统计' }}</div>
      <div class="chartsBox">
        <!-- 饼图 -->
        <div style="width: 37%;">
          <pie ids="btpie" :pieNum="pieData" v-if="pieData.length > 0" :key="key2"></pie>
        </div>

        <div style="width: 60%;">
          <!-- 折线图-->
           <!-- v-if="data.zrsNum.length > 0 && data.zrsTitle.length > 0" -->
          <manyBars ids="sbzt" :barTitle="data.zrsTitle" :barNum="data.zrsNum" :loadingshow="barsShow"  :key="keys">
          </manyBars>
        </div>
      </div>
    </div>

    <div class="bottom">
      <div style="width: 36.3%; margin-left: 1%">
        <div>
          <div class="titlehead">设备设施数量统计</div>
          <div class="pieboxs">
            <pie ids="sbslPie" :pieNum="pieData2" v-if="pieData2.length > 0" :key="key3"></pie>
          </div>
        </div>
        <div style="margin-top: 20px">
          <div class="titlehead">安全装置台账</div>
          <div class="aqzzt">
            <div style="color: #000; font-size: 18px; margin-left: 90px">
              安全装置台账
            </div>
            <div style="margin-right: 90px">
              <el-button type="primary" @click="export2Excel" v-loading="loadingShow">
                <el-icon>
                  <Download />
                </el-icon>
                <span>导出</span>
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <div id="table_sbtj" class="tabbox">
        <el-table ref="multipleTableRef" v-loading="tableloading" element-loading-text="数据加载中..." row-style="height:32px" :data="tableData" stripe style="width: 100%" border>
          <el-table-column label="单位名称" property="orgname"></el-table-column>
          <el-table-column label="设备总数" property="total"></el-table-column>
          <el-table-column label="机械设备" property="jxsb"></el-table-column>
          <el-table-column label="电气设备" property="dqsb"></el-table-column>
          <el-table-column label="特种设备" property="tzsb"></el-table-column>
          <el-table-column label="安防设施" property="afss"></el-table-column>
          <el-table-column label="消防设施" property="xfss"></el-table-column>
          <el-table-column label="防雷设施" property="flss"></el-table-column>
          <el-table-column label="安全器材" property="aqqc"></el-table-column>
          <el-table-column label="详情" v-if="!addplanShow">
            <template #default="{ row }">
              <span class="operesee" @click="handlexz(row)"><el-icon>
                  <Compass />
                </el-icon>详情</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
// 引入

import { reactive, onMounted, ref, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import { ArrowDown } from "@element-plus/icons-vue";
import pie from "@/views/law/components/charts/pie.vue";
import manyBars from "@/views/dutyBook/components/charts/manyBars.vue";
import { getSysDictByCode } from "@/api/sysDict"; //引入封装数字字典接口
import { getApi, deleteApi, putApi, postApi } from "@/api/tobAcco_api.js";
import { exportXlsx, downloadImg } from "@/excel/Export2Excel.js";
import { useRouter } from "vue-router";
import fs from "file-saver";
import * as XLSX from "xlsx";
const router = useRouter();
// import oneBar from '../components/charts/oneBar.vue';
const year = ref("");
const loadingShow = ref(false);
// 数据
const tableData = ref([]); //表格数据
const list = reactive([
  { routepath: "/dm/site/yxkzgl/xfaq/xfkzs", lable: "消防控制室" },
  { routepath: "/dm/site/yxkzgl/xfaq/wxxfz", lable: "微型消防站" },
  { routepath: "/dm/yxkzgl/stgl/stsbss", lable: "食堂设备设施" },
  { routepath: "/dm/yxkzgl/sbss/aqbs", lable: "安全标识" },
  { routepath: "/dm/equipment/safety", lable: "安全器材" },
  { routepath: "/dm/equipment/aqsbss", lable: "安全设备设施" },
  { routepath: "/dm/equipment/production", lable: "生产设备设施" },
  { routepath: "/dm/equipment/distribution", lable: "变配电设备设施" },
  { routepath: "/dm/equipment/specialType", lable: "特种设备" }
]);
const gotoher = (val) => {
  router.push({
    path: val
  });
};
//导出表格
const export2Excel = () => {
  loadingShow.value = true;
  let title = {
    0: '序号',
    1: "安全装置名称",
    2: "数量",
    3: "所属单位",
    4: "责任部门",
    5: "责任人",
    6: "检查频次",
    7: "维修或更换时间",
    8: "检修负责人",
    9: "安全装置所在设备名称",
  };
  ElMessage.warning('数据量庞大请耐心等待！！！')
  getApi({}, "/mosty-jcgl/obj/outAll").then((res) => {
    if (res) {
      let data = res;
      if (data.length > 0) {
        let tablename = "安全装置台账.xlsx";
        exportXlsx(title, data, '安全装置台账', tablename);
      } else {
        ElMessage.warning('暂无数据');
      }
    }
  }).finally(() => {
    loadingShow.value = false;
  })
};
const addplanShow = ref(false);
const close = () => {
  addplanShow.value = false;
  getListData();
};
const title = ref("");
const orgcode = ref("");
const key2 = ref(1)
const key3 = ref(1)
const barsShow = ref(false);
const data = reactive({
  zrsTitle: [],
  zrsNum: [
    {
      name: "异常",
      data: [],
      color: "#7BA87B"
    },
    {
      name: "正常",
      data: [],
      color: "#748EDE"
    }
  ]
});
// 饼图数据
const pieData = ref([]);
const pieData2 = ref([]);
const keys = ref(1)
// 分页
const listQuery = reactive({

});
// 柱状图数据
const barShow = ref(false);
const tableloading = ref(false);
const handlexz = (row) => {
  addplanShow.value = true;
  title.value = "设备设施统计单位详情";
  listQuery.orgcode = row.orgcode
  getListData()
  // orgcode.value = row.orgcode;

};
//返回
function CloseEvent () {
  addplanShow.value = false
  listQuery.orgcode = null
  getListData()

}
//获取列表数据
function getListData () {
  tableloading.value = true;
  postApi(listQuery, "/mosty-jcgl/obj/queryObjTypeDetail").then((res) => {
    if (res) {
      tableloading.value = false;
      tableData.value = res;
      tableData.value.forEach((item) => {
        item.total = item.total ? item.total : 0;
        item.jxsb = item.jxsb ? item.jxsb : 0;
        item.dqsb = item.dqsb ? item.dqsb : 0;
        item.tzsb = item.tzsb ? item.tzsb : 0;
        item.afss = item.afss ? item.afss : 0;
        item.xfss = item.xfss ? item.xfss : 0;
        item.flss = item.flss ? item.flss : 0;
        item.aqqc = item.aqqc ? item.aqqc : 0;
      })
    } else {
      tableData.value = [];
      tableloading.value = false;
    }
  });
  postApi(listQuery, "/mosty-jcgl/obj/queryObjType").then((res) => {
    if (res) {
      pieData2.value = []
      let arr = res;
      pieData2.value = arr.map((item) => ({
        name: item.name,
        value: item.number.toString()
      }));
      key3.value++
    } else {
      pieData2.value = []
    }
  });
  postApi(listQuery, "/mosty-jcgl/obj/queryObjStatus").then((res) => {
    if (res) {
      pieData.value = []
      let obj = res;
      pieData.value = [
        { name: "正常", value: obj.normalNumber },
        { name: "异常", value: obj.abnormalNumber }
      ];

      key2.value++
    } else {
      pieData.value = [];
    }
  });
  postApi(listQuery, "/mosty-jcgl/obj/queryObjStatusSz").then((res) => {
    if (res) {
      data.zrsNum[0].data = []
      data.zrsNum[1].data = []
      data.zrsTitle = []
      let brr = res;
      brr.forEach((item) => {
        data.zrsTitle.push(item.orgname);
        data.zrsNum[0].data.push(item.abnormalNumber);
        data.zrsNum[1].data.push(item.normalNumber);
      });
      keys.value++
    } else {

    }
  });

}
function handleCommand () {
  //选择功能
}
onMounted(() => {
  getListData();
  barShow.value = true;
  barsShow.value = true;
});
</script>

<style lang="scss" scoped>
.box {
  height: calc(100%);
  overflow-y: scroll;
}

.titleBox {
  border-bottom: 1px solid var(--el-color-primary);
}

.btnBox {
  display: flex;
  width: 300px;
  justify-content: space-between;
}

.titl {
  padding: 20px;
  background: #f9faf9;

  .title {
    color: #000;
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 10px;
  }
}

.title {
  color: #000;
  font-size: 18px;
  line-height: 25px;
}

.bottom {
  display: flex;
  justify-content: space-between;
  background: #f9faf9;

  .titlehead {
    color: #000;
    font-size: 18px;
    line-height: 20px;
    margin-bottom: 10px;
  }
}

.chartsBox {
  height: 350px;
  display: flex;
  justify-content: space-between;

  div {
    background-color: #fff;
    border: 1px solid var(--el-color-primary);
  }
}

.pieboxs {
  height: 350px;
  border: 2px solid var(--el-color-primary);
  background-color: #fff;
}

.aqzzt {
  display: flex;
  background-color: #fff;
  height: 200px;
  justify-content: space-between;
  align-items: center;
  border: 2px solid var(--el-color-primary);
}

.tabbox {
  background-color: #fff;
  width: 58.7%;
  margin-right: 1%;
  height: 600px;
  margin-top: 30px;
  overflow-y: auto;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>