<template>
    <div v-if="flag !== 3">
        <van-cell-group>
            <template v-if="flag === 0">
                <!--自由选择：可选可填-->
                <van-field v-model="currentValue" is-link readonly label="选择" input-align="right" center placeholder="自由选择配置" 
                @click.native="handleCfgcodeClick(option)"/>
                <van-field v-model="currentValue" label="自由填写" input-align="right" placeholder="可填写配置" @input="handleValueChanged" />
            </template>
            <template v-else-if="flag === 1">
                <!--严格选择-->
                <van-field is-link readonly :label="option.typename" placeholder="自由选择配置" required center input-align="right" @click.native="handleCfgcodeClick(option)" v-model="option.displayValue">
                    <template #right-icon>
                        <lj-img :md5="option.displayMd5" style="width:28px;height:28px;" />
                    </template>
                </van-field>
            </template>
            <template v-else-if="flag === 2">
                <!--组合配置-->
                <van-field v-for="(mtrlcfg,index) in option.mtrlcfgs" :key="index" :label="mtrlcfg.name" readonly center input-align="right">
                    <template #left-icon>
                        <van-checkbox v-model="mtrlcfg.checked" @change="handleMtrlcfgChanged(mtrlcfg,0)" />
                    </template>
                    <template #input>
                        <van-stepper v-model="mtrlcfg.cnt" :min="1" @change="handleMtrlcfgChanged(mtrlcfg,1)" input-width="65"/>
                    </template>
                </van-field>
            </template>
            <template v-else-if="flag === 4 || flag === 5">
                <!--部件选配-->
                <van-field v-for="(mtrlcfgcode,index) in option.mtrlcfgcodes" :key="index" is-link readonly input-align="right" :label="mtrlcfgcode.name" v-model="mtrlcfgcode.displayValue" center
                @click.native="handleCfgcodeClick(mtrlcfgcode)" :required="mtrlcfgcode.displayIfCheck">
                    <template #right-icon>
                        <lj-img :md5="mtrlcfgcode.displayMd5" style="width:28px;height:28px;" />
                    </template>
                </van-field>
            </template>
        </van-cell-group>
        <mu-dialog :open="cfgCodeDialogOpen && !disabled" @close="cfgCodeDialogOpen=false" scrollable width="80%">
            <template>
                <van-cell-group :border="false">
                    <van-cell v-for="(opstring,index) in currentCfgCode.opstrings" :key="index" readonly is-link center
                    :title="opstring.valuestr" @click.native="handleCfgValueClick(currentCfgCode,opstring)">
                        <template #icon>
                            <lj-img :md5="opstring.picMD5" style="width:28px;height:28px;align-self:center;" v-if="flag != 0"/>
                        </template>
                    </van-cell>
                </van-cell-group>
            </template>
        </mu-dialog>
    </div>
</template>

