<template>
    <!-- 储备粮油年报 -->
    <div class="financialBox">
        <el-tabs v-model="activeCode" @tab-click="handleClick">
            <el-tab-pane label="区级储备粮油" name="3"></el-tab-pane>
            <el-tab-pane label="市级储备粮油" name="2"></el-tab-pane>
            <el-tab-pane label="地方储备粮油合计" name="1"></el-tab-pane>
            <div class="content-main">
                <el-row class="search-bm-boder">
                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="年份:">
                            <el-select class="inputWidth" placeholder="请选择" v-model="searchForm.baobiaoshijian" clearable>
                                <el-option v-for="i in nfOptions"
                                        :key="i.id"
                                        :label="i.nf"
                                        :value="i.nf">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <div class="search-button">
                                <span class="search-line"></span>
                                <el-button type="primary" @click="getList" size="small" class="iconfont iconchaxun">查询</el-button>
                                <el-button type="primary" @click="clearInfo" size="small" class="iconfont iconzhongzhi">重置</el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </el-row>
                <el-row class="addBtnBg">
                    <el-button type="primary" class="iconfont icondaochu11" size="small" @click="exportSubmit">导出</el-button>
                    <el-upload style="display: inline-block;" :show-file-list="false" :action="actionUrl" :headers="uploadHeader"
                               class="daoru" :on-success="handleSuccess" :on-change="changeFj" :data="uploadBody"
                               accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel">
                        <el-button type="primary" class="iconfont icondaoru1" size="small">导入</el-button>
                    </el-upload>
                </el-row>
                <el-row>
                    <el-table :data="tableData" style="width: 100%" stripe border fit highlight-current-row>
                            <el-table-column :label="activeName" align="center">
                                <el-table-column>
                                    <el-table-column label="品种指标" width="150" header-align="center">
                                        <template slot-scope="scope">
                                            <span style="white-space: pre-wrap" :class="scope.row.isFont?'isFontSize':''">{{scope.row.pzzb}}</span>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="期初库存" align="center" prop="qckc"></el-table-column>
                                </el-table-column>
                                <el-table-column :label="currentDate" align="center">
                                    <el-table-column label="收入合计" align="center">
                                        <el-table-column label="小计" align="center" prop="srhjxj"></el-table-column>
                                        <el-table-column label="从生产者购进" align="center">
                                            <el-table-column label="小计" align="center" prop="srhjcsczgjxj"></el-table-column>
                                            <el-table-column label="省外" align="center" prop="srhjcsczgjsw"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="从企业购进" align="center">
                                            <el-table-column label="小计" align="center" prop="srhjcqygjxj"></el-table-column>
                                            <el-table-column label="省外" align="center" prop="srhjcsczgjsw"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="商品粮油转入" align="center" prop="srhjsplyzr" width="100"></el-table-column>
                                        <el-table-column label="进口" align="center" prop="srhjjk"></el-table-column>
                                        <el-table-column label="其他收入" align="center" prop="srhjqtsr"></el-table-column>
                                    </el-table-column>
                                    <el-table-column label="支出合计" align="center">
                                        <el-table-column label="小计" align="center" prop="zchjxj"></el-table-column>
                                        <el-table-column label="销售" align="center">
                                            <el-table-column label="小计" align="center" prop="zchjxsxj"></el-table-column>
                                            <el-table-column label="省外" align="center" prop="zchjxssw"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="转作商品粮油" align="center" prop="zchjzzsply" width="100"></el-table-column>
                                        <el-table-column label="出口" align="center" prop="zchjck"></el-table-column>
                                        <el-table-column label="其他支出" align="center" prop="zchjqtzc"></el-table-column>
                                    </el-table-column>
                                    <el-table-column label="期末库存" align="center">
                                        <el-table-column label="小计" align="center" prop="qmkcxj"></el-table-column>
                                        <el-table-column label="按生产年度划分" align="center">
                                            <el-table-column label="小计" align="center" prop="qmkcascndhfxj"></el-table-column>
                                            <el-table-column label="2019年" align="center" prop="qmkcerlingyijiu"></el-table-column>
                                            <el-table-column label="2020年" align="center" prop="qmkcerlingerling"></el-table-column>
                                            <el-table-column label="2021年" align="center" prop="qmkcerlingeryi"></el-table-column>
                                            <el-table-column label="2022年" align="center" prop="qmkcerlingerer"></el-table-column>
                                            <el-table-column label="2023年" align="center" prop="qmkcerlingersan"></el-table-column>
                                            <el-table-column label="2024年" align="center" prop="qmkcerlingersi"></el-table-column>
                                        </el-table-column>
                                        <el-table-column label="小包装" align="center" prop="qmkcxbz"></el-table-column>
                                        <el-table-column label="省外储存" align="center" prop="qmkcswcc"></el-table-column>
                                    </el-table-column>
                                </el-table-column>
                                <el-table-column label="计量单位:吨" align="center" width="100">
                                    <el-table-column label="动态储备[S]" align="center" prop="dtcb" width="100"></el-table-column>
                                </el-table-column>
                            </el-table-column>
                    </el-table>
                </el-row>
            </div>
        </el-tabs>
    </div>
