<template>
  <!-- 重点相关方弹窗 -->
  <el-dialog center ref="dialog" :title="dataTitle" :show-close="false" modal :destory-on-close="true"
    class="dialogClass" :append-to-body="true" width="871px" custom-class="custom-dialog" v-model="props.visible">
    <section class="button">
      <el-button @click="exportExcels" :loading="excelLoading">导出</el-button>
      <el-button v-if="popForm" @click="backbtn">返回</el-button>
      <el-button @click="closeDialog">关闭</el-button>
    </section>
    <div class="itemTrading">

      <!-- @cell-dblclick="editData" -->
      <el-table id="out-table" v-loading="tableloading" ref="detailTable" show-summary stripe
        :summary-method="getSummaries" height="450px" border :data="xgfData">
        <el-table-column property="orgName" label="企业名称" width="250"></el-table-column>
        <el-table-column property="building" label="建筑施工和拆除"></el-table-column>
        <el-table-column property="repair" label="房屋修缮和装修装潢"></el-table-column>
        <el-table-column property="equipInstall" label="设备设施安装拆除和维修保养"></el-table-column>
        <el-table-column property="canteen" label="食堂运行"></el-table-column>
        <el-table-column property="wastewater" label="污水处理运行"></el-table-column>
        <el-table-column property="greening" label="绿化保洁"></el-table-column>
        <el-table-column property="wallClean" label="外墙清洗"></el-table-column>
        <el-table-column property="insecticide" label="杀虫作业"></el-table-column>
        <el-table-column property="dangerGoods" label="危害物品供应和运输"></el-table-column>
        <el-table-column property="logisticsTrans" label="物流运输"></el-table-column>
        <el-table-column property="outsourcing" label="生产性业务外包"></el-table-column>
        <el-table-column property="security" label="保安服务"></el-table-column>
        <el-table-column property="fireFighting" label="消防服务"></el-table-column>
        <el-table-column property="property" label="物业服务"></el-table-column>
        <el-table-column property="house" label="房屋承租"></el-table-column>
        <el-table-column property="carMaintain" label="车辆维修相关方"></el-table-column>

        <!-- <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> -->
      </el-table>
    </div>

  </el-dialog>
</template>

