<template>
  <div class="app-container">
    <el-form :model="statisticalAnalysisForm" ref="statisticalAnalysisForm" :rules="rules" :inline="true">
      <el-form-item label="年度" prop="date" >
        <el-date-picker clearable size="small"
                        v-model="statisticalAnalysisForm.date"
                        type="year"
                        value-format="yyyy"
                        placeholder="请选择年度">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="所属区域" prop="township">
        <el-select style="width: 100%" v-model="statisticalAnalysisForm.township" clearable size="small">
          <el-option label="全部" value="0"/>
          <el-option
            v-for="dict in townshipOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-search" size="mini"
                   @click="handleExport">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table  style="width: 100%"  border :data="summaryAnalysisDataList">
      <el-table-column align="center" :label="dynamicTitle">

        <el-table-column fixed prop="date" label="日期">
        </el-table-column>
        <el-table-column prop="supgasvolNum" label="天然气供气量">
        </el-table-column>
        <el-table-column prop="supgasuseNum" label="天然气用气量">
        </el-table-column>
        <el-table-column prop="supgasuseBalance" label="天然气供需差额">
        </el-table-column>
        <el-table-column prop="liqgasvolNum" label="液化气供气量">
        </el-table-column>
        <el-table-column prop="liqgasuseNum" label="液化气用气量">
        </el-table-column>
        <el-table-column prop="liqgasuseBalance" label="液化气供需差额">
        </el-table-column>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import {  sentimentSummaryAnalysisMethodTableViews,sentimentSummaryAnalysisExport } from "@/api/supplybalance/gas";

import axios from "axios";

export default  {
  name: "SupGasSummaryAnalysis",
  data() {
    return{
      statisticalAnalysisForm:{
        date: '',
        township:''
      },
      // 所属乡镇字典
      townshipOptions: [],
      summaryAnalysisDataList:[],
      dynamicTitle:"",

      // 导出遮罩层
      exportLoading: false,
      rules: {
        date: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
  },
  computed: {
    currentYear() {
      return new Date().getFullYear().toString();
    }
  },
  created(){
    this.getDicts("t_township").then(response => {
      this.townshipOptions = response.data;
    });
    this.statisticalAnalysisForm.date = this.currentYear;
    this.statisticalAnalysisForm.township = '0';
    this.dynamicTitle = this.statisticalAnalysisForm.date + "年度, 所属区域为全部统计分析数据"
    sentimentSummaryAnalysisMethodTableViews(this.statisticalAnalysisForm).then(response => {
      this.summaryAnalysisDataList = response.data;
    })
  },
  methods:{
    handleQuery(){
      this.$refs.statisticalAnalysisForm.validate(valid => {
        if (valid) {
          let townshipValue = this.statisticalAnalysisForm.township;
          if (townshipValue == '0') {
              townshipValue = "全部"
          } else{
              townshipValue = this.selectDictLabel(this.townshipOptions, townshipValue)
          }
          this.dynamicTitle = this.statisticalAnalysisForm.date + "年度, 所属区域为" + townshipValue + "统计分析数据";
          sentimentSummaryAnalysisMethodTableViews(this.statisticalAnalysisForm).then(response => {
            this.summaryAnalysisDataList = response.data;
          })
        } else {
          return false;
        }
      });
    },
    handleExport(){
      const queryParams = this.statisticalAnalysisForm;
      queryParams.dynamicTitle = this.dynamicTitle;
      this.$confirm('是否确认导出?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        sentimentSummaryAnalysisExport(queryParams).then((response) => {

          // console.log("res data = "+response.data);
          // const str = response.headers["content-disposition"];
          // console.log("response.headers = "+str);

          let blob = new Blob([response], {type: 'application/vnd.ms-excel;charset=utf-8'}) // 文件类型
          // console.log(response.headers['Content-disposition']); // 从response的headers中获取filename, 后端response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx") 设置的文件名;
          //以=分割取数组[1]元素为文件名
          // let filename = window.decodeURI(response.headers['Content-disposition'].split('=')[1])
          let url = window.URL.createObjectURL(blob);  // 创建下载链接
          let aLink = document.createElement("a");    // 赋值给a标签的href属性
          aLink.style.display = "none";
          aLink.href = url;
          aLink.setAttribute("download", "供需平衡汇总分析.xlsx");
          document.body.appendChild(aLink);   // 将a标签挂载上去
          aLink.click();          // a标签click事件
          document.body.removeChild(aLink);  // 移除a标签
          window.URL.revokeObjectURL(url);   // 销毁下载链接

        }).catch(error => {
          console.error('导出失败', error);
        });
      }).catch(() => {});
    },
    exportExcel(){
    }
  }
}
</script>
