<template>
    <div class="container resource close-left-menu contaNEW">
        <div class="pop-banner clearfix">
            <div class="operate-btns">
                <a @click="checkChange(listArr,'2')" class="fbtn fb-to-examine">批量审核</a>
                <a @click="rejectData(listArr,'3')" class="fbtn fb-reject">批量驳回</a>
            </div>
            <h3 class="current-module">业务员审核</h3>
        </div>
        <!--采购目录 start-->
        <div class="purchase-plan">
            <div class="pd-form fast-search-form">
                <div class="group-row">
                    <div class="form-group form-label">
                        <div class="control">
                            <input type="text" id="cn1" maxlength="50" v-rule v-model='search.goodsinfo' title='商品信息' placeholder="商品信息">
                        </div>
                    </div>
                    <div class="form-group form-label">
                        <div class="control">
                            <input type="text" id="cn2" maxlength="20" v-rule v-model="search.suppliername" title='供应商名称' placeholder="供应商名称">
                        </div>
                    </div>
                </div>
                <div class="group-row">
                    <div class="form-group form-label">
                        <div class="control">
                            <input type="text" id="cn3" maxlength="8" v-rule v-model="search.staffname" title='人员' placeholder="人员"></div>
                    </div>
                    <div class="form-group ">
                        <label class="label w80 fl">业务状态</label>
                        <div class="control control-filtering control-filtering-green fl w380">
                            <a class="option" :class="{'all active':search.checkstate==''}" href="javascript:void(0)"
                               @click="search.checkstate=''">全部</a>
                            <a class="option" :class="{'all active':search.checkstate=='1'}" href="javascript:void(0)"
                               @click="search.checkstate='1'">未审批</a>
                            <a class="option" :class="{'all active':search.checkstate=='2'}" href="javascript:void(0)"
                               @click="search.checkstate='2'">审批通过</a>
                            <a class="option" :class="{'all active':search.checkstate=='3'}" href="javascript:void(0)"
                               @click="search.checkstate='3'">已驳回</a>
                        </div>
                    </div>
                </div>
                <div class="group-row t-right">
                    <button class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle"
                            @click="getData(true)">查 询
                    </button>
                </div>
            </div>
            <table class="itable itable-bordertop itable-thead-13px itable-tr-border-dash">
                <thead id="t_header">
                <tr>
                    <th class="w50">
                        <div class="checkbox-control" v-if="search.checkstate =='' || search.checkstate =='1'">
                            <input  type="checkbox" id="pro.guid" v-model="allCheck" @click="clickCheckAll(allCheck)"
                                   :value="1">
                            <label class="checkbox" for="pro.guid">序号</label>
                        </div>
                        <div v-else>序号</div>
                    </th>
                    <th class="w150">医院商品</th>
                    <th class="w150">供应商商品</th>
                    <th class="w30"></th>
                    <th class="w90">价格（元）</th>
                    <th class="w120">通用名</th>
                    <th class="w100">人员</th>
                    <th class="w70">状态</th>
                    <th class="w100" >原因</th>
                    <th class="w120" >操作</th>

                </tr>
                </thead>
                <tbody>
                <tr v-if="getMedcontentList.length==0">
                    <td colspan="11">暂无数据！</td>
                </tr>
                <tr v-for="pro in getMedcontentList">
                    <td>
                        <div class="checkbox-control"  v-if="pro.checkstate =='' || pro.checkstate =='1'">
                            <input type="checkbox" id="{{pro.guid}}" v-model="pro.checked">
                            <label class="checkbox" for="{{pro.guid}}">{{ $index + 1 }} </label>
                        </div>
                        <div v-else>
                            {{ $index + 1 }}
                        </div>
                    </td>
                    <td class="t-left pr10">
                        {{pro.medgoodscode}}</br>
                        <span class="p-tit-green">{{pro.medgoodsname}}</span></br>
                        {{pro.medgoodsspec}}</br>
                        {{pro.medproducer}}</br>
                        {{pro.medregistkey}}
                    </td>
                    <td class="t-left pr10">
                        {{pro.supgoodscode}}</br>
                        <span class="p-tit-green">{{pro.supgoodsname}}</span></br>
                        {{pro.supgoodsspec}}</br>
                        {{pro.supproducer}}</br>
                        {{pro.supregistkey}}
                    </td>
                    <td>
              <span class="ct-col w30">
                      <span class="table-detail-icon icon-green">新</span>
              <span class="table-detail-icon bg-orange  mt-10">旧</span>
              </span>
                    </td>
                    <td class="pr10 lh-30">
                        <div v-if="pro.newprice">
 {{pro.newprice}}</br>
                        <!--{{pro.oldprice}}-->
                        <span class="text-color-or">{{pro.oldprice}}</span>
                        </div>

                    </td>
                    <td class="lh-30 ">
                        <div v-if="pro.newchemicalname">

                        <div title="{{pro.newchemicalname}}" style="width: 120px;  overflow: hidden;
