<template>
  <!-- 安全会议弹窗 -->
  <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="props.visible">
    <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>
      <el-table v-if="!popForm" show-summary :summary-method="getSum" stripe height="333px" border id="out-table"
        :data="controldata" @cell-dblclick="editData">
        <el-table-column property="comName" label="单位名称" width="250"></el-table-column>
        <el-table-column property="hycs" label="开展安全会议次数"></el-table-column>
        <el-table-column property="hyjy" label="会议纪要数"></el-table-column>
        <el-table-column property="chrc" label="累计参会人次"></el-table-column>
        <!-- 临时注释 start ======== -->
        <!-- <el-table-column label="操作" fixed="right" 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>
      <el-table v-else-if="popForm" stripe height="333px" border id="out-table" :data="controldatatwo">
        <el-table-column property="meetingName" label="会议标题" width="250"></el-table-column>
        <el-table-column property="username" label="参会人员"></el-table-column>
        <el-table-column property="quarter" label="季度"></el-table-column>
        <el-table-column property="year" label="年度"></el-table-column>
        <el-table-column property="files" label="会议纪要"></el-table-column>
      </el-table>
    </div>

  </el-dialog>
</template>

<script setup>
import { getApi } from "@/api/tobAcco_api.js";
import { ref, defineProps, onMounted, defineEmits } from "vue";
import { exportExcel, getSummaries } from "@/utils/tools";
import { exportXlsx } from "@/excel/Export2Excel.js";
import { fakeAqhyData } from "../../fakeData.js";
const props = defineProps({
  title: String,
  visible: false
});
//运行控制的数据
const controldata = ref([]);
const controldatatwo = ref([]);
const binshow = ref(false);
const popForm = ref(false);
const dataTitle = props.title;
const listQuery = ref({
});
const sumData = ref([])
onMounted(() => {
  // TODO: 临时注释 start ========
  controldata.value = fakeAqhyData()
  binshow.value = true;
  return
  // end ===========

  //运行控制数据
  getAqhyData();
  binshow.value = true;
  popForm.value = false;

});
const exportExcels = () => {
  const titleObj = {
    'comName': '单位名称',
    hycs: '开展安全会议次数',
    hyjy: '会议纪要数',
    chrc: '累计参会人次'
  }
  const sumObj = {
    comName: '合计',
    hycs: sumData.value[1],
    hyjy: sumData.value[2],
    chrc: sumData.value[3]
  } 
  const data = JSON.parse(JSON.stringify([...controldata.value, sumObj]))
  exportXlsx(titleObj, data, '安全会议', '安全会议.xlsx')
}
const getSum = (...arg) => {
  sumData.value = getSummaries(...arg)
  return sumData.value
}
//安全会议接口
const getAqhyData = () => {
  controldata.value = []
  getApi({}, '/mosty-jcgl/meeting/getPageList').then((res) => {
    controldata.value = res ? res : [];
  })
}
//查看详情按钮
const handleClick = (index, row) => {
  var val = row.cityCode;
  controldatatwo.value = []
  getApi({ cityCode: val }, "/mosty-jcgl/meeting/getDetails/{cityCode}").then((res) => {
    controldatatwo.value = res ? res : []
  })
  popForm.value = true; //显示返回按钮
};
const emit = defineEmits(['changeVi'])
//点击返回
const backbtn = () => {
  popForm.value = false;
};



//公司名称双击事件
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;
  }
}

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