<template>
    <!-- <van-dialog v-model:show="dialogShow"> -->
    <van-popup v-model:show="dialogShow" class="info-edit-wrapper-popup">
        <div class="info-edit-wrapper">
            <div class="wrapper-header">
                <div class="wrapper-header-title">
                    {{ title }}
                </div>
            </div>
            <div class="wrapper-content">
                <input ref="editInput" class="field-input" v-model="currentValue" type="number" @focus="handleSelectValue($event)"/>
                <div class="error-msg" v-if="fieldError">
                    {{ fieldErrorMsg }}
                </div>

                <div class="input-history">
                    <div class="history-title">
                        <span class="title-text">
                            历史输入记录:
                        </span>
                    </div>
                    <div class="history-content">
                        <lj-tag-double v-for="(item,index) in searchHistory" plain round color="black" type="primary" size="medium" :value="item" :key="index" @tagclick="currentValue = parseFloat(item)" />
                    </div>
                </div>
            </div>
            <div class="wrapper-footer">
                <div class="input-button">
                    <van-button hairline block @click="close">取消</van-button>
                    <van-button hairline block type="primary" @click="handleDialogConfirm">确认</van-button>
                </div>
            </div>
        </div>
    </van-popup>
    <!-- </van-dialog> -->
</template>

<script>
import LjDialog from "components/lj-dialog";
import LjTagDouble from "components/lj-tag-double";
export default {
    name: 'product-info-edit-popup',
    components: {
        LjDialog,
        LjTagDouble
    },
    props: {
        title: {
            type: String,
            default: "请输入需要的值"
        },
        sign: {
            type: String,
            default: "common"
        },
        max: {
            type: Number,
            default: Infinity
        },
        min: {
            type: Number,
            default: -Infinity
        }
    },
    data(){
        return {
            searchHistory: [],
            capacity: 10,
            habit: {},
            habitKey: "productInfoEditHabit",
            fieldError: false,
            fieldErrorMsg: '',
            currentValue: 0,
            dialogShow: false
        }
    },
    created() {
        this.habit = $lj.getStorage(this.habitKey) || {};
    },
    mounted() {

    },
    methods: {
        initData() {
            this.fieldError = false;
            this.fieldErrorMsg = '';
        },
        open(value) {
            this.initData()
            console.log("nei value>>>>>>",value)
            this.currentValue = value;
            this.dialogShow = true;
            this.$nextTick(() => {
                this.$refs.editInput.focus()
            })
        },
        close() {
            this.dialogShow = false;
        },
        handleSelectValue(e) {
            e.currentTarget.select();
        },
        handleDialogConfirm() {
            var max = this.max;
            var min = this.min;

            var val = this.currentValue;

            if(!isNaN(parseFloat(val)) && isFinite(val)) {
                val = Number(val);

                if(val > max) {
                    this.fieldError = true;
                    this.fieldErrorMsg = `当前值超出范围${min} ~ ${max}`;
                    return;
                }
                if(val < min) {
                    this.fieldError = true;
                    this.fieldErrorMsg = `当前值超出范围${min} ~ ${max}`;
                    return;
                }
            } else {
                //如果输入的不是数字，将输入的内容重置为之前的currentValue
                this.currentValue = this.value;
                this.fieldError = true;
                this.fieldErrorMsg = `输入的不是数字,请检查`;
                return;
            }

            this._cacheSet(this.currentValue);

            this.$emit("confirm",this.currentValue);

            this.close();
        },
        /** LRU */
        _cacheGet(key) {
            let index = this.searchHistory.findIndex((item) => item === key);
            if (index === -1) {
                return -1;
            }
            // 删除此元素后插入到数组第一项
            let value = this.searchHistory[index];
            this.searchHistory.splice(index, 1);
            this.searchHistory.unshift(value);
            return value;
        },
        _cacheSet(value) {
            let history = this.habit[this.sign] || [];
            let index = history.findIndex((item) => item == value);
            // 想要插入的数据已经存在了，那么直接提升它就可以
            if (index > -1) {
                history.splice(index, 1);
            } else if (history.length >= this.capacity) {
                // 若已经到达最大限制，先淘汰一个最久没有使用的
                history.pop();
            }
            history.unshift(value);

            this.habit[this.sign] = history;
            /** 防止异常退出，导致没清除信息 */
            $lj.setStorage(this.habitKey, this.habit);
        }
    },
    watch: {
        sign(newV,oldV) {
            this.searchHistory = this.habit[newV] || [];
        }
    }
}
</script>
<style lang='less' scoped>
.info-edit-wrapper-popup {
    width: 90%;
    border-radius: 16px;
    background-color: #fff;
}
.info-edit-wrapper {
    transition: all cubic-bezier(0.77, 0, 0.18, 1) 0.4s;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    transform-origin: bottom center;
    background-color: @light-barkground-primary;

    padding-top: 16px;

    .wrapper-header {
        .wrapper-header-title {
            text-align: center;

            font-size: 16px;
        }
    }

    .wrapper-content {
        padding: 0 16px;
        margin: 10px 0 0 0;

        .field-input {
            width: 100%;
            border: 2px solid #000;
            border-radius: 16px;
            height: 18vw;
            line-height: 18vw;

            font-size: 32px;
            text-align: center;
        }

        .error-msg {
            margin-top: 3px;
            color: @colorSharpTextRed;
            font-size: 16px;

            &::before {
                content: "*";
            }
        }

        .input-history {
            padding-top: 3px;

            .history-title {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .iconfont {
                    font-size: 16px;
                }
            }

            .history-content {
                margin-top: 3px;

                .lj-tag {
                    margin-right: 3px;
                }
            }
        }
    }

    .wrapper-footer {
        padding-top: 3px;

        .input-button {
            width: 100%;
            display: flex;
        }
    }
}
</style>