display: block; text-overflow: ellipsis; white-space: nowrap; cursor: pointer;">{{pro.newchemicalname || ' '}}</div>
                        <span class="text-color-or">{{pro.oldchemicalname}}</span>
                        </div>

                    </td>
                    <td class="lh-30 ">
                        <div v-if="pro.newstaffname">
                        <span title="{{pro.newstaffname}}" class="">{{pro.newstaffname || ' '}}</span>
                        </br>
                        <span title="{{pro.oldstaffname}}" class="text-color-or">{{pro.oldstaffname}}</span>
                        </div>

                    </td>
                    <!--(1:未审核 2：审核通过 3:审核未通过)-->
                    <td class="lh-38"><span
                        :class="pro.checkstate=='1'?'text-color-or': (pro.checkstate=='2'?'text-color-blue':'text-color-red' )"> {{pro.checkstate |checkstate }}</span>
                    </td>
                     <td >
                       {{pro.checkerMemo}}
                    </td>
                    <td class="pr20" >
                        <div class="from-button" v-if="pro.checkstate =='' || pro.checkstate =='1'">
                            <a href="javascript:;" class="green-button p-lr-10" @click="checkChange([pro.guid],'2')">审核<i>|</i></a>
                            <a href="javascript:;" class="red-button p-lr-10" @click="rejectData([pro.guid],'3')">驳回</a>
                        </div>
                        <div class="from-button" v-else>
                            <a href="javascript:;"
                               class="green-button p-lr-10 text-color-custom readonly-gray">审核<i>|</i></a>
                            <a href="javascript:;" class="red-button p-lr-10 text-color-custom readonly-gray">驳回</a>
                        </div>
                    </td>

                </tr>
                </tbody>
            </table>
            <div class="pagination m-20-0">
                <em class="page">明细条目数【{{ search.total }}】</em>
                <pagination @page-change="getData()" :class="['m-20-0']" :page-no.sync="search.page"
                            :total-pages.sync="search.totalPages">
                </pagination>
            </div>
        </div>
        <div class="modal" v-show='showPopupUp'>
            <div class="pop-refused-reason" style="z-index:10;left:35%;top:35%;">
                <div class="pop-rr-tit text-color-blue" style="text-align:left;">驳回理由</div>
                <textarea class="input-border" v-model="reason" style='width:100%;padding: 5px'></textarea>
                <div class="from-button fr mt-10">
                    <a href="javascript:;" class="red-button p-lr-10" @click="showPopupUp=false">取 消<i
                        style='font-style: inherit'>|</i></a>
                    <a href="javascript:;" class="green-button p-lr-10" @click="submit(rejectArr,'3')">确 定</a>
                </div>
            </div>
        </div>
        <!--采购目录 end-->
    </div>
</template>

