<!--
@name 业务组件：PDA底部操作栏
@desc 基于 vant-ui

【必填入参】：
    @param {Boolean} [showInputBox]  - 是否显示输入框控制栏，默认：true
    @param {Boolean} [showScan]  - 是否开启扫描模式，默认：false
    @param {Boolean} [showLocation]  - 是否开启定位查询功能，默认：false
    @param {Array} [locationList]  - 储存定位信息列表，默认：[]
    @param {Object} [locationState]  - 储存当前定位信息，默认：
        @example: {
                    index: -1, // 当前定位在定位列表中的索引
                    value: "" // 当前定位的值
                }
    @param {Boolean} [showDelect]  - 是否开启批量删除模式，默认：false
    @param {Array} [selectList]  - 删除模式中的已选列表，默认：[]

【选填入参】： 
    @param {String} [cancelText] - 非扫描模式中，取消按钮的文本, 默认："返回"
    @param {String} [cancelScanText] - 扫描模式中，取消按钮的文本, 默认："重置"
    @param {String} [confirmText] - 非扫描模式中，确认按钮的文本, 默认："开始扫描"
    @param {String} [confirmScanText] - 非扫描模式中，确认按钮的文本, 默认："保存"
    @param {String} [scanPho] - 输入框显示的文本, 默认："可手录条码"
    @param {String} [locationPho] - 定位开启时，输入框显示的文本, 默认："请输入编号、编码、名称、规格定位"
    @param {Boolean} [confirmLoading]  - 按钮确认加载状态，默认：false
    @param {Boolean} [showCancel]  - 显示取消按钮，默认：true

【回调出参】：
    @function {out} cancel() - 取消-按钮事件
    @function {out} confirm() - 确认-按钮事件
    @function {out} delect() - 删除已选-按钮事件
    @function {out} location(action) - 上一个或下一个-按钮事件。 action：【1】下一个；【-1】：上一个
    @function {out} closelocation() - 关闭定位功能-按钮事件

【插槽】
    @slot [indicate-left] - 输入框左侧的指示插槽，可使用内置类名样式布局：.indicate-box
    @slot [indicate-right] - 输入框右侧的指示插槽，可使用内置类名样式布局：.indicate-box
    @slot [input]  输入框左侧的指示插槽
        @param {Boolean} show -  是否显示输入框
        @param {String} inputPho  -  输入框空值时显示的提示信息
    
        @example 调用实例
            <template slot="listitem" slot-scope="data">{{data.show}}</template>

@time 2020年7月24日 -- design by Yj_cHen
-->

<template>
    <div class="pda-footer-wrapper">
        <div class="locate-controller" v-if="showLocation && locationList.length">
            <div class="locate-inner">
                <van-button class="locate-btn" mini round type="default" @click="handleLocationAction(-1)">
                    <i class="iconfont icon-left"></i>
                </van-button>
                <span class="locate-content">{{ `${locationList.length} 中的 ${locationState.index + 1}` }}</span>
                <van-button class="locate-btn" mini round type="info" @click="handleLocationAction(1)">
                    <i class="iconfont icon-right"></i>
                </van-button>
            </div>
        </div>
        <div class="locate-close" v-if="showLocation">
            <van-button class="locate-btn" mini round type="danger" @click="handleCloseLocation">
                <i class="iconfont icon-close"></i>
            </van-button>
        </div>
        <div class="footer-inputbox" v-if="showInputBox">
            <slot name="indicate-left"></slot>
            <div class="indicate-box" v-if="showLocation">
                定位:
            </div>
            <div class="input-box">
                <slot name="input" :show="!showDelect || showLocation" :inputPho="footerInputPho" />
            </div>
            <slot name="indicate-right"></slot>
        </div>
        <div class="footer-controller">
            <slot name="footer-btn">
                <van-button v-if="showCancel" v-no-more-click block type="default" :disabled="confirmLoading" @click="handleCancel">
                    {{ cancelBtnText }}
                </van-button>
                <van-button block type="info" v-no-more-click :disabled="confirmLoading" :loading="confirmLoading" @click="handleConfirm">
                    {{ confirmBtnText }}
                </van-button>
                <transition name="line_bottom">
                    <van-button v-if="showDelect" v-no-more-click class="footer-del-btn" block type="danger" @click="handleDelect">
                        {{ `删除已选(${selectList.length})` }}
                    </van-button>
                </transition>
            </slot>
        </div>
    </div>
