<template>
  <div class="m-container">
    <h2>
      <div class="squrt"></div>报表中心
    </h2>
    <div class="m-core">
      <div class="m-wrap">
        <div class="title">课酬导出：</div>
        <el-date-picker v-model="mouth"
                        type="month"
                        placeholder="选择月"
                        value-format="yyyy-MM-dd"></el-date-picker>
        <!-- <el-select v-model.trim="courseScheduleType"
                   style="marginLeft:10px"
                   filterable
                   clearable
                   multiple
                   placeholder="课程类型">
          <el-option v-for="(item, index) in courseArray"
                     :key="index"
                     :label="item.label"
                     :value="item.value"></el-option>
        </el-select> -->
        <el-button style="margin-left: 10px;" type="primary" @click="exportSalar"  v-permission="'export/teacherSalary'">导出</el-button>
        <el-tooltip placement="top"
                    popper-class="mTooltip">
          <div slot="content">
            将只导出当前选择月份已结算的课程课酬。
          </div>
          <i class="el-icon-question micon el-tooltip"
             style="font-size: 18px; color: #F56C6C"
             v-permission="'export/teacherSalary'"></i>
        </el-tooltip>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">乐团招生汇总：
          </div>
          <select-all v-model.trim="organIdList"
                     class="organSelect"
                     style="width:100%"
                     filterable
                     placeholder="请选择分部"
                     multiple
                     clearable>
            <el-option v-for="(item,index) in selects.branchs"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </select-all>
          <el-button style="margin-left: 10px;" type="primary"  @click="exportMusicGroup"
               v-permission="'export/musicGroupRegister'">导出</el-button>
          <el-tooltip placement="top"
                      popper-class="mTooltip">
            <div slot="content">
              请选择分部后，导出招生情况汇总表，分部可多选
            </div>
            <i class="el-icon-question micon el-tooltip"
               v-permission="'export/musicGroupRegister'"
               style="font-size: 18px; color: #F56C6C"></i>
          </el-tooltip>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">老师默认课酬：
          </div>
          <select-all v-model.trim="teacherDefaultSalaryOrganId"
                     class="organSelect"
                     style="width:100%"
                     filterable
                     placeholder="请选择分部"
                     multiple
                     clearable>
            <el-option v-for="(item,index) in selects.branchs"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </select-all>

          <el-button style="margin-left: 10px;" type="primary"  @click="exportDefaultSalary"
               v-permission="'export/teacherDefaultSalary'">导出</el-button>
          <el-tooltip placement="top"
                      popper-class="mTooltip">
            <div slot="content">
              请选择分部后，导出老师列表及老师课酬信息
            </div>
            <i class="el-icon-question micon el-tooltip"
               style="font-size: 18px; color: #F56C6C"
               v-permission="'export/teacherDefaultSalary'"></i>
          </el-tooltip>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">乐团在读人数：
          </div>
          <select-all v-model.trim="musicTeamNum"
                     class="organSelect"
                     style="width:100%"
                     filterable
                     multiple
                     placeholder="请选择分部"
                     clearable>
            <el-option v-for="(item,index) in selects.branchs"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </select-all>
          <el-button style="margin-left: 10px;" type="primary"  @click="exportMusicTeamNum"
               v-permission="'export/musicGroupNormalStudentNum'">导出</el-button>
          <el-tooltip placement="top"
                      popper-class="mTooltip">
            <div slot="content">
              请选择分部后，导出乐团在读人数信息
            </div>
            <i class="el-icon-question micon el-tooltip"
               style="font-size: 18px; color: #F56C6C"
               v-permission="'export/teacherDefaultSalary'"></i>
          </el-tooltip>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">回款统计：
          </div>
          <select-all v-model.trim="studentOrganId"
                     class="organSelect"
                     style="width:100%"
                     filterable
                     placeholder="请选择分部"
                     multiple
                     clearable>
            <el-option v-for="(item,index) in selects.branchs"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </select-all>
          <el-date-picker style="margin-left: 15px;"
                          v-model="studentMonth"
                          type="month"
                          placeholder="选择月"
                          value-format="yyyy-MM-dd"></el-date-picker>
          <el-button style="margin-left: 10px;" type="primary" @click="exportStudent"
               v-permission="'export/studentOrder'">导出</el-button>
          <el-tooltip placement="top"
                      popper-class="mTooltip">
            <div slot="content">
              请选择分部和月份，导出回款统计
            </div>
            <i class="el-icon-question micon el-tooltip"
               style="font-size: 18px; color: #F56C6C"
               v-permission="'export/studentOrder'"></i>
          </el-tooltip>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="m-core">
        <div class="m-wrap">
          <div class="title">学生考勤：
          </div>
          <select-all v-model.trim="attendanceOrganId"
                     class="organSelect"
                     style="width:100%"
                     filterable
                     multiple
                     placeholder="请选择分部"
                     clearable>
            <el-option v-for="(item,index) in selects.branchs"
                       :key="index"
                       :label="item.name"
                       :value="item.id"></el-option>
          </select-all>
          <el-select v-model.trim="attendanceCourseType"
                     class="organSelect"
                     style=" margin-left: 15px; width:100%"
                     filterable
                     placeholder="请选择课程类型">
            <el-option v-for="(item,index) in courseListType"
                       :key="index"
                       :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
          <el-date-picker v-model.trim="timer"
                          style="width:420px;margin-left: 15px;"
                          type="daterange"
                          value-format="yyyy-MM-dd"
                          range-separator="至"
                          start-placeholder="上课开始日期"
                          end-placeholder="上课结束日期"
                          :picker-options="{
                            firstDayOfWeek: 1
                          }"
          ></el-date-picker>
          <el-button style="margin-left: 10px;" type="primary" @click="exportAttendance"
               v-permission="'export/exportStudentAttendances'">导出</el-button>
          <!-- <el-tooltip placement="top"
                      popper-class="mTooltip">
            <div slot="content">
              请选择分部和月份，导出回款统计
            </div>
            <i class="el-icon-question micon el-tooltip"
               style="font-size: 18px; color: #F56C6C"
               v-permission="'export/studentOrder'"></i>
          </el-tooltip> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { exportTeacherSalary } from '@/api/generalSettings'
