<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>


      <!-- 运行控制的数据统计表 -->
      <!-- 全员参与 -->
      <!-- 临时注释 start ======== -->
      <!-- <div class="binBox" v-if="dataTitle == '全员参与'">
        <div class="left">
          <Line :monthList="monthList" :barNum="barNum" v-if="barNum.length > 0" :loadingshow="binshow"> </Line>
        </div>
        <div class="right">
          <Pressure :loadingshow="binshow" :allPerRate="allPerRate" v-if="allPerRate != 0" />
          <div class="rate" v-if="rate > 0">
            <span>比去年增长:{{ rate }}%</span>
            <el-icon>
              <CaretTop />
            </el-icon>
          </div>
          <div class="rate" v-else-if="rate < 0">
            <span>比去年增长:{{ rate }}%</span>
            <el-icon>
              <CaretBottom />
            </el-icon>
          </div>
          <div class="rate" v-else>
            <span>与去年持平</span>
          </div>
        </div>
      </div> -->
      <!-- 临时注释 end ======== -->

      <!-- 全员参与 -->
      <div>
        <el-table :key="tableKey" show-summary :summary-method="getSummaries" stripe height="450px" border
          :data="controldata" id="out-table" @cell-dblclick="editData">
          <el-table-column property="comName" label="单位名称" width="250"></el-table-column>
          <!-- <el-table-column property="month" label="月份"></el-table-column>
        <el-table-column property="logins" label="登录次数"></el-table-column> -->
          <el-table-column property="totalStaff" label="公司人数"></el-table-column>
          <el-table-column property="participants" label="参与人数"></el-table-column>
          <el-table-column property="lfpr" label="参与率">
            <template #default="scope">{{ scope.row.lfpr }}%</template>
          </el-table-column>
          <el-table-column property="ranking" label="排名" v-if="!popForm"></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>
      </div>

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

<script setup>
import Line from "../../charts/line.vue";
import Pressure from "../../charts/pressure.vue";
import BinCharts from "../../charts/binChart2.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { dateFormat, exportExcel } from "@/utils/tools";
import { ref, defineProps, reactive, onMounted, defineEmits, nextTick } from "vue";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { fakeQycyData } from "../../fakeData";
const props = defineProps({
  title: String,
  isShow: Boolean
});
//运行控制的数据
const controldata = ref([]);
const emit = defineEmits(['changeVi'])
// const datalist = ref([]);
const binshow = ref(false);
const rate = ref(0)
/** 合计 */
const sumData = ref([])
// 月份
const monthList = ref([])
const monthData = ref(dateFormat({ type: 'month' })) //获取当前月份
const curYear = ref(dateFormat({ type: 'year' })) //获取当年
const barNum = ref([])
const popForm = ref(false);
const isShow = ref(false);
const currentPage = ref("20");
const dataTitle = props.title;
const tableKey = ref(1)
const allPerRate = ref(0)
onMounted(() => {
  // TODO: 临时注释 start ========
  controldata.value = fakeQycyData()
  isShow.value = true;
  return
  // 临时注释 end ========

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

});
const exportExcels = () => {
  const titleObj = {
    comName: '单位名称',
    totalStaff: '公司人数',
    participants: '参与人数',
    lfpr: '参与率',
    ranking: '排名'
  }
  const sumObj = {
    comName: '合计',
    totalStaff: sumData.value[1],
    participants: sumData.value[2],
    lfpr: sumData.value[3],
    ranking: sumData.value[4]
  }
  const data = structuredClone([...controldata.value, sumObj])
  exportXlsx(titleObj, data, '全员参与', '全员参与.xlsx')
}

// 获取时间
const getMonthData = () => {
  var dataArr = [];
  var data = new Date();
  var year = data.getFullYear();
  var month = data.getMonth() + 1;
  var endDate = year - 1;	 //自定义截止年份时间 例如是2020年
  var rate = year - endDate;
  var monthNum = (rate - 1) * 12 + 7 + month;  //取到的月份	
  data.setMonth(data.getMonth() + 1, 1); //获取到当前月份,设置月份
  for (var i = 0; i < monthNum; i++) {
    data.setMonth(data.getMonth() - 1); //每次循环一次 月份值减1
    var m = data.getMonth() + 1;
    m = m < 10 ? "0" + m : m;
    dataArr.push(data.getFullYear() + "-" + m);
  }
  monthList.value = dataArr.reverse();
  getLineData();
}

// 获取全员参与折线图的数据
const getLineData = () => {
  barNum.value = []
  getApi({ month: monthData.value }, '/mosty-jcgl/miniappuser/getLogins/{month}').then((res) => {
    var obj = {}
    var arr = []
    obj = res
    for (let i in obj) {
      arr.push(obj[i])
    }
    barNum.value = arr
  })
}
// 获取增长率
const getRateData = () => {
  rate.value = []
  getApi({ Year: curYear.value }, '/mosty-jcgl/miniappuser/getRise/{Year}').then((res) => {
    rate.value = res.rate ? Number(res.rate) : 0
  })
}

//查看详情按钮
const handleClick = (index, row) => {
  tableKey.value = 2
  popForm.value = true; //显示返回按钮
  var val = row.cityCode;
  // 详情列表
  getApi({ cityCode: val }, '/mosty-jcgl/miniappuser/getCountyList/{cityCode}').then((res) => {
    controldata.value = res
  })
};
// 获取全员参与率
const getAllperrate = () => {
  getApi({}, "/mosty-jcgl/miniapp/getTake").then((res) => {
    var str = 0
    str = res.lfpr.slice(0, res.lfpr.length - 1)
    allPerRate.value = Number(str)
  })
}

//点击返回
const backbtn = () => {
  tableKey.value = 1
  popForm.value = false;
  getAllData();
};


// 合计
function getSummaries(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) {
        sums[index] = parseInt(sums[index] / data.length) + '%'
      }
    } else {
      sums[index] = 'N/A';
    }
  });
  sums[sums.length - 1] = 'N/A' // 排名为空
  sumData.value = sums
  return sums;
}

// 获取全员参与数据列表
const getAllData = () => {
  getMonthData();
  controldata.value = []
  getApi({}, "/mosty-jcgl/miniappuser/getCompanyList").then((res) => {
    controldata.value = res ? res : []
  })
}


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

</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;
  }
}
</style>
