<!-- 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>
                            <div class="icon-box">
                                <i class="iconfont icon-huowu"></i>
                            </div>
                        </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">
                <template>
                    <div class="product-configuration">
                        <van-cell-group :border="false" title="配置">
                            <configure-select v-model="status" :flag="mtrlInfo.statusflag" :option="mtrlInfo.statusop" v-if="mtrlInfo.statusflag" @input="inputStatus"  />
                            <configure-select v-model="woodcode" :flag="mtrlInfo.woodcodeflag" :option="mtrlInfo.woodcodeop" v-if="mtrlInfo.woodcodeflag" @input="inputWoodcode"  />
                            <configure-select v-model="pcode" :flag="mtrlInfo.pcodeflag" :option="mtrlInfo.pcodeop" @input="inputPcode"  />
                        </van-cell-group>
                    </div>
                </template>
                <div class="product-configuration">
                    <van-cell-group :border="false" title="价格信息">
                        <van-field
                            v-model="enprice"
                            class="lj-cell-left"
                            placeholder="请输入产品单价"
                            input-align="right"
                            type="number"
                            @focus="handleInputFocus($event)"
                            @input="handleInputPrice"
                        >
                            <template #label>
                                <div class="flex">
                                    <span>价格</span>
                                    <template v-if="taxrateCheckbox">
                                        <van-checkbox
                                            v-model="taxPriceCheckbox"
                                            class="field-checkbox"
                                            @change="handleInputPrice"
                                        >(含税)</van-checkbox>
                                    </template>
                                </div>
                            </template>
                        </van-field>
                        <van-cell
                            :title="unitList.length > 1 ? '销售数量和单位' : '销售数量'"
                        >
                            <template #default>
                                <div class="flex" style="justify-content: flex-end;">
                                    <van-stepper v-model="saleqty" :min="0" @focus="handleInputFocus($event)" />
                                    <div class="unit-wrap" :class="{'sel_abled': unitList.length > 1}" @click="handleShowActionUnit">
                                        {{ unit }}
                                    </div>
                                </div>
                            </template>
                        </van-cell>
                        <van-field
                            v-model="discount"
                            ref="discountField"
                            class="lj-cell-left"
                            :placeholder="discountCheckbox ? '可选，输入0.8表示打8折' : ''"
                            input-align="right"
                            type="number"
                            :disabled="!discountCheckbox"
                            @focus="handleInputFocus($event)"
                            @click="handleClickDiscountSwitch"
                            @input="handleInputPrice"
                        >
                            <template #label>
                                <div class="field-label">
                                    <span v-show="!discountCheckbox">
                                        优惠折扣
                                    </span>
                                    <van-checkbox
                                        v-show="discountCheckbox"
                                        v-model="discountCheckbox"
                                        style="display: inline-flex"
                                        @click="handleChangeDiscountCheckbox"
                                    >优惠折扣</van-checkbox>
                                    <template v-for="(item) in discountTags">
                                        <lj-tag-double
                                            v-if="item"
                                            :key="item"
                                            :value="item | ellipsis(5)"
                                            :type="discount ? 'default' : 'primary'"
                                            plain
                                            @tagclick="handleTagsSetValue('discount', item)"
                                        >
                                        </lj-tag-double>
                                    </template>
                                    <!-- <span class="subtitle" v-if="discountPrice">小计{{ discountPrice }}</span> -->
                                </div>
                            </template>
                            <template #extra>
                                <van-switch
                                    v-if="!discountCheckbox"
                                    v-model="discountCheckbox"
                                    size="20px"
                                />
                            </template>
                        </van-field>
                        <van-field
                            v-model="taxrate"
                            ref="taxrateField"
                            class="lj-cell-left"
                            :placeholder="taxrateCheckbox ? '可选，输入税点(0至1)' : ''"
                            input-align="right"
                            type="number"
                            :disabled="!taxrateCheckbox"
                            @focus="handleInputFocus($event)"
                            @click="handleClickTaxrateSwitch"
                            @input="handleInputPrice"
                        >
                            <template #label>
                                <div class="field-label">
                                    <span v-show="!taxrateCheckbox">
                                        税率
                                    </span>
                                    <van-checkbox
                                        v-show="taxrateCheckbox"
                                        v-model="taxrateCheckbox"
                                        style="display: inline-flex"
                                        @click="handleChangeRaxrateCheckbox"
                                    >税率</van-checkbox>
                                    <template v-for="(item) in taxrateTags">
                                        <lj-tag-double
                                            v-if="item"
                                            :key="item"
                                            :value="item | ellipsis(5)"
                                            :type="taxrate ? 'default' : 'primary'"
                                            plain
                                            @tagclick="handleTagsSetValue('taxrate', item)"
                                        >
                                        </lj-tag-double>
                                    </template>
                                </div>
                                <!-- <span class="subtitle" v-if="taxPrice">小计{{ taxPrice }}</span> -->
                            </template>
                            <template #extra>
                                <van-switch
                                    v-show="!taxrateCheckbox"
                                    v-model="taxrateCheckbox"
                                    size="20px"
                                    @change="handleInputPrice"
                                />
                            </template>
                        </van-field>
                    </van-cell-group>
                </div>
                <div class="product-configuration">
                    <van-cell-group title="其他信息">
                        <van-field class="lj-cell-left" v-model="mxdscrp" rows="1" autosize label="明细备注" type="textarea" placeholder="可输入明细备注" input-align="right"/>
                        <van-field class="lj-cell-left" v-model="requiredate" is-link readonly label="交货时间" placeholder="点击选择时间" @click="showRqDate = true" input-align="right"/>
                    </van-cell-group>
                </div>

                <van-action-sheet
                    v-model="showActionUnit"
                    description="选择销售单位"
                    :actions="unitList"
                    @select="handleSelectActionUnit"
                    cancel-text="取消"
                    close-on-click-action
                />
                <van-calendar
                    v-model="showRqDate"
                    title="交货日期选择"
                    :show-confirm="false"
                    :min-date="new Date(new Date().setMonth(new Date().getMonth() - 6))"
                    get-container="body"
                    @confirm="handleRqDatePickerConfirm"
                    @close="showRqDate = false"
                />


            </main>
            <footer class="popup-footer">
                <div class="total flex-1 flex-column">
                    <div class="price">
                        <!-- <template v-if="saleqty <= 1"> -->
                            单价:
                            <span class="num">
                                ￥
                                <span class="p">{{ unitPrice | moneyFilter }}</span>
                            </span>
                        <!-- </template>
                        <template v-else>
                            共计:
                            <span class="num">
                                ￥
                                <span class="p">{{ sumprice }}</span>
                            </span>
                        </template> -->
                    </div>
                    <div class="other">
                        <div v-if="discountPrice">
                            <span class="subtitle" v-if="discountPrice">优惠{{ discountPrice | moneyFilter }}元</span>
                            <!-- <span class="subtitle" v-if="taxPrice">税点{{ taxPrice }}元</span>
                            <template v-if="discountPrice && taxPrice">，</template> -->
                            <!-- 原价
                            <del class="del-price">¥
                                {{ originalPrice }}
                            </del> -->
                        </div>
                    </div>
                </div>
                <van-button class="confirm-btn" round block @click="handleConfirm">
                    {{ confirmText }}
                </van-button>
            </footer>
        </div>
    </van-popup>
