<template>
  <!-- 运行控制数据 -->
  <div class="pubDataBox">

    <!-- 运行控制弹窗 -->
    <el-dialog center ref="dialog" :title="props.title" :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-else-if="dataTitle == '应急演练'">
        <BinManyBar :barTitle="yaBartitle" :barNum="yaBarnum" :loadingshow="binshow" />
      </div> -->
      <!-- 应急演练 -->
      <div>
        <el-table :key="tableKey" stripe height="450px" border :data="controldata" id="out-table"
          @cell-dblclick="editData" show-summary :summary-method="getSum">
          <el-table-column property="comName" label="单位名称" width="250"></el-table-column>
          <el-table-column property="jh" label="计划"></el-table-column>
          <el-table-column property="yl" label="演练"></el-table-column>
          <!-- 临时隐藏 start ====== -->
          <!-- <el-table-column label="操作" v-if="!popForm">
            <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 BinManyBar from "../../charts/binManyBar.vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { exportExcel, getSummaries } from "@/utils/tools";
import { ref, defineProps, reactive, onMounted, nextTick, defineEmits } from "vue";
import { number } from "echarts";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { fakeYjylData } from "../../fakeData.js"
const props = defineProps({
  title: String,
  isShow: Boolean,
  num: Number
});
//运行控制的数据
const controldata = ref([]);
const controldataone = ref([]);
const controldatatow = ref([]);
const emit = defineEmits(['changeVi'])
const binshow = ref(false);
//饼状图数据

// 应急演练柱状图
const yaBartitle = ref(["专项", "综合", "现场处置", "应急处置卡"]);
const yaBarnum = ref([
  {
    data: [120, 132, 101, 134],
    color: "#7BA87B"
  }
]);

//分公司表格数据

const popForm = ref(false);
const isShow = ref(false);
const dataTitle = props.title;
/** 合计数组 */
const sumData = ref([])
const listQuery = ref({
  code: ''
});
const tableKey = ref(1)

onMounted(() => {
  //运行控制数据
  getYJYLList();
  isShow.value = true;
  binshow.value = true;
  var title = props.title
  popForm.value = false;

});
const exportExcels = () => {
  const titleObj = {
    comName: '单位名称',
    jh: '计划',
    yl: '演练'
  }
  const sumObj = {
    comName: '合计',
    jh: sumData.value[1],
    yl: sumData.value[2]
  }
  const data = structuredClone([...controldata.value, sumObj])
  exportXlsx(titleObj, data, '应急演练', '应急演练.xlsx')
}
/** 合计方法 */
const getSum = (...args) => {
  sumData.value = getSummaries(...args)
  return sumData.value
}
//获取应急演练列表数据
const getYJYLList = () => {
  controldata.value = []


  // 设置假数据1 start=====
  controldata.value = fakeYjylData()
  return
  // 设置假数据1 end =====

  getApi({}, "/mosty-jcgl/yjyl/getDetails").then((res) => {
    controldata.value = res ? res : [];
  })
}
//查看详情按钮
const handleClick = (index, row) => {
  controldata.value = []
  tableKey.value = 2
  var val = row.cityCode;
  //获取应急演练的详情列表
  getApi({ cityCode: val }, '/mosty-jcgl/yjyl/getDetailsList/{cityCode}').then((res) => {
    controldata.value = res ? res : [];
  })
  popForm.value = true; //显示返回按钮
};


//点击返回
const backbtn = () => {
  tableKey.value = 1
  popForm.value = false;
  getYJYLList();
};
//关闭弹窗事件
function closeDialog() {

  emit("changeVi", false)
  popForm.value = false;
}

//公司名称双击事件
function editData(row, column) {

  //双击单位名称获取城市编号
  if (column.property == 'comName') {
  }
  // popForm.value = true; //显示返回按钮
}


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