<template>
    <div class="container resource close-left-menu">
        <div class="pop-banner clearfix">
            <div class="operate-btns">
            </div>
            <h3 class="current-module">供应商商品对码</h3>
        </div>
        <ul class="nav-code mb-20 pl0" style="margin-top: -25px;">
            <li class="code1" @click="search.mark='N'" :class="search.mark=='N'?'active':''"> 未对码</li>
            <li class="code2" @click="search.mark='Y'" :class="search.mark=='Y'?'active':''"> 已对码</li>
        </ul>
        <div class="fast-search-form pd-form code-form pb0">
            <div class="group-row">
                <div class="dis-inline ">
                    <div style="position: relative">
                        <input type="text" v-model="search.chinesename" :disabled="disabled"
                               class="inp4" placeholder="供应商名称" @focus='clickHint' @blur="closeHintsBox">
                        <div class="hintsbox" v-if="showHints">
                            <ul class="hintslist">
                                <li v-for="(index,item) in getDistributions" ref="hint" class="hint"
                                    @click="fillInput(item)"><span class="dis-inline" style="max-width: 190px"> {{item.chinesename}} </span><span
                                        class="dis-inline  fr"
                                        v-if="search.mark=='N'">【{{item.wdmgods}}】</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="dis-inline">
                    <input type="text" value="" id="in3" placeholder='商品名称，规格，生产厂商，注册证号'
                           v-model="search.goodsname">
                </div>
                <div class="dis-inline  " style="width: 200px!important;">
                    <div class="control">
                        <select v-model="search.goodscate">
                            <option value="">---请选择商品大类---</option>
                            <option v-for="item in goodscate" :value="item.value">{{ item.label }}</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="group-row" style="float:right;height: 28px;">
                <button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle"
                        @click="getfmedgoodsFn(true)">
                    查 询
                </button>
            </div>

            <!--<div class="fheader  mb-0" style="height: auto;">-->
            <!--<h4 class="fh-good">供应商商品</h4>-->
            <!--</div>-->
            <table class="itable itable-thead-13px codebox  ">
                <thead>
                <tr>
                    <th class="w50">序号</th>
                    <th class="w100">商品编码</th>
                    <th class="w150">商品名称</th>
                    <th class="w40">商品规格</th>
                    <th class="w150">生产厂商</th>
                    <th class="w70">注册证号/批准文号</th>
                    <th class="w50">包装单位</th>
                    <th class="w50">商品大类</th>
                    <th v-if="search.mark=='Y'" class="w100">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-if="getmfmedgoods.length==0">
                    <td colspan="11">暂无数据！</td>
                </tr>
                <tr v-for="sup in getmfmedgoods">
                    <td>
                        <div class="control radio-control">
                            <input type="radio" :id="sup.guid" name="radio1"
                                   v-model="checkGuid" value="{{sup.guid}}"
                                   style="opacity: 0;"
                                   v-on:click="getSupDoods(sup)">
                            <label class="radio mr-0" :for="sup.guid">
                                {{ $index + 1 }}
                            </label>
                        </div>
                    </td>
                    <td class=" pl10 pr10">{{sup.goodscode}}</td>
                    <td class="t-left pl10 pr10">{{sup.goodsname}}</td>
                    <td>{{sup.goodsspec}}</td>
                    <td>{{sup.producer}}</td>
                    <td>{{sup.registkey}}</td>
                    <td>{{sup.minunitstyle}}</td>
                    <td>{{sup.goodscate|GOODSCATE}}</td>
                    <td v-if="search.mark=='Y'">
                        <a href="javascript:;" class="btn button-green"
                           v-on:click="cancelMatched(sup.guid)">取消配对</a>
                    </td>
                </tr>
                </tbody>
            </table>

            <div style="padding: 10px 0;">
                <em class="page pb10 " style="color: #606f7a;position: absolute;">明细条目数【{{ search.total }}】</em>
                <pagination @page-change="getfmedgoodsFn()" :page-no.sync="search.page"
                            :total-pages.sync="search.totalPages" style="margin: 0">
                </pagination>
            </div>
        </div>

        <div class="fheader mb-0" style="height: auto;margin-top: -30px">
            <h4 class="fh-good">主数据商品</h4>
        </div>

        <table class="itable itable-thead-13px codebox">
            <thead>
            <tr>
                <th v-if="search.mark=='N'" class="w30"></th>
                <th class="w80">商品编码</th>
                <th class="w100">商品名称</th>
                <th class="w30">商品规格</th>
                <th class="w80 ">生产厂商</th>
                <th class="w50">注册证号/批准文号</th>
                <!--<th class="w30">{{search.mark=='N'?'小包装':'包装单位'}}</th>-->
                <th class="w30">包装单位</th>
            </tr>
            </thead>
            <tbody v-if="search.mark=='N'">
            <tr v-if="getDMResultList.length==0">
                <td colspan="11">暂无数据！</td>
            </tr>
            <tr v-for="supGoods in getDMResultList">
                <td>
                    <a href="javascript:;" class="btn button-green"
                       v-on:click="clickMatch(supGoods.guid)">配对</a>
                </td>

                <td class="pl5">
                    {{{ supGoods.goodsCode }}}
                </td>
                <td class="pl10 t-left pr10">
                    {{{ supGoods.goodsName}}}
                </td>
                <td class="pl5">
                    {{{ supGoods.goodsSpec }}}
                </td>
                <td class="pl5">
                    {{{supGoods.producer}}}
                </td>
                <td class="t-left pr5">
                    {{{supGoods.registKey}}}
                </td>
                <td>
                    {{{supGoods.minUnitStyle}}}
                </td>
                <!--<td>-->
                <!--{{{supGoods.goodscate|GOODSCATE}}}-->
                <!--</td>-->
            </tr>
            </tbody>
            <tbody v-else>
            <tr v-if="getDMResultList.length==0">
                <td colspan="11">暂无数据！</td>
            </tr>
            <tr v-for="suplist in getDMResultList">
                <td>{{ suplist.goodscode }}</td>
                <td class="t-left pr10 pl10">{{ suplist.goodsname}}</td>
                <td>{{ suplist.goodsspec }}</td>
                <td>{{suplist.producer}}</td>
                <td>{{suplist.registkey}}</td>
                <td>{{suplist.minunitstyle}}</td>
                <!--<td>{{suplist.goodscate|GOODSCATE}}</td>-->
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                emp: '----商品大类---',
                getDistributions: [], //医院
                showHints: false,
                search: {
                    pageSize: 5,
                    page: 1,
                    total: 0,
                    totalPages: 0,
                    goodsname: '',
                    supplierguid: '',
                    chinesename: '',
                    mark: 'N',
                    goodscate: '',
                },
                getmfmedgoods: [], //医院商品数据
                getDMResultList: [], //主数据对码商品明细
                checkGuid: '',
                goodscate: [{
                    "label": "医疗器械",
                    "value": "01"
                }, {
                    "label": "药品",
                    "value": "02"
                }, {
                    "label": "后勤物资",
                    "value": "03"
                }, {
                    "label": "消毒用品",
                    "value": "04"
                }, {
                    "label": "洗涤用品",
                    "value": "05"
                }, {
                    "label": "中药材",
                    "value": "06"
                }, {
                    "label": "设施设备",
                    "value": "07"
                }, {
                    "label": "营养制剂",
                    "value": "09"
                }, {
                    "label": "其它",
                    "value": "08"
                }],
            };
        },
        watch: {
            'search.mark': function () {
                if (this.search.chinesename) {
                    this.getfmedgoodsFn(true);
                }
                this.getmfmedgoods = [];
                this.getDMResultList = [];
                this.checkGuid = '';
            },
            'search.chinesename': function (val, oldVal) {

                this.search.supplierguid = '';
                this.search.page = 1;
                this.search.total = 0;
                this.search.totalPages = 0;
                this.search.goodscate = '';
                this.search.goodsname = '';
                this.getmfmedgoods = [];
                this.showHints = true;
                this.getManagemeds();
                this.getDMResultList = [];

            },
            'search.goodscate': function (val) {
                if (this.search.supplierguid) {
                    this.getfmedgoodsFn(true);
                }
            }
        },
        methods: {
            clickHint: function () {
                if (this.search.chinesename.length == 0) {
                    this.showHints = true;
                    this.getManagemeds();
                }

            },
            //加载医院下拉框
            getManagemeds: function () {
                var self = this;
                Ajax.post('/dataadmin/getmfsuppliers', {
                    mark: self.search.mark,
                    chinesename: self.search.chinesename,
                }).then(function (response) {
                    var data = response.data.data;
                    self.$set("getDistributions", data);
                })
            },
            //关闭候选框
            closeHintsBox: function () {
                var self = this;
                setTimeout(function () {
                    self.showHints = false;
                }, 500)
            },
            // 点击候选框
            fillInput: function (item) {
                this.search.chinesename = item.chinesename;
                this.closeHintsBox();
                var self = this
                setTimeout(function () {
                    self.search.supplierguid = item.guid;
                    self.getfmedgoodsFn(true);
                }, 500)
            },
            //医院商品 加载数据
            getfmedgoodsFn: function (val) {
                var self = this;
                if (val) {
                    self.search.page = 1;
                    self.search.total = 0;
                }

                if (!self.search.supplierguid) {
                    layer.msg('请选择供应商');
                    return;
                }
                Ajax.post('/dataadmin/getmfsuppliergoods', self.search)
                    .then(function (response) {
                        var data = response.data.data;
                        if (response.data.errorCode == 0) {
                            self.$set("getmfmedgoods", data.list);
                            self.search.totalPages = data.totalPages;
                            self.search.total = data.total;
                        } else {
                            layer.msg(response.data.message);
                        }
                    })
            },
            //医院供应商配对 x
            getSupDoods: function (sup) {
                if (this.search.mark == "N") {
                    this.getmedmasterdata(sup);
                } else {
                    this.getmfmsdgoodsbyguid(sup.masterguid);
                }
            },
            //对码商品列表 x
            getmedmasterdata: function (sup) {
                var self = this;
                var param = {
                    bigUintQty: sup.bigunitqty,
                    bigUintStyle: sup.bigunitstyle,
                    from: 0,
                    goodScode: sup.goodscode,
                    goodsName: sup.goodsname,
                    goodsSpec: sup.goodsspec,
                    minUnitQty: sup.minunitqty,
                    minUnitStyle: sup.minunitstyle,
                    producer: sup.producer,
                    registKey: sup.registkey,
                    supplierguid: self.search.supplierguid
                }
                Ajax.post('/dataadmin/getsuppliermasterdata', param)
                    .then(function (response) {
                        var data = response.data.data;
                        // console.log(data);
                        self.$set("getDMResultList", data);
                    })
            },
            // 主数据对码
            clickMatch: function (goodsguid) {
                var self = this;
                self.MessageBox({
                    title: '提示',
                    message: '请确定是否对码',
                    type: 'success',
                    showCancelButton: true
                }, function (action) {
                    if (action == 'confirm') {
                        Ajax.post('/dataadmin/getmfsuppliergoodsdm', {
                            masterguid: goodsguid,
                            guid: self.checkGuid,
                        })
                            .then(function (response) {
                                var data = response.data.data;
                                if (response.data.errorCode == 0) {

                                    layer.msg(response.data.message);
                                    self.$set("getDMResultList", []);
                                    self.getfmedgoodsFn();

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

                                }
                            })
                    }
                })
            },
            //主数据商品 已对码商品信息
            getmfmsdgoodsbyguid: function (goodsguid) {
                var self = this;
                Ajax.post('/dataadmin/getmfmsdgoodsbyguid', {
                    'goodsguid': goodsguid,
                })
                    .then(function (response) {
                        var data = response.data.data;
                        self.$set("getDMResultList", data);
                    })
            },
            //取消配对
            cancelMatched: function (guid) {
                var self = this;
                Ajax.post('/dataadmin/delmfsuppliergoodsdm', {
                    'guid': guid,
                })
                    .then(function (response) {
                        var data = response.data.data;
                        if (response.data.errorCode == 0) {
                            layer.msg(response.data.message);
                            self.$set("getDMResultList", []);
                            self.getfmedgoodsFn();
                        } else {
                            layer.msg(response.data.message);
                        }
                    })
            },
        },
        route: {
            activate: function () {
                this.search.chinesename = '';
                this.search.guid = '';
                this.getmfmedgoods = [];
                this.getDMResultList = [];
                this.checkGuid = '';
                this.getManagemeds();
            }
        }
    };
</script>