<style scoped>


    hr {
        margin: 0;
        padding: 0;
        background-color: #e8ebef;
    }

    .list-group {
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        padding: 10px;
    }

    .list-group-item {
        display: inline-block;
        *display: inline;
        width: 300px;
        *zoom: 1;
        box-sizing: border-box;
        padding: 10px 20px;
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        cursor: move;
        float: left;
        margin-right: 10px;
        border: 1px solid #c8c8c8;
        border-radius: 8px;
        background: #f5f5f5;
        position: relative;
    }

    .list-group-item form-control {

    }

    .list-warp {

        width: 100%;
        overflow-x: scroll;
        padding-bottom: 10px;
        border: solid 1px #4aa8e5;
        margin-left: 15px;

    }



    .img_box_path img {
        width: 64px;
    }

    .boxP {
        padding-top: 12px;
        padding-bottom: 22px;
    }
</style>
<template>
    <div class="container resource" style="min-height: 802px;">

        <div class="pop-banner clearfix">
            <div class="operate-btns">
                <a class="fbtn fb-save" v-on:click="saveCode">保存</a>
            </div>
            <h3 class="current-module">条码格式设置</h3>
        </div>

        <!--basic-distribution start-->
        <div class="pd-form">
            <div class="fpart mb-20">
                <div class="fheader">
                    <h4 class="fh-ewm">条码类型</h4>
                    <div class="control control-filtering control-filtering-green fl w450">
                        <div class="control control-filtering control-filtering-green fl w450">
                            <a class="option " v-link="{path:'/laberFormat/true'}">一维码</a>
                            <a class="option all active"
                               v-link="{path:'/laberFormat2'}">二维码</a>
                        </div>
                    </div>
                </div>


                <div class="bb_gray pb10" style=' margin:20px 0;'>
                    <div class="form-group mt-10">
                        <label class="label h-ti-h3-2">请设置条码含义规则</label>
                        <div class="checkbox-control" style='margin-left:14px; vertical-align: text-top'>
                            <input type="checkbox" id="id1" v-model='sortArr[0]' name="whom">
                            <label class="checkbox" for="id1">商品编码</label>


                            <input type="checkbox" id="id6" v-model='sortArr[5]' name="whom">
                            <label class="checkbox" for="id6">医院标识</label>

                            <input type="checkbox" id="id7" v-model='sortArr[6]' name="whom">
                            <label class="checkbox" for="id7">供应商编码</label>

                            <input type="checkbox" id="id8" v-model='sortArr[7]' name="whom">
                            <label class="checkbox" for="id8">批号</label>


                            <input type="checkbox" id="id9" v-model='sortArr[8]' name="whom">
                            <label class="checkbox" for="id9">生产日期</label>

                            <input type="checkbox" id="id2" v-model='sortArr[9]' name="whom">
                            <label class="checkbox" for="id2">有效期</label>

                            <input type="checkbox" id="id3" v-model='sortArr[10]' name="whom">
                            <label class="checkbox" for="id3">特殊标识1</label>


                            <input type="checkbox" id="id5" v-model='sortArr[11]' name="whom">
                            <label class="checkbox" for="id5">特殊标识2</label>


                            <br>
                            <input type="checkbox" id="id4" v-model='sortArr[3]' name="whom">
                            <label class="checkbox fl" for="id4">分隔符</label>
                            <div class="form-label" style="float:left;" v-if="sortArr[3]">
                                <input type="text" v-model='spiltstr' style='width: 50px;height: 30px'
                                       @change='spiltCheck(spiltstr)'>
                            </div>
                        </div>
                    </div>
                    <div class='clear'></div>
                </div>

                <div class='h-ti-h3-2 pb10'>拖动设置字段先后顺序</div>

                <div class='list-warp' v-if='withSum'>
                    <ul id='listGroup' class="list-group clearfix" v-sortable :style={width:withSum+'px'}>
                        <li class="list-group-item" v-for='(i,li) in list' :data-sort='li.code'>

                            <div class='form-control'>
                                <h3>{{li.codeName}}</h3>
                                <span class="close-win" @click="close(i,li.code)"></span>
                                <section v-if="li.code!=6 && li.code!=11 && li.code!=12">
                                    <!--<div class="form-label">
                                        <label :for="'a'+i" class="label" v-if='li.code!=1'>位数</label>
                                        <input type="text" :id="'a'+i" class="inp2" value='8' v-if='li.code!=1'
                                               v-model="digitArr[li.code-1]">

                                    </div>-->
                                    <div class="form-label mt-10 boxP">
                                        <label :for="'b'+i" class="label boxP">格式</label>
                                        <!--<input type="text" :id="'b'+i" class="inp2" v-model="sampleArr[li.code-1]"-->
                                        <!--v-if="canInp"-->
                                        <!--value='X03c05007400'-->
                                        <!--@change='inpSample(sampleArr[li.code-1],digitArr[li.code-1],li)'>-->
                                        <input type="text" :id="'b'+i" class="inp2" v-model="sampleArr[li.code-1]"
                                               disabled="disabled">
                                    </div>
                                </section>
                                <section v-else>
                                    <div class="form-label" style='padding-top: 20px;padding-bottom: 22px;'>
                                        <input type="text" v-model="sampleArr[li.code-1]"
                                               @change='inpSample(sampleArr[li.code-1],li)'>
                                    </div>
                                </section>
                            </div>


                            <!-- <div class='form-control'>
                                 <h3>{{li.codeName}}</h3>
                                 <span class="close-win" @click="close(i,li.code)"></span>
                                 <section v-if="li.code!=6">
                                     <div class="form-label">
                                         <label :for="'a'+i" class="label">位数</label>
                                         <input type="text" :id="'a'+i" class="inp2" value='8'
                                                v-model="digitArr[li.code-1]">
                                     </div>
                                     <div class="form-label mt-10">
                                         <label :for="'b'+i" class="label">格式</label>
                                         <input type="text" :id="'b'+i" class="inp2" v-model="sampleArr[li.code-1]"
                                                placeholder='20171206'
                                                @change='inpSample(sampleArr[li.code-1],digitArr[li.code-1],li)'>
                                     </div>
                                 </section>
                                 <section v-else>
                                     <p></p>
                                     <div class="form-label" style='padding-top: 20px;padding-bottom: 22px;'>
                                         <input type="text" value=1 v-model="digitArr[5]" style='display: none'>
                                         <input type="text" id='a5' v-model="sampleArr[5]"  @change='inpSample(sampleArr[li.code-1],digitArr[li.code-1],li)'>
                                     </div>
                                 </section>
                             </div>-->
                        </li>

                    </ul>
                </div>
                <div class="form-group pt20">
                    <a href="javascript:;" class="btn button-green mb-10" @click='getData'>查看示例</a>

                    <div class="control" v-show='listRest'>
                        <section class='fl img_box_path'>
                            <img class='imgpath ' :src="listRest.imgpath">
                        </section>
                        <section class='fl ml-25'>
                            <p><span class='txt-green'>商品:</span> <span class="c_green f-size16">感冒灵颗粒 30S 三九牌</span></p>
                            <p class='pt20'>
                                <span class='txt-green'>条码:</span> <span class="c_green f-size16"> {{listRest.codestr}}</span>
                                <span class='ml-12 f-size16'> 共 {{listRest.digit}} 位</span>
                            </p>
                        </section>

                    </div>
                </div>

            </div>

        </div>

        <!--basic-distribution end-->

    </div>
