<!--出库单汇总-->
<script>

    module.exports = {
        data: function () {
            return {
                fileType:'file',
                flagDetail:'abc',
                med:'cdk',
                fileLabel:'选择文件',
                // 导入之后信息提示
                backMessage:{
                    showDialog:'N',
                    mList:[],// 提示信息
                },
                // 医院
                hosList: [],
                // 明细数据
                mxList: [],
                // 订单总数量
                totalNum:0,
                stategoods:false,
                over:0,
                // 查询条件
                search: {
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    //total: 0,
                    goodsinfo: '',// 出库单号
                    starttime: '',// 出库日期 起
                    endtime: '',// 出库日期 止
                    flag: '',// 业务状态
                    medname:'',
                    province:'',
                    city:'',
                    area:''
                },
                cityList:[],
                areaList:[],
                // 日期控件
                readonlyFlag:false,
                detailList:[],
                subFlage:false,
                shower:false,
                shower2:false
            };
        },
        methods: {
            getAreaList:function(){
                var self = this;
                Ajax.post('/response/getAreaList')
                    .then(function (response) {
                        var data = response.data;
                        if (data.errorCode == 0) {
                            self.$set('areaList',data.data);
                        }
                    })
            },
            // 获取数据
            getData:function(){
                var self = this;
                if(self.search.province == '请选择'){
                    self.search.province = '';
                }
                if(self.search.city == '请选择'){
                    self.search.city = '';
                }
                if(self.search.area == '请选择'){
                    self.search.area = '';
                }
                self.$set('mxList',[]);
                self.shower=true
                Ajax.post('/response/getDemandPublishList', this.search)
                    .then(function (response){
                        var data = response.data.data;
                        self.$set('mxList',data.list);
                        self.shower=false
                        self.search.pageno = data.pageno;
                        self.search.totalPages = data.totalPages;
                        self.search.total = data.total;
                    })
            },
            //获取品规数
            getDetail:function(guid){
                var self = this;
                self.shower2=true;
                Ajax.post('/response/getDemandPublishDetails',{guid:guid})
                    .then(function (response){
                        var data = response.data.data;
                        self.$set('detailList',data);
                        self.shower2=false;
                    })
            },
            slidedown:function(index,guid){
                var self = this;
                // if(self.flagDetail==index){
                //     return
                // }
                // self.flagDetail=index;
                self.getDetail(guid);
                $('#warp2' + index).find(".row-launch").slideDown(400, function () {
                    $('#warp2' + index).siblings().find(".row-launch").slideUp(400);
                    $('#warp2' + index).siblings().find(".isFocus").removeClass("focus");
                    $('#warp2' + index).find(".isFocus").addClass("focus active");
                })

            },
            slideup:function(index){
                $('#warp2' + index).find(".row-launch").slideUp(400, function () {
                    $('#warp2' + index).removeClass('active');
                    $('#warp2' + index).find(".isFocus").removeClass("focus");
                })
            },

            // 获得供应商的高值耗材的供应关系中的医院
            getMedListRelation:function(){
                var self = this;
                Ajax.post('/response/getMedLis',{'medname':self.search.medname})
                    .then(function (response) {
                        var data = response.data;
                        if (data.errorCode == 0) {
                            self.$set('hosList',data.data);
                        } else {
                            layer.msg('数据获取异常!');
                        }
                    })
            },
            blur:function(){
                if(this.over==false){
                    this.stategoods=false;
                }
            },
            onStateGoods:function(){
                var self = this;
                self.getMedListRelation(true);
                self.stategoods =true;
            },
            // 导出查询的数据结果出来
            selectSupplier:function(data){
                var self = this;
                // self.trmedplan.meddeptguid = data.guid;
                self.search.medname = data.medname;
                self.stategoods =false;
            },
            // 关闭信息提示弹出框
            closeDialog:function(){
                var self = this;
                this.$set('backMessage.showDialog','N');
                this.$set('backMessage.mList',[]);
                self.sh = true;
            },
            // 查询条件选择项
            state: function(billstate,objId){
                $(".form-group a").each(function(){
                    // alert($(this).text());
                    $(this).attr("class", "option");
                });
                $("#"+objId).attr("class","all active");
                // 设置查询的条件
                this.search.flag = billstate;
                this.getData();
            },
            submitDivSh(){
                var self=this;
                let res = self.detailList.filter((item) => {
                    return item.responseqty&&item.responseqty>0;
                });
               if(res.length==0){
                   layer.msg('请填写要响应的数量');
                   return false;
               }
                if(self.subFlage){
                    layer.msg('正在处理操作');
                    return false;
                }
                self.subFlage=true;
                let saveList=[];
                saveList=self.detailList.map(item=>{
                    return {
                        guid: item.guid,
                        rowno: item.rowno,
                        responseQty: item.responseqty?item.responseqty:0,
                        goodsname:item.goodsname
                    }
                });
                Ajax.post('/response/submitResponse',{saveList})
                    .then(function (response) {
                        var data = response.data;
                        if (data.errorCode == 0) {
                            layer.msg(data.message);
                            self.getData();
                            self.subFlage=false;
                        } else {
                            self.subFlage=false;
                            layer.msg('操作失败!');
                        }
                    })
            }
        },
        route: {
            activate: function () {
                this.getData();
                this.getMedListRelation();
                this.getAreaList();
            }
        },
        watch:{
            // 实时监听复选框勾选变化
            'selectMed': function (val) {
                this.search.medname = val;
            },
            'search.medname':function(){
                var self = this;
                self.getMedListRelation();
            },
            'search.province':function(){
                var self = this;
                for (var i = 0; i < self.areaList.length; i++) {
                    if(self.areaList[i].province == self.search.province){
                        self.cityList = self.areaList[i].city
                    }
                }
            },
        },
        filters:{
            Upper:function (flag) {
                return flag=='P1'?'待发布':flag=='P2'?'新发布':flag=='P3'?'已响应':''
            }
        }
    };
