<template>
    <!-- 确认模板 -->
    <div class=''>
        <el-dialog title="模板确认" :visible.sync="showTemplate" width="50%" >
            <div id="luckysheet"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showTemplate = false">取 消</el-button>
                <el-button type="primary" @click="showTemplate = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import LuckyExcel from 'luckyexcel';
import options from "@/utils/luckysheetConfig.js";

export default {
    data() {
        return {};
    },
    created() { },
    methods: {
        handleCellEditBefore(e) {
            this.drawer = true;
            let column = parseInt(e[0].column[0]) + 1, row = parseInt(e[0].row[0]) + 1;
            this.selectedCell = "第" + row + "行" + "第" + column + "列";
        },
    },
    mounted() {
        console.log(this.fileUrl, 'fileUrl===');
        this.$nextTick(() => {
            window.luckysheet.destroy();
            options.title = '模板确认'
            options.data = [
                {
                    "name": "Cell", //工作表名称
                    "color": "", //工作表颜色
                    "index": 0, //工作表索引
                    "status": 1, //激活状态
                    "order": 0, //工作表的下标
                    "hide": 0,//是否隐藏
                    "row": 36, //行数
                    "column": 18, //列数
                    "defaultRowHeight": 19, //自定义行高其
                    "defaultColWidth": 73, //自定义列宽
                    "celldata": [{ r: 0, c: 0, v: { m: "1", v: 'value', bg: "#00FF00", ct: { fa: 'General', t: 'g' } } }], //初始化使用的单元格数据
                    "config": {
                        "merge": {}, //合并单元格
                        "rowlen": {}, //表格行高
                        "columnlen": {}, //表格列宽
                        "rowhidden": {}, //隐藏行
                        "colhidden": {}, //隐藏列
                        "borderInfo": {}, //边框
                        "authority": {}, //工作表保护

                    },
                    "scrollLeft": 0, //左右滚动条位置
                    "scrollTop": 315, //上下滚动条位置
                    "luckysheet_select_save": [], //选中的区域
                    "calcChain": [],//公式链
                    "isPivotTable": false,//是否数据透视表
                    "pivotTable": {},//数据透视表设置
                    "filter_select": {},//筛选范围
                    "filter": null,//筛选配置
                    "luckysheet_alternateformat_save": [], //交替颜色
                    "luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色	
                    "luckysheet_conditionformat_save": {},//条件格式
                    "frozen": {}, //冻结行列配置
                    "chart": [], //图表配置
                    "zoomRatio": 1, // 缩放比例
                    "image": [], //图片
                    "showGridLines": 1, //是否显示网格线
                    "dataVerification": {} //数据验证配置
                },
            ]
            window.luckysheet.create({
                ...options,
                hook: {
                    cellEditBefore: this.handleCellEditBefore,
                },
            });
        })

    },
    props: {
        showTemplate: {
            type: Boolean,
            default: false
        },
        fileUrl: {
            type: String,
            default: ''
        }
    },
    components: {},
    computed: {},
    watch: {},
}
</script>

<style lang='scss' scoped>
    #luckysheet{
        height: 500px;
    }
</style>