<template>
    <div>

        <el-form :model="formData" :rules="formRules" ref="dataForm">
            <el-button-group style="display: flex">
                <el-button
                    type="primary"
                    @click.native="resetSetting()"
                    style="margin: -50px 0 10px auto; height: 35px"
                >重置选项
                </el-button
                >
                <el-button
                    type="primary"
                    @click.native="submit()"
                    style="margin: -50px 60px 10px 0; height: 35px"
                >导出PDF
                </el-button
                >
            </el-button-group>

            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="ao-text">
                        <span>订单号：</span>
                        <el-switch v-model="formData.orderIdEnable"></el-switch>
                        <span style="margin-left: 30px">宽度：</span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="orderIdWidth">
                        <el-slider
                            v-model="formData.orderIdWidth"
                            :disabled="!formData.orderIdEnable"
                            :min="4"
                            :max="16"
                            :show-tooltip="true"
                        >
                        </el-slider>
                        <!--                        <el-input v-model="formData.orderIdWidth" auto-complete="off" :disabled="!formData.orderIdEnable"></el-input>-->
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <div class="ao-text">
                        <span>业务类型：</span>
                        <el-switch v-model="formData.actionEnable"></el-switch>
                        <span style="margin-left: 30px">宽度：</span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="actionWidth">
                        <!--                        <span style="width:50px; display:inline-block; margin-top: 4px">宽度：</span>-->
                        <el-slider
                            v-model="formData.actionWidth"
                            :disabled="!formData.actionEnable"
                            :min="4"
                            :max="16"
                            :show-tooltip="true"
                        >
                        </el-slider>
                        <!--                        <el-slider v-model="formData.actionWidth" :disabled="!formData.actionEnable" style="float: right; width: 85%;"></el-slider>-->
                        <!--                        <el-input v-model="formData.actionWidth" auto-complete="off" :disabled="!formData.actionEnable"></el-input>-->
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="ao-text">
                        <span>往来单位：</span>
                        <el-switch v-model="formData.fromCorpEnable"></el-switch>
                        <span style="margin-left: 30px">宽度：</span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="fromCorpWidth">
                        <el-slider
                            v-model="formData.fromCorpWidth"
                            :disabled="!formData.fromCorpEnable"
                            :min="4"
                            :max="16"
                            :show-tooltip="true"
                        >
                        </el-slider>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <div class="ao-text">
                        <span>订单来源：</span>
                        <el-switch v-model="formData.fromTypeEnable"></el-switch>
                        <span style="margin-left: 30px">宽度：</span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="fromTypeWidth">
                        <el-slider
                            v-model="formData.fromTypeWidth"
                            :disabled="!formData.fromTypeEnable"
                            :min="4"
                            :max="16"
                            :show-tooltip="true"
                        >
                        </el-slider>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-divider></el-divider>

            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="ao-text">
                        <span>序号：</span>
                        <el-switch @change="switchChange(
                            $event, 'numberWidth', 'numberEnable')" v-model="formData.numberEnable"></el-switch>
                        <span style="margin-left: 30px">宽度：</span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="fromCorpWidth">
                        <el-slider
                            v-model="formData.numberWidth"
                            :disabled="!formData.numberEnable"
                            :min="tableCellMinWidth"
                            :max="tableCellMaxWidth"
                            :show-tooltip="true"
                            @change="sliderChange($event, 'numberWidth')"
                        >
                        </el-slider>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <div class="ao-text">
                        <span>产品通用名：</span>
                        <el-switch @change="switchChange(
                            $event, 'coNameWidth', 'coNameEnable')" v-model="formData.coNameEnable"></el-switch>
                        <span style="margin-left: 30px">宽度：</span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="fromTypeWidth">
                        <el-slider
                            v-model="formData.coNameWidth"
                            :disabled="!formData.coNameEnable"
                            :min="tableCellMinWidth"
                            :max="tableCellMaxWidth"
                            :show-tooltip="true"
                            @change="sliderChange($event, 'coNameWidth')"
                        >
                        </el-slider>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="ao-text">
                        <span>包装规格：</span>
                        <el-switch @change="switchChange(
                            $event, 'packSpecWidth', 'packSpecEnable')" v-model="formData.packSpecEnable"></el-switch>
                        <span style="margin-left: 30px">宽度：</span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="fromCorpWidth">
                        <el-slider
                            v-model="formData.packSpecWidth"
                            :disabled="!formData.packSpecEnable"
                            :min="tableCellMinWidth"
                            :max="tableCellMaxWidth"
                            :show-tooltip="true"
                            @change="sliderChange($event, 'packSpecWidth')"
                        >
                        </el-slider>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <div class="ao-text">
                        <span>批次号：</span>
                        <el-switch @change="switchChange(
                            $event, 'batchNoWidth', 'batchNoEnable')" v-model="formData.batchNoEnable"></el-switch>
                        <span style="margin-left: 30px">宽度：</span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="fromTypeWidth">
                        <el-slider
                            v-model="formData.batchNoWidth"
                            :disabled="!formData.batchNoEnable"
                            :min="tableCellMinWidth"
                            :max="tableCellMaxWidth"
                            :show-tooltip="true"
                            @change="sliderChange($event, 'batchNoWidth')"
                        >
                        </el-slider>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="ao-text">
                        <span>扫码数量：</span>
                        <el-switch @change="switchChange(
                            $event, 'countWidth', 'countEnable')" v-model="formData.countEnable"></el-switch>
                        <span style="margin-left: 30px">宽度：</span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="fromCorpWidth">
                        <el-slider
                            v-model="formData.countWidth"
                            :disabled="!formData.countEnable"
                            :min="tableCellMinWidth"
                            :max="tableCellMaxWidth"
                            :show-tooltip="true"
                            @change="sliderChange($event, 'countWidth')"
                        >
                        </el-slider>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <div class="ao-text">
                        <span>生产企业：</span>
                        <el-switch @change="switchChange(
                            $event, 'productCompanyWidth', 'productCompanyEnable')"
                                   v-model="formData.productCompanyEnable"></el-switch>
                        <span style="margin-left: 30px">宽度：</span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="fromTypeWidth">
                        <el-slider
                            v-model="formData.productCompanyWidth"
                            :disabled="!formData.productCompanyEnable"
                            :min="tableCellMinWidth"
                            :max="tableCellMaxWidth"
                            :show-tooltip="true"
                            @change="sliderChange($event, 'productCompanyWidth')"
                        >
                        </el-slider>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="4">
                    <div class="ao-text">
                        <span>注册/备案凭证号：</span>
                        <el-switch @change="switchChange(
                            $event, 'authCodeWidth', 'authCodeEnable')" v-model="formData.authCodeEnable"></el-switch>
                        <span style="margin-left: 30px">宽度：</span>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-form-item prop="fromCorpWidth">
                        <el-slider
                            v-model="formData.authCodeWidth"
                            :disabled="!formData.authCodeEnable"
                            :min="tableCellMinWidth"
                            :max="tableCellMaxWidth"
                            :show-tooltip="true"
                            @change="sliderChange($event, 'authCodeWidth')"
                        >
                        </el-slider>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <!--        <a :href="pdfUrl" target="_blank" >打开pdf文件</a>-->
    </div>