</script>

<template>
    <div class="container resource close-left-menu contaNEW">
        <div class="pop-banner clearfix ">
            <h3 class="current-module">医院物资需求响应</h3>
        </div>
        <div class="pd-form fast-search-form">
            <div class="group-row">
            <div class="form-group form-label">
                    <label class="label">所在省</label>
                    <div class="control">
                        <select v-model="search.province" class="inp3">
                            <option value="">&nbsp;全部</option>
                            <option v-for="item in areaList" :value="item.province">&nbsp;{{item.province}}</option>
                        </select>
                    </div>
                </div> 
            <div class="form-group form-label">
                    <label class="label">所在市</label>
                    <div class="control">
                        <select v-model="search.city" class="inp3">
                            <option value="">&nbsp;全部</option>
                            <option v-for="ci in cityList" :value="ci.city">{{ci.city}}({{ci.number}})</option>
                        </select>
                    </div>
                </div> 
                <!-- <div class="form-group form-label">
                    <label class="label">地区</label>
                    <div class="control">
                        <city :province.sync="search.province" :city.sync="search.city" :area.sync="search.area"></city>
                    </div>
                </div> --> 
                <!-- <div class="form-group form-label">
                    <label class="label">医院</label>
                    <div class="control">
                        <select v-model="search.medname" class="inp2">
                            <option value="">&nbsp;全部</option>
                            <option v-for="item in hosList" :value="item.medname">&nbsp;{{item.medname}}</option>
                        </select>
                    </div>
                </div> -->
            </div> 
            <div class="group-row">
                <div class="form-group form-label">
                    <label class="label" for='cn25'>发布日期</label>
                    <div class="control control-date inp2" style="height:34px;overflow: inherit;width: 100%;padding-left: 69px; background: #fff;">
                        <div style="width:44%;float:left;height:32px;">
                            <datepicker :target.sync="search.starttime" :readonly="readonlyFlag" title='发布开始日期' placeholder='发布开始日期' styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
                        </div>
                        <span class="text-and">-</span>
                        <div style="width:48%;float:left;height:32px;">
                            <datepicker :target.sync="search.endtime" :readonly="readonlyFlag" title='发布结束日期' placeholder='发布结束日期'
                                        styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
                        </div>
                    </div>
                </div>
                <div class="form-group form-label">
                            <div class="control control-hint" >
                                <input type="text" id="cn1" maxlength="10" v-rule v-model="search.medname" @click='onStateGoods'  title='医院' placeholder="医院"  v-on:blur="blur">
                                <ul class="hint-list" v-show="stategoods" v-on:mouseover="over=1" v-on:mouseout="over=0" style="overflow-y: auto;max-height: 400px;">
                                    <li v-for="item in hosList" @click="selectSupplier(item)"><span>{{item.medname}}</span></li>
                                    <li v-if="hosList.length == 0"><span>暂无数据!</span></li>
                                </ul>
                            </div>
                        </div>
            </div>
            <div class="group-row">
                <div class="form-group form-label">
                    <!-- <label class="label" for="cn6">物资</label> -->
                    <div class="control">
                        <input type="text" v-model="search.goodsinfo" placeholder="请输入物资信息过滤" title="请输入物资信息过滤">
                    </div>
                </div>
                </div>
            <div class="group-row">
                <div class="form-group">
                    <label for="cn1" class="label">发布状态</label>
                    <div class="control">
                        <div class="control control-filtering control-filtering-green"
                             style="float:left;width:300px;">

                            <a id="all" class="all active" href="javascript:;"
                               @click="state('','all')">全部</a>
                            <a id="wating" class="option" href="javascript:;"
                               @click="state('P2','wating')">新发布</a>
                            <a id="submit" class="option" href="javascript:;"
                               @click="state('P3','submit')">已响应</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="group-row t-right">
                <button v-on:click="getData()" class="fast-search-form-btn btn-d btn-d-lg btn-d-activate btn-d-circle">查 询</button>
            </div>
        </div>
        <div class="ctable ct-parent mt-20">
            <div class="ct-head">
                <span class="ct-col w100">序号</span>
                <span class="ct-col w200">医院名称</span>
                <span class="ct-col w100">发布时间</span>
                <span class="ct-col w200">联系方式</span>
                <span class="ct-col w150">品种数</span>
                <span class="ct-col w140">盖章附件</span>
                <span class="ct-col w100">状态</span>
            </div>
            <div v-if="shower" style="height: 100px;
                text-align: center;
                font-size: 20px;
                line-height: 100px;
                font-weight: 500;">数据正在加载中...</div>
            <div class="ct-row mt-0 pt10" id="warp2{{$index}}" v-for="(one,cus) in mxList" track-by="$index">
                <div class="row-line" v-else>
                    <span class="ct-col w100">{{$index+1}}</span>
                    <span class="ct-col w200 t-left">{{cus.medname}}</span>
                    <span class="ct-col w100">{{cus.pubtime | getYMD}}</span>
                    <span class="ct-col w200 t-left">
                      {{cus.contacts}} / {{cus.contactsdept}}
                      <br>
                      {{cus.tel}}
                      <br>
                      {{cus.address}}
                </span>
                    <span  class="ct-col w150 activate isFocus">
                      <!-- <a href="javascript:;" @click="slidedown($index,cus.guid)"  class="txt_underline  status-switch text-color-blue">{{cus.detailrecordsum}}</a> -->
                      <a @click="slidedown($index,cus.guid)" class=" text-color-blue" style="text-decoration: underline;">{{cus.detailrecordsum}}</a>
                   </span>
                    <span  class="ct-col w140" style="padding-left: 35px;">
                        <imagebox v-bind:imgarr="cus.pictcontent | original">
                        <span class="cert-box big-imgs">
                          <img src="{{cus.pictcontent | thumbnail}}"  width="100%" height="100%">
                        </span>
                     </imagebox>
                    </span>
                    <span  class="ct-col w100">
                        {{cus.flag|Upper}}
                    </span>
                </div>
                <div class="row-launch" style="display: none;">
                    <table class="itable mb-15">
                        <thead>
                        <tr>
                            <th class="w50">序号</th>
                            <th class="w120">物资名称</th>
                            <th class="w100">类别</th>
                            <th class="w100">需求数量</th>
                            <th class="w120">单位</th>
                            <th class="w120">响应数量</th>
                            <th class="w130">规格</th>
                            <th class="w110">执行标准</th>
                            <th class="w100">备注说明</th>
                        </tr>
                        </thead>
                        <tbody>

                        <tr v-if="shower2">
                            <td colspan="12">数据正在加载中...</td>
                        </tr>
                        <tr v-if="detailList==null || detailList.length==0&&!shower2">
                            <td colspan="12">暂无符合条件的记录</td>
                        </tr>
                        <tr v-for="(index,variation) in detailList" v-if="!shower2">
                            <td >{{ $index + 1 }}</td>
                            <td>{{variation.goodsname}}</td>
                            <td>{{variation.goodstype|goodscateresponse}}</td>
                            <td>{{variation.qty == 999999.99?'不限':variation.qty}}</td>
                            <td>{{variation.unitstyle}}</td>
                            <td  v-if="cus.flag=='P2'"><input type="text" class="edit-number w60 t-right" v-model="variation.responseqty"></td>
                            <td  v-else>{{variation.responseqty}}</td>
                            <td>{{variation.goodsspec}}</td>
                            <td>{{variation.executivestandard}}</td>
                            <td>{{variation.note}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="group-row mb-10" style="text-align: center" v-if="detailList.length>0&&!shower2">

                        <a  class="btn-d btn-d-lg btn-d-activate btn-d-circle" v-if="cus.flag=='P3'" style="background:#8c8c8c">已响应</a>
                        <a v-on:click="submitDivSh" class="btn-d btn-d-lg btn-d-activate btn-d-circle" v-else>提交</a>
                    </div>

                    <div class="zip" @click="slideup($index)"></div>
                </div>

            </div>
            <!--      <div class="mt-20" style="text-align: center" v-if="getTrMedDeptDoList.length==0">
                     未查询到相关数据！
                 </div> -->
            <div class="pagination" style="margin: 20px 0">
                <pagination @page-change="getData" :class="['m-20-0']" :page-no.sync="search.page"
                            :total-pages.sync="search.totalPages"></pagination>
            </div>
        </div>

    </div>

</template>