<template>
    <div>
        <div class="container resource close-left-menu contaNEW" style="min-height: 1200px">
            <div class="pop-banner clearfix">
                <div class="operate-btns">
                    <a class="fbtn fb-save" @click='save()'>保存</a>
                    <a class="fbtn fb-return" v-link="{path : '/newConsumable'}">返回</a>
                </div>
                <h3 class="current-module">耗材包</h3>
            </div>
            <div class="purchase-add-plan">
                <div class="fpart pd-form">
                    <div class="fheader">
                        <h4 class="fh-shop" v-if="!this.isrevise">新增耗材包</h4>
                        <h4 class="fh-revise " v-else>耗材包修改</h4>
                        <div class="from-button fr">
                        </div>
                    </div>
                    <div class="group-row  group-row-3">
                        <div class="form-group form-label">
                            <label for="cn1" class="label ">耗材包名称</label>
                            <div class="control">
                                <input type="text" id="cn1" v-model="trmed.suppliesname" class="inp5">
                            </div>
                        </div>

                        <div class="form-group form-label">
                            <label for="cc4" class="label">科室</label>
                            <div class="control">
                                <select v-model="trmed.meddeptguid" class="inp2">
                                    <option value="">--请选择--</option>
                                    <option v-for="item in departmentsList" :value="item.value">{{item.label}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group form-label must">
                            <label for="cc6" class="label">医院</label>
                            <div class="control">
                                <select v-model="trmed.medguid" class="inp2" @change="selectVal">
                                    <option value="">--请选择--</option>
                                    <option v-for="item in hosList" :value="item.value">{{item.label}}</option>
                                </select>
                            </div>
                        </div>

                    </div>
                    <div class="group-row">


                    </div>
                    <div class="group-row" v-if='isFlag'>
                        <div class="form-group form-label">
                            <label for="cn2" class="label">科室</label>
                            <div class="control">
                                <select v-model="parameter_deptguid" class="inp2">
                                    <option value=""> 请选择</option>
                                    <option :value="ite.guid" v-for="ite in getDepartmentList">{{ite.hdeptname}}
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="group-row">
                        <div class="form-group form-label">
                            <label for="cn2" class="label ">备注</label>
                            <div class="control">
                                <input type="text" id="cn2" v-model="trmed.memo" class="inp2">
                            </div>
                        </div>
                    </div>


                </div>
                <table class="itable itable-thead-13px itable-td-long-text">
                    <thead>
                    <tr>
                        <th class="w50">序号</th>
                        <th class="w230">商品</th>
                        <th class="w120">商品编码</th>
                        <th class="w100">规格</th>
                        <th class="w100">单位</th>
                        <th class="w100">生产厂商</th>
                        <th class="w100">注册证号/批准文号</th>
                        <th class="w100">数量</th>
                        <th class="w80">耗材类型</th>
                        <th class="w100">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <div></div>
                        </td>
                        <td class="t-left">
                            <div class="control w230 h-30 fl">
                                <input type="text" v-model="search_LIKE_goodsinfo" title='请输入商品名称'
                                       placeholder="商品名称、编号、厂商、注册证号">
                                <div class="select-template" v-if='state'>
                                    <div class="div-select before-none" style="width:100%;">
                                        <ul style="z-index:3;top:0px;width:345%; margin-top: 0px;">
                                            <li class="div-select-item pl10 hover-none"
                                                style='line-height:20px;height:auto;'>
                                                <table class="itable itable-thead-13px itable-td-long-text">
                                                    <thead id="t_header">
                                                    </thead>
                                                    <tbody>
                                                    <tr v-for="item in goodsList" @click='goodsData(item)'
                                                        track-by="$index">
                                                        <td class="w50">
                                                            <div>{{$index+1}}</div>
                                                        </td>
                                                        <td class="t-left w200">
                                                            {{item.supplierGoodsname}}
                                                        </td>
                                                        <td class="t-left pr10 w100">{{item.supplierGoodscode}}</td>
                                                        <td class="t-left pr10 w80">{{item.supplierGoodsspec}}</td>
                                                        <td class="t-left pr10 w80">{{item.supplierUnit}}</td>
                                                        <td class="t-left pr10 w100">{{item.producer}}</td>
                                                        <td class="t-left pr10 w100">{{item.regiterkey}}</td>

                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </li>
                                            <li class="div-select-item pl10"
                                                v-show="goodsList.length==0 || goodsList == undefined">
                                                <span style="width:100%;">未查询到结果！</span>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>

                    <tr v-for='item in goodList' track-by="$index">
                        <td>
                            <div>{{$index+1}}</div>
                        </td>
                        <td class="t-left pr10">{{item.supplierGoodsname}}</td>
                        <td>{{item.supplierGoodscode}}</td>
                        <td>{{item.supplierGoodsspec}}</td>
                        <td>{{item.supplierUnit}}</td>
                        <td class='t-left'>{{item.producer}}</td>
                        <td>{{item.regiterkey}}</td>
                        <td><input type="number" v-model="item.qty" style='width:50px; text-align: right;height: 34px;line-height: 34px'
                                   @change='testQty(item.qty,$index)'></td>
                        <td class="t-center">
                            <select style="width:50px;"  v-model="item.isaccessory">
                                <option class="t-center" value="Y">主料</option>
                                <option class="t-center" value="N">辅料</option>
                                <option class="t-center" value="G">工具</option>
                            </select>
                        </td>
                        <td>
                            <a href="javascript:;" class="btn button-red" @click='remove($index)'>删除</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="modal" v-if='modelFlag'>
            <div class="container resource">
                <div class="audit-detail" style="margin:200px auto;">
                    <span class="close-win" @click='close'></span>
                    <div class="fheader no-bottom" style="margin-left:203px;">
                        <h4 class="fh-book no-icon">耗材包制定成功！</h4>
                    </div>
                    <div class="pd-form">
                        <a href="javascript:void(0);" class="button-green btn" style='margin:30px 0 0 200px;'
                           @click='goOn'>继续新增耗材包</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style scoped>
    input[type=number] {
        -moz-appearance: textfield;
    }

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
</style>
<script>
    module.exports = {
        data: function () {
            return {
                search_LIKE_goodsinfo: '',
                getDepartmentList: '',
                modelFlag: false,
                trmed: {
                    suppliesname: '',
                    memo: '',
                    medguid: '',
                    meddeptguid: ''
                },
                medname: '',
                // 查询的商品列表
                goodsList: [],
                goodList: [],
                state: false,
                SupplierList: [],
                SupplierStaff: [],
                parameter_supplierguid: '',
                parameter_supplierstaffguid: '',
                parameter_deptguid: '',
                isFlag: '',
                hosList: '',
                searchDept: {},
                departmentsList: {},
                isrevise: false,
            };
        },
        methods: {
            // 获得供应关系中的医院
            getMedList: function () {
                var self = this;
                Ajax.get('/trhv/getMedListRelation')
                    .then(function (response) {
                        var data = response.data;
                        if (data.errorCode == 0) {
                            self.hosList = _.map(data.data, function (item) {
                                return {
                                    label: item.name,
                                    value: item.guid
                                };
                            });
                        } else {
                            layer.msg('数据获取异常!');
                        }
                    })
            },
            getMedDeptList: function (val) {
                var self = this;

                // 首先判断医院是否选择了，如果没有选择，那么需要提示
                self.searchDept.med_guid = self.trmed.medguid;
                self.searchDept.category = 2;
                Ajax.get('/trhv/getMedDeptList', this.searchDept)
                    .then(function (response) {
                        var data = response.data;
                        if (data.errorCode == 0) {
                            self.departmentsList = _.map(data.data, function (item) {
                                return {
                                    label: item.hdeptname,
                                    value: item.guid,
                                    storeroomaddress: item.storeroomaddress
                                };
                            });
                            if (val) {
                                self.trmed.meddeptguid = val;
                            }
                        } else {
                            layer.msg(response.data.message);
                        }
                    })
            },
            close: function () {
                var self = this;
                self.modelFlag = false;
                window.sessionStorage.setItem('suppliesname', self.trmed.suppliesname);
                self.$router.go({
                    'path': '/newConsumable'
                });
            },

            remove: function (index) {
                var self = this;
                self.goodList.splice(index, 1);

            },
            // 查询的数据结果出来  点击商品
            goodsData: function (data) {
                var self = this;
                var state = false;
                for (var a = 0; a < self.goodList.length; a++) {
                    if (self.goodList[a].supplierGoodsguid == data.supplierGoodsguid) {
                        layer.msg('该商品已存在');
                        state = true;
                    }
                }
                if (!state) {
                    data.isaccessory='Y';
                    self.goodList.splice(0, 0, data);
                }

                self.$set('state', false)
                self.search_LIKE_goodsinfo = '';
                self.$set('goodsList', []);
            },
            // 商品名称搜索
            mednameGet: function () {
                var self = this;
                if (self.search_LIKE_goodsinfo == '') {
                    return;
                }
                if (!self.trmed.medguid) {
                    layer.msg('请选择医院');
                    return;
                }

                self.$set('state', true);
                self.$set('goodsList', []);
                Ajax.post('/cost/listmedsuppliesgoods', {
                    'search_LIKE_goodsinfo': self.search_LIKE_goodsinfo,
                    'search_LIKE_medguid': self.trmed.medguid,
                })
                    .then(function (response) {
                        var data = response.data;
                        if (data.errorCode == 0) {
                            self.$set('goodsList', response.data.data)
                        } else {
                            layer.msg(data.message);
                        }
                    })

            },
            savemedsuppliesgoods: function (mark) {
                var self = this;
                var param = {
                    'trmedsupplies': self.trmed,
                    'list': self.goodList
                }
                param.trmedsupplies.medguid = self.trmed.medguid;
                param.trmedsupplies.deptguid = self.trmed.meddeptguid;
                for (let a = 0; a < self.departmentsList.length; a++) {
                    if (self.departmentsList[a].value == self.trmed.meddeptguid) {
                        param.trmedsupplies.deptname = self.departmentsList[a].label;
                        break;
                    }
                }
                for (let a = 0; a < self.hosList.length; a++) {
                    if (self.hosList[a].value == self.trmed.medguid) {
                        param.trmedsupplies.medname = self.hosList[a].label;
                        break;
                    }
                }
                Ajax.post('/cost/savemedsuppliesgoods', param)
                    .then(function (response) {
                        var res = response.data.data;
                        if (response.data.errorCode == 0) {

                            self.parameter_supplierstaffguid = '';
                            self.parameter_deptguid = '';
                            self.parameter_deptname = '';
                            self.modelFlag = true;

                        } else {
                            layer.msg(response.data.message)

                        }
                    })
            },

            // 保存
            save: function () {
                var self = this;

                if (!self.trmed.suppliesname) {
                    layer.msg('耗材包名称不能为空！');
                    return;
                }
                if (self.goodList.length == 0) {
                    layer.msg('请选择商品！');
                    return;
                }
                if (!self.trmed.medguid) {
                    layer.msg('请选择医院！');
                    return;
                }
                if (!self.trmed.meddeptguid) {
                    layer.msg('请选择科室！');
                    return;
                }
                var reg = /^[1-9]+\d*$/;
                for (let i = 0; i < self.goodList.length; i++) {
                    if (!self.goodList[i].qty || self.goodList[i].qty == 0) {
                        if (!reg.test(self.goodList[i].qty)) {
                            layer.msg('数量不能为空并且不能为0！');
                            return;
                        }
                    }
                }
                self.savemedsuppliesgoods();
            },
            goOn: function () {
                var self = this;
                self.$set('goodList', []);
                var tm = {
                    suppliesname: '',
                    memo: '',
                };
                self.$set('trmed', tm);
                self.modelFlag = false;
            },
            testQty: function (val, ind) {
                var reg = /^[1-9]+\d*$/;
                var self = this;
                if (!reg.test(val)) {
                    layer.msg('请输入大于0的正整数！');

                    self.goodList[ind].qty = '';
                }
            },
            finduserisadmin: function () {
                var self = this;
                Ajax.post('/mfmedgoods/finduserisadmin')
                    .then(function (response) {
                        var data = response.data;
                        if (data.errorCode == 0) {

                            if (data.data.isadmin == 'Y' || data.data.isdept == 'Y') {
                                self.isFlag = true;
                            } else {
                                self.isFlag = false;
                                self.parameter_deptguid = data.data.deptguid;
                                self.parameter_deptname = data.data.deptname;
                            }
                        } else {
                            layer.msg(data.message);
                        }
                    })
            },
            selectVal: function (ele) {
                this.$set('goodList', []);
                this.trmed.meddeptguid='';
                if (ele.target.value) {
                    this.getMedDeptList();
                }
            },
            getList: function () {
                var self = this;
                console.log(this.$route.params.id)
                Ajax.post('/cost/listmedsuppliesdetailbyupdate', {
                    search_EQ_guid: self.$route.params.id
                }).then(function (response) {
                    var data = response.data.data;
                    if (response.data.errorCode == 0) {
                        self.$set('trmed', data.trmedsupplies);
                        self.trmed.medguid=data.trmedsupplies.medguid;
                        self.getMedDeptList(data.trmedsupplies.deptguid);
                        self.$set('goodList', data.list);

                    } else {
                        layer.msg(response.data.message);
                    }

                })

            },


        },
        watch: {
            'search_LIKE_goodsinfo': function () {
                var self = this;
                self.mednameGet();
            },



        },

        route: {
            activate: function () {
                this.goOn();
                this.getMedList();
                if (this.$route.params.id) {
                    this.isrevise = true;
                    this.getList();
                }
            }
        },

    };
</script>