</template>
<script>
    module.exports = {
        data: function () {
            return {
                obj: [{
                    code: 1,
                    codeName: '商品编码',
                    digit: '8',
                }, {
                    code: 2,
                    codeName: '系统日期',
                    digit: '8',
                }, {
                    code: 3,
                    codeName: '流水号',
                    digit: '8',
                }, {
                    code: 4,
                    codeName: '分隔符',
                    digit: '1',
                }, {
                    code: 5,
                    codeName: '特殊符号',
                    digit: '1',
                }, {
                    code: 6,
                    codeName: '医院标识',
                    digit: '1',
                }, {
                    code: 7,
                    codeName: '供应商编码',
                    digit: '1',
                }, {
                    code: 8,
                    codeName: '批号',
                    digit: '1',
                }, {
                    code: 9,
                    codeName: '生产日期',
                    digit: '1',
                }, {
                    code: 10,
                    codeName: '有效期',
                    digit: '1',
                }, {
                    code: 11,
                    codeName: '特殊标识1',
                    digit: '1',
                }, {
                    code: 12,
                    codeName: '特殊标识2',
                    digit: '1',
                }],
                codetype: 2,
                sortArr: [],
                digitArr: [],
                sampleArr: [],
                withSum: 0,
                sortParam: [],
                spiltstr: '',
                list: '',
                listRest: '',
                getval:false,


            }
        },
        methods: {

            getData: function () {//请求数据
                var self = this;
                var sArr = [], digitstr = [], samplestr = [];
                $('#listGroup .list-group-item').each(function (val, ind) {
                    $(this).data('sort');
                    sArr.push($(this).data('sort'))
                });
                for (var i = 0; i < sArr.length; i++) {
                    var a = sArr[i] - 1;
                    console.log(a)
                    if (!self.sampleArr[a]) {
                        layer.msg('请输入' + self.obj[a].codeName);
                        return;
                    }
                    digitstr.push(1);
                    samplestr.push(self.sampleArr[a]);
                }
                var vo = {
                    codetype: 2,//一维码二维码
                    spiltdigit: '',//分隔符位数
                    spiltcode: '', //分隔符编码
                    spiltstr: this.spiltstr,
                    codestr: sArr,
                    digitstr: digitstr,
                    samplestr: samplestr,
                };
                if (self.sortArr[3]) {
                    // if(!this.spiltstr){
                    //     layer.msg('请输入正确位数的【分隔符】');
                    //     return;
                    // }
                    var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
                    if (!regEn.test(self.spiltstr) || self.spiltstr.length != 1) {
                        this.spiltstr = '';
                        layer.msg('请输入正确位数的【分隔符】');
                        return;
                    }
                    vo.spiltdigit = '4';
                    vo.spiltcode = '0';
                }

                Ajax.post('/hospital/getMedsettocode', vo).then(function (res) {
                    var result = res.data;
                    this.listRest = '';
                    if (result.errorCode == 0) {
                        this.listRest = result.data;

                    } else {
                        layer.msg(result.message);
                    }

                }.bind(this))
            },
            saveCode: function () {//请求数据
                var self = this;
                var sArr = [], digitstr = [], samplestr = [];
                $('#listGroup .list-group-item').each(function (val, ind) {
                    $(this).data('sort');
                    sArr.push($(this).data('sort'))
                });
                for (var i = 0; i < sArr.length; i++) {
                    var a = sArr[i] - 1;

                    if (!self.sampleArr[a]) {
                        layer.msg('请输入' + self.obj[a].codeName);
                        return;
                    }
                    digitstr.push(1);
                    samplestr.push(self.sampleArr[a]);

                }
                var vo = {
                    codetype: 2,//一维码二维码
                    spiltdigit: '',//分隔符位数
                    spiltcode: '', //分隔符编码
                    spiltstr: this.spiltstr,
                    codestr: sArr,
                    digitstr: digitstr,
                    samplestr: samplestr,
                };
                if (self.sortArr[3]) {
                    // if(!this.spiltstr){
                    //     layer.msg('请输入正确位数的【分隔符】');
                    //     return;
                    // }
                    var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
                    if (!regEn.test(self.spiltstr) || self.spiltstr.length != 1) {
                        this.spiltstr = '';
                        layer.msg('请输入正确位数的【分隔符】');
                        return;
                    }
                    vo.spiltdigit = '4';
                    vo.spiltcode = '0';
                }

                Ajax.post('/hospital/saveMedsettocode', vo).then(function (res) {
                    var result = res.data;
                    if (result.errorCode == 0) {
                        layer.msg('保存成功');
                        self.getData();
                    } else {
                        layer.msg(result.message);
                    }
                }.bind(this))
            },


            findMedsettocode: function (code) {
                var self = this;
                Ajax.post('/hospital/findMedsettocode').then(function (response) {
                    var result = response.data;
                    if (result.errorCode == 0) {
                        var mfmedcodeset = result.data.mfmedcodeset;
                        var mfmedcodesetvals = result.data.mfmedcodesetvals;
                        if (!mfmedcodeset) {
                            return;
                        }
                        if (mfmedcodeset.codetype == 1) {
                            for (let i = 0; i < self.sortArr.length; i++) {
                                self.$set('sortArr[' + i + ']', false);
                            }
                            self.$set('spiltstr', '');

                            return;
                        }
                        var arr = mfmedcodeset.coderule.split(",");
                        var objlist = [];
                        self.$set('spiltstr', mfmedcodeset.splitstr);
                        if (mfmedcodeset.splitcode) {
                            self.$set('sortArr[' + 3 + ']', true)
                        }
                        for (let i = 0; i < arr.length; i++) {
                            var val = arr[i] - 1;
                            self.$set('sortArr[' + val + ']', true);
                            self.$set('digitArr[' + val + ']', mfmedcodesetvals[i].digit);
                            self.$set('sampleArr[' + val + ']', mfmedcodesetvals[i].sample);
                            objlist.push(self.obj[val])
                        }
                        self.$set('getval',true);
                        self.$set('list', objlist);

                    } else {
                        layer.msg(result.message);
                    }
                });
            },
            close: function (i, code) {
                this.list.splice(i);
                var a = code - 1;
                this.$set('sortArr[' + a + ']', false);

            },
            inpSample: function (val, li) {

                if (li.code != 6) {
                    if (val.length != 1) {
                        var a = li.code - 1;
                        this.$set('sampleArr[' + a + ']', '');
                        layer.msg('【' + li.codeName + '】只能为一位');
                    }
                } else {
                    if (val.length > 10) {
                        var a = li.code - 1;
                        this.$set('sampleArr[' + a + ']', '');
                        layer.msg('医院标识不能超出十位');
                    }

                }
                // this.getData();

            },
            spiltCheck: function (val) {
                var regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im;
                if(!regEn.test(val) || val.length != 1) {
                    this.spiltstr = ''
                    layer.msg('请输入正确位数的【分隔符】');
                    return false;
                }
                // this.getData();
            }


        },
        route: {
            data: function () {
                this.sortArr= [],
                    this.digitArr=   [],
                    this.sampleArr=   [],
                this.$set('sampleArr[0]', 'X03c05007400');
                this.$set('sampleArr[6]', 'ssy001');
                this.$set('sampleArr[7]', 'lot001');
                this.$set('sampleArr[8]', '20171222');
                this.$set('sampleArr[9]', '20221022');
                this.findMedsettocode();
            }
        },
        watch: {
            'sortArr': function (val) {
                var sum = 0;
                var objlist = [];
                var self=this;
                for (let i = 0; i < val.length; i++) {
                    if (val[i] && i != 3) {
                        objlist.push(this.obj[i]);
                        sum++;
                    }
                }
                this.withSum = sum * 320;
                if (this.getval){
                    this.$set('getval', false);
                    return;
                }

                this.$set('list', objlist);

                // if (val.length!=0){
                //     setTimeout(function () {
                //         self.getData();
                //     },500)
                // }
            },

        },

    }
</script>