</template>

<script>
    import {getInfoList, exportByObject} from '@/api/emergencyReport/cbly/index';
    import {file, baseServer} from '@/api';

    export default {
        data() {
            return {
                // table 切换标记
                activeCode: '3',
                activeName: '区级储备粮油',
                // 第二个表头年月
                currentDate: '',
                // 搜索条件(默认第一栏)
                searchForm: {type: 3, yuebaoornianbao: 2, baobiaoshijian: ''},
                // 搜索下拉选数据
                nfOptions: [
                    {id: 2019, nf: '2019年'},{id: 2020, nf: '2020年'},{id: 2021, nf: '2021年'},{id: 2022, nf: '2022年'},{id: 2023, nf: '2023年'},{id: 2024, nf: '2024年'}
                ],
                // 列表数据
                tableData: [],
                // 导入URL
                actionUrl: baseServer + "/chubeilyBb/importByEntity",
                // 导入
                uploadHeader: {
                    token: sessionStorage.getItem('TOKENL')
                },
                uploadBody: {
                    baobiaoshijian: '',
                    cjdw: sessionStorage.getItem('orgCode'),
                    yuebaoornianbao: 2
                }
            }
        },
        created() {
            this.getList();
            // this.handleClick();
            // 默认查询当前年份年报
            this.searchForm.baobiaoshijian = this.getYearMonth();
        },
        methods: {
            // 切换列表
            handleClick(tab, event) {
                /*console.log("tab:", tab);
                console.log("event:", event);
                console.log("activeName:", this.activeName);*/
                // 地方1,市级2,区级3
                if (this.activeCode === 1) {
                    this.activeName = '地方储备粮油合计';
                } else if (this.activeCode === 2) {
                    this.activeName = '市级储备粮油';
                } else {
                    this.activeName = '区级储备粮油';
                }
                this.searchForm.type = this.activeCode;
                // 1月报,2年报
                this.searchForm.yuebaoornianbao = 2;
                this.getList();
            },
            // 查询
            getList() {
                // console.log("this.searchForm:", this.searchForm);
                getInfoList(this.searchForm).then(res => {
                    // console.log("this.searchForm.res:", res);
                    // 表头报表时间
                    if (res.length > 0) {
                        let btsj = res[0].baobiaoshijian;
                        if (btsj === null || btsj === '' || btsj === undefined) {
                            this.currentDate = this.getYearMonth();
                        } else {
                            this.currentDate = btsj;
                        }
                    } else {
                        this.currentDate = this.getYearMonth();
                    }
                    // console.log("this.currentDate:", this.currentDate);
                    // 创建临时缓存数组
                    const resultList = [];
                    // 获取列表需要的数据并排序
                    res.forEach((item, index) => {
                        if (item.pzzb === '粮食品种') {
                            // 添加空格样式
                            item.pzzb = '粮食品种';
                            item.isFont = true;
                            resultList.splice(0, 0, item);
                        }
                        if (item.pzzb === '折合原粮合计') {
                            // 添加空格样式
                            item.pzzb = '  折合原粮合计';
                            item.isFont = true;
                            resultList.splice(1, 0, item);
                        }
                        if (item.pzzb === '折合小麦') {
                            // 添加空格样式
                            item.pzzb = '    折合小麦';
                            resultList.splice(2, 0, item);
                        }
                        if (item.pzzb === '实际小麦') {
                            // 添加空格样式
                            item.pzzb = '    实际小麦';
                            resultList.splice(3, 0, item);
                        }

                        if (item.pzzb === '实际面粉') {
                            // 添加空格样式
                            item.pzzb = '    实际面粉';
                            resultList.splice(4, 0, item);
                        }
                        if (item.pzzb === '折合粳稻') {
                            // 添加空格样式
                            item.pzzb = '      折合粳稻';
                            resultList.splice(5, 0, item);
                        }
                        if (item.pzzb === '实际粳稻') {
                            // 添加空格样式
                            item.pzzb = '      实际粳稻';
                            resultList.splice(6, 0, item);
                        }
                        if (item.pzzb === '实际粳米') {
                            // 添加空格样式
                            item.pzzb = '      实际粳米';
                            resultList.splice(7, 0, item);
                        }
                        // 区级(type=3)不显示
                        // console.log("type:", this.searchForm.type);
                        if (this.searchForm.type != 3) {
                            if (item.pzzb === '油脂合计') {
                                // 添加空格样式
                                item.pzzb = '    油脂合计';
                                item.isFont = true;
                                resultList.splice(8, 0, item);
                            }
                            if (item.pzzb === '实际大豆油') {
                                // 添加空格样式
                                item.pzzb = '    实际大豆油';
                                resultList.splice(9, 0, item);
                            }
                        }
                    });
                    this.tableData = resultList;
                }).catch((err) => {
                    this.$message.error(err);
                });
            },
            // 导出
            exportSubmit() {
                const dc = this.searchForm;
                dc.type = '';
                exportByObject(dc).then(res => {
                    // console.log("exportSubmit:", dc);
                    let blob = new Blob([res], {type: 'application/vnd.ms-excel;charset=utf-8'});
                    if (!!window.ActiveXObject || "ActiveXObject" in window) {
                        window.navigator.msSaveOrOpenBlob(blob, '储备粮油年报.xls');
                    } else {
                        const link = document.createElement('a');
                        link.style.display = 'none';
                        link.href = URL.createObjectURL(blob);
                        link.setAttribute('download', '储备粮油年报.xls');
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }
                }).catch((err) => {
                    this.$message.error(err);
                });
            },
            //附件上传
            changeFj(file, fileList) {
                console.log('changeFj|file=', file);
                console.log('changeFj|fileList=', fileList);
            },
            //导入
            handleSuccess(response) {
                console.log('handleSuccess=', response);
                this.$message.success(response.msg);
                this.getList();
            },
            // 重置
            clearInfo() {
                this.searchForm.baobiaoshijian = this.getYearMonth();
                this.getList();
            },
            // 获取表头年月
            getYearMonth () {
                const date = new Date();
                const year = date.getFullYear();
                return year + '年';
            },
        }
    }
</script>

<style scoped>
    .financialBox{
        overflow-y: auto;
        margin: 10px;
        border: 1px solid #f4f5f8;
        padding: 10px;
        min-width: 960px;
    }
    .inputWidth {
        width: 80%;
    }
    .isFontSize {
        font-weight: bold;
    }
</style>