<script setup>
import { ref, defineProps, onMounted, reactive, watch, defineEmits } from "vue";
import { getApi, postApi } from "@/api/tobAcco_api.js";
import { getSummaries } from "@/utils/tools";
import { exportXlsx } from "@/excel/Export2Excel.js";
const tableloading = ref(false)
const excelLoading = ref(false)
const popForm = ref(false);
const detailTable = ref();
const emit = defineEmits(['changeVi'])
const listQuery = ref({
  code: ''
});
const props = defineProps({
  visible: false,
  dataTitle: {
    type: String,
    requried: true
  }
});
//相关方
const xgfData = ref([
  {
    "orgName": "甘肃省烟草专卖局（公司）",
    "building": 4,
    "security": 3,
    "repair": 4,
    "equipInstall": 8,
    "canteen": 8,
    "wastewater": 6,
    "greening": 8,
    "wallClean": 2,
    "insecticide": 6,
    "dangerGoods": 3,
    "logisticsTrans": 0,
    "outsourcing": 7,
    "fireFighting": 1,
    "property": 2,
    "house": 9,
    "carMaintain": 6
  },
  {
    "orgName": "兰州市烟草专卖局（公司）",
    "building": 7,
    "security": 1,
    "repair": 8,
    "equipInstall": 2,
    "canteen": 9,
    "wastewater": 9,
    "greening": 5,
    "wallClean": 7,
    "insecticide": 3,
    "dangerGoods": 3,
    "logisticsTrans": 4,
    "outsourcing": 1,
    "fireFighting": 0,
    "property": 0,
    "house": 3,
    "carMaintain": 4
  },
  {
    "orgName": "天水市烟草专卖局（公司）",
    "building": 6,
    "security": 7,
    "greening": 9,
    "wallClean": 2,
    "repair": 4,
    "equipInstall": 6,
    "canteen": 2,
    "wastewater": 2,
    "insecticide": 5,
    "dangerGoods": 2,
    "logisticsTrans": 5,
    "outsourcing": 3,
    "fireFighting": 4,
    "property": 9,
    "house": 5,
    "carMaintain": 6
  },
  {
    "orgName": "陇南市烟草专卖局（公司）",
    "building": 0,
    "security": 9,
    "greening": 9,
    "wallClean": 8,
    "repair": 9,
    "equipInstall": 6,
    "canteen": 2,
    "wastewater": 4,
    "insecticide": 6,
    "dangerGoods": 9,
    "logisticsTrans": 1,
    "outsourcing": 2,
    "fireFighting": 5,
    "property": 0,
    "house": 2,
    "carMaintain": 9
  },
  {
    "orgName": "酒泉市烟草专卖局（公司）",
    "building": 3,
    "security": 4,
    "greening": 6,
    "wallClean": 0,
    "repair": 6,
    "equipInstall": 9,
    "canteen": 3,
    "wastewater": 1,
    "insecticide": 6,
    "dangerGoods": 6,
    "logisticsTrans": 0,
    "outsourcing": 0,
    "fireFighting": 0,
    "property": 1,
    "house": 7,
    "carMaintain": 2
  },
  {
    "orgName": "嘉峪关市烟草专卖局（公司）",
    "building": 5,
    "security": 9,
    "greening": 8,
    "wallClean": 0,
    "repair": 0,
    "equipInstall": 5,
    "canteen": 0,
    "wastewater": 0,
    "insecticide": 4,
    "dangerGoods": 4,
    "logisticsTrans": 2,
    "outsourcing": 1,
    "fireFighting": 3,
    "property": 9,
    "house": 5,
    "carMaintain": 4
  },
  {
    "orgName": "庆阳市烟草专卖局（公司）",
    "building": 6,
    "security": 8,
    "greening": 3,
    "wallClean": 4,
    "repair": 0,
    "equipInstall": 5,
    "canteen": 1,
    "wastewater": 2,
    "insecticide": 7,
    "dangerGoods": 3,
    "logisticsTrans": 4,
    "outsourcing": 6,
    "fireFighting": 9,
    "property": 5,
    "house": 9,
    "carMaintain": 5
  },
  {
    "orgName": "白银市烟草专卖局（公司）",
    "building": 7,
    "security": 3,
    "greening": 1,
    "wallClean": 2,
    "repair": 8,
    "equipInstall": 3,
    "canteen": 7,
    "wastewater": 2,
    "insecticide": 0,
    "dangerGoods": 6,
    "logisticsTrans": 6,
    "outsourcing": 5,
    "fireFighting": 2,
    "property": 4,
    "house": 7,
    "carMaintain": 2
  },
  {
    "orgName": "定西市烟草专卖局（公司）",
    "building": 1,
    "security": 1,
    "greening": 7,
    "wallClean": 6,
    "repair": 4,
    "equipInstall": 4,
    "canteen": 9,
    "wastewater": 1,
    "insecticide": 5,
    "dangerGoods": 8,
    "logisticsTrans": 1,
    "outsourcing": 9,
    "fireFighting": 4,
    "property": 9,
    "house": 0,
    "carMaintain": 4
  },
  {
    "orgName": "金昌市烟草专卖局（公司）",
    "building": 2,
    "security": 1,
    "greening": 2,
    "wallClean": 0,
    "repair": 5,
    "equipInstall": 3,
    "canteen": 0,
    "wastewater": 7,
    "insecticide": 4,
    "dangerGoods": 4,
    "logisticsTrans": 3,
    "outsourcing": 7,
    "fireFighting": 6,
    "property": 1,
    "house": 3,
    "carMaintain": 5
  },
  {
    "orgName": "平凉市烟草专卖局（公司）",
    "building": 8,
    "security": 2,
    "greening": 0,
    "wallClean": 8,
    "repair": 7,
    "equipInstall": 5,
    "canteen": 0,
    "wastewater": 2,
    "insecticide": 6,
    "dangerGoods": 1,
    "logisticsTrans": 4,
    "outsourcing": 0,
    "fireFighting": 8,
    "property": 7,
    "house": 8,
    "carMaintain": 9
  },
  {
    "orgName": "武威市烟草专卖局（公司）",
    "building": 5,
    "security": 0,
    "greening": 4,
    "wallClean": 5,
    "repair": 7,
    "equipInstall": 6,
    "canteen": 7,
    "wastewater": 0,
    "insecticide": 2,
    "dangerGoods": 3,
    "logisticsTrans": 0,
    "outsourcing": 3,
    "fireFighting": 5,
    "property": 4,
    "house": 9,
    "carMaintain": 5
  },
  {
    "orgName": "甘南州烟草专卖局（公司）",
    "building": 2,
    "security": 0,
    "greening": 8,
    "wallClean": 3,
    "repair": 7,
    "equipInstall": 8,
    "canteen": 3,
    "wastewater": 1,
    "insecticide": 0,
    "dangerGoods": 2,
    "logisticsTrans": 1,
    "outsourcing": 7,
    "fireFighting": 0,
    "property": 5,
    "house": 2,
    "carMaintain": 6
  },
  {
    "orgName": "临夏州烟草专卖局（公司）",
    "building": 2,
    "security": 6,
    "greening": 4,
    "wallClean": 9,
    "repair": 4,
    "equipInstall": 1,
    "canteen": 4,
    "wastewater": 0,
    "insecticide": 6,
    "dangerGoods": 0,
    "logisticsTrans": 4,
    "outsourcing": 8,
    "fireFighting": 2,
    "property": 7,
    "house": 4,
    "carMaintain": 4
  },
]);
onMounted(() => {
  // getAboutData();
  popForm.value = false;
  // demowidth()


});
//相关方一级数据
const getAboutData = (obj) => {
  xgfData.value = []
  getApi({}, '/mosty-jcgl/xgf/listDisplay').then((res) => {
    xgfData.value = res ? res : []
  })
}

