@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
}
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://lib.baomitu.com/qs/6.10.3/qs.min.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <div>年：<el-input-number v-model="year" :min="1970" :max="2030" label="选择年" size="small" controls-position="right" style="margin-left:5px;"></el-input-number></div>
            <div>月：<el-input-number v-model="month" :min="1" :max="12" label="选择月" size="small" controls-position="right" style="margin-left:5px;"></el-input-number></div>
            <div>
                周：<el-input-number v-model="week" :min="1" :max="5" label="选择周" size="small" controls-position="right" style="margin-left:5px;"></el-input-number>
            </div>
        </div>
        <div style="margin-top:15px;">
            <el-dropdown @@command="downloadfile">
                <el-button type="primary" icon="el-icon-download" size="small" :loading="loading">
                    下载文件<i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="1">总表</el-dropdown-item>
                    <el-dropdown-item command="2">城市更新</el-dropdown-item>
                    <el-dropdown-item command="3">房地产业</el-dropdown-item>
                    <el-dropdown-item command="4">通报表格-城市更新0318</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                loading: false,
                year: '',
                month: '',
                week: ''
            }
        },
        created: function () {
            var now = new Date();
            this.year = now.getFullYear();
            this.month = now.getMonth() + 1;
            this.week = this.getMonthWeek(now);
        },
        methods: {
            loading_false() { this.loading = false },
            downloadfile(a) {
                let excel_name;
                switch (a) {
                    case "1":
                        excel_name = "总表.xlsx";
                        break;
                    case "2":
                        excel_name = "住建系统抓投资情况通报（城市更新）.xlsx";
                        break;
                    case "3":
                        excel_name = "住建系统抓投资情况通报（房地产业+GDP支撑性指标）.xlsx";
                        break;
                    case "4":
                        excel_name = "通报表格（城市更新）2022-3-18.xls";
                        break;
                }
                this.loading = true;
                this.download('/api/num-zj/download', a, excel_name, this.loading_false);
            },
            download(url, type, filename, callback) {
                let _this = this;
                axios({
                    headers: { 'Content-Type': 'application/json;charset=UTF-8' },
                    method: 'post',
                    url: url,
                    data: { type: type, year: _this.year, month: _this.month, week: _this.week },
                    responseType: "blob",
                }).then(function (response) {
                    console.log(response);
                    //解析文件充blod中解析
                    const url = window.URL.createObjectURL(
                        new Blob([response.data], { type: "application/vnd.ms-excel" })
                    );
                    const link = document.createElement("a");
                    link.style.display = "none";
                    link.href = url;
                    link.setAttribute("download", filename);
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                    callback();
                }).catch(function (error) {
                    callback();
                    console.log(error)
                    _this.$message({
                        type: 'error',
                        message: error.message
                    })
                })
            },
            getMonthWeek(now) {
                var a = now.getYear();
                var b = now.getMonth() + 1;
                var c = now.getDate();
                /*
                a = d = 当前日期
                b = 6 - w = 当前周的还有几天过完(不算今天)
                a + b 的和在除以7 就是当天是当前月份的第几周
                */
                var date = new Date(a, parseInt(b) - 1, c), w = date.getDay(), d = date.getDate();
                return Math.ceil(
                    (d + 6 - w) / 7
                );
            }
        }
    })
</script>

</html>