</template>

<script>
import LjTagDouble from 'components/lj-tag-double';
import ConfigureSelect from "../product-shopping/configure-select-pro";

export default {
    name:"lj-mtrl-config",
    components: {
        LjTagDouble,
        ConfigureSelect
    },
    data() {
        return {
            visiblePopup: false,
            // configList: [], // 配置列表
            showActionUnit: false, // 单位列表：底部弹起的模态面板
            taxrateCheckbox: false, // 复选框，是否使用税率
            discountCheckbox: false, // 复选框，是否使用优惠
            taxPriceCheckbox: false, // 复选框，原价输入是否含税
            originalPrice: 0, // 底部，原价
            unitPrice: 0, // 底部，单价
            taxPrice: 0, // 底部，税价
            discountPrice: 0, // 底部，共优惠
            taxrateTags: [], // 快捷标签：税率
            discountTags: [], // 快捷标签：折扣
            tagsSize: 2, // 快捷标签, 储存长度
            habitKey: "productInfoEditHabit",
            unit: '',
            unitList: [],

            status: "",
            woodcode: "",
            pcode: "",
            defaultUnitIndex: 0,
            mxdscrp: '',
            requiredate: '',
            // showunit: false,
            showRqDate: false,
            enprice: 0,
            rprice: 0,
            taxrate: '',
            discount: '',
            saleqty: 1,
            currentDate: new Date(),
            mtrlInfo: {},
        }
    },
    props: {
        title: {
            type: String,
            default: ""
        },
        targetName: {
            type: String,
            default: ""
        },
        targetCode: {
            type: String,
            default: ""
        },
        confirmText: {
            type: String,
            default: "加入订单"
        },
        cusid: Number,
        moneyid: Number,
        typeid: Number
    },
    filters: {
        ellipsis(value, length) {
            if (!value) return "";
            if (value.toString().length > length) {
                return value.toString().slice(0, length) + "...";
            }
            return value;
        },
    },
    methods: {
        /**修改时：设置价格办税环境 */
        fnSetTaxPrice() {
            if (this.taxrate) {
                this.taxrateCheckbox = true;
            }
            this.taxPriceCheckbox = true
        },
        fnGetCache() {
            let habit = $lj.getStorage(this.habitKey) || {};
            if (habit.hasOwnProperty('taxrate')) {
                this.taxrateTags = habit.taxrate || []
            }
            if (habit.hasOwnProperty('discount')) {
                this.discountTags = habit.discount || []
            }
        },
        fnSetCache() {
            let habit = $lj.getStorage(this.habitKey) || {};
            if (this.discount) {
                let index = this.discountTags.findIndex((item) => item == this.discount);
                // 想要插入的数据已经存在了，那么直接提升它就可以
                if (index > -1) {
                    this.discountTags.splice(index, 1);
                }
                this.discountTags.unshift(this.discount);
                this.discountTags.length = this.tagsSize;
                habit.discount = this.discountTags;
            }
            if (this.taxrate) {
                let index = this.taxrateTags.findIndex((item) => item == this.taxrate);
                // 想要插入的数据已经存在了，那么直接提升它就可以
                if (index > -1) {
                    this.taxrateTags.splice(index, 1);
                }
                this.taxrateTags.unshift(this.taxrate);
                this.taxrateTags.length = this.tagsSize;
                habit.taxrate = this.taxrateTags;
            }

            $lj.setStorage(this.habitKey, habit);
        },
        /**事件：点击快捷标签设置属性 */
        handleTagsSetValue(tag, val) {
            if (tag == 'discount') {
                this.discount = val;
                this.discountCheckbox = true;
            } else if (tag == 'taxrate') {
                this.taxrate = val;
                this.taxrateCheckbox = true;
            }
            this.fnCalculatePrice();
        },
        /** 原价：输入监听 */
        handleInputPrice(val) {
            console.log('handleInputPrice val :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(val));
            this.fnCalculatePrice()
        },
        /** 方法：计算价格 */
        fnCalculatePrice() {
            let oPrice = this.enprice; // 除税率后原价
            let discount = this.discount && Number(this.discount) > 0 ? Number(this.discount) : 1;
            let disPrice = ($lj.floatMul(oPrice , discount)*100/100).toFixed(2); // 优惠价
            if (this.taxrateCheckbox && this.taxrate) {
                if (this.taxPriceCheckbox) {
                    // oPrice = $lj.floatDiv(this.enprice , (1 + Number(this.taxrate))); // 除税率后原价
                    this.taxPrice = Number($lj.floatSub(this.enprice, oPrice)); // 共税
                } else {
                    this.taxPrice = ($lj.floatMulMore([oPrice, this.taxrate, discount])*100/100).toFixed(2); // 共税
                }
            } else {
                this.taxPrice = 0;
            }
            this.discountPrice = Number($lj.floatSub(oPrice , disPrice)); // 共优惠

            console.log(' oPrice :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(oPrice));
            this.unitPrice = $lj.floatAdd(disPrice , this.taxPrice);
            console.log("unitPrice>>>",this.unitPrice)
            this.originalPrice = discount == 1 ? 0 : this.enprice;
        },
        handleClickTaxrateSwitch() {
            if (this.taxrateCheckbox) {
                this.$refs.taxrateField.focus();
            }
        },
        handleClickDiscountSwitch() {
            if (this.discountCheckbox) {
                this.$refs.discountField.focus();
            }
        },
        handleInputFocus(ev) {
            ev.currentTarget.select();
        },
        /**点击事件：税率开启与关闭 */
        handleChangeRaxrateCheckbox() {
            console.log(' handleChangeRaxrateCheckbox :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.taxrateCheckbox));
            if (!this.taxrateCheckbox) {
                this.taxrate = '';
            }
            this.fnCalculatePrice()
        },
        /**点击事件：优惠折扣开启与关闭 */
        handleChangeDiscountCheckbox() {
            if (!this.discountCheckbox) {
                this.discount = '';
            }
            this.fnCalculatePrice()
        },
        initDiscount(mainObject) {
            // 赋值原价
            this.enprice = mainObject.price || mainObject.enprice || 0;
            // 赋值单位
            this.unit = mainObject.unit;
            this.saleqty = mainObject.saleqty || 1;
            if (Number(mainObject.rebate) != 1) {
                this.discountCheckbox = true;
                // 赋值折扣
                this.discount = mainObject.rebate;
            }
            console.log(' mainObject.taxrate :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(mainObject.taxrate));
            if (Number(mainObject.taxrate) != 0) {
                this.taxrateCheckbox = true;
                // 赋值税率
                this.taxrate = mainObject.taxrate;
            }
            // 赋值交货日期
            this.requiredate = mainObject.requiredate || '';

            // this.rprice = this.handleCalcRPrice(0);
            this.mxdscrp = mainObject.mxdscrp;

            this.fnCalculatePrice();
        },
        inputStatus(value) {
            this.status = value;
            this.inputConfigure();
        },
        inputWoodcode(value) {
            this.woodcode = value;
            this.inputConfigure();
        },
        inputPcode(value) {
            this.pcode = value
            this.inputConfigure();
        },
        /** 获取物料库存 */
        inputConfigure() {
            let self = this;
            let priceTemp = {};
            priceTemp.cusid = this.cusid;
            priceTemp.moneyid = this.moneyid;
            priceTemp.status = this.status;
            priceTemp.woodcode = this.woodcode;
            priceTemp.pcode = this.pcode;
            priceTemp.mtrlid = this.mtrlInfo.mtrlid;
            priceTemp.qty = this.saleqty;
            priceTemp.unit = this.unit;
            priceTemp.typeid = this.typeid;
            priceTemp.tax = Number(this.taxrate);
            $lj.postLJRequest("GetPriceSaletask", {
                token: $lj.getStorage("token"),
                Price: priceTemp
            }, function (ret) {
                if (ret.price) {
                    self.enprice = ret.price;
                    self.discount = ret.rebate;
                    self.taxrate = ret.tax;
                // } else {
                //     self.enprice = 0;
                };
            })
        },
        /**事件：选择多单位 */
        handleSelectActionUnit(action, index) {
            this.unit = action.name;
            this.showActionUnit = false;
            this.inputConfigure();
        },
        /**唤醒弹窗：选择多单位 */
        handleShowActionUnit() {
            if (this.unitList.length <= 1) {
                return false;
            }
            this.showActionUnit = true
        },
        handleModifyDefaultValue(value,codeop,flag){
            if(flag == 4 || flag == 5){
                var valueList = [];
                if (value) {
                    var splitList = value.split("|");
                    for (let i = 0; i < splitList.length; i++) {
                        var LV = splitList[i].split(":")
                        if (LV[0] != "") {
                            var S = {
                                lable: LV[0],
                                value: LV[1]
                            }
                            valueList.push(S)
                        }
                    }
                }
                for (let j = 0; j < valueList.length; j++) {
                    for (let k = 0; k < codeop.mtrlcfgcodes.length; k++) {
                        if (valueList[j].lable === codeop.mtrlcfgcodes[k].name) {
                            for (let l = 0; l < codeop.mtrlcfgcodes[k].opstrings.length; l++) {
                                if (codeop.mtrlcfgcodes[k].opstrings[l].valuestr === valueList[j].value) {
                                    codeop.mtrlcfgcodes[k].opstrings[l].choice = 1;
                                } else {
                                    codeop.mtrlcfgcodes[k].opstrings[l].choice = 0;
                                }
                            }
                        }
                    }
                }

                this.handleRefreshMtrlcfgcodes(flag,codeop);
            }else if(flag == 2){
                // 组合配置
                var valueList = [];
                if (value) {
                    var splitList = value.split("+");
                    for (let i = 0; i < splitList.length; i++) {
                        var LV = splitList[i].split("*")
                        if (LV[0] != "") {
                            var S = {
                                lable: LV[0],
                                value: LV[1] || 1
                            }
                            valueList.push(S)
                        }
                    }
                }
                for (let j = 0; j < valueList.length; j++) {
                    for (let k = 0; k < codeop.mtrlcfgs.length; k++) {
                        this.$set(codeop.mtrlcfgs[k],'checked',false);
                        if (valueList[j].lable === codeop.mtrlcfgs[k].name) {
                            codeop.mtrlcfgs[k].choice = 1;
                            codeop.mtrlcfgs[k].cnt = valueList[j].value;
                        }
                    }
                }
            }else if(flag == 1){
                // 严格选择
                for (let m = 0; m < codeop.opstrings.length; m++) {
                    if (value === codeop.opstrings[m].valuestr) {
                        codeop.opstrings[m].choice = 1;
                    } else {
                        codeop.opstrings[m].choice = 0;
                    }
                }
            }
        },
        GetMtrlInfo(callback) {
            $lj.postLJRequest("GetMtrlInfo", {
                token: $lj.getStorage("token"),
                mtrlcode: this.targetCode
            }, function (ret) {
                callback && callback(ret);
            })
        },
        /**添加单位列表 */
        fnAddUnitList(unit){
            if(unit) {
                this.unitList.push({name: unit})
            }
        },
        handleRqDatePickerConfirm(value) {
            this.requiredate = $lj.dateformat(value,'yyyy-MM-dd');
            this.showRqDate = false;
        },
        handleCalcRPrice(type) {
            if(type == 1) {
                // 计算原价
                return $lj.numberFormat(parseFloat(this.rprice) * (1 + parseFloat(this.taxrate)) / parseFloat(this.discount),5);
            }
            return $lj.numberFormat(parseFloat(this.enprice) * parseFloat(this.discount) / (1 + parseFloat(this.taxrate)),5);
        },
        /**开启组件 */
        open(item) {
            console.log(' item :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(item));
            this.visiblePopup = true;
            this.GetMtrlInfo((ret) => {
                let tagItem = this.deepCopy(item);
                tagItem.statusop = ret.mainInfo.statusop
                tagItem.woodcodeop = ret.mainInfo.woodcodeop
                tagItem.pcodeop = ret.mainInfo.pcodeop
                if (ret.mainInfo.price) {
                    tagItem.enprice = ret.mainInfo.price
                }
                
                this.mtrlInfo = tagItem;

                if (this.mtrlInfo.statusop) {
                    this.handleModifyDefaultValue(this.status,this.mtrlInfo.statusop,this.mtrlInfo.statusflag);
                }
                if (this.mtrlInfo.woodcodeop) {
                    this.handleModifyDefaultValue(this.woodcode,this.mtrlInfo.woodcodeop,this.mtrlInfo.woodcodeflag);
                }
                if (this.mtrlInfo.pcodeop) {
                    this.handleModifyDefaultValue(this.pcode,this.mtrlInfo.pcodeop,this.mtrlInfo.pcodeflag);
                }
                
                this.fnAddUnitList(ret.mainInfo.unit);
                this.fnAddUnitList(ret.mainInfo.unit_buy);
                this.fnAddUnitList(ret.mainInfo.unit_sale);
                this.fnAddUnitList(ret.mainInfo.unit_scll);
                this.initDiscount(this.mtrlInfo);
                this.fnGetCache();
            });
        },
        close() {
            this.visiblePopup = false;
        },
        handleCloseWidget() {
            this.enprice = 0;
            this.saleqty = 1;
            this.taxrate = '';
            this.discount = '';
            this.originalPrice = 0; // 底部，原价
            this.unitPrice = 0; // 底部，单价
            this.taxPrice = 0; // 底部，税价
            this.discountPrice = 0; // 底部，共优惠
            this.discountCheckbox = false;
            this.taxrateCheckbox = false;
            this.unitList = [];
            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);
            console.log('handleConfirm this.mtrlInfo :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(this.mtrlInfo));
            let addItem = {
                mtrlid: this.mtrlInfo.mtrlid,
                mtrlcode: this.mtrlInfo.mtrlcode,
                mtrlname: this.mtrlInfo.mtrlname,
                statusflag: this.mtrlInfo.statusflag,
                woodcodeflag: this.mtrlInfo.woodcodeflag,
                pcodeflag: this.mtrlInfo.pcodeflag,
                status: this.status,
                woodcode: this.woodcode,
                pcode:this.pcode,
                saleqty: this.saleqty,
                taxrate: this.taxrate,
                unit: this.unit,
                rebate: this.mtrlInfo.rebate,
                mxdscrp: this.mxdscrp,
                requiredate: this.requiredate,
            };

            let discount = this.discount;
            if (Number(this.discount) == 0) {
                discount = 1;
            }
            // 赋值折扣
            addItem.rebate = Number(discount);

            let taxrate = this.taxrate;
            if (Number(this.taxrate) == 0) {
                taxrate = 0;
            }
            // 赋值税率
            addItem.taxrate = Number(taxrate);

            let oPrice = this.enprice;
            let disPrice = ($lj.floatMul(oPrice , discount)*100/100).toFixed(2); // 优惠价
            let taxPrice = 0;
            if (this.taxrateCheckbox && taxrate) {
                if (this.taxPriceCheckbox) {
                    // oPrice = $lj.floatDiv(this.enprice , (1 + Number(this.taxrate))); // 除税率后原价
                    taxPrice = Number($lj.floatSub(oPrice, oPrice)); // 共税
                } else {
                    taxPrice = ($lj.floatMulMore([oPrice, taxrate])*100/100).toFixed(2); // 共税
                }
            } else {
                taxPrice = 0;
            }

            addItem.enprice = $lj.floatAdd(oPrice, taxPrice);

            // 检查配置是否必填
            if (this.mtrlInfo.status_check == 1 && addItem.status == '')
            {
                this.$toast.fail("请先填写配置内容");
                return false;
            }

            if (this.mtrlInfo.woodcode_check == 1 && addItem.woodcode == '')
            {
                this.$toast.fail("请先填写配置1内容");
                return false;
            }

            if (this.mtrlInfo.pcode_check == 1 && addItem.pcode == '')
            {
                this.$toast.fail("请先填写配置2内容");
                return false;
            }
            console.log('handleConfirm addItem :>>>>>>>>>>>>>>>>>>>>>', JSON.stringify(addItem));
            this.$emit("confirm", addItem);
            this.visiblePopup = false
            this.fnSetCache();
        },
        deepCopy(value) {
            if(value instanceof Function) return value
            else if (value instanceof Array) {
                var newValue = []
                for (let i = 0; i < value.length; ++i) newValue[i] = this.deepCopy(value[i])
                return newValue
            } else if (value instanceof Object) {
                var newValue = {}
                for (let i in value) newValue[i] = this.deepCopy(value[i])
                return newValue
            } else return value
        },
        handleRefreshMtrlcfgcodes(flag,option) {
            if (flag !== 4 && flag !== 5) {
                return;
            }
            if (option.mtrlcfgcodes) {
                for (let cfgcode of option.mtrlcfgcodes) {
                    this.$set(cfgcode,"displayValue","");
                    cfgcode.displayMd5 = "";
                    for (let opstring of cfgcode.opstrings) {
                        if (opstring.choice != undefined) {
                            if (opstring.choice == 1) {
                                cfgcode.displayMd5 = "";
                                if (opstring.picMD5) {
                                    cfgcode.displayMd5 = opstring.picMD5;
                                } else {
                                    opstring.picMD5 = "";
                                    cfgcode.displayMd5 = "";
                                }
                                this.$set(cfgcode,"displayValue",opstring.valuestr);
                                break;
                            }
                        } else {
                            if (opstring.ifdft) {
                                cfgcode.displayMd5 = "";
                                if (opstring.picMD5) {
                                    cfgcode.displayMd5 = opstring.picMD5;
                                } else {
                                    opstring.picMD5 = "";
                                    cfgcode.displayMd5 = "";
                                }
                                this.$set(cfgcode,"displayValue",opstring.valuestr);
                                break;
                            }
                        }
                    }
                }
            }
            //重新计算部件选配的必选、可选、可选范围
            let ruleDic = {};
            if (flag === 4 && option.mtrlcfgcoderules) {
                for (let rule of option.mtrlcfgcoderules) {
                    ruleDic[rule.ruleKey] = rule.ruleValues;
                }
            }
            let codeDic = {};
            for (let codeItem of option.mtrlcfgcodes) {
                codeDic[codeItem.name] = codeItem;
            }
            let newValue = "";
            for (let codeItem of option.mtrlcfgcodes) {
                if (flag === 4 && codeItem.ifcheck === 1) {
                    codeItem.displayIfCheck = true;
                }
                let displayOptions = codeItem.opstrings;
                // 上级配置限制
                if (codeItem.parentCfg) {
                    let parentDone = true;
                    for (let parentName of codeItem.parentCfg) {
                        if (!parentName) {
                            continue;
                        }
                        let parentItem = codeDic[parentName];
                        if (parentItem) {
                            if (parentItem.displayValue) {
                                // 过滤可选项
                                let ruleKey = parentItem.name + ":" + parentItem.displayValue + ":" + codeItem.name;
                                if (ruleDic[ruleKey]) {
                                    let ruleValueSet = {};
                                    for (let rulevalue of ruleDic[ruleKey]) {
                                        ruleValueSet[rulevalue] = true;
                                    }
                                    let filtedOptions = [];
                                    for (let opstring of displayOptions) {
                                        if (ruleValueSet[opstring.valuestr]) {
                                            filtedOptions.push(opstring);
                                        }
                                    }
                                    displayOptions = filtedOptions;

                                    continue;
                                }
                            }
                            parentDone = false;
                        }
                    }
                    codeItem.displayDisabled = !parentDone;
                    if (codeItem.displayDisabled && codeItem.displayValue) {
                        codeItem.displayValue = "";
                    }
                }
                codeItem.displayOptions = displayOptions;
                if (codeItem.displayValue && codeItem.displayOptions) {
                    let match = false;
                    for (let option of codeItem.displayOptions) {
                        if (option.valuestr === codeItem.displayValue) {
                            match = true;
                            break;
                        }
                    }
                    if (!match) {
                        codeItem.displayValue = "";
                    }
                }

                // if (!codeItem.displayDisabled && codeItem.displayValue) {
                //     newValue += codeItem.name + ":" + codeItem.displayValue + "|";
                // }

            }
        },
    }
}
</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: @light-barkground-primary;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
        
    }
    .popup-header {
        flex-shrink: 0;
        position: relative;
        display: flex;
        padding: 5px 10px;
        background-color: @cardItemBackgroundColor;

        &::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;
            }
            .icon-box {
                display: flex;
                justify-content: center;
                align-items: center;
                margin-right: 5px;
                width: 46px;
                height: 46px;
                background-color: @light-barkground-elevated-quarternary;
            }
        }
        .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;
        //                 }
        //             }
        //         }
        //     }
        // }

        .product-configuration {
            // border-radius: 8px;
            // background-color: @cardItemBackgroundColor;
            // overflow: hidden;

            .van-cell-group {
                border-radius: 8px;

                .van-cell {
                    // &:first-child {
                    //     border-radius: 8px 8px 0 0;
                    // }
                    // &:last-child {
                    //     border-radius: 0 0 8px 8px;
                    // }

                    .lj-tag {
                        margin-left: 2px;
                    }
                    &.van-field--disabled {
                        .van-cell__value {
                            display: none;
                        }
                    }
                    // .van-cell__value {
                    //     max-width: 40%;
                    // }
                }
                .van-field__label {
                    width: auto!important;
                }
            }
            .unit-wrap {
                display: flex;
                align-items: center;
                justify-content: center;
                margin: 0;
                padding: 0;
                border-radius: 2px;
                box-sizing: border-box;
                width: 28px;
                height: 28px;
                color: #323233;
                margin-left: 8px;
                &.sel_able {
                    background-color: #f2f3f5;
                }
            }
            .field-checkbox {
                margin-left: 4px;
            }
            .field-label {
                color: @light-label-primary;

                .subtitle {
                    color: @light-label-secondary;
                }
            }
        }
        .product-footer {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            // padding: 5px 10px;
            
            align-items: center;

            .price-sum {
                font-size: 20px;
                font-weight: 500;
                color: @colorSharpTextRed;
                margin: 0 5px;
            }
        }
    }
    .popup-footer {
        // position: absolute;
        // bottom: 0;
        // left: 0;
        // right: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 5px 16px;
        background-color: @cardItemBackgroundColor;

        .confirm-btn {
            width: 40vw;
            // margin: 10px;
            margin-left: 10px;
            border-radius: 18px;
            height: 36px;
            line-height: 36px;
            background-color: @musePrimary;
            color: #fff;
            text-align: center;
            font-size: 14px;
        }
        .total {
            justify-content: flex-end;
            text-align: right;

            del {
                color: @light-label-tertiary;
                line-height: 16px;
            }
            .price {
                display: flex;
                justify-content: flex-end;
                align-items: baseline;
                .num {
                    font-size: 14px;
                    color: @musePrimary;
                }
                .p {
                    font-size: 20px!important;
                    font-weight: 600;
                }
            }
        }
        .other {
            display: flex;
            justify-content: flex-end;
            align-items: flex-end;
            // color: @light-label-tertiary;
            color: @musePrimary;
            // font-size: 12px;
        }
    }
}
</style>