<template>
  <div>
    <el-button @click="onClick">公司收支明细导出</el-button>
    <el-dialog title="正常账户可用余额导出" :visible.sync="dialogVisible" width="30%">
      <el-form>
        <el-form-item label="日期">
          <el-date-picker v-model="date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                          style="width: calc(100% - 80px);"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">导 出</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import { transactionDetailsExport }  from '@/api/service/finance'

export default {
  data() {
    return {
      dialogVisible: false,
      date: null
    };
  },
  created() {
    let today = new Date();
    today.setDate(today.getDate() - 1);
    let year = today.getFullYear();
    let month = ("0" + (today.getMonth() + 1)).slice(-2);
    let day = ("0" + today.getDate()).slice(-2);
    this.date = year + '-' + month + '-' + day;
  },
  methods: {
    onClick() {
      this.dialogVisible = true;
    },
    onSubmit() {
      if (!this.date) {this.$message.error('请选择日期！');return false;}
      transactionDetailsExport(this.date).then(_ref => {
        let {data, headers} = _ref;
        // 附件下载
        const blob = new Blob([data]);
        // 附件下载
        const fileName = decodeURIComponent(headers['content-disposition'].split(';')[1].split('filename=')[1]);
        saveAs(blob, fileName);
      }).catch(err => {
        this.$message.error(`模板下载失败：${err}`);
      });
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep {
  .el-dialog__footer {
    text-align: center !important;

    .el-button {
      margin-left: 20px;
    }
  }
}
</style>