</template>

<script>
import {
    downloadInoutOrderSuccessPDF
} from "../../api/itextpdf/itextpdf";
import draggable from "vuedraggable";
import {parseTime} from "../../filtres/index";
import store from "../../store";

const formJson = {
    orderIdEnable: true,
    orderIdWidth: 8,
    actionEnable: true,
    actionWidth: 4,
    fromCorpEnable: true,
    fromCorpWidth: 8,
    fromTypeEnable: true,
    fromTypeWidth: 4,
    numberEnable: true,
    numberWidth: 1,
    coNameEnable: true,
    coNameWidth: 4,
    packSpecEnable: true,
    packSpecWidth: 3,
    batchNoEnable: true,
    batchNoWidth: 2,
    countEnable: true,
    countWidth: 2,
    productCompanyEnable: true,
    productCompanyWidth: 4,
    authCodeEnable: true,
    authCodeWidth: 4,
};

export default {
    name: "idQuery",
    props: {
        closeDialog: {
            type: Function,
            required: true,
        },
        idQuery: {
            type: Object,
            required: true,
        },
    },
    data() {
        return {
            formData: formJson,
            formRules: {
                temp: [
                    {required: true, message: "请输入条码", trigger: "blur"}
                ],
            },
            cellDefaultWidth: {
                numberWidth: 1,
                coNameWidth: 4,
                packSpecWidth: 3,
                batchNoWidth: 2,
                countWidth: 2,
                productCompanyWidth: 4,
                authCodeWidth: 4,
            },
            cellOldWidth: {
                numberWidth: 1,
                coNameWidth: 4,
                packSpecWidth: 3,
                batchNoWidth: 2,
                countWidth: 2,
                productCompanyWidth: 4,
                authCodeWidth: 4,
            },
            orderIdDisabled: false,
            total: 0,
            loading: false,
            index: null,
            formLoading: false,
            formVisible: false,
            deleteLoading: false,
            orderNo: null,
            pdfUrl: '',
            tableCellMinWidth: 1,
            tableCellMaxWidth: 14,
            nowWidth: 0,
        };
    },
    components: {
        draggable,
    },
    methods: {
        resetSetting(formName) {
            this.resetFormData();
        },
        submit(formName) {
            let tQuery = {
                orderId: this.idQuery.id,
                settingData: this.formData
            }
            this.loading = true;
            downloadInoutOrderSuccessPDF(tQuery).then((response) => {
                //将pdf文件转换为url。
                const binaryData = [];
                binaryData.push(response);
                //获取blob链接。
                let url = window.URL.createObjectURL(
                    new Blob(binaryData, {type: "application/pdf"})
                );
                this.loading = false;
                window.open(url);//打开新标签页，预览pdf。
            });
        },
        // 刷新表单
        resetForm() {
            if (this.$refs["dataForm"]) {
                // 清空验证信息表单
                this.$refs["dataForm"].clearValidate();
                // 刷新表单
                this.$refs["dataForm"].resetFields();
                this.getList();
            }
        },
        resetFormData() {
            this.formData = {
                orderIdEnable: true,
                orderIdWidth: 8,
                actionEnable: true,
                actionWidth: 4,
                fromCorpEnable: true,
                fromCorpWidth: 8,
                fromTypeEnable: true,
                fromTypeWidth: 4,
                numberEnable: true,
                numberWidth: this.cellDefaultWidth.numberWidth,
                coNameEnable: true,
                coNameWidth: this.cellDefaultWidth.coNameWidth,
                packSpecEnable: true,
                packSpecWidth: this.cellDefaultWidth.packSpecWidth,
                batchNoEnable: true,
                batchNoWidth: this.cellDefaultWidth.batchNoWidth,
                countEnable: true,
                countWidth: this.cellDefaultWidth.countWidth,
                productCompanyEnable: true,
                productCompanyWidth: this.cellDefaultWidth.productCompanyWidth,
                authCodeEnable: true,
                authCodeWidth: this.cellDefaultWidth.authCodeWidth,
            }
            this.cellOldWidth = {
                numberWidth: this.cellDefaultWidth.numberWidth,
                coNameWidth: this.cellDefaultWidth.coNameWidth,
                packSpecWidth: this.cellDefaultWidth.packSpecWidth,
                batchNoWidth: this.cellDefaultWidth.batchNoWidth,
                countWidth: this.cellDefaultWidth.countWidth,
                productCompanyWidth: this.cellDefaultWidth.productCompanyWidth,
                authCodeWidth: this.cellDefaultWidth.authCodeWidth,
            }
            this.tableCellMaxWidth = 14
        },
        getInputFocus(event) {
            event.currentTarget.select();
        },
        intentBack() {
            this.$router.go(-1);
        },
        switchChange(event, param, param2) {
            if (this.formData.numberEnable === false &&
                this.formData.coNameEnable === false &&
                this.formData.packSpecEnable === false &&
                this.formData.batchNoEnable === false &&
                this.formData.countEnable === false &&
                this.formData.productCompanyEnable === false &&
                this.formData.authCodeEnable === false) {
                this.formData[param2] = true;
                this.formData[param] = 20;
                return;
            }

            this.tableCellMaxWidth = event === true ? --this.tableCellMaxWidth : ++this.tableCellMaxWidth;

            this.formData[param] = event === true ? this.cellDefaultWidth[param] : 0;
            let number = this.formData[param] - this.cellOldWidth[param];
            this.cellOldWidth[param] = this.formData[param];
            this.sliderChangeAlgorithm(number, param);
        },
        sliderChange(event, param) {
            let i = 7;
            if (this.formData.numberEnable === false) {
                --i;
            }
            if (this.formData.coNameEnable === false) {
                --i;
            }
            if (this.formData.packSpecEnable === false) {
                --i;
            }
            if (this.formData.batchNoEnable === false) {
                --i;
            }
            if (this.formData.countEnable === false) {
                --i;
            }
            if (this.formData.productCompanyEnable === false) {
                --i;
            }
            if (this.formData.authCodeEnable === false) {
                --i;
            }
            if (i <= 1) {
                this.formData[param] = 20;
                return;
            }

            let number = event - this.cellOldWidth[param];
            this.cellOldWidth[param] = event;
            this.sliderChangeAlgorithm(number, param);
        },
        //表格单元格宽度滑动条关联改变
        sliderChangeAlgorithm(number, param) {
            this.nowWidth = 0;
            this.nowNumber = number;
            for (; this.nowNumber !== 0;) {
                if (this.nowNumber < 0) {
                    if (this.nowNumber === 0) break;
                    this.sliderChangeAdd('numberEnable', 'numberWidth', param);
                    if (this.nowNumber === 0) break;
                    this.sliderChangeAdd('coNameEnable', 'coNameWidth', param);
                    if (this.nowNumber === 0) break;
                    this.sliderChangeAdd('packSpecEnable', 'packSpecWidth', param);
                    if (this.nowNumber === 0) break;
                    this.sliderChangeAdd('batchNoEnable', 'batchNoWidth', param);
                    if (this.nowNumber === 0) break;
                    this.sliderChangeAdd('countEnable', 'countWidth', param);
                    if (this.nowNumber === 0) break;
                    this.sliderChangeAdd('productCompanyEnable', 'productCompanyWidth', param);
                    if (this.nowNumber === 0) break;
                    this.sliderChangeAdd('authCodeEnable', 'authCodeWidth', param);
                } else if (this.nowNumber > 0) {
                    if (this.nowNumber === 0) break;
                    this.sliderChangeDelete('numberEnable', 'numberWidth', param);
                    if (this.nowNumber === 0) break;
                    this.sliderChangeDelete('coNameEnable', 'coNameWidth', param);
                    if (this.nowNumber === 0) break;
                    this.sliderChangeDelete('packSpecEnable', 'packSpecWidth', param);
                    if (this.nowNumber === 0) break;
                    this.sliderChangeDelete('batchNoEnable', 'batchNoWidth', param);
                    if (this.nowNumber === 0) break;
                    this.sliderChangeDelete('countEnable', 'countWidth', param);
                    if (this.nowNumber === 0) break;
                    this.sliderChangeDelete('productCompanyEnable', 'productCompanyWidth', param);
                    if (this.nowNumber === 0) break;
                    this.sliderChangeDelete('authCodeEnable', 'authCodeWidth', param);
                } else {
                    break;
                }
            }
        },
        sliderChangeAdd(paramEnable, paramWidth, nowParamWidth) {
            if (this.formData[paramEnable] && paramWidth !== nowParamWidth
                && this.formData[paramWidth] < this.tableCellMaxWidth) {
                if (this.nowNumber === 0) return;
                if (this.nowWidth === 0) {
                    this.nowWidth = this.formData[paramWidth];
                } else if (this.nowWidth > this.formData[paramWidth]) {
                    this.nowWidth = this.formData[paramWidth];
                } else if (this.nowWidth === this.formData[paramWidth]) {
                    this.nowWidth = 0;
                    ++this.formData[paramWidth];
                    ++this.cellOldWidth[paramWidth];
                    ++this.nowNumber;
                }
            }
        },
        sliderChangeDelete(paramEnable, paramWidth, nowParamWidth) {
            if (this.formData[paramEnable] && paramWidth !== nowParamWidth
                && this.formData[paramWidth] > this.tableCellMinWidth) {
                if (this.nowNumber === 0) return;
                if (this.nowWidth === 0) {
                    this.nowWidth = this.formData[paramWidth];
                } else if (this.nowWidth < this.formData[paramWidth]) {
                    this.nowWidth = this.formData[paramWidth];
                } else if (this.nowWidth === this.formData[paramWidth]) {
                    this.nowWidth = 0;
                    --this.formData[paramWidth];
                    --this.cellOldWidth[paramWidth];
                    --this.nowNumber;
                }
            }
        }
    },
    filters: {},
    mounted() {
        document.body.ondrop = function (event) {
            event.preventDefault();
            event.stopPropagation();
        };
    },
    created() {
        this.resetFormData();
        if (this.$isNotBlank(this.idQuery.id)) {
            // this.getCodeList();
        }
    },
};
</script>
<style>

.ao-text {
    width: 100%;
    font-size: 13px;
    font-family: "Microsoft YaHei";
    float: right;
    text-align: right;
    margin-top: 10px;
}

</style>



