<template>
    <div v-if="flag !== 3">
        <group gutter="0px">
            <template v-if="flag === 0">
                <!--自由选择：可选可填-->
                <selector title="选择" v-model="currentValue" :options="option.opstrings"
                          :value-map="['valuestr','valuestr']"/>
                <x-textarea title="自由填写" placeholder="可填写配置" v-model="currentValue"></x-textarea>
            </template>
            <template v-if="flag === 1">
                <!--严格选择-->
               <template>
                    <cell style="line-height:0px;font-size: 14px;" is-link value-align="left"
                        @click.native="handleCfgcodeClick(option)" :disabled="disabled">
                        <div slot="title" style="width: 65px;font-weight: bold;padding: 0;margin: 0;">
                            *{{option.typename}}
                        </div>
                        <div style="display: flex;flex-wrap:wrap;">
                            <!--<img  style="width:28px;height:28px;margin-right: 10px;" src="http://tvax4.sinaimg.cn/crop.0.0.512.512.1024/007eqC2Ely8g174qneemsj30e80e8js0.jpg">-->
                            <!-- <lj-img :md5="option.displayMd5" style="width:28px;height:28px;align-self:center;" /> -->
                            <div style="color:black;line-height:15px;align-self:center;margin-left: 10px;width:70%">
                                {{option.displayValue}}</div>
                        </div>
                    </cell>
                </template>
            </template>
            <!-- <template v-if="flag === 2"> -->
                <!--组合配置-->
<!-- 
                <template v-for="mtrlcfg in option.mtrlcfgs">
                    <cell-box style="float:left;">
                        <check-icon :value.sync="mtrlcfg.checked" @update:value="handleMtrlcfgChanged(mtrlcfg,0)"/>
                        {{mtrlcfg.name}}
                    </cell-box>
                    <x-number v-model="mtrlcfg.cnt" :min="1" @input="handleMtrlcfgChanged(mtrlcfg,1)"/>
                </template>
            </template> -->
            <!-- <template v-if="flag === 3"> -->
                <!--不使用-->
            <!-- </template> -->
            <template v-if="flag === 4 || flag === 5">
                <!--部件选配-->
                <template v-for="mtrlcfgcode in option.mtrlcfgcodes">
                    <cell style="line-height:0px;font-size: 14px;" :is-link="!mtrlcfgcode.displayDisabled"
                        :style="mtrlcfgcode.displayDisabled?{backgroundColor:'gainsboro'}:{}" value-align="left"
                        @click.native="handleCfgcodeClick(mtrlcfgcode)" :disabled="disabled" :border-intent="false">
                        <div slot="title" style="width: 65px;font-weight: bold;padding: 0;margin: 0;">
                            {{(mtrlcfgcode.displayIfCheck?'*':'')+mtrlcfgcode.name}}
                        </div>
                        <div style="display: flex;flex-wrap:wrap">
                            <!--<img  style="width:28px;height:28px;margin-right: 10px;" src="http://tvax4.sinaimg.cn/crop.0.0.512.512.1024/007eqC2Ely8g174qneemsj30e80e8js0.jpg">-->
                            <!-- <lj-img :md5="mtrlcfgcode.displayMd5" -->
                                <!-- style="width:28px;height:28px;align-self:center;" /> -->
                            <div style="color:black;line-height:15px;align-self:center;margin-left: 10px;width:70%">
                                {{mtrlcfgcode.displayValue}}</div>
                        </div>
                    </cell>
                </template>
            </template>
            <!-- <template v-if="flag === 6"> -->
                <!--工序状态-->
            <!-- </template> -->
        </group>
        <mu-dialog :open="cfgCodeDialogOpen && !disabled" @close="cfgCodeDialogOpen=false" scrollable width="80%">
            <template v-for="opstring in currentCfgCode.opstrings">
                <cell style="line-height:0px;font-size: 14px;" :is-link="true" value-align="left"
                    @click.native="handleCfgValueClick(currentCfgCode,opstring)" >
                    <div style="display: flex;flex-wrap:wrap">
                        <!--<img  style="width:28px;height:28px;margin-right: 10px;" src="http://tvax4.sinaimg.cn/crop.0.0.512.512.1024/007eqC2Ely8g174qneemsj30e80e8js0.jpg">-->
                        <!-- <lj-img :md5="opstring.picMD5" style="width:28px;height:28px;align-self:center;" /> -->
                        <div style="color:black;line-height:15px;align-self:center;margin-left: 10px;width:70%">
                            {{opstring.valuestr}}</div>
                    </div>
                </cell>
            </template>
        </mu-dialog>
    </div>
