<style >
/*star 11-17*/
.itable em{
  font-style: normal;font-weight: bold;
  text-decoration: none;color: #dc322e!important;}
</style>
<template>
    <div class="container resource basic-type-add" style="min-height: 491px;">

        <div class="pop-banner clearfix">
            <div class="operate-btns">
                <!-- <a v-link="{path:'/good/edit/0'}" href="javascript:void(0)" class="fbtn fb-add">添加</a> -->               
                <a v-link="{path:'/good/edit/0'}" class="fbtn fb-add">添加</a>
                <a @click="deleteGood" href="javascript:void(0)" class="fbtn fb-remove">删除</a>
                <!-- <a href="javascript:void(0)" class="fbtn fb-remove">删除</a> -->
                <a @click="saveGood" href="javascript:void(0)" class="fbtn fb-save">保存</a>
            </div>
            <h3 class="current-module">医院品种新增</h3>
        </div>

        <!--type-add-table start-->
        <div class="type-add-table">

            <div class="pd-form">
                <div class="group-row">
                    <div class="form-group">
                        <label for="cn1" class="label">商品编号</label>
                        <div class="control input-has-btn">
                            <input type="text" v-model="good.goodsCode" id="cn1">
                            <input type="hidden" v-model="good.id" >
                            <span class="input-btn">生成</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cn2" class="label">商品名称</label>
                        <div class="control">
                            <input type="text" v-model="good.goodsName" id="cn2">
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group">
                        <label for="cn3" class="label">生产厂商</label>
                        <div class="control">
                            <input type="text"  v-model="good.manufacturer" id="cn3">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cn4" class="label">批准文号／注册证号</label>
                        <div class="control">
                            <input type="text" v-model="good.registKey" id="cn4">
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group">
                        <label for="cn5" class="label">规格</label>
                        <div class="control">
                        <!-- v-model="search.search_EQ_spec"  -->
                            <input type="text" v-model="good.goodsSpec" id="cn5">
                            <input type="hidden" v-model="search.search_EQ_spec=good.goodsSpec" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="cn6" class="label">产地</label>
                        <div class="control">
                            <input type="text" v-model="good.productionArress" id="cn6">
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group">
                        <label for="cn7" class="label">品牌</label>
                        <div class="control">
                            <input type="text" v-model="good.brand" id="cn7">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="label">生产来源</label>
                        <div class="control">
                            <radio :list="['国产','进口']" :checked.sync="good.importedFlag" v-model='search.search_EQ_importedFlag'></radio>
                            <!-- <input type="hidden" v-model="search.search_EQ_importedFlag=good.importedFlag" > -->
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group">
                        <label class="label">商品大类</label>
                        <div class="control">
                            <select-ui :list="bigTypes" :selected.sync="good.goodsCate.id" v-model='search.search_EQ_bigTypeId' empty-text="请选择大类">
                            </select-ui>
                            <!-- <input type="hidden" v-model="search.search_EQ_bigTypeId=good.bigType.id" > -->
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="label">商品小类</label>
                        <div class="control">
                            <select-ui :list="smallTypes" :selected.sync="good.smallType.id" v-model='search.search_EQ_smallTypeId' 
                                empty-text="请选择小类"></select-ui>
                                <!-- <input type="hidden" v-model="search.search_EQ_smallTypeId=good.smallType.id" > -->
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group">
                        <label for="cn9" class="label">计量单位</label>
                        <div class="control">
                            <input type="text" v-model="good.unitStyle" id="cn9">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="label w150">是否需要批号管理</label>
                        <div class="control">
                            <radio :list="['需要','不需要']" :checked.sync="good.isLotCtrlInput"></radio>
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group">
                        <label for="cn23" class="label">药品本位码</label>
                        <div class="control">
                            <input type="text" v-model="good.productStandard" id="cn23">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="label" for="cn24">高值分类</label>
                        <div class="control">
                            <select id="cn24" v-model="good.highValueCate">
                                <option value="">跟台高值</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group">
                        <label for="cn22" class="label">器械产品DI</label>
                        <div class="control">
                            <input type="text" v-model="good.specStandard" id="cn22">
                        </div>
                    </div>
                </div>

                <div class="package-form clearfix">
                    <div class="package-item package-sm">
                        <h3>小包装</h3>
                        <div class="package-msg">
                            <label for="cn11">包装含量</label>
                            <input type="text" v-model="good.minUnitQty" id="cn11">
                        </div>
                        <div class="package-msg">
                            <label for="cn12">包装单位</label>
                            <input type="text" v-model="good.minUnitStyle" id="cn12">
                        </div>
                        <div class="package-msg">
                            <label for="cn13">包装条码</label>
                            <input type="text" v-model="good.litBcd" id="cn13">
                        </div>
                    </div>
                    <div class="package-item package-lg">
                        <h3>大包装</h3>
                        <div class="package-msg">
                            <label for="cn14">包装含量</label>
                            <input type="text" v-model="good.bigUintQty" id="cn14">
                            <label for="cn17">长(cm)</label>
                            <input type="text" v-model="good.length" id="cn17">
                            <label for="cn18">净重(kg)</label>
                            <input type="text" v-model="good.netWeight" id="cn18">
                        </div>
                        <div class="package-msg">
                            <label for="cn15">包装单位</label>
                            <input type="text" v-model="good.bigUintStyle" id="cn15">
                            <label for="cn19">宽(cm)</label>
                            <input type="text" v-model="good.width" id="cn19">
                            <label for="cn20">毛重(kg)</label>
                            <input type="text" v-model="good.grossWeight" id="cn20">
                        </div>
                        <div class="package-msg">
                            <label for="cn16">包装条码</label>
                            <input type="text" v-model="good.bigBcd" id="cn16">
                            <label for="cn21">高(cm)</label>
                            <input type="text" v-model="good.hight" id="cn21">
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label for="cn10" class="label">备注</label>
                    <div class="control">
                        <textarea id="cn10" v-model="good.memo" rows="5"></textarea>
                    </div>
                </div>
            </div>

            <div class="type-add-tabbtn clearfix ">
                <div class="checkbox-control checkbox-bold fl">
                    <input type="checkbox" id="cc31">
                    <label for="cc31" class="checkbox">对码</label>
                </div>
                <div class="fl">该品种已完成对码！</div>
                <div class="fl text-color-red">该品种还未对码，请对码！</div>
            </div>

            <div class="type-add-tit">对码结果</div>

            <table class="itable itable-lr-blank table-bg">
                <thead>
                <tr>
                    <th class="w50"></th>
                    <th class="w60">序号</th>
                    <th class="w60"></th>
                    <th class="w130">商品<br>名称</th>
                    <th class="w80">规格</th>
                    <th class="w130">注册证号/<br>批准文号</th>
                    <th class="w130">生产<br>厂商</th>
                    <th class="w60">生产<br>来源</th>
                    <th class="w60">小包装<br>单位</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td><a class="btn-d btn-d-green btn-d-activate" href="javascript:;">取消</a><div class="text-color-green">已配对</div></td>
                    <td>01<span class="star-group"><span></span><span></span><span></span></span></td>
                    <td>
                        <div class="pro-pic" style="background-image: url(../assets/c17.jpg)">
                            <span class="pic-max blue-search"></span>
                        </div>
                    </td>
                    <td><div class="p-lr-10">一次性使用动脉止血压迫器</div></td>
                    <td>无</td>
                    <td><div class="p-lr-10">京药监械（准）字2010第2660762号</div></td>
                    <td><div class="p-lr-10">乐普（北京）医疗器械股份有限公司</div></td>
                    <td>国产</td>
                    <td>支</td>
                </tr>
                <tr>
                    <td colspan="9" class="f14 text-color-red">该品种还未进行对码匹配</td>
                </tr>
                </tbody>
            </table>

            <div class="m-20-0">
                <button class="btn-d btn-d-lg btn-d-activate" @click="getData">智能对码</button>
            </div>
            <div class="matching-table itable-lr-blank table-border">
                <div class="itable-tit">
                    <h4 class="icon-star">代表匹配度</h4>
                    <div class="fr">
                        <span class="text-color-red">找不到？您可以</span><button class="btn-d btn-d-lg">申请配对</button>
                    </div>
                </div>
                <table class="itable">
                    <thead>
                    <tr>
                        <th class="w50"></th>
                        <th class="w60">序号</th>
                        <th class="w60"></th>
                        <th class="w130">商品<br>名称</th>
                        <th class="w80">规格</th>
                        <th class="w130">注册证号/<br>批准文号</th>
                        <th class="w130">生产<br>厂商</th>
                        <th class="w60">生产<br>来源</th>
                        <th class="w60">小包装<br>单位</th>
                    </tr>
                    </thead>
                    <tbody>


                 <!-- 对码结果 -->
                 
                    <tr v-for='goods in goodList'>
                        <!-- <template v-if="goods.id!=good.id"> -->
                        <input type="hidden" v-model="goods.id" >
                            <td>
                            <template v-if="goods.standardCode==null">
                                <a class="btn-d btn-d-activate" href="javascript:;" @click="match">配对</a>
                            </template>
                             <template v-if="goods.standardCode!=null">
                                <a class="btn-d btn-d-green btn-d-activate" href="javascript:;">取消</a><div class="text-color-red">已配对</div>
                            </template>
                            </td>
                            <td>{{$index+1}}<span class="star-group"><span></span><span></span><span></span></span></td>
                            <td>
                                <div class="pro-pic" style="background-image: url(../assets/c17.jpg)">
                                    <span class="pic-max blue-search"></span>
                                </div>
                            </td>
                            <td><div class="p-lr-10">{{{goods.goodsName}}}</div></td>
                            <td>无</td>
                            <td><div class="p-lr-10">{{{goods.zczh}}}</div></td>
                            <td><div class="p-lr-10">{{{goods.factory}}}</div></td>
                            <td>{{{goods.importedFlag}}}</td>
                            <td>支</td>
                        <!-- </template> -->
                    </tr>
                
                   <!--  <tr>
                        <td><a class="btn-d btn-d-activate" href="javascript:;">配对</a></td>
                        <td>02<span class="star-group"><span></span><span></span></span></td>
                        <td>
                            <div class="pro-pic" style="background-image: url(../assets/c17.jpg)">
                                <span class="pic-max blue-search"></span>
                            </div>
                        </td>
                        <td><div class="p-lr-10">一次性使用桡动脉血管鞘组</div></td>
                        <td>无</td>
                        <td><div class="p-lr-10">国械注准20163770179</div></td>
                        <td><div class="p-lr-10">乐普（北京）医疗器械股份有限公司</div></td>
                        <td>国产</td>
                        <td>支</td>
                    </tr>
                    <tr>
                        <td><a class="btn-d btn-d-activate" href="javascript:;">配对</a></td>
                        <td>03<span class="star-group"><span></span></span></td>
                        <td>
                            <div class="pro-pic" style="background-image: url(../assets/c17.jpg)">
                                <span class="pic-max blue-search"></span>
                            </div>
                        </td>
                        <td><div class="p-lr-10">一次性使用引流导管及附件</div></td>
                        <td>无</td>
                        <td><div class="p-lr-10">国食药监械（准）字2014第3660452号</div></td>
                        <td><div class="p-lr-10">乐普（北京）医疗器械股份有限公司</div></td>
                        <td>国产</td>
                        <td>支</td>
                    </tr>
                    <tr>
                        <td><a class="btn-d btn-d-activate" href="javascript:;">配对</a></td>
                        <td>04<span class="star-group"><span></span></span></td>
                        <td>
                            <div class="pro-pic" style="background-image: url(../assets/c17.jpg)">
                                <span class="pic-max blue-search"></span>
                            </div>
                        </td>
                        <td><div class="p-lr-10">一次性使用引流导管及附件</div></td>
                        <td>无</td>
                        <td><div class="p-lr-10">国食药监械（准）字2014第3660452号</div></td>
                        <td><div class="p-lr-10">乐普（北京）医疗器械股份有限公司</div></td>
                        <td>国产</td>
                        <td>支</td>
                    </tr>
                    <tr>
                        <td><a class="btn-d btn-d-activate" href="javascript:;">配对</a></td>
                        <td>05<span class="star-group"><span></span></span></td>
                        <td>
                            <div class="pro-pic" style="background-image: url(../assets/c17.jpg)">
                                <span class="pic-max blue-search"></span>
                            </div>
                        </td>
                        <td><div class="p-lr-10">一次性使用引流导管及附件</div></td>
                        <td>无</td>
                        <td><div class="p-lr-10">国食药监械（准）字2014第3660452号</div></td>
                        <td><div class="p-lr-10">乐普（北京）医疗器械股份有限公司</div></td>
                        <td>国产</td>
                        <td>支</td>
                    </tr> -->

                    </tbody>
                </table>
                <div class="pagination page-line m-20-0">
                    <em>为您智能匹配出共有<i></i>个选项</em>
                    <pagination 
                         @page-change="getData" 
                         :class="['m-20-0']"
                         :page-no.sync="search.page" 
                         :total-pages.sync="search.totalPages"></pagination>
                </div>
                <div class="zip"></div>
            </div>
        </div>
        <!--type-add-table end-->

    </div>
</template>

<script>
module.exports = {
    data: function () {
        return {
            good: {
                bigType: {},
                smallType: {}
            },
            bigTypes:[],
            smallTypes:[],
            goodList: [],
            search: {
              pageSize: 50,
              page: 1,
              totalPages: 0,
              search_EQ_bigTypeId:'',
              search_EQ_smallTypeId:'',
              search_EQ_importedFlag:'',
              search_EQ_spec:''      
            }
        };
    },
    watch: {
        'good.bigType.id': function (v) {
            if(v){
                this.getSmallTypes();
            }
        }
    },
    methods: {
        getData: function () {
        var self = this;
        Ajax.get('/goods',this.search)
          .then(function (response) {
            var data = response.data.data;
            self.$set('goodList', data.list);
            self.search.totalPages = data.totalPages;
          });
       },
        getGood: function () {
            var self = this;
            if (this.$route.params.id != '0') {
                Ajax.get('/goods/' + this.$route.params.id)
                        .then(function (response) {
                            var good = response.data.data;
                            if (!good.bigType) {
                                good.bigType = {};
                            }
                            if (!good.smallType) {
                                good.smallType = {};
                            }
                            self.$set('good', good);
                        })
            } else {
                this.good = {
                    bigType:{},
                    smallType:{}
                };
            }

        },
        saveGood: function () {
            var self = this;
            Ajax.post('/goods/save', this.good)
                    .then(function (response) {
                        alert('保存成功');
                        self.$route.router.go('/good');
                    });
        },
        deleteGood:function(data){
          var self = this;
          Ajax.post('/goods/delete',this.good)
            .then(function(response){
              alert("删除成功！");
              self.$route.router.go('/good');
            });
        },
        getBigTypes: function () {
            var self = this;
            Ajax.get('/goodsBigType/all')
                .then(function (response) {
                    self.bigTypes = _.map(response.data.data, function (item) {
                        return {
                            label: item.name,
                            value: item.id
                        };
                    });
                })
        },
        getSmallTypes: function () {
            var self = this;
            if(this.good.bigType.id){
                Ajax.get('/goodsBigType/'+this.good.bigType.id+'/smallTypes')
                    .then(function (response) {
                        self.smallTypes = _.map(response.data.data, function (item) {
                            return {
                                label: item.name,
                                value: item.id
                            };
                        });
                    });
            }

        },
        match:function(){
            var self=this;
            Ajax.post('/goods/match',this.good)
                    .then(function (response) {
                        alert('匹配成功');
                        self.$route.router.go('/good');
                    });
        }
    },
    route: {
        activate: function () {
            this.getGood();
            this.getBigTypes();
        }
    }
};

</script>