<template>
    <div id="multiple_ent_init" v-loading="load" element-loading-text="文件上传中，请稍等">
        <el-form :inline="true">
            <el-form-item>
                <el-input
                    v-model="search.fileName"
                    clearable
                    prefix-icon="el-icon-search"
                    placeholder="请输入文件名称"
                    class="file_input"
                >
                </el-input>
            </el-form-item>
            <el-form-item>
                <el-date-picker
                    v-model="search.fileUploadDateTime"
                    type="daterange"
                    range-separator="-"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-select v-model="search.fileStatus" placeholder="请选择文件处理状态">
                    <el-option
                        v-for="item in fileStatusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button @click="handleSearch" type="primary">搜 索</el-button>
            </el-form-item>
        </el-form>
        <div>
            <input
                ref="uploadExcel-input"
                style="display: none"
                type="file"
                accept=".xlsx, .xls"
                @change="handleExcelFileChange"
            />
            <el-button :loading="importLoading" type="primary" @click="handleImportExcelFile"
                >{{ $t('excel.importExcel') }}
            </el-button>
            <el-button type="primary" @click="handleTemplateDownload">模版下载 </el-button>
        </div>
        <br />
        <el-container>
            <el-table :data="search.resultList" border style="width: 100%">
                <el-table-column prop="fileName" label="文件名"></el-table-column>
                <el-table-column
                    prop="status"
                    label="文件处理状态"
                    width="100"
                    :formatter="fmtFileStatus"
                ></el-table-column>
                <el-table-column prop="successCnt" label="提交成功数" width="90"></el-table-column>
                <el-table-column prop="failCnt" label="提交失败数" width="90"></el-table-column>
                <el-table-column prop="totalCnt" label="提交总数" width="90"></el-table-column>
                <el-table-column prop="operatorName" label="操作人员名称" width="100"></el-table-column>
                <el-table-column prop="operatorMobile" label="操作人员手机号" width="120"></el-table-column>
                <el-table-column prop="createTime" label="上传文件时间" width="180"></el-table-column>
                <el-table-column fixed="right" label="操作" align="center" width="220">
                    <template slot-scope="scope">
                        <el-button @click="handleFileDetails(scope.row)" type="primary">企业上架</el-button>
                        <el-button @click="handleDownloadFile(scope.row)" type="primary">下载</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-container>
        <br />
        <el-row type="flex" :gutter="20">
            <el-col :span="12"> </el-col>
            <el-col :span="12">
                <div style="text-align:right">
                    <el-pagination
                        @size-change="handleSearchResultSizeChange"
                        @current-change="handleSearchResultCurrentChange"
                        :current-page="search.resultPagination.currentPage"
                        :page-sizes="search.resultPagination.pageSizes"
                        :page-size="search.resultPagination.pageSize"
                        layout="total, sizes, prev, pager, next"
                        :total="search.resultPagination.total"
                    >
                    </el-pagination>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>

import {
    GetBatchEntInitTemplateUrl,
    MultipleEntInitUploadFile,
    UploadFileSearch
} from '@/api/ent_init'

// 文件状态选项
const fileStatusOptions = [
    {
        value: '1',
        label: '文件处理中'
    }, {
        value: '2',
        label: '文件处理失败'
    }, {
        value: '3',
        label: '文件处理成功'
    }
]

export default {
    name: 'MultipleEntInit',
    data() {
        return {
            importLoading: false,
            load: false,
            fileStatusOptions: fileStatusOptions,
            search: {
                fileName: '',
                fileUploadDateTime: '',
                fileStatus: '',
                resultList: [],
                resultMultipleSelection: [],
                resultPagination: {
                    currentPage: 1,
                    pageSizes: [10, 30, 50, 100],
                    pageSize: 10,
                    total: 0
                }
            },
        }
    },
    created() {
        this.callUploadFileSearch(this.search.resultPagination.currentPage, this.search.resultPagination.pageSize);
    },
    methods: {
        pageIndex(index) {
            let currentPage = this.search.resultPagination.currentPage;   //当前页码，具体看组件取值
            let pageSize = this.search.resultPagination.pageSize;    //每页条数，具体是组件取值
            return (index + 1) + (currentPage - 1) * pageSize;
        },
        fmtFileStatus(row, column, cellValue) {
            if (cellValue == 1) {
                return '文件处理中'
            }
            if (cellValue == 2) {
                return '文件处理失败'
            }
            if (cellValue == 3) {
                return '文件处理成功'
            } else {
                return cellValue;
            }
        },
        handleSearch() {
            this.callUploadFileSearch(1, this.search.resultPagination.pageSize);
        },
        handleSearchResultSizeChange(val) {
            this.callUploadFileSearch(1, val);
        },
        handleSearchResultCurrentChange(val) {
            this.callUploadFileSearch(val, this.search.resultPagination.pageSize);
        },
        handleImportExcelFile() {
            this.$refs['uploadExcel-input'].value = null;
            this.$refs['uploadExcel-input'].click()
        },
        handleExcelFileChange(event) {
            const file = event.target.files[0];
            // 选择Excel文件后立即上传；
            this.callMultipleEntInitUploadFile(file);
        },
        /**
        * 企业批量上架上传文件
        * @param {File} file 上传文件
        */
        callMultipleEntInitUploadFile(file) {
            this.load = true
            this.importLoading = true
            MultipleEntInitUploadFile(file).then(val => {
                this.importLoading = false;
                this.load = false;
                this.$message.success(val.msg);
                this.callUploadFileSearch(1, this.search.resultPagination.pageSize);
            }).catch(err => {
                this.importLoading = false;
                this.load = false;
                this.$message.error(err)
            })
        },
        // 查看文件详细
        handleFileDetails(row) {
            this.$router.push({
                name: 'multiple_ent_init_file_details',
                params: { key: row.batchId.toString() }
            });
        },
        // 下载文件
        handleDownloadFile(row) {
            window.open(row.fileUrl)
        },
        // Excel模版下载
        handleTemplateDownload() {
            window.location.href = GetBatchEntInitTemplateUrl();
        },
        /**
         * 批量上架文件查询
         * @param {Number} pageNum : 当前页码
         * @param {Number} pageSize : 每页数量
         */
        callUploadFileSearch(pageNum, pageSize) {
            let beginTime = '';
            let endTime = '';
            if (this.search.fileUploadDateTime instanceof Array) {
                beginTime = this.search.fileUploadDateTime[0];
                endTime = this.search.fileUploadDateTime[1];
                beginTime = this.dateFormat(new Date(beginTime), 'yyyy-MM-dd HH:mm:ss');
                endTime = this.dateFormat(new Date(endTime), 'yyyy-MM-dd HH:mm:ss');
            }
            UploadFileSearch({
                fileName: this.search.fileName,
                uploadDateBegin: beginTime,
                uploadDateEnd: endTime,
                status: this.search.fileStatus,
                pageNum: pageNum,
                pageSize: pageSize
            }).then(val => {
                this.search.resultPagination.total = val.data.total;
                this.search.resultPagination.pageSize = val.data.size;
                this.search.resultPagination.currentPage = val.data.current;
                this.search.resultList = val.data.records;
            }).catch(err => {
                this.$message.error(err);
            })
        },
        dateFormat(date, fmt) {
            // 小时只支持24小时制
            var o = {
                "M+": date.getMonth() + 1, // 月份
                "d+": date.getDate(), // 日
                "H+": date.getHours(), // 24小时,
                "m+": date.getMinutes(), // 分
                "s+": date.getSeconds(), // 秒
                "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
                "S": date.getMilliseconds() // 毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        },
    }
}
</script>

<style scoped>
</style>