<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>报表中心
    </h2>
    <div class="m-core">
      <div class="m-wrap">
        <el-date-picker v-model="mouth" type="month" placeholder="选择月" value-format="yyyy-MM-dd"></el-date-picker>

        <div class="newBand" @click="exportSalar" v-permission="'export/teacherSalary'">导出课酬</div>
        <el-tooltip placement="top" popper-class="mTooltip">
          <div slot="content">
            将只导出当前选择月份已结算的课程课酬。
          </div>
          <img :src="imageIcon" class="micon el-tooltip" style="width:8px height:8px" alt />
        </el-tooltip>
      </div>
    </div>
  </div>
</template>
<script>
import {exportTeacherSalary} from '@/api/generalSettings'
import axios from 'axios'
import {
  getToken
} from '@/utils/auth'
import load from '@/utils/loading'
import qs from 'qs'
export default {
  name: "reportForm",
  data() {
    return {
      mouth: "",
      imageIcon: require("@/assets/images/base/warning.png")
    };
  },
  methods:{
    exportSalar(){
      if(!this.mouth){
        this.$message.error('请选择导出月份')
        return
      }
       let url = '/api-web/export/teacherSalary'
      let data = {date:this.mouth}
      const options = {
        method: 'POST',
        headers: {
          'Authorization': getToken()
        },
        data: qs.stringify(data),
        url,
        responseType: 'blob'
      }
      this.$confirm('您确定导出课酬', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        load.startLoading()
        axios(options).then(res => {
          let blob = new Blob([res.data], {
            // type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
            type: 'application/vnd.ms-excel;charset=utf-8'
            //word文档为application/msword,pdf文档为application/pdf,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8
          })
          
          let text = (new Response(blob)).text()
          text.then(res => {
            // 判断是否报错
            if(res.indexOf('code') != -1) {
              let json = JSON.parse(res)
              this.$message.error(json.msg)
            } else {
              let objectUrl = URL.createObjectURL(blob)
              let link = document.createElement("a")
              let nowTime = new Date()
              let ymd = nowTime.getFullYear() + '' + (nowTime.getMonth() + 1) + '' + nowTime.getDate()
              let fname =  ymd + '课酬' //下载文件的名字
              link.href = objectUrl
              link.setAttribute("download", fname)
              document.body.appendChild(link)
              link.click()
            }
          })
          load.endLoading();
        }).catch(error => {
            this.$message.error('导出数据失败，请连接管理员');
            load.endLoading();
          })
      }).catch(() => { })
  }
  }
  
};
</script>
<style lang="scss" scoped>
.m-container {
  .m-wrap {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 100%;
    // align-items: center;
    .newBand {
      margin: 0 5px 0 10px;
    }
    .el-tooltip.micon {
      width: 20px;
      height: 20px;
      position: relative;
      top: 12px;
    }
  }
}
/deep/.el-input__icon.el-icon-date {
  height: 40px !important;
}
</style>