<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>
            
            <!-- 1-投诉举报，2-服务申请，3-咨询建议 -->
            <el-form-item label="投诉类别" prop="complainType"> 
            <el-select style="width: 100%" v-model="statisticalAnalysisForm.complainType">
                <el-option label="全部" value="0"/>
                <el-option label="投诉举报" value="1"/>
                <el-option label="服务申请" value="2"/>
                <el-option label="咨询建议" value="3"/>
            </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="amount" label="发生量">
            </el-table-column>
            <el-table-column prop="completionRate" label="办结率">
            </el-table-column>
            <el-table-column prop="timelyCompletionRate" label="办结及时率">
            </el-table-column> 
        </el-table-column>
      </el-table>

    </div>
</template>

<script> 
import {  complainDealSummaryAnalysisMethodTableViews,complainDealSummaryAnalysisExport } from "@/api/complainDeal/complainDeal";

import axios from "axios";

export default  {
  name: "complainSummaryAnalysis", 
  data() {
    return{
      statisticalAnalysisForm:{
        complainType:'',
        date: '',
      },
      summaryAnalysisDataList:[],
      dynamicTitle:"",
      
      // 导出遮罩层
      exportLoading: false,
      rules: {
          date: [
            { required: true, message: '请选择时间', trigger: 'change' }
          ]
        }
    }
  },
  mounted() {
  },
   computed: {
    currentYear() {
      return new Date().getFullYear().toString();
    }
  },
  created(){
    this.statisticalAnalysisForm.date = this.currentYear;
    this.statisticalAnalysisForm.complainType = '0';
    this.dynamicTitle = this.statisticalAnalysisForm.date + "年度, 投诉类别为全部统计分析数据"
      complainDealSummaryAnalysisMethodTableViews(this.statisticalAnalysisForm).then(response => {
        this.summaryAnalysisDataList = response.data;
      }) 
  },
  methods:{
    handleQuery(){
         this.$refs.statisticalAnalysisForm.validate(valid => {
          if (valid) {
            let complainTypeValue = this.statisticalAnalysisForm.complainType;
            if (complainTypeValue == '0') {
                complainTypeValue = "全部"
            } else if(complainTypeValue == "1") {
                complainTypeValue = "投诉举报"
            } else if(complainTypeValue == "2") {
                complainTypeValue = "服务申请"
            } else if(complainTypeValue == "3") {
                complainTypeValue = "咨询建议"
            }
            this.dynamicTitle = this.statisticalAnalysisForm.date + "年度, 投诉类别为" + complainTypeValue + "统计分析数据";
            complainDealSummaryAnalysisMethodTableViews(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(() => {  
        complainDealSummaryAnalysisExport(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>