<template>
    <div class="container resource close-left-menu contaNEW">
        <div class="pop-banner clearfix">
            <!-- <div class="operate-btns">
                <a @click="submitMatched()" class="fbtn fb-submit">提交</a>
            </div> -->
            <h3 class="current-module">商品UDI对码</h3>
        </div>


        <!--supply-supplylist start-->
        <div class="supplylist clearfix supply-select">

            <!-- <div class="supplylist-root pt0 pr0 w240" style="border: none">
                <form class="search-bar mb-30" style="min-width: 240px;" active="###">
                    <div class="search-btn fr cur-poin" @click='getMedList'>
                    </div>
                    <input type="text" class="w180" placeholder="输入医院搜索" v-model="medname" maxlength="20" v-rule>
                </form>
                <div class="root-node" id="sortable" style='height: 480px;'>
                    <div class="group-row">
                        <div class="itable t-left box-shadow" style="border-bottom: 1px #e6e6e6 solid;"
                             v-for="medlist in getMedLists">
                            <div class="control radio-control pd10">
                                <input type="radio" id="radios{{$index+1}}" name="radio" v-model="checkHospital"
                                       value="{{medlist.guid}}" style="opacity: 0;" v-on:click="getMed(medlist.guid)">
                                <label class="radio mr-0" for="radios{{$index+1}}">
                                    <span class="text-color-blue">{{ medlist.medname }}</span> <br>
                                    <p class="ml-25">
                                        明细：{{ medlist.count }} <br>
                                        {{ medlist.pubtime}} <br>
                                        {{ medlist.flag=='P2' ? '已发布':medlist.flag}}
                                    </p>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div> -->
            <div style="padding-left: 25px" class="supplylist-table ml-0">
                <div class="w670 h-50">
                    <form class="search-bar w370 fl" active="###" v-show="shlist">
                        <div class="search-btn fr cur-poin" @click='getMedListClick'>
                        </div>
                        <input type="text" placeholder="录入商品编码、商品名称、注册证号模糊搜索" v-model="goodsinfo" maxlength="50" >
                    </form>
                    <form class="search-bar w370 fl" active="###" v-show="!shlist">
                        <div class="search-btn fr cur-poin" @click='checkboxGoodslist'>
                        </div>
                        <input type="text" placeholder="录入商品编码、商品名称、注册证号模糊搜索" v-model="goodsinfos">
                    </form>
                    <div class="checkbox-control fr">
                        <input type="checkbox" name="cb" id="cball{{index}}" v-model="getNoMedGoods">
                        <label class="checkbox mr-0" for="cball{{index}}">显示已对码商品</label>
                    </div>
                </div>

                <div v-show="shlist">
                    <div class="fheader no-bottom pd0">
                        <h4 class="fh-good">医院商品</h4>
                    </div>
                    <table class="itable itable-thead-13px">
                        <thead>
                        <tr>
                            <th class="w50">序号</th>
                            <th class="w120">商品名称</th>
                            <th class="w120">商品编码</th>
                            <th class="w40">商品规格</th>
                            <th class="w40">商品型号</th>
                            <th class="w150">生产厂商</th>
                            <th class="w70">注册证号</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-if="getMedcontentList.length==0">
                            <td colspan="11">暂无数据！</td>
                        </tr>
                        <tr v-for="sup in getMedcontentList">
                            <td>
                                <div class="control radio-control">
                                    <input type="radio" id="radio1{{sup.index}}" :name="'radio1' + sup.goodsguid"
                                           :checked="checkHospitalGood === sup.goodsguid" style="opacity: 0;" 
                                           v-on:change="getSupDoods(sup.masterguid,sup.tempguid,sup.rowno,sup.medguid,sup.goodsguid,sup.productGuid,sup.goodsName,sup.goodsSpec,sup.goodsCode,sup.producer,sup.brand,sup.registKey,sup.productionAddress,sup.minUnitStyle,sup.importedFlag,sup.bigUintStyle,sup.bigUintQty,sup.unitstyle)">
                                    <label class="radio mr-0" for="radio1{{sup.index}}">
                                        {{ sup.index + 1 }}
                                    </label>
                                </div>
                            </td>
                            <td>{{sup.goodsName}}</td>
                            <td>{{sup.goodsCode}}</td>
                            <td>{{sup.goodsSpec}}</td>
                            <td>{{sup.goodsModel}}</td>
                            <td>{{sup.producer}}</td>
                            <td>{{sup.registKey}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="pagination m-20-0">
                        <em class="page">明细条目数【{{ search.total }}】</em>
                        <pagination
                                @page-change="getMedListClick()"

                                :page-no.sync="search.page"
                                :total-pages.sync="search.totalPages">
                        </pagination>
                    </div>
                    <div class="fheader no-bottom pd0">
                        <h4 class="fh-good">医疗器械唯一标识</h4>
                        <div class="fr text-color-red" v-if="flagType == 'oes'">不是这条数据？您可以<a class="btn button-green ml-10" v-on:click="abolishMaster">重新检索</a></div>
                        <div class="group-row t-center" v-if="isShowAddMed">
                            <span class="text-color-red">匹配找不到？您可以</span> <button  v-link='{path:"/supplierAddList/"+match.medGoodsguid}' class=" btn-d btn-d-lg btn-d-activate btn-d-circle">添加为商品</button>
                        </div>
                    </div>
                    <table class="itable itable-thead-13px">
                        <thead>
                        <tr>
                            <th class="w90"></th>
                            <th class="w80">商品名称</th>
                            <th class="w80">商品规格</th>
                            <th class="w100">生产厂商</th>
                            <th class="w70">注册证号</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-if="getDMResultList.length == 0">
                            <td colspan="11">暂无数据！</td>
                        </tr>
                        <tr v-for="supGoods in getDMResultList" v-else>
                            <td>
                                <a href="javascript:;" class="btn button-green"
                                   v-on:click="clickMatch(this.getMedcontentList[0].guid,supGoods.ZXXSDYCPBS)">配对</a>
                            </td>
                            <td v-html="supGoods.CPMCTYMC"></td>
                            <td>{{ supGoods.GGXH}}</td>
                            <td>{{ supGoods.YLQXZCRBARMC}}</td>
                            <td class="pr10" v-html="supGoods.ZCZBHHZBAPZBH"></td>
                            <!-- <td>
                              <span class="ct-col w30">
                                <span class="table-detail-icon icon-green">医</span>
                                <span class="table-detail-icon icon-green mt-20">供</span>
                              </span>
                            </td>
                            <td>
                                <div style="width: 102px; height: 72px; border:1px solid #999999; border-radius:8px; margin-left: 13px;">
                                    <div class="w50 fl">
                                        <input type="text" v-model='supGoods.purconverratio' class=""
                                               style="border: 0px; height: 34px; border-radius: 8px 0px 0px 0px; box-shadow:none;"
                                               @change="medCheckInfo(supGoods.purconverratio, $index, 7)">
                                        <p style="background: #999999; width: 40px;height: 34px; height: 1px; margin-left: 10px;"></p>
                                        <input type="text" v-model='supGoods.supconverratio'
                                               style="border: 0px; border-radius: 0px 0px 0px 8px; box-shadow:none;"
                                               @change="supCheckInfo(supGoods.supconverratio, $index, 7)">
                                    </div>
                                    <div class="w50 fl">
                                        <p class=" lh-34 h-34" style="background-color: #ffffff;">{{unitstyle}}</p>
                                        <p style="background: #999999; width: 40px; height: 1px; margin-right: 10px; "></p>
                                         <div v-on:click="getGoodsUnits($index,supGoods.guid)" v-if="!sh[$index]">{{supGoods.unitStyle}}</div> 
                                        <select v-on:click="getGoodsUnits($index,supGoods.guid)" v-if="!sh[$index]"
                                                style="border: 0px;border-radius:0px 0px 8px 0px;">
                                            <option>
                                                {{supGoods.unitStyle}}
                                            </option>
                                        </select>
                                        <select v-model="supGoods.unitStyle" style="border: 0px;border-radius:0px 0px 8px 0px;" v-else>
                                            <option v-for="option in getGoodsUnitsList" v-bind:value="option">
                                                {{option}}
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <select v-model="user.guid">
                                    <option v-for="option in getUsersList" v-bind:value="option.guid">
                                        {{option.realname}}
                                    </option>
                                </select>
                            </td> -->
                        </tr>
                        </tbody>
                    </table>
                    <div class="pagination m-20-0 hide">
                        <em class="page" v-if="search">明细条目数【{{ search.total }}】</em>
                        <pagination
                                @page-change="getSupDoods()"

                                :page-no.sync="search.page"
                                :total-pages.sync="search.totalPages">
                        </pagination>
                    </div>
                </div>

                <div v-show="!shlist">
                    <div class="fheader no-bottom pd0">
                        <h4 class="fh-good">已对码医院商品</h4>
                    </div>
                    <table class="itable itable-thead-13px">
                        <thead>
                        <tr>
                            <th class="w50">序号</th>
                            <th class="w150">商品名称</th>
                            <th class="w40">商品规格</th>
                            <th class="w150">生产厂商</th>
                            <th class="w50">价格</th>
                            <th class="w70">注册证号</th>
                            <th class="w50">商品型号</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-if="!checkgetMedcontentList">
                            <td colspan="11">暂无数据！</td>
                        </tr>
                        <tr v-for="sup in checkgetMedcontentList">
                            <td>
                                <div class="control radio-control">
                                    <input type="radio" id="radio2{{sup.index}}" :name="'radio2' + sup.goodsguid"
                                           v-model="checkHospitalGood1" value="{{sup.goodsguid}}" style="opacity: 0;"
                                           v-on:change="getSupDoods1(sup.uDICode,sup.guid)">
                                    <label class="radio mr-0" for="radio2{{sup.index}}">
                                        {{ sup.index + 1 }}
                                    </label>
                                </div>
                            </td>
                            <td>{{sup.goodsName}}</td>
                            <td>{{sup.goodsSpec}}</td>
                            <td>{{sup.producer}}</td>
                            <td>{{sup.price | numDigit 2 | numFmt}}</td>
                            <td>{{sup.registKey}}</td>
                            <td>{{sup.goodsModel}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="pagination m-20-0">
                        <em class="page">明细条目数【{{ search1.total }}】</em>
                        <pagination
                                @page-change="checkboxGoodslist()"

                                :page-no.sync="search1.page"
                                :total-pages.sync="search1.totalPages">
                        </pagination>
                    </div>
                    <div class="fheader no-bottom pd0">
                        <h4 class="fh-good">医疗器械唯一标识</h4>
                    </div>
                    <table class="itable itable-thead-13px">
                        <thead>
                        <tr>
                            <th class="w90"></th>
                            <th class="w50">序号</th>
                            <th class="w80">商品名称</th>
                            <th class="w80">商品规格</th>
                            <th class="w100">生产厂商</th>
                            <th class="w70">注册证号</th>
                            
                            <!-- <th class="w70">单位系数</th>
                            <th class="w70">包装单位</th>
                            <th class="w100">业务员</th> -->
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-if="getDMResultList1.length==0">
                            <td colspan="11">暂无数据！</td>
                        </tr>
                        <tr v-for="suplist in getDMResultList1">
                            <td>
                                <a href="javascript:;" class="btn button-green" v-on:click="cancelMatched()">取消配对</a>
                            </td>
                            <td class="text-color-red">{{ $index + 1 }}</td>
                            <td class="text-color-red">{{ suplist.CPMCTYMC }}</td>
                            <td class="text-color-red">{{ suplist.GGXH }}</td>
                            <td class="text-color-red">{{suplist.YLQXZCRBARMC}}</td>
                            <!-- <td class="pr10" v-html="suplist.registKey"></td> -->
                            <!-- <td>
                <span class="ct-col w30">
                  <span class="table-detail-icon icon-green">医</span>
                  <span class="table-detail-icon icon-green mt-10">供</span>
                </span>
                            </td> -->
                            <td class="text-color-red"> {{ suplist.ZCZBHHZBAPZBH }} </td>
                            <!-- <td>
                                {{unitstyle1}}</br>
                                {{suplist.supplyUnit}}
                            </td>
                            <td>
                                {{suplist.realName}}
                            </td> -->
                        </tr>
                        </tbody>
                    </table>
                    <div class="pagination m-20-0 hide">
                        <em class="page" v-if="search1">明细条目数【{{ search1.total }}】</em>
                        <pagination
                                @page-change="getSupDoods()"

                                :page-no.sync="search1.page"
                                :total-pages.sync="search1.totalPages">
                        </pagination>
                    </div>

                </div>

            </div>
        </div>
        <!--supply-supplylist end-->
    </div>
</template>
<script>
const Vue = require('vue');

    module.exports = {
        data: function () {
            return {
                getMedLists: [],     //左侧列表
                medname: '',
                goodsinfo: '',
                getMedcontentList: [],
                search: {
                    pageSize: 5,
                    page: 1,
                    total: 0,
                    totalPages: 0
                },
                search1: {
                    pageSize: 20,
                    page: 1,
                    total: 0,
                    totalPages: 0
                },
                getNoMedGoods: '',
                guid: '',
                checkHospital: '',
                checkHospitalGood: '',
                checkHospitalGood1: '',
                getDMResultList: {},
                getGoodsUnitsList: [],
                getUsersList: [],
                curUser: '',
                sh: [],
                match: {
                    guid: '',
                    rowno: '',
                    medguid: '',
                    medGoodsguid: '',
                    supplierGoodsguid: '',
                    staffguid: '',
                    staffname: '',
                    supplyunit: '',
                    purconverratio: '',
                    supconverratio: '',
                },
                unitstyle: '',
                unitstyle1: '',
                shlist: true,
                queryMatchedGoodsList: [],
                cancelMatchedList: {
                    tempguid: '',
                    rowno: '',
                },
                flagType:'',
                isShowAddMed: false,
                getDMResultList1:[],
                qguid:''
            };
        },
        watch: {
            getNoMedGoods(flg) {
                var self = this;
                if (flg) {
                    self.checkboxGoodslist();
                    self.getNoGoods = flg;
                    self.shlist = false;
                    self.checkHospitalGood1 = '';
                    self.$set("queryMatchedGoodsList", []);
                } else {
                    self.$set("getDMResultList", []);
                    self.getMedListClick();
                    self.getNoGoods = flg;
                    self.shlist = true;
                    self.checkHospitalGood = '';
                }
            },
        },
        computed: {
            // 获取vuex中数据的方法
            user: function () {
                return this.$store.state.user.curUser;
            }
        },
        methods: {
            //左侧列表 加载数据
            // getMedList: function () {
            //     var self = this;
            //     Ajax.post('/relation/getMedList', {'medname': self.medname})
            //         .then(function (response) {
            //             var data = response.data.data;
            //             if (response.data.errorCode == 0) {
            //                 self.$set("getMedLists", data);
            //                 if (data.length == 0) {
            //                     //跳转
            //                     // self.$router.go({
            //                     //     path: '/procurementSupplierList'
            //                     // });
            //                 }
            //                 for (var i = 0; i < data.length; i++) {
            //                     self.guid = data[0].guid;
            //                     self.checkHospital = data[0].guid;
            //                 }
            //                 self.getMedListClick();
            //             } else {
            //                 layer.msg(response.data.message);
            //             }
            //         })
            // },
            getMed: function (guid) {
                var self = this;
                self.guid = guid;
                self.getMedListClick();
            },
            //加载右侧商品数据
            getMedListClick: async function () {
    try {
        var self = this;
        var guid = self.guid;

        var response = await Ajax.post('/udi/getHospitalGoods', {
            'page': self.search.page,
            'pageSize': self.search.pageSize,
            'totalPages': self.search.totalPages,
            'guid': self.guid,
            'goodsinfo': self.goodsinfo
        });

        var data = response.data.data;
        self.$set('getMedcontentList' , data.list)
        self.search.totalPages = data.totalPages;
        self.search.total = data.total;
        var i=0
        this.getMedcontentList.forEach(element => {
           
           Vue.set(element,'index',i++)
       });
    //    console.log(this.getMedcontentList);
    } catch (error) {
        // 处理错误
        console.error(error);
    }
},
            //显示已对码商品
            checkboxGoodslist: async function () {
                try {
                    var self = this;
                    var guid = self.guid;
                    var response = await Ajax.post('/udi/queryMatchedHospitalGoods', {
                        'page': self.search1.page,
                        'pageSize': self.search1.pageSize,
                        'totalPages': self.search1.totalPages,
                        'guid': self.guid,
                        'goodsinfo': self.goodsinfos
                    });

                    var data = response.data.data;
                    self.$set("checkgetMedcontentList", data.list);
                    self.search1.totalPages = data.totalPages;
                    self.search1.total = data.total;
                    var i = 0
                    this.checkgetMedcontentList.forEach(element => {

                        Vue.set(element, 'index', i++)
                    });
                    console.log(this.checkgetMedcontentList);
                } catch (error) {
                    console.error(error);
                    // Handle any errors here
                }
            },
            //对码商品
            getSupDoods: function ( goodsname, goodsspec, producer,registkey) {
                
                var self = this;
                
                Ajax.post('/udi/getDMResult', {
                    // 'page': self.search1.page,
                    // 'pageSize': self.search1.pageSize,
                    // 'totalPages': self.search1.totalPages,
                     "from": "0",
                     "CPMCTYMC": goodsname,
                     "ZCZBHHZBAPZBH": registkey,
                     "YLQXZCRBARMC": producer,
                     "GGXH":goodsspec
                })
                    .then(function (response) {
                        var data = response.data;
                        console.log(data.data.data);
                        if(data.errorCode==0){
                            self.$set("getDMResultList", data.data.data);
                            // console.log(this.getDMResultList);
                        }
                    })
                // self.getUsers();
            },
            getSupDoods1: function (uDICode,guid) {
                     var self = this
                Ajax.post('/udi/getDMResult', {
                    // 'page': self.search1.page,
                    // 'pageSize': self.search1.pageSize,
                    // 'totalPages': self.search1.totalPages,
                    "from": "0",
                    'ZXXSDYCPBS':uDICode
                })
                    .then(function (response) {
                        var data = response.data;
                        console.log(data.data.data);
                        if(data.errorCode==0){
                            self.$set("getDMResultList1", data.data.data);
                            self.$set("qguid", guid);
                            // console.log(this.getDMResultList);

                        }
                    })
                // self.getUsers();
                // console.log(index);
            },
            //对码商品
            // getGoodsUnits: function (index, guid) {
            //     var self = this;
            //     self.sh.splice(index, 1, true);
            //     Ajax.post('/relation/getGoodsUnits', {'guid': guid})
            //         .then(function (response) {
            //             var data = response.data.data;
            //             self.$set("getGoodsUnitsList", data);
            //         })
            // },
            //对码商品
            // getUsers: function () {
            //     var self = this;
            //     Ajax.post('/relation/getUsers', {})
            //         .then(function (response) {
            //             var data = response.data.data;
            //             self.$set("getUsersList", data);
            //         })
            // },
            //配对
            clickMatch: async function (guid, udiCode) {
    try {
        this.getMedcontentList.guid = guid;
        this.getDMResultList.ZXXSDYCPBS = udiCode;

        const response = await Ajax.post('/udi/getPairOfCodesGoods', {
            'guid': guid,
            'udiCode': udiCode
        });

        var data = response.data;
        console.log(data);
        
        if (data.errorCode == 0) {
            console.log(111);
            this.getMedListClick();
            this.$set("getDMResultList", []);
            layer.msg('对码成功');
        } else {
            layer.msg(response.data.message);
        }
    } catch (error) {
        console.error(error);
        // Handle any errors here
    }
},
            //对码商品
            // getSupDoodsMatch: function (guid, goodsguid, rowno, unitstyle) {
            //     var self = this;
            //     self.cancelMatchedList.tempguid = guid;
            //     self.cancelMatchedList.rowno = rowno;
            //     self.checkHospitalGood1 = goodsguid;
            //     self.unitstyle1 = unitstyle;
            //     Ajax.post('/relation/queryMatchedSupGoods', {'tempguid': guid, 'rowno': rowno})
            //         .then(function (response) {
            //             var data = response.data.data;
            //             self.$set("queryMatchedGoodsList", data);
            //         })
            // },
            //取消配对
            cancelMatched: function () {
                var self = this;
                
                Ajax.post('/udi/cancelMatched', {'guid':this.qguid})
                    .then(function (response) {
                        var data = response.data.data;
                        console.log(data);
                        if (response.data.errorCode == 0) {
                            self.checkboxGoodslist();
                            self.$set("getDMResultList1", []);
                            self.$set("qguid", '');
                        } else {
                            layer.msg(response.data.message);

                        }
                    })
            },
            //提交验证
            // submitMatched: function () {
            //     var self = this;
            //     if (self.getMedcontentList.length != 0) {
            //         self.MessageBox({
            //             title: '提示',
            //             message: '医院商品列表还有【' + self.getMedcontentList.length + '】条商品未对码，是否放弃供应？',
            //             type: 'alert',
            //             showCancelButton: true
            //         }, function (action) {
            //             if (action == 'cancel') {
            //                 return;
            //             } else {
            //                 self.submitMatchedList();
            //             }
            //         });
            //     } else {
            //         self.submitMatchedList();
            //     }
            // },
            // 提交
            // submitMatchedList: function () {
            //     var self = this;
            //     Ajax.post('/relation/submitMatched', {'guid': self.guid})
            //         .then(function (response) {
            //             var data = response.data.data;
            //             if (response.data.errorCode == 0) {
            //                 self.MessageBox({
            //                     title: '提示',
            //                     message: response.data.message,
            //                     type: 'alert'
            //                 }, function (action) {
            //                     self.getMedList();
            //                     self.$set("getDMResultList", []);
            //                 });
            //             } else {
            //                 layer.msg(response.data.message);

            //             }
            //         })
            // },
            // 验证医院单位系数
        //     medCheckInfo: function (po, index, code) {
        //         var self = this;
        //         if (po <= 0 || po > 99 || isNaN(po)) {
        //             self.MessageBox({title: '警告', message: "请输入大于0小于99的正整数!", type: 'alert'}, function (action) {
        //                 if (action == 'confirm') {
        //                     if (code == 1) {
        //                         self.$set('getDMResultList[' + index + '].purconverratio', '');
        //                     } else {
        //                         self.$set('getDMResultList[' + index + '].purconverratio', '');
        //                     }
        //                 }
        //             });
        //         }
        //     },
        //     //验证供应商单位系数
        //     supCheckInfo: function (po, index, code) {
        //         var self = this;
        //         if (po <= 0 || po > 99 || isNaN(po)) {
        //             self.MessageBox({title: '警告', message: "请输入大于0小于99的正整数!", type: 'alert'}, function (action) {
        //                 if (action == 'confirm') {
        //                     if (code == 1) {
        //                         self.$set('getDMResultList[' + index + '].supconverratio', '');
        //                     } else {
        //                         self.$set('getDMResultList[' + index + '].supconverratio', '');
        //                     }
        //                 }
        //             });
        //         }
        //     },
        },
        route: {
            activate: function () {
                var self = this;
                self.medname = '';
                // self.getMedList();
                self.isShowAddMed=false;
            }
        }
    };
</script>