</template>

<script>
    import {
        Group,
        GroupTitle,
        Cell,
        XTextarea,
        Radio,
        XButton,
        CheckIcon,
        Selector,
        CellBox,
        XNumber,
        Actionsheet
    } from "vux";

    export default {
        name: "configure-select-pic",
        components: {
            Group, GroupTitle, Cell, XTextarea, Radio, XButton, CheckIcon, Selector, CellBox, XNumber, Actionsheet
        },
        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) {
            //     // 选择默认值
            //     if (this.option.mtrlcfgcodes) {
            //         console.log("creating");
            //         for (let cfgcode of this.option.mtrlcfgcodes) {
            //             cfgcode.displayValue = "";
            //             cfgcode.displayMd5 = "";
            //             for (let opstring of cfgcode.opstrings) {
            //                 if (opstring.choice != undefined) {
            //                     if (opstring.choice == 1) {
            //                         console.log(JSON.stringify(opstring));
            //                         this.handleCfgValueClick(cfgcode, opstring, true);
            //                         break;
            //                     }
            //                 }else{
            //                     if (opstring.ifdft) {
            //                         console.log(JSON.stringify(opstring));
            //                         this.handleCfgValueClick(cfgcode, opstring, true);
            //                         break;
            //                     }
            //                 }
            //             }
            //         }
            //     }
            //     this.refreshMtrlcfgcodes();
            // }
        },
        data() {
            return {
                showOpstrings: false,
                currentValue: "",
                currentCfgCode: {},
                cfgCodeDialogOpen: false
            }
        },
        methods: {
            checkValueValid() {
                // TODO:验证配置值
            },
            handleCfgcodeClick(mtrlcfgcode) {
                if (this.disabled) {
                    return;
                }
                console.log("open");
                this.currentCfgCode = mtrlcfgcode;
                this.cfgCodeDialogOpen = true;
            },
            handleCfgValueClick(cfgcode, opString, skipRefresh) {
                // cfgcode.displayMd5 = "";
                // if (opString.picMD5) {
                //     cfgcode.displayMd5 = opString.picMD5;
                // }else{
                //     opString.picMD5 = "";
                //     cfgcode.displayMd5 = "";
                // }
                // cfgcode.displayValue = opString.valuestr;
                this.cfgCodeDialogOpen = false;
                // if (this.flag == 1) {
                //     this.handleValueChanged(cfgcode.displayValue);
                // }else{
                //     if (!skipRefresh) {
                //         this.refreshMtrlcfgcodes();
                //     }
                // }
                var inputItem = {};
                inputItem.pzcode = cfgcode.pzcode
                inputItem.name = cfgcode.name;
                inputItem.pzid = cfgcode.pzid;
                inputItem.opString = opString;
                this.$emit('input', inputItem);
                this.$forceUpdate();
            },
            handleMtrlcfgChanged(mtrlcfg, type) {
                // type:0-勾选改变；1-数字改变
                if (type === 0) {
                    if (mtrlcfg.checked && !mtrlcfg.cnt) {
                        mtrlcfg.cnt = 1;
                    }
                } else if (type === 1) {
                    if (mtrlcfg.cnt && !mtrlcfg.checked) {
                        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;
                        }
                    }
                }
            },

        },
        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: {

        }
    }
</script>

<style scoped>
</style>