<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 :key="tableKey" id="out-table" v-loading="tableloading" stripe show-summary
        :summary-method="getSummaries" ref="detailTable" height="450px" border :data="ccData">
        <el-table-column property="orgName" label="企业名称" width="250"></el-table-column>
        <el-table-column label="仓储">
          <el-table-column label="数量" property="warehouse"></el-table-column>
          <el-table-column label="建筑面积" property="warehouseArea"></el-table-column>
        </el-table-column>
        <el-table-column label="卷烟仓库">
          <el-table-column label="数量" property="cigarette"></el-table-column>
          <el-table-column label="建筑面积" property="cigaretteArea"></el-table-column>
        </el-table-column>
        <el-table-column label="烟叶仓库">
          <el-table-column label="数量" property="tobacco"></el-table-column>
          <el-table-column label="建筑面积" property="tobaccoArea"></el-table-column>
        </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 { getSummaries } from "@/utils/tools";
import { getApi } from "@/api/tobAcco_api.js";
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 tableKey = ref(1)
const props = defineProps({
  visible: false,
  dataTitle: {
    type: String,
    requried: true
  }
});
//仓储
const ccData = ref([
  {
    "orgName": "甘肃省烟草专卖局（公司）",
    "cigarette": 42,
    "cigaretteArea": 92,
    "tobacco": 67,
    "tobaccoArea": 96,
    "warehouse": 30,
    "warehouseArea": 7
  },
  {
    "orgName": "兰州市烟草专卖局（公司）",
    "cigarette": 34,
    "cigaretteArea": 57,
    "tobacco": 88,
    "tobaccoArea": 60,
    "warehouse": 18,
    "warehouseArea": 35
  },
  // {
  //   "orgName": "天水市烟草专卖局（公司）",
  //   "warehouse": 39,
  //   "warehouseArea": 33,
  //   "cigarette": 32,
  //   "cigaretteArea": 90,
  //   "tobacco": 71,
  //   "tobaccoArea": 55
  // },
  // {
  //   "orgName": "陇南市烟草专卖局（公司）",
  //   "warehouse": 96,
  //   "warehouseArea": 69,
  //   "cigarette": 20,
  //   "cigaretteArea": 75,
  //   "tobacco": 23,
  //   "tobaccoArea": 71
  // },
  // {
  //   "orgName": "酒泉市烟草专卖局（公司）",
  //   "warehouse": 55,
  //   "warehouseArea": 77,
  //   "cigarette": 66,
  //   "cigaretteArea": 98,
  //   "tobacco": 95,
  //   "tobaccoArea": 94
  // },
  // {
  //   "orgName": "嘉峪关市烟草专卖局（公司）",
  //   "warehouse": 46,
  //   "warehouseArea": 1,
  //   "cigarette": 47,
  //   "cigaretteArea": 93,
  //   "tobacco": 18,
  //   "tobaccoArea": 53
  // },
  // {
  //   "orgName": "庆阳市烟草专卖局（公司）",
  //   "warehouse": 39,
  //   "warehouseArea": 94,
  //   "cigarette": 28,
  //   "cigaretteArea": 79,
  //   "tobacco": 86,
  //   "tobaccoArea": 8
  // },
  // {
  //   "orgName": "白银市烟草专卖局（公司）",
  //   "warehouse": 44,
  //   "warehouseArea": 50,
  //   "cigarette": 85,
  //   "cigaretteArea": 5,
  //   "tobacco": 47,
  //   "tobaccoArea": 2
  // },
  // {
  //   "orgName": "定西市烟草专卖局（公司）",
  //   "warehouse": 45,
  //   "warehouseArea": 74,
  //   "cigarette": 45,
  //   "cigaretteArea": 12,
  //   "tobacco": 60,
  //   "tobaccoArea": 70
  // },
  // {
  //   "orgName": "金昌市烟草专卖局（公司）",
  //   "warehouse": 16,
  //   "warehouseArea": 61,
  //   "cigarette": 98,
  //   "cigaretteArea": 99,
  //   "tobacco": 37,
  //   "tobaccoArea": 62
  // },
  // {
  //   "orgName": "平凉市烟草专卖局（公司）",
  //   "warehouse": 17,
  //   "warehouseArea": 38,
  //   "cigarette": 63,
  //   "cigaretteArea": 19,
  //   "tobacco": 53,
  //   "tobaccoArea": 87
  // },
  // {
  //   "orgName": "武威市烟草专卖局（公司）",
  //   "warehouse": 42,
  //   "warehouseArea": 19,
  //   "cigarette": 48,
  //   "cigaretteArea": 86,
  //   "tobacco": 87,
  //   "tobaccoArea": 73
  // },
  // {
  //   "orgName": "甘南州烟草专卖局（公司）",
  //   "warehouse": 57,
  //   "warehouseArea": 62,
  //   "cigarette": 70,
  //   "cigaretteArea": 78,
  //   "tobacco": 42,
  //   "tobaccoArea": 34
  // },
  // {
  //   "orgName": "临夏州烟草专卖局（公司）",
  //   "warehouse": 45,
  //   "warehouseArea": 19,
  //   "cigarette": 15,
  //   "cigaretteArea": 12,
  //   "tobacco": 97,
  //   "tobaccoArea": 30
  // },
  // {
  //   "orgName": "贵州烟叶复烤有限责任公司",
  //   "warehouse": 30,
  //   "warehouseArea": 99,
  //   "cigarette": 4,
  //   "cigaretteArea": 3,
  //   "tobacco": 56,
  //   "tobaccoArea": 56
  // }

]);