<script>
    module.exports = {
        data: function () {
            return {
                search: {
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    total: 0,
                    goodsinfo: '',
                    suppliername: '',
                    staffname: '',
                    checkstate: '1',
                },
                getMedcontentList: [],
                allCheck: false,
                checkArr: [],
                listArr: [],
                showPopupUp: false,
                reason: '',
                rejectArr:[]
            };
        },
        methods: {
            //新增采购目录，判断是否可以跳转
            newCatalogue: function () {
                var self = this;
                Ajax.post('/procurment/decideAddMedContentList', {})
                    .then(function (response) {
                        var data = response.data.data;
                        if (response.data.errorCode == 0) {
                            if (data == "Y") {
                                self.$router.go({
                                    'path': '/newCatalogue'
                                });
                            } else {
                                self.MessageBox({
                                    title: '提示',
                                    message: '建立关系的供应商未配置权限字段，不可使用采购目录！',
                                    type: 'alert'
                                }, function (action) {
                                    return;
                                });
                            }
                        }
                    })
            },
            //加载数据
            getData: function (isRefresh) {
                var self = this;
                if (isRefresh) {
                    this.search.page = 1;
                }
                self.$set("getMedcontentList", []);
                Ajax.post('/procurment/getTrmedcontentdetailchanges', self.search)
                    .then(function (response) {
                        var data = response.data.data;
                        self.$set("getMedcontentList", data.list);
                        self.search.totalPages = data.totalPages;
                        self.search.total = data.total;
                    })
            },
            // 审核方法
            checkTrmedcontentdetailchange: function (item, state, memo) {
                var self = this;
                Ajax.post('/procurment/checkTrmedcontentdetailchange', {
                    guids: item,
                    checkstate: state,
                    checkerMemo: memo,
                }).then(function (response) {
                    var data = response.data.data;
                    self.allCheck = '';
                    if (data) {
                        self.MessageBox({
                            title: '提示',
                            message: '操作成功!',
                            type: 'alert'
                        }, function (action) {
                            window.location.reload();
                        });
                    } else {
                        layer.msg(response.data.message);
                    }
                })
            },
            // 审核
            checkChange: function (item, state, memo) {
                if (item == null || item == '') {
                    layer.msg('请勾选数据')
                    return;
                }
                this.checkTrmedcontentdetailchange(item, state, memo)
            },
            // 驳回
            rejectData: function (item) {
                var self = this;
                if (item.length == 0) {
                    layer.msg('请勾选数据')
                    return;
                }
                self.showPopupUp = true;
                self.rejectArr=item;
            },
            submit: function (item, state) {
                var self = this;
                if (self.reason.trim() == '') {
                    layer.msg('请输入驳回理由!')
                    return;
                } else {
                    this.checkTrmedcontentdetailchange(item, state, self.reason)
                    self.showPopupUp = false;
                }
            },
            clickCheckAll: function () {
                console.log(this.allCheck);
                var self = this;
                for (var a = 0; a < self.getMedcontentList.length; a++) {
                    if (self.getMedcontentList[a].checkstate==''||self.getMedcontentList[a].checkstate=='1' ) {
                        self.$set("getMedcontentList["+ a +"].checked",!self.allCheck);
                    }
                }
            },
        },
        route: {
            activate: function () {
              this.search={
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    total: 0,
                    goodsinfo: '',
                    suppliername: '',
                    staffname: '',
                    checkstate: '1',
                }
                this.getData(true);
            }
        },
        watch: {
            'search.checkstate': function () {
                this.getData(true);
            },
            'getMedcontentList': {
                handler(checkbox) {
                    var self = this;
                    var arr = [];
                    let sum=0;
                    if (checkbox != null && checkbox != '') {
                        for (var a = 0; a < checkbox.length; a++) {
                            if (checkbox[a].checked) {
                                arr.push(checkbox[a].guid);
                            }
                            if (checkbox[a].checkstate=='' || checkbox[a].checkstate=='1') {
                                sum++
                            }
                        }
                        if (arr.length == sum) {
                            self.$set('allCheck',true);
                        }else {
                            self.$set('allCheck',false);
                        }
                        self.listArr = arr;
                        console.log(self.listArr)
                    }
                },
                deep: true
            },
        }
    };
</script>