function demowidth() {
  setTimeout(() => {
    let demo = document.getElementsByClassName("el-table__body-wrapper")[0];
    demo.style = `width:${detailTable._value.bodyWidth}`;
  }, 1e3);
}

//详情按钮
const handleClick = (index, row) => {
  var code = row.cityCode
  listQuery.value.code = code
  popForm.value = true; //显示返回按钮
  getAboutXQData()
  // let demo = document.getElementsByClassName("el-table__body-wrapper")[0];
  //   demo.style = `width:2670px`;
  demowidth()
};
//相关方详情数据
const getAboutXQData = () => {
  xgfData.value = []
  document.getElementById('out-table').scrollLeft = 0
  getApi(listQuery.value, '/mosty-jcgl/xgf/details').then((res) => {
    xgfData.value = res.list ? res.list : [];
  })
}
//单元格双击事件
function editData(e) {
  var val = e.name;
  popForm.value = true; //显示返回按钮
}
//点击返回
const backbtn = () => {
  popForm.value = false;
  getAboutData();
  demowidth()

};

//关闭弹窗事件
function closeDialog() {
  emit("changeVi", false)
  popForm.value = false;
}
const exportExcels = () => {
  excelLoading.value = true
  let title = {
    orgName: '企业名称',
    building: "建筑施工和拆除",
    repair: "房屋修缮和装修装潢",
    equipInstall: "设备设施安装拆除和维修保养",
    canteen: "食堂运行",
    wastewater: "污水处理运行",
    greening: "绿化保洁",
    wallClean: "外墙清洗",
    insecticide: "杀虫作业",
    dangerGoods: "危害物品供应和运输",
    logisticsTrans: "物流运输",
    outsourcing: "生产性业务外包",
    security: "保安服务",
    fireFighting: "消防服务",
    property: "物业服务",
    house: "房屋承租",
    carMaintain: "车辆维修相关方",
  };
  const param = listQuery.value
  let data = structuredClone(xgfData.value);
  let obj = {
    orgName: '合计',
    building: 0,
    repair: 0,
    equipInstall: 0,
    canteen: 0,
    wastewater: 0,
    greening: 0,
    wallClean: 0,
    insecticide: 0,
    dangerGoods: 0,
    logisticsTrans: 0,
    outsourcing: 0,
    security: 0,
    fireFighting: 0,
    property: 0,
    house: 0,
    carMaintain: 0,
  }
  if (data) {
    for (let i = 0; i < data.length; i++) {
      obj.building += data[i].building;
      obj.repair += data[i].repair;
      obj.equipInstall += data[i].equipInstall;
      obj.canteen += data[i].canteen;
      obj.wastewater += data[i].wastewater;
      obj.greening += data[i].greening;
      obj.wallClean += data[i].wallClean;
      obj.insecticide += data[i].insecticide;
      obj.dangerGoods += data[i].dangerGoods;
      obj.logisticsTrans += data[i].logisticsTrans;
      obj.outsourcing += data[i].outsourcing;
      obj.security += data[i].security;
      obj.fireFighting += data[i].fireFighting;
      obj.property += data[i].property;
      obj.house += data[i].house;
      obj.carMaintain += data[i].carMaintain;
    }
    data.push(obj)
    let tablename = "重点相关方台账.xlsx";
    exportXlsx(title, data, '重点相关方台账', tablename);
    excelLoading.value = false
  }
  // getApi(param, "/mosty-jcgl/basicData/tzsbList").then((res) => {
  //   if (res) {

  //     excelLoading.value = false
  //   }
  // }).catch(() => {
  //   excelLoading.value = false
  // });
};

</script>

<style lang="scss" scoped>
@import "~@/assets/css/element-plus.scss";
</style>