<script>
    import LjImg from "components/lj-img";

    export default {
        name: "configure-select",
        components: {
            LjImg
        },
        props: {
            configureName: {
                type: String
            },
            flag: {
                //statusflag/woodflag/
                type: Number,
                default: 0
            },
            option: { //MtrlOption对象，statusop/woodcodeop/pcodeop
                type: Object,
                default () {
                    return {}
                }
            },
            value: {
                type: String
            },
            readonly: {
                type: Boolean,
                default: false
            },
            disabled: {
                type: Boolean,
                default: false
            }
        },
        created() {
            if (this.flag === 4 || this.flag === 5) {
                // 选择默认值
                this.handleRefreshMtrlcfgcodes()
            }
            if (this.flag == 1) {
                // 严格选择
                if (this.option) {
                    let cfgcode = this.option
                    cfgcode.displayValue = "";
                    cfgcode.displayMd5 = "";
                    for (let opstring of cfgcode.opstrings) {
                        if (opstring.choice != undefined) {
                            if (opstring.choice == 1) {
                                this.handleCfgValueClick(cfgcode, opstring, true);
                                break;
                            }
                        } else {
                            if (opstring.ifdft) {
                                this.handleCfgValueClick(cfgcode, opstring, true);
                                break;
                            }
                        }
                    }
                }
            }
            if(this.flag == 2){
                // 组合配置,选择默认值
                if (this.option.mtrlcfgs) {
                    for (let cfgcode of this.option.mtrlcfgs) {
                        if (cfgcode.choice != undefined) {
                            if (cfgcode.choice == 1) {
                                this.handleMtrlcfgChanged(cfgcode,1)
                            } 
                        }
                    }
                }
            }
        },
        data() {
            return {
                showOpstrings: false,
                currentValue: "",
                currentCfgCode: {},
                cfgCodeDialogOpen: false
            }
        },
        methods: {
            handleRefreshMtrlcfgcodes() {
                if (this.flag !== 4 && this.flag !== 5) {
                    return;
                }
                if (this.option.mtrlcfgcodes) {
                    for (let cfgcode of this.option.mtrlcfgcodes) {
                        this.$set(cfgcode,"displayValue","");
                        cfgcode.displayMd5 = "";
                        for (let opstring of cfgcode.opstrings) {
                            if (opstring.choice != undefined) {
                                if (opstring.choice == 1) {
                                    this.handleCfgValueClick(cfgcode, opstring, true);
                                    break;
                                }
                            } else {
                                if (opstring.ifdft) {
                                    this.handleCfgValueClick(cfgcode, opstring, true);
                                    break;
                                }
                            }
                        }
                    }
                }
                this.refreshMtrlcfgcodes();
            },
            checkValueValid() {
                // TODO:验证配置值
            },
            handleCfgcodeClick(mtrlcfgcode) {
                if (this.disabled) {
                    return;
                }
                this.currentCfgCode = mtrlcfgcode;
                this.cfgCodeDialogOpen = true;
            },
            handleCfgValueClick(cfgcode, opString, skipRefresh) {
                cfgcode.displayMd5 = "";
                if (opString.picMD5) {
                    cfgcode.displayMd5 = opString.picMD5;
                } else {
                    opString.picMD5 = "";
                    cfgcode.displayMd5 = "";
                }
                this.$set(cfgcode,"displayValue",opString.valuestr);
                this.cfgCodeDialogOpen = false;
                if (this.flag == 1) {
                    this.handleValueChanged(cfgcode.displayValue);
                }else if(this.flag == 0) {
                    console.log("flag==0",JSON.stringify(cfgcode))
                    this.handleValueChanged(cfgcode.displayValue);
                } else {
                    if (!skipRefresh) {
                        this.refreshMtrlcfgcodes();
                    }
                }
                this.$forceUpdate();
            },
            handleMtrlcfgChanged(mtrlcfg, type) {
                // type:0-勾选改变；1-数字改变
                // console.log("mtrlcfg>>>",JSON.stringify(mtrlcfg))
                if (type === 0) {
                    if (mtrlcfg.checked && !mtrlcfg.cnt) {
                        this.$set(mtrlcfg,"cnt",1);
                    }
                } else if (type === 1) {
                    if (mtrlcfg.cnt && !mtrlcfg.checked) {
                        this.$set(mtrlcfg,"checked",true);
                    }
                }
                let newValue = "";
                for (let item of this.option.mtrlcfgs) {
                    if (item.checked) {
                        if (newValue) {
                            newValue += "+";
                        }
                        newValue += item.name;
                        if (item.cnt > 1) {
                            newValue += "*" + item.cnt;
                        }
                    }
                }
                this.handleValueChanged(newValue);
            },
            refreshMtrlcfgcodes() {
                if (this.flag !== 4 && this.flag !== 5) {
                    return;
                }
                //重新计算部件选配的必选、可选、可选范围
                let ruleDic = {};
                if (this.flag === 4 && this.option.mtrlcfgcoderules) {
                    for (let rule of this.option.mtrlcfgcoderules) {
                        ruleDic[rule.ruleKey] = rule.ruleValues;
                    }
                }
                let codeDic = {};
                for (let codeItem of this.option.mtrlcfgcodes) {
                    codeDic[codeItem.name] = codeItem;
                }
                let newValue = "";
                for (let codeItem of this.option.mtrlcfgcodes) {
                    if (this.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 + "|";
                    }

                }
                this.handleValueChanged(newValue);
            },
            handleValueChanged(value) {
                console.log("handlingchanged" + value);
                this.currentValue = value;
                this.$emit('input', this.currentValue);
            }
        },
        computed: {
            flagName() {
                switch (this.flag) {
                    case 0:
                        return "自由选填";
                    case 1:
                        return "严格选择";
                    case 2:
                        return "组合配置";
                    case 3:
                        return "不使用";
                    case 4:
                        return "部件选配";
                    case 5:
                        return "部件选配2";
                    case 6:
                        return "工序状态";

                }
            }
        },
        watch: {
            value: function (newVal) {
                if (this.currentValue !== newVal) {
                    this.currentValue = newVal;
                    console.log("watchvalue" + newVal);
                }
            }
        }
    }
</script>

<style scoped>
</style>