<template>
    <!-- 联储观察 -->
    <div class="federal-reserve-wrap">
        <div class="tool-box">
            <el-date-picker
                v-model="selectDate"
                value-format="yyyy-MM-dd"
                type="date"
                placeholder="选择日期" @change="getSheetDetail">
            </el-date-picker>
            <el-button type="text" @click="downloadSheet" :loading="isDownload">下载</el-button>
        </div>
        <div class="table-box">
            <div class="sheet-wrap">
                <div id="sheet-container" v-if="this.sheetDetailInfo.MeetingInfoId">
                </div>
                <tableNoData text="该日期暂无数据" v-else/>
                
            </div>
            
        </div>
    </div>
</template>

<script>
import {ToolBoxInterface} from "@/api/modules/toolBoxApi.js";
export default {
    data() {
        return {
            sheetDetailInfo:{},
            selectDate:'',
            exportBase: process.env.VUE_APP_API_ROOT + "/meeting_probabilities/detail", //数据导出接口
        };
    },
    methods: {
        getSheetDetail(){
            let type
            if(!this.selectDate){
                type='init'
            }
            ToolBoxInterface.getSheetDetail({
                DateTime: this.selectDate||'',
            }).then(res=>{
                if(res.Ret!==200) return
                this.sheetDetailInfo = res.Data||{};
                type==='init'&&(this.selectDate = this.sheetDetailInfo.DateTime||'')
                this.$nextTick(()=>{
                    this.sheetDetailInfo.MeetingInfoId&&this.initSheet()
                })
            })
        },
        downloadSheet(){
            if(!this.sheetDetailInfo.MeetingInfoId){
                this.$message.warning("暂无下载文件")
                return 
            }
            const exportApi = this.exportBase
                +`?${localStorage.getItem("auth") || ""}`
                +`&DateTime=${this.selectDate}`
                +`&IsExport=1`

            this.isDownload = true;
            const link = document.createElement("a");
            link.href = this.escapeStr(exportApi);
            link.download = "";
            link.click();
            setTimeout(() => {
                this.isDownload = false;
            }, 5000);
        },
        // 对[#,;]转义
        escapeStr(str) {
            return str.replace(/#/g, escape("#")).replace(/;/g, escape(";"));
        },
        initSheet(){
            const baseOption = this.sheetDetailInfo.Content ? JSON.parse(this.sheetDetailInfo.Content) : {}
            //luckysheet配置,能隐藏的都隐藏了,并且禁止编辑
            const options = {
                container:'sheet-container',
                lang: 'zh',
                showinfobar: false,
                showtoolbar:false,
                showsheetbar:false,
                showstatisticBar:false,
                showstatisticBarConfig: {
                    count: false, // 计数栏
                    view: false, // 打印视图
                    zoom: true, // 缩放
                },
                allowCopy:false,
                allowEdit:false,//不允许编辑
                allowUpdate:false,
                enableAddRow:false,
                sheetFormulaBar:false,
                showConfigWindowResize:true,
                data: [{
                    ...baseOption,
                    scrollTop: 0,
                    scrollLeft: 0,
                }],
            }
            luckysheet.create(options)
            document.querySelector("#luckysheet-cols-h-c").style.pointerEvents = 'none'
        }
    },
    mounted(){
        this.getSheetDetail()
    }
};
</script>

<style scoped lang="scss">
.federal-reserve-wrap{
    height:calc(100vh - 120px);
    background-color: #fff;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding:30px;
    .tool-box{
        display: flex;
        justify-content: space-between;
    }
    .table-box{
        width:100%;
        box-sizing: border-box;
        flex: 1;
        margin-top: 30px;
        .sheet-wrap{
            width:100%;
            height: 100%;
            position: relative;
            /* cursor:not-allowed;
            pointer-events: none; */
            #sheet-container {
                margin:0;padding:0;
                position:absolute;
                width:100%;left: 0px;top: 0;bottom:0px;
            }
        }
    }
}
</style>