</template>

<script>
export default {
    name: "LjPDAFooterController",
    props: {
        showInputBox: {
            type: Boolean,
            default: true
        },
        showScan: {
            type: Boolean,
            default: false
        },
        showLocation: {
            type: Boolean,
            default: false
        },
        showDelect: {
            type: Boolean,
            default: false
        },
        showCancel: {
            type: Boolean,
            default: true
        },
        selectList: {
            type: Array,
            default: function () {
                return []
            }
        },
        locationList: {
            type: Array,
            default: function () {
                return []
            }
        },
        locationState: {
            type: Object,
            default: function () {
                return {
                    index: -1,
                    value: ""
                }
            }
        },
        cancelText: {
            type: String,
            default: "返回"
        },
        cancelScanText: {
            type: String,
            default: "重置"
        },
        confirmText: {
            type: String,
            default: "开始扫描"
        },
        confirmScanText: {
            type: String,
            default: "保存"
        },
        scanPho: {
            type: String,
            default: "扫描或输入条码编号"
        },
        locationPho: {
            type: String,
            default: "请输入编号、编码、名称、规格定位"
        },
        confirmLoading: {
            type: Boolean,
            default: false
        }
    },
    computed: {
        cancelBtnText() {
            return this.showScan ? this.cancelScanText : this.cancelText;
        },
        confirmBtnText() {
            return this.showScan ? this.confirmScanText : this.confirmText;
        },
        footerInputPho() {
            return this.showLocation ? this.locationPho : this.scanPho;
        }
    },
    methods: {
        handleCancel() {
            this.$emit("cancel");
        },
        handleConfirm() {
            if (this.confirmLoading) {
                return false;
            }
            this.$emit("confirm");
        },
        handleDelect() {
            this.$emit("delect");
        },
        handleLocationAction(action) {
            this.$emit("location", action);
        },
        handleCloseLocation() {
            this.$emit("closelocation");
        }
    }
}
</script>

<style lang="less">
@import "../../../assets/css/lj-style-variable";
@import "../../../assets/css/lj-base";
@import "../../../assets/css/lj-pda";

.pda-footer-wrapper {
    display: flex;
    flex-direction: column;
    .pda-input {
        padding: 5px 8px;
        background-color: #f2f2f2;
        border-radius: 10px;
    }

    .footer-controller {
        position: relative;
        display: flex;

        .footer-del-btn {
            position: absolute;
            top: 0;
            left: 0;
        }
    }
    .footer-inputbox {
        position: relative;
        display: flex;
        margin: 5px 0;
        height: 36px;
        // height: 40px;
        padding: 0 5px;
        .indicate-box {
            flex-shrink: 0;
            margin: auto 5px;
            // .middle_center();
        }
        .input-box {
            flex: 1;
            margin: auto 0;
        }
    }
    .locate-controller {
        position: absolute;
        top: -19px;
        left: 0;
        height: 0;
        width: 100%;
        .middle_center();

        .locate-inner {
            position: relative;
            display: flex;
        }

        .locate-content {
            .shadow_border();
            margin: 0 5px;
            padding: 0 8px;
            line-height: 32px;
            height: 32px;
            width: auto;
            
            border-radius: 20px;
            background-color: #fff;
            border: 1px solid @colorPass;
            color: @colorPass;
            font-size: 14px;
            font-weight: bold;
        }
    }
    .locate-btn {
        line-height: 32px;
        height: 32px;
        padding: 0 15px;
        .shadow_border();
        border-radius: 20px;
        .iconfont {
            font-size: 14px;
        }
    }
    .locate-close {
        position: absolute;
        top: -19px;
        height: 0;
        right: 10px;
        .middle_center();
    }
}
    
</style>