<!--
 * @Author       : yuanrunwei
 * @Date         : 2021-12-04 14:23:58
 * @LastEditors  : yuanrunwei
 * @LastEditTime : 2021-12-28 20:20:48
 * @FilePath     : \spfm-market-front\src\pages\main\performance\components\sheet.vue
-->

<template>
    <div class="sheet-container">
        <div class="flex-justify-align-end margin-bottom-20">
            <el-button
                type="primary"
                @click="handleVisible"
                v-if="['template'].includes(attribute)"
                >权限设置</el-button
            >
            <el-button type="primary" @click="handleDownload">导出</el-button>
            <el-button type="primary" @click="handleFullscreen()"
                >全屏显示</el-button
            >
            <template v-if="['edit'].includes(type)">
                <el-upload
                    v-if="!id"
                    class="margin-right-10 margin-left-10"
                    action
                    :on-change="handleChange"
                    :show-file-list="false"
                >
                    <el-button type="primary">上传</el-button>
                </el-upload>
                <el-button
                    type="primary"
                    @click="handleSave"
                    :disabled="handleForbid()"
                    ><span>{{ id ? "提交" : "新增" }}</span
                    ><span>{{
                        handleForbid() ? `（请先设置权限）` : ""
                    }}</span></el-button
                >
            </template>
        </div>
        <div id="luckysheet" class="sheet-container-block"></div>
        <simple-dialog
            title="权限设置"
            :visible="visible"
            :modal="false"
            width="700px"
            @confirm="handleAuth"
            @cancel="handleVisible"
        >
            <el-form ref="form" :model="form" label-width="100px">
                <el-form-item
                    label="可编辑列"
                    prop="array"
                    :rules="{
                        required: true,
                        message: '可编辑列不能为空',
                        trigger: 'change',
                    }"
                    ><el-select
                        v-model="form.array"
                        placeholder="可编辑列"
                        multiple
                    >
                        <el-option
                            v-for="(value, index) in 10"
                            :key="index"
                            :label="index + 1"
                            :value="index + 1"
                        >
                        </el-option> </el-select
                ></el-form-item>
                <el-form-item
                    label="权限规则"
                    prop="type"
                    :rules="{
                        required: true,
                        message: '权限规则不能为空',
                        trigger: 'change',
                    }"
                >
                    <el-select v-model="form.type">
                        <el-option
                            v-for="item in type_options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        ></el-option> </el-select
                ></el-form-item>
                <el-form-item
                    label="负责人"
                    prop="charge"
                    :rules="{
                        required: true,
                        message: '负责人不能为空',
                        trigger: 'blur',
                    }"
                >
                    <div
                        class="flex-justify-start"
                        v-for="(item, index) in form.charge"
                        :key="index"
                    >
                        <el-select
                            v-model="item.key"
                            class="margin-bottom-20 margin-right-10 flex-1"
                            placeholder="请选择指定列/行"
                            multiple
                        >
                            <el-option
                                v-for="(value, index) in 10"
                                :key="index"
                                :label="index + 1"
                                :value="index + 1"
                            >
                            </el-option>
                        </el-select>
                        <el-select
                            class="margin-bottom-20"
                            placeholder="请选择负责人"
                            v-model="item.value"
                            filterable
                        >
                            <el-option
                                v-for="({ label, value }, index) in charge_list"
                                :key="index"
                                :label="label"
                                :value="value"
                            ></el-option>
                        </el-select>
                    </div>

                    <div>
                        <el-button @click.prevent="handleCharge('add')"
                            >添加</el-button
                        >
                        <el-button
                            v-if="form.charge.length - 1"
                            @click.prevent="handleCharge('delete')"
                            >删除</el-button
                        >
                    </div>
                </el-form-item>
            </el-form>
            <template v-if="!id" v-slot:footer><div></div></template>
        </simple-dialog>
    </div>
</template>

