<!-- L1部件配置组件v0.0.2 -->
<template>
    <van-popup
        v-model="visiblePopup"
        position="bottom"
        :style="{ height: '80%' }"
        get-container="body"
        class="lj-mtrlconfig-popup"
        @closed="handleCloseWidget"
    >
        <div class="popup_body">
            <header class="popup-header">
                <slot name="material" :targetname="targetName" :targetcode="targetCode">
                    <van-cell
                        class="material-cell lj-cell-left"
                        :title="targetCode"
                        :label="targetName"
                    >
                        <template #icon>
                            <i class="iconfont icon-huowu"></i>
                        </template>
                        <template #default>
                            <div class="title" v-if="title != ''">{{ title }}</div>
                        </template>
                    </van-cell>
                </slot>
                <i class="close-btn iconfont icon-close" @click="close"></i>
            </header>
            <main class="popup-main">
                <div class="config-list"
                    v-for="(items, index) in configList"
                    :key="index"
                >
                    <template v-if="items.inputtype == 0">
                        <div class="mtrl-config-item">
                            <div class="title">
                                {{ items[datatype.label] }}
                                <span v-if="items.ifcheck" class="ifcheck">*</span>
                            </div>
                            <ul
                                class="config-ul"
                                :class="items[datatype.value] != '' ? 'checked' : ''"
                            >
                                <li 
                                    v-for="(item, idx) in items.child"
                                    :key="idx"
                                    class="config-li"
                                    :class="items[datatype.value] == item[datatype.value] ? 'checked' : ''"
                                    @click="handleSelConfig(index, idx, items.ifcheck)"
                                >
                                    {{ item[datatype.value] }}
                                </li>
                            </ul>
                        </div>
                    </template>
                    <template v-else-if="items.inputtype == 1 && Number(items.ifnum) == 1">
                        <van-cell
                            class="config-stepper"
                        >
                            <template #title>
                                {{ items[datatype.label] }}
                                <span v-if="items.ifcheck" class="ifcheck">*</span>
                            </template>
                            <template #default>
                                 <van-stepper
                                    v-model="items[datatype.value]"
                                    :decimal-length="items.decnum"
                                    :min="cp_stepperMin(items)"
                                    :max="cp_stepperMax(items)"
                                    input-width="50px"
                                 ></van-stepper>   
                            </template>
                        </van-cell>
                    </template>
                    <template v-else-if="items.inputtype == 1 && Number(items.ifnum) == 0">
                        <van-field
                            v-model="items[datatype.value]"
                            input-align="right"
                        >
                            <template #label>
                                {{ items[datatype.label] }}
                                <span v-if="items.ifcheck" class="ifcheck">*</span>
                            </template>
                        </van-field>
                    </template>
                </div>
            </main>
            <footer class="popup-footer">
                <div class="confirm-btn" @click="handleConfirm">确定</div>
            </footer>
        </div>
    </van-popup>
</template>

<script>