onMounted(() => {
  getStorageData();
  popForm.value = false;

});

// 获取仓储列表
const getStorageData = () => {
  ccData.value = []
  getApi({}, "/mosty-jcgl/part/storageListDisplay").then((res) => {
    ccData.value = res ? res : []
  })
}
// 获取仓储详情
const getDetails = () => {
  ccData.value = []
  getApi(listQuery.value, "/mosty-jcgl/part/storageDetails").then((res => {
    ccData.value = res.list ? res.list : []
  }))
}

//关闭弹窗事件
function closeDialog() {
  emit("changeVi", false)
  popForm.value = false;
}

//详情按钮
const handleClick = (index, row) => {
  tableKey.value = 2
  var val = row.cityCode;
  listQuery.value.code = val
  getDetails();
  popForm.value = true; //显示返回按钮
  document.getElementById('out-table').scrollLeft = 0
  let demo = document.getElementsByClassName("el-table__body-wrapper")[0];
  demo.style = `width:9850px`;
};


//单元格双击事件
function editData(e) {
  var val = e.name;
  popForm.value = true; //显示返回按钮
}
//点击返回
const backbtn = () => {
  popForm.value = false;
  getStorageData();
  tableKey.value = 1
};
const exportExcels = () => {
  excelLoading.value = true
  let title = {
    orgName: '企业名称',
    warehouse: "仓储数量",
    warehouseArea: "仓储建筑面积",
    cigarette: "卷烟仓库数量",
    cigaretteArea: "卷烟仓库建筑面积",
    tobacco: "烟叶仓库数量",
    tobaccoArea: "烟叶仓库建筑面积",
  };
  const param = listQuery.value
  let data = structuredClone(ccData.value);
  let obj = {
    orgName: '合计',
    warehouse: 0,
    warehouseArea: 0,
    cigarette: 0,
    cigaretteArea: 0,
    tobacco: 0,
    tobaccoArea: 0
  }
  if (data) {
    for (let i = 0; i < data.length; i++) {
      obj.warehouse += data[i].warehouse;
      obj.warehouseArea += data[i].warehouseArea;
      obj.cigarette += data[i].cigarette;
      obj.cigaretteArea += data[i].cigaretteArea;
      obj.tobacco += data[i].tobacco;
      obj.tobaccoArea += data[i].tobaccoArea;
    }
    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>