<script>
import luckyexcel from "luckyexcel";
import { exportExcel } from "../common/export";
import simpleDialog from "./dialog.vue";
export default {
    components: {
        simpleDialog,
    },
    props: {
        type: {
            type: String,
            default: "view", // view 查看 edit 编辑
        },
        attribute: {
            type: String,
            default: "template", // template 模板 order 工单 file 文件
        },
        id: {
            default: null,
        },
    },
    data() {
        return {
            form: {
                charge: [{ value: "" }],
            },
            issued_id: null,
            template_id: null,
            visible: false,
            row_list: [],
            column_list: [],
            charge_list: [],
            type_options: [
                {
                    value: 1,
                    label: "按行",
                },
                // {
                //     value: 2,
                //     label: "按列",
                // },
            ],
        };
    },
    methods: {
        handleInit() {
            if (this.id) {
                this.handleQuery();
            } else {
                this.handleCreate();
            }
        },
        handleAllow({ row, column }) {
            return (
                this.row_list.includes(row) && this.column_list.includes(column)
            );
        },
        async handleQuery() {
            let url = "";
            let key = "";
            switch (this.attribute) {
                case "template":
                    url = "/market/CMKFileTemplate/QueryCMKFileTemplateById";
                    key = "templateId";
                    break;
                case "order":
                    url = "/market/CMKIssued/CMKQueryIssuedById";
                    key = "id";
                    break;
                case "file":
                    url = "/market/CMKIssued/CMKIssuedProcessByUser";
                    key = "id";
                    break;
            }
            const {
                data: {
                    templateContent,
                    templateName,
                    issuedId,
                    templateId,
                    list,
                },
            } = await this.$http({
                url,
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    [key]: this.id,
                },
            });
            this.template_id = templateId;
            this.issued_id = issuedId;
            if (list && list.length) {
                const [{ type, allowEditingColumns, rowNum }] = list;
                this.form = {
                    ...this.form,
                    type: JSON.parse(type),
                    array: allowEditingColumns
                        ? allowEditingColumns.split(",")
                        : [],
                    charge: list.map(
                        ({ principalId, principalName, rowNum }) => ({
                            value: `${principalId},${principalName}`,
                            key: rowNum.split(","),
                        })
                    ),
                };
                this.row_list =
                    this.type === "edit"
                        ? rowNum
                              .split(",")
                              .map((element) => JSON.parse(element) - 1)
                        : [];
                this.column_list =
                    this.type === "edit"
                        ? allowEditingColumns
                              .split(",")
                              .map((element) => JSON.parse(element) - 1)
                        : [];
            }
            this.handleCreate({
                json: templateContent ? JSON.parse(templateContent) : {},
                name: templateName,
                type: "json",
            });
        },
        handleForbid() {
            const object = {};
            const { array, type, charge } = this.form;
            charge.map(({ key, value }) => {
                if (key && value) {
                    object[key] = value;
                }
            });
            return !(Object.keys(object).length && array.length && type);
        },
        async handleCreate({ file, json, type, name } = {}) {
            let that = this;
            const options = {
                container: "luckysheet",
                lang: "zh",
                showsheetbar: false,
                hook: {
                    cellEditBefore: function ([
                        { row_focus: row, column_focus: column },
                    ]) {
                        if (!that.handleAllow({ row, column })) {
                            that.$message.error("您没有编辑权限");
                        }
                    },
                    cellUpdateBefore: function (row, column) {
                        if (!that.handleAllow({ row, column })) {
                            return false;
                        }
                    },
                    cellRenderAfter: function (cell, position) {
                        const { r: row, c: column } = position;
                        if (cell) {
                            if (!that.handleAllow({ row, column })) {
                                cell.bg = "#d5d5d5";
                            } else {
                                cell.bg = "#ffffff";
                            }
                        }
                    },
                },
            };
            switch (type) {
                case "file":
                    if (file) {
                        await new Promise((resolve) => {
                            luckyexcel.transformExcelToLucky(
                                file,
                                (export_json) => {
                                    options.data = [
                                        ...export_json.sheets.map(
                                            (element) => ({
                                                ...element,
                                                zoomRatio: 0.75,
                                            })
                                        ),
                                    ];
                                    options.title = export_json.info.name;
                                    resolve();
                                }
                            );
                        });
                    }
                    break;
                case "json":
                    if (json) {
                        options.data = [
                            {
                                ...json,
                                zoomRatio: 0.75,
                            },
                        ];
                        options.title = name;
                    }
                    break;
            }

            window.luckysheet.create(options);
            let clock = setInterval(() => {
                if (window.luckysheet) {
                    window.luckysheet.refresh();
                    clearInterval(clock);
                }
            }, 1000);
        },
        async handleChange(response) {
            this.handleCreate({ file: response.raw, type: "file" });
        },
        handleDownload() {
            exportExcel(
                window.luckysheet.getAllSheets(),
                window.luckysheet.getWorkbookName()
            );
        },
        async handleAddAuth({ id }) {
            const object = {};
            const { array, charge, type } = this.form;
            charge.map(({ key, value }) => {
                if (key && value) {
                    object[key] = value;
                }
            });
            await this.$http({
                url: this.id
                    ? "/market/CMKFileTemplateAuthority/CMKFileTemplateAuthorityUpdate"
                    : "/market/CMKFileTemplateAuthority/CMKFileTemplateAuthorityAdd",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    allowEditingColumns: array.join(","),
                    auth: JSON.stringify(object),
                    templateId: id,
                    type,
                },
            });
            this.$message.success("操作成功");
        },
        async handleSave() {
            let edit_url = "";
            switch (this.attribute) {
                case "template":
                    edit_url = "";
                    break;
                case "order":
                    edit_url = "";
                    break;
                case "file":
                    edit_url = "/market/CMKIssued/CMKIssuedSubmit";
                    break;
            }
            const sheet_name = window.luckysheet.getSheet().name;
            const data = window.luckysheet.getSheet(sheet_name);
            const workbook_name = window.luckysheet.getWorkbookName();
            const {
                data: { body },
            } = await this.$http({
                url: this.id
                    ? edit_url // 编辑
                    : "/market/CMKFileTemplate/CMKFileTemplateAdd", // 新增
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {
                    id: this.template_id,
                    templateContent: JSON.stringify(data),
                    templateName: workbook_name,
                    issuedId: this.issued_id,
                },
            });
            // 新增时添加权限
            if (!this.id) {
                this.handleAddAuth({ id: body });
            } else {
                this.$message.success("提交成功");
            }
            this.$emit("save");
        },
        handleAuth() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    if (this.handleForbid()) {
                        this.$message.error("请选择负责人编辑权限");
                        return false;
                    }
                    this.handleVisible();
                    if (this.id) {
                        this.handleAddAuth({ id: this.id });
                    } else {
                        this.$message.success("设置成功");
                    }
                }
            });
        },
        handleCharge(type) {
            switch (type) {
                case "add":
                    this.form.charge.push({
                        value: "",
                    });
                    break;
                case "delete":
                    this.form.charge.pop();
                    break;
            }
        },
        handleVisible() {
            this.visible = !this.visible;
        },
        handleFullscreen() {
            const element = document.body;
            const is_fullscreen =
                document.fullScreen ||
                document.mozFullScreen ||
                document.webkitIsFullScreen;
            if (!is_fullscreen) {
                //进入全屏,多重短路表达式
                (element.requestFullscreen && element.requestFullscreen()) ||
                    (element.mozRequestFullScreen &&
                        element.mozRequestFullScreen()) ||
                    (element.webkitRequestFullscreen &&
                        element.webkitRequestFullscreen()) ||
                    (element.msRequestFullscreen &&
                        element.msRequestFullscreen());
            } else {
                //退出全屏,三目运算符
                document.exitFullscreen
                    ? document.exitFullscreen()
                    : document.mozCancelFullScreen
                    ? document.mozCancelFullScreen()
                    : document.webkitExitFullscreen
                    ? document.webkitExitFullscreen()
                    : "";
            }
        },
        handleChargeList() {
            this.$http({
                url: "/market/techcentergj/queryLeaderList",
                method: "post",
                headers: {
                    "Content-Type": "application/json",
                },
                data: {},
            }).then((response) => {
                this.charge_list = response.data.map((element) => ({
                    label: `${element.ou} ${element.secLeaderName}`,
                    value: `${element.secLeaderLogin},${element.secLeaderName}`,
                }));
            });
        },
    },
    mounted() {
        this.handleInit();
        this.handleChargeList();
    },
};
</script>

<style lang="scss" scope>
.sheet-container {
    position: fixed;
    width: calc(100% - 40px);
    height: 100%;
    &-block {
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 75%;
    }
}
</style>