export default {
    name:"lj-mtrl-config",
    data() {
        return {
            visiblePopup: false,
            configList: [], // 配置列表
        }
    },
    props: {
        title: {
            type: String,
            default: ""
        },
        targetName: {
            type: String,
            default: ""
        },
        targetCode: {
            type: String,
            default: ""
        },
        configStr: {
            type: String,
            default: ""
        },
        apiName: {
            type: String,
            default: "GetL1APPMtrlConfig"
        },
        /**属性名 */
        datatype: {
            type: Object,
            default: function () {
                return {
                    id: "pzid",
                    label: "name",
                    value: "namemx",
                };
            }
        },
        onSetDefault: {
            type: Function,
            default: null
        }
    },
    computed: {
        cp_stepperMax(items) {
            return function(items) {
                return items.maxnum < items.minnum || items.maxnum <= 0 ? undefined : items.maxnum;
            }
        },
        cp_stepperMin(items) {
            return function(items) {
                return items.maxnum < items.minnum && items.maxnum > 0 ? undefined : items.minnum;
            }
        }
    },
    methods: {
        /**开启组件 */
        open(code, codemx) {
            this.visiblePopup = true;
            let code_list = JSON.parse(JSON.stringify(code));
            let code_mx_list = JSON.parse(JSON.stringify(codemx));

            for (let i = 0; i < code_list.length; i++) {
                let idx_arr = [];
                for (let j = 0; j < code_mx_list.length; j++) {
                    if (code_mx_list[j][this.datatype.id] == code_list[i][this.datatype.id] ) {
                        idx_arr.push(j);
                    }
                }
                if (idx_arr.length > 0) {
                    if (!code_list[i].hasOwnProperty("child") ) {
                        code_list[i].child = [];
                    }
                    for (let k = 0; k < idx_arr.length; k++) {
                        code_list[i].child.push(code_mx_list[idx_arr[k]]);
                    }
                    for (let k = 0; k < idx_arr.length; k++) {
                        code_mx_list.splice(idx_arr[k], 1);
                    }
                }
                if (this.onSetDefault) {
                    code_list[i][this.datatype.value] = this.onSetDefault(code_list[i]);
                } else {
                    if (
                            // 单选必填默认选择第一个值
                            code_list[i][this.datatype.value] == "" && 
                            code_list[i].ifcheck && 
                            code_list[i].inputtype == 0 &&
                            code_list[i].hasOwnProperty("child") && 
                            code_list[i].child.length > 0
                        ) {
                        code_list[i][this.datatype.value] = code_list[i].child[0][this.datatype.value];
                    } else if (code_list[i].inputtype == 1 && code_list[i].ifnum) {
                        // 赋值数值必填时，默认0&&大于最小值
                        code_list[i][this.datatype.value] = code_list[i].minnum > 0 ? code_list[i].minnum : 0;
                    }
                }
            }
            console.log("数据处理后==》", JSON.stringify(code_list));
            this.configList = code_list;
            this._autoGetSeled();
        },
        /**赋值已选信息 */
        _autoGetSeled() {
            console.log("this.configStr==>", JSON.stringify(this.configStr))
            if (this.configStr == "") return false;
            let saved = this.configStr.substring(1, this.configStr.length - 1);
            saved = saved.split("|");

            let saveArr = [];
            for (let i = 0; i < saved.length; i++) {
                let obj = {};
                let saveItem = saved[i].split(":");
                obj.label = saveItem[0];
                obj.value = saveItem[1];
                saveArr.push(obj);
            }
            for (let i = 0; i < saveArr.length; i++) {
                for (let j = 0; j < this.configList.length; j++) {
                    if (saveArr[i].label == this.configList[j][this.datatype.label]) {
                        this.configList[j][this.datatype.value] = saveArr[i].value;
                        break;
                    }
                }
            }
        },
        close() {
            this.visiblePopup = false;
        },
        handleCloseWidget() {
            this.$emit("closed");
        },
        /**点击配置项 */
        handleSelConfig(index, idx, ifcheck) {
            if (this.configList[index][this.datatype.value] == this.configList[index].child[idx][this.datatype.value]) {
                if (ifcheck) {
                    return false;
                }
                this.configList[index][this.datatype.value] = "";
            } else {
                this.configList[index][this.datatype.value] = this.configList[index].child[idx][this.datatype.value];
            }
        },
        // handleConfigChange(index, value) {
        //     this.configList[index][this.datatype.value] = value;
        // },
        /**确定保持 */
        handleConfirm() {
            let selArr = [];
            for (let i = 0; i < this.configList.length; i++) {
                if (this.configList[i][this.datatype.value] != "" || this.configList[i][this.datatype.value] != 0) {
                    let str = `${this.configList[i][this.datatype.label]}:${this.configList[i][this.datatype.value]}` 
                    selArr.push(str);
                }
            }
            selArr = "|" + selArr.join("|") + "|";
            console.log("configList==>", JSON.stringify(this.configList));
            console.log("selArr==>", selArr);
            this.$emit("confirm", selArr);
            this.visiblePopup = false
        }
    }
}
</script>

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

.lj-mtrlconfig-popup {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;

    .popup_body {
        background-color: #ffffff;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
        
    }
    .popup-header {
        flex-shrink: 0;
        position: relative;
        display: flex;
        padding: 5px 10px;

        &::after{
            content: "";
            position: absolute;
            bottom: 0;
            left: 10px;
            right: 10px;
            border-bottom: 1px solid #ddd;
        }
        .material-cell {
            padding: 5px;
            border-radius: 8px;
            
            .title {
                display: flex;
                height: 100%;
                align-items: flex-end;
                color: #222;
            }
            &::after{
                content: none;
            }
            .iconfont {
                padding-right: 5px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .close-btn {
            position: absolute;
            right: 10px;
            top: 3px;
            bottom: 0;
            margin: auto;
        }
        // 处理van-cell左侧条码内容超出
        .lj-cell-left {
            .van-cell__title {
                flex: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .van-cell__value {
                flex: none;
                flex-shrink: 0;
                max-width: 80%;

                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .van-cell__label {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
    .popup-main {
        position: relative;
        flex: 1;
        overflow: auto;
        padding-bottom: 52px;

        .van-field, .van-cell {
            padding: 5px 0;
            color: #222!important;

            span.ifcheck {
                color: @museError!important;
            }
        }
        .config-list {
            margin: 0 10px;
            padding: 5px 0;
            border-bottom: 1px solid #f2f2f2;

            .title {
                margin-bottom: 5px;
                padding: 5px 0;
                color: #222;
                font-size: 14px;

                span {
                    color: @museError!important;
                }
            }
            .config-ul {
                display: table;

                .config-li {
                    margin-right: 10px;
                    margin-bottom: 10px;
                    padding: 3px 8px;
                    display: inline-block;
                    border-radius: 4px;
                    background-color: #f6f6f6;
                    color: #444;
                }
                &.checked {
                    .config-li {
                        color: #999;

                        &.checked {
                            background-color: @museSecondary;
                            color: @musePrimary;
                        }
                    }
                }
            }
        }
    }
    .popup-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;

        .confirm-btn {
            margin: 10px;
            margin-top: 0;
            border-radius: 18px;
            height: 36px;
            line-height: 36px;
            background-color: @musePrimary;
            color: #fff;
            text-align: center;
            font-size: 14px;
        }
    }
}
</style>