import { courseType, courseListType } from '@/utils/searchArray'
import { Export } from '@/utils/downLoadFile'
import cleanDeep from 'clean-deep'
import axios from 'axios'
import qs from 'qs'
import {
  getToken
} from '@/utils/auth'
import load from '@/utils/loading'
export default {
  name: "reportForm",
  data () {
    return {
      mouth: "",
      organIdList: [],
      teacherDefaultSalaryOrganId: '',
      courseArray: courseType,
      courseListType,
      courseScheduleType: [],
      musicTeamNum: [],
      studentOrganId: '',
      studentMonth: '',
      attendanceOrganId: [],
      attendanceCourseType: 'MUSIC',
      timer: []
    };
  },
  mounted () {
    this.$store.dispatch('setBranchs')
  },
  methods: {
    exportSalar () {
      if (!this.mouth) {
        this.$message.error('请选择导出月份')
        return
      }
      // let courseTypeList = this.courseScheduleType.join(',')
      let url = '/api-web/export/teacherSalary'
      let data = { date: this.mouth }
      const options = {
        method: 'POST',
        headers: {
          'Authorization': getToken()
        },
        data: qs.stringify(cleanDeep(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(() => { })
    },
    exportMusicGroup () {
      if (this.organIdList.length < 1) {
        this.$message.error('请至少选择一个分部')
        return
      }
      let url = '/api-web/export/musicGroupRegister'
      let data = { organIds: this.organIdList.join(',') }
      const options = {
        method: 'POST',
        headers: {
          'Authorization': getToken()
        },
        data: qs.stringify(cleanDeep(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(() => { })
    },
    exportDefaultSalary () {

      let organIdList = this.teacherDefaultSalaryOrganId.join(',')
      let url = '/api-web/export/teacherDefaultSalary'
      let data = { organIdList }
      const options = {
        method: 'POST',
        headers: {
          'Authorization': getToken()
        },
        data: qs.stringify(cleanDeep(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(() => { })
    },
    exportMusicTeamNum () {
      let organIds = this.musicTeamNum.join(',')
      let url = '/api-web/export/musicGroupNormalStudentNum'
      let data = { organIds }
      const options = {
        method: 'POST',
        headers: {
          'Authorization': getToken()
        },
        data: qs.stringify(cleanDeep(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(() => { })
    },
    exportStudent () {
      if (!this.studentMonth) {
        this.$message.error('请选择导出月份')
        return
      }
      let studentOrganId = this.studentOrganId.join(',')
      let url = '/api-web/export/studentOrder'
      let data = { organIds: studentOrganId, date: this.studentMonth }
      const options = {
        method: 'POST',
        headers: {
          'Authorization': getToken()
        },
        data: qs.stringify(cleanDeep(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(() => { })
    },
    exportAttendance () {
      let classStartDate, classEndDate;
      if (this.timer && this.timer.length > 0) {
        classStartDate = this.timer[0]
        classEndDate = this.timer[1]
      } else {
        classStartDate = null
        classEndDate = null
      }
      Export(this, {
        url: '/api-web/export/exportStudentAttendances',
        fileName: '学生考勤.xlsx',
        method: 'post',
        params: qs.stringify({ organId: this.attendanceOrganId.join(','), groupType: this.attendanceCourseType, classStartDate, classEndDate })
      }, '您确定导出学生考勤?')
    },
  }

};
</script>
<style lang="scss" scoped>
.m-container {
  .m-core {
    margin-top: 20px;
    .m-wrap {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      width: 100%;
      // align-items: center;
      .newBand {
        margin: 0 5px 0 10px;
      }
      .title {
        width: 120px;
        height: 40px;
        line-height: 40px;
        text-align: right;
        color: #606266;
      }
      .organSelect {
        width: 220px !important;
      }
      .el-tooltip.micon {
        width: 20px;
        height: 20px;
        position: relative;
        top: 12px;
      }
    }
  }
}
/deep/.el-input__icon.el-icon-date {
  height: 40px !important;
}
</style>
