<template>
  <div>
    <div class="divborder newSearchDiv">
            <div class="filter">
                <label>{{$t(950021)}}：</label>
                <Input class="searchInput" type="text" v-model="name" />
            </div>
            <div class="filter">
                <label class="mr">{{$t(1035)}}</label>
                <DatePicker
                    type="daterange"
                    v-model="date"
                    class="searchInput MaxWidth"
                    format="yyyy-MM-dd HH:mm:ss"
                    @on-change="getDate"
                ></DatePicker>
            </div>
            <div class="searchBtn">
                <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="search(1,10)">{{$t('1001')}}</Button>
                <Button type="primary" class="fourWord" icon="md-download" @click="download()">{{$t(1005)}}</Button>
            </div>
        </div>
        <div class="divborder newTableDiv">
        <Table
            class="tableClass"
            @on-current-change="handleRowChange"
            highlight-row
            :data="tableData1"
            :columns="tableColumns1"
        ></Table>
        <div class="pageDiv">
            <div class="pageDirection">
                <Page
                    :total="total"
                    :current="page"
                    @on-change="changePage"
                    show-elevator
                    show-sizer
                    show-total
                    @on-page-size-change="handlePageSize"
                    :page-size-opts="[10,20,30,40,100]"
                ></Page>
            </div>
        </div>
        </div>
    </div>
</template>

<script>
import moment from 'moment';

export default {
    data () {
        return {
            name: '',
            date: [],
            total: 0,
            page: 1,
            pagesize: 10,
            tableData1: [],
            tableColumns1: [
                {
                    type: 'index2',
                    title: this.$t(1008),
                    key: 'xuhao',
                    width: 70,
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        );
                    }
                },
                {
                    title: this.$t(950021),
                    key: 'name'
                },
                {
                    title: this.$t(950045),
                    key: 'first_date'
                },
                {
                    title: this.$t(950023),
                    key: 'user_info'
                },

                {
                    title: this.$t(950022),
                    key: 'cycle_str'
                },
                {
                    title: this.$t(1030),
                    key: 'remark'
                }
            ],
            detailobj: {}
        };
    },
    created () {
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
        this.date = [
            moment(new Date().getTime() - 3600 * 1000 * 24 * 7).format(
                'YYYY-MM-DD '
            ) + '00:00:00',
            moment(new Date().getTime()).format('YYYY-MM-DD ') + '23:59:59'
        ];
        this.search(1, 10);
    },
    methods: {
        search (page, pagesize) {
            let startTime = this.date[0];
            let endTime = this.date[1];

            var data = {
                name: this.name,
                starttime: startTime,
                endtime: endTime,
                page: page,
                pagesize: pagesize
            };
            this.request(
                '/config/MonthReportRecord/GetMonthReportRecord',
                data,
                'get'
            ).then(res => {
                // console.log(res.data);
                if (res.data.ret == 1) {
                    this.total = res.data.total;
                    this.renderTable(res.data.data);
                }
            });
        },
        renderTable (arr = []) {
            let a = [];
            arr.forEach(item => {
                let cycle = '';
                switch (item.cycle) {
                case 1:
                    cycle = this.$t(950025);
                    break;
                case 2:
                    cycle = this.$t(950026);
                    break;
                case 3:
                    cycle = this.$t(950027);
                    break;
                }
                a.push({
                    id: item.id,
                    cycle: item.cycle,
                    cycle_str: cycle,
                    user_name: item.user_name,
                    send_time: item.send_time,
                    name: item.name,
                    remark: item.remark
                });
            });
            this.tableData1 = a;
        },
        getDate (val) {
            this.date = val;
            // console.log(val);
        },
        download () {
            if (
                this.detailobj.id == 0 ||
                this.detailobj.id == undefined ||
                this.detailobj.id == ''
            ) {
                this.$Message.error(this.$t(1017));
                return false;
            }
            this.request(
                '/config/MonthReportRecord/GetPdfFileName?id=' +
                    this.detailobj.id,
                '',
                'get'
            ).then(res => {
                if (res.data.ret == 1) {
                    var url =
                        '/config/MonthReportRecord/DownloadReport?id=' + this.detailobj.id;
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', url, true);
                    xhr.responseType = 'blob';
                    xhr.onload = function () {
                        if (this.status === 200) {
                            var blob = this.response; // 获取返回值
                            var a = document.createElement('a');
                            a.download = res.data;
                            a.href = window.URL.createObjectURL(blob);
                            a.click();
                        } else {
                            this.$Message.error(this.$t(1097) + '!');
                            return false;
                        }
                    };
                    xhr.send();
                } else {
                    this.$Message.error(this.$t(res.msg));
                }
            });
        },
        handlePageSize (value) {
            this.pagesize = value;
            this.tableData1 = this.search(this.page, this.pagesize);
        },
        changePage (value) {
            this.page = value;
            this.tableData1 = this.search(this.page, this.pagesize);
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow;
        },
        request (url, data, type) {
            if (type == 'get') {
                return this.axios
                    .request({
                        url: url,
                        params: data,
                        method: type
                    })
                    .then(res => {
                        return res;
                    })
                    .catch(error => error);
            } else {
                return this.axios
                    .request({
                        url: url,
                        data,
                        method: type
                    })
                    .then(res => {
                        return res;
                    })
                    .catch(error => error);
            }
        }
    }
};
</script>

 <style lang="less" scoped>
</style>
