<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" v-if="show">
        <div class="left">
          <BinChart :binData="binData" :loadingshow="binshow" />
        </div>
        <div class="right">
          <BinCharts :binData="binDatatwo" :loadingshow="binshow" />
        </div>
      </div>
      <div>
        <el-table stripe height="333px" border show-summary :summary-method="getSummaries" :data="controldata"
          id="out-table1" @cell-dblclick="editData">
          <el-table-column property="xt_city_name" label="单位名称" width="250"></el-table-column>
          <!-- <el-table-column property="jgsl" label="安全机构数量"></el-table-column> -->
          <el-table-column property="aqysum" label="安全员总数"></el-table-column>
          <el-table-column property="zz" label="专职安全员数"></el-table-column>
          <el-table-column property="jz" label="兼职安全员数"></el-table-column>
          <!-- <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> -->
        </el-table>
        <!-- 专职 -->
        <!-- <el-table v-else-if="popForm" stripe height="333px" border :data="xqdata" id="out-table">
          <el-table-column property="username" label="姓名"></el-table-column>
          <el-table-column property="xb" label="性别">
            <template #default="scope">{{ scope.row.xb === '1' ? '男' : '女' }}</template>
          </el-table-column>
          <el-table-column property="aqrylx" label="政治面貌">
            <template #default="scope">{{ scope.row.aqrylx === '0' ? '专职' : '兼职' }}</template>
          </el-table-column>
          <el-table-column property="csrq" label="出生年月"></el-table-column>
          <el-table-column property="zw" label="职务"></el-table-column>
          <el-table-column property="whcd" label="学历" :formatter="sample">
          </el-table-column>
          <el-table-column property="zy" label="专业" :formatter="zysample"></el-table-column>
          <el-table-column property="csaqgznx" label="从事专职安全管理年限"></el-table-column>
        </el-table> -->
      </div>

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

<script setup>
import BinChart from "../../charts/binChart.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import BinCharts from "../../charts/binChart2.vue";
// import { exportExcel, mergeArray } from "@/utils/tools";
import { ref, defineProps, reactive, onMounted, nextTick, defineEmits } from "vue";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { fakeAqryData } from "../../fakeData.js"

const props = defineProps({
  title: String,
  isShow: Boolean
});
//运行控制的数据
const controldata = ref([]);
const show = ref(false);
const emit = defineEmits(['changeVi'])
const binshow = ref(false);
//饼状图数据
const binData = ref([]);
const binDatatwo = ref([
  { value: 62, name: "研究生及以上" },
  { value: 1173, name: "本科" },
  { value: 994, name: "专科" },
  { value: 48, name: "其他" },
  { value: 407, name: "高中及中专" },
  { value: 70, name: "初中及以下" }
]);
const popForm = ref(false);
const isShow = ref(false);
const dataTitle = props.title;
const listQuery = ref({
});
/** 合计数组 */
const sumData = ref([])
onMounted(() => {
  //临时假数据 ==========================
  controldata.value = fakeAqryData()
  isShow.value = true;
  return
  //临时假数据 ==========================
  //运行控制数据
  getAqryData();
  isShow.value = true;
  binshow.value = false;
  popForm.value = false;

});
const exportExcels = () => {
  const titleObj = {
    'xt_city_name': '单位名称',
    'aqysum': '安全员总数',
    'zz': '专职安全员数',
    'jz': '兼职安全员数'
  }
  // 合计
  const sumObj = {
    xt_city_name: '合计',
    aqysum: sumData.value[1],
    zz: sumData.value[2],
    jz: sumData.value[3]
  }
  const data = structuredClone([...controldata.value, sumObj])
  exportXlsx(titleObj, data, '安全人员', '安全人员.xlsx')
}
//安全人员接口数据
const getAqryData = () => {
  controldata.value = []
  getApi({}, "/mosty-jcgl/aqy/staffList").then((res) => {
    if (res) {
      res.forEach((item) => {
        item.aqysum = item.zz + item.jz
      })

      controldata.value = res.filter((it) => {
        return it.xt_city_name
      })
    }

    //展示统计图
    // show.value = true
    // binshow.value = true;
  })
}

//查看详情按钮
const handleClick = (index, row) => {
  popForm.value = true; //显示返回按钮
  show.value = false
  binshow.value = false;
  binData.value = []
  controldata.value = []
  //安全人员详情接口数据
  getApi({ orgcode: row.xt_city_code }, "/mosty-jcgl/aqy/staffListSj").then((res) => {
    controldata.value = res ? res : []

    //展示统计图
    // xqdata.value = res;
    // show.value = true
    // binshow.value = true;
    // binData.value = [
    //   { value: row.zzaqy, name: "兼职安全员" },
    //   { value: row.jzaqy, name: "专职安全员" }
    // ]
  })
};
//点击返回
const backbtn = () => {
  popForm.value = false;
  show.value = false
  binshow.value = false;
  getAqryData();
  getSummaries
};


//公司名称双击事件
function editData(row, column) {
  //双击单位名称获取城市编号
  if (column.property == 'comName') {
  }
  // popForm.value = true; //显示返回按钮
}
//关闭弹窗事件
function closeDialog() {
  emit("changeVi", false)
  popForm.value = false;
}


// 合计
function getSummaries(param) {
  if (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 === 3 || index === 4) {
          // show.value = true
          binData.value = [
            { value: sums[4], name: "兼职安全员" },
            { value: sums[3], name: "专职安全员" }
          ]
        }

      } else {
        sums[index] = 'N/A';
      }
    });
    sumData.value = sums // 合计数据方便导出用
    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;
}

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

.black {
  width: 100px;
  float: right;
  margin-bottom: 10px;
}
</style>
