<template>
  <div class="m-container">
    <h2>
      <el-page-header @back="onCancel"
                      content="发放清单"></el-page-header>
    </h2>
    <!-- <div class="headWrap">
      <div class="left">
        <div class="headItem">
          <p>乐团名称:<span>12345</span></p>
        </div>
        <div class="headItem">
          <p>生成时间:<span>12345</span></p>
        </div>
        <div class="headItem">
          <p>确认人:<span>12345</span></p>
        </div>
      </div>
      <div class="right">
      </div>
    </div> -->
    <div class="m-core">
      <div class="tableWrap">
        <el-table :header-cell-style="{background:'#EDEEF0',color:'#444'}"
                  :data='tableList'>
          <el-table-column label="商品编号"
                           prop='sn'
                           align="center"
                           width="160px">
          </el-table-column>
          <el-table-column label="商品名称"
                           align="center"
                           prop='name'
                           width="160px">
          </el-table-column>
          <el-table-column label="商品类型"
                           align="center"
                           prop='type'
                           width="160px">
            <template slot-scope="scope">
              <div>
                {{ scope.row.type | shopType }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="具体型号"
                           align="center"
                           prop='specification'
                           width="160px">
          </el-table-column>
          <el-table-column label="数量统计"
                           align="center"
                           prop='sellCount'>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="btnWrap"
         style="margin-top:20px;">
      <el-button type="primary"
                 v-if="tableList.length > 0"
                 v-permission="'order/musicalListExport'"
                 @click="musicalListExport">订货清单导出</el-button>
      <el-button type="primary"
                 v-if="tableList.length > 0"
                 v-permission="'order/musicalListDetailExport'"
                 @click="musicalListDetailExport">分发清单导出</el-button>
      <el-button type="warning okBtn"
                 v-permission="'order/verifyMusicalList'"
                 @click="okDetailList">确认</el-button>
      <!-- <div class="okBtn" v-permission="'order/verifyMusicalList'"
           @click="okDetailList">确认</div> -->
    </div>
  </div>
</template>
<script>
import { getTeamDetailList } from '@/api/buildTeam'
import { verifyMusicalList } from '@/api/orderManager'
import axios from 'axios'
import qs from 'qs'
import { getToken } from '@/utils/auth'
import load from '@/utils/loading'
export default {
  data () {
    return {
      teamid: '',
      tableList: [],
      Fsearch: null,
      Frules: null
    }
  },
  mounted () {
    this.init()
  },
  activated () {
    this.init()
  },
  methods: {
    init () {
      if (this.$route.query.search) {
        this.Fsearch = this.$route.query.search;
      }
      if (this.$route.query.rules) {
        this.Frules = this.$route.query.rules
      }
      this.teamid = this.$route.query.id;
      getTeamDetailList({ musicGroupId: this.teamid }).then(res => {
        if (res.code == 200) {
          this.tableList = res.data ? res.data : [];
        }
      })
    },
    onCancel () {
      this.$router.push({ path: '/business/teamDetail', query: { search: this.Fsearch, rules: this.Frules } })
    },
    okDetailList () {
      this.$confirm(`是否确认发放清单?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        verifyMusicalList({ musicGroupId: this.teamid }).then(res => {
          if (res.code == 200) {
            this.$router.push({ path: '/business/teamDetail', query: { search: this.Fsearch, rules: this.Frules } })
          }
        })
      }).catch(() => { })

    },
    musicalListExport () { // 报表导出
      let url = '/api-web/order/musicalListExport'
      let data = {
        musicGroupId: this.$route.query.id,
      }
      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() + '' + nowTime.getHours() + '' + nowTime.getMinutes()
              let fname = this.$route.query.id + '-' + ymd + '订货清单' //下载文件的名字
              link.href = objectUrl
              link.setAttribute("download", fname)
              document.body.appendChild(link)
              link.click()
            }
          })
          load.endLoading();
        }).catch(error => {
          this.$message.error('导出数据失败，请联系管理员');
          load.endLoading();
        })
      }).catch(() => { })
    },
    musicalListDetailExport () { // 报表导出
      let url = '/api-web/order/musicalListDetailExport'
      let data = {
        musicGroupId: this.$route.query.id
      }
      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() + '' + nowTime.getHours() + '' + nowTime.getMinutes()
              let fname = this.$route.query.id + '-' + 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">
</style>