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

    module.exports = {
        data: function () {
            return {
                cityList:[],
                areaList:[],
                // 医院
                hosList: [],
                // 明细数据
                mxList: [],
                // 订单总数量
                totalNum:0,
                // 查询条件
                search: {
                    pageSize: 50,
                    page: 1,
                    totalPages: 0,
                    goodsinfo: '',// 出库单号
                    starttime: '',// 出库日期 起
                    endtime: '',// 出库日期 止
                    flag:'',// 业务状态
                    isSatisfy:'',
                    medname:'',
                    province:'',
                    city:'',
                    area:''
                },
                stategoods:false,
                over:0,
                hosList:[],
                getFlagCountList:"",
                getStateCountList:"",
                // 日期控件
                readonlyFlag:false,
                detailList:[],
                subFlage:false,
                shower:false,
                shower2:false
            };
        },
        methods: {
            getAreaList:function(){
                var self = this;
                Ajax.post('/supplier/getAreaList')
                    .then(function (response) {
                        var data = response.data;
                        if (data.errorCode == 0) {
                            self.$set('areaList',data.data);
                        }
                    })
            },
            // 获得供应商的高值耗材的供应关系中的医院
            getMedListRelation:function(){
                var self = this;
                Ajax.post('/api/getMedList',{'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;
            },
            // 获取数据
            getData:function(){
                var self = this;
                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('/api/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;
                    })
            },
            // 发布状态数量统计
            getFlagCount:function(){
                var self = this;
                Ajax.post('/api/getFlagCount',{})
                    .then(function (response){
                        var data = response.data.data;
                        self.$set('getFlagCountList',data);
                    })
            },
            // 需求状态数量统计
            getStateCount:function(){
                var self = this;
                Ajax.post('/api/getStateCount',{})
                    .then(function (response){
                        var data = response.data.data;
                        self.$set('getStateCountList',data);
                    })
            },
            //获取品规数
            getDetail:function(guid,rowno){
                var self = this;
                self.shower2=true;
                Ajax.post('/api/getDetails',{'guid':guid,'rowno':rowno,})
                    .then(function (response){
                        var data = response.data.data;
                        self.$set('detailList',data);
                        self.shower2=false;
                    })
            },
            slidedown:function(index,guid,rowno){
                var self = this;
                self.getDetail(guid,rowno);
                $('#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");
                })
            },
        },
        route: {
            activate: function () {
                this.getAreaList();
                this.getData();
                this.getFlagCount();
                this.getStateCount();
                this.getMedListRelation();
            }
        },
        watch:{
            'search.flag': function(val) {
                this.getData();
            },
            'search.isSatisfy': function(val) {
                this.getData();
            },
            '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
                    }
                }
            },
        },
    };
</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">
                    <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">
                    <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>
            <div class="group-row">
             <div class="form-group form-label">
                            <label class="label" for="cn1">医院</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 class="form-group">
                        <label class="label" for="cn1">医院</label>
                        <div class="control">
                          <select v-model="search.medname" class="pl10">
                            <option value="">&nbsp;全部</option>
                            <option v-for="item in hosList" :value="item.medname">&nbsp;{{item.medname}}</option>
                          </select>
                        </div>
                      </div> -->
                <div class="form-group">
                    <label for="in2" class="label">发布日期</label>
                    <div class="control control-date">
                        <div style="width: 42%;float: left">
                            <datepicker :target.sync='search.starttime' :readonly="readonlyFlag" title='发布开始日期' placeholder='发布开始日期' ></datepicker>
                        </div>
                        <span class="text-and" style="width: 45px">至</span>
                        <div style="width: 42%;float: right;">
                            <datepicker :target.sync="search.endtime" :readonly="readonlyFlag" title='发布结束日期' placeholder='发布结束日期'></datepicker>
                        </div>
                    </div>
                </div>
            </div>
            <div class="group-row">
                <!-- <div class="form-group">
                    <label class="label">地区</label>
                    <div class="control" style="background: #ffffff;">
                        <city :province.sync="search.province" :city.sync="search.city" :area.sync="search.area"></city>
                    </div>
                </div> -->
                <div class="form-group">
                    <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" style='width:480px;'>
                    <label class="label w70">发布状态</label>
                    <div class="control control-filtering control-filtering-green w300">
                        <a class="option" href="javascript:;" :class="{'all active':search.flag==''}" v-on:click="search.flag=''">全部</a>
                        <a class="option" href="javascript:;" :class="{'all active':search.flag=='Y'}" v-on:click="search.flag='Y'">新发布({{getFlagCountList[0].np}})</a>
                        <a class="option" href="javascript:;" :class="{'all active':search.flag=='N'}" v-on:click="search.flag='N'">已响应({{getFlagCountList[1].yp}})</a>
                    </div>
                </div>
                <div class="form-group" style="width: 356px;">
                    <label class="label w70">需求状态</label>
                    <div class="control control-filtering control-filtering-green fl" style="margin-left: 0px;">
                        <a class="option" href="javascript:;" :class="{'all active':search.isSatisfy==''}" v-on:click="search.isSatisfy=''">全部</a>
                        <a class="option" href="javascript:;" :class="{'all active':search.isSatisfy=='Y'}" v-on:click="search.isSatisfy='Y'">满足({{getStateCountList[1].y}})</a>
                        <a class="option" href="javascript:;" :class="{'all active':search.isSatisfy=='N'}" v-on:click="search.isSatisfy='N'">未满足({{getStateCountList[0].a - getStateCountList[1].y}})</a>
                    </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 w60">序号</span>
                <span class="ct-col w150">医院</span>
                <span class="ct-col w80">发布时间</span>
                <span class="ct-col w150">联系方式</span>
                <span class="ct-col w150">物资信息</span>
                <span class="ct-col w80">数量</span>
                <span class="ct-col w60">单位</span>
                <span class="ct-col w80">响应数量</span>
                <span class="ct-col w80">响应供应商</span>
                <span class="ct-col w80">状态</span>
                <span class="ct-col w80">备注说明</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 w60">{{$index+1}}</span>
                    <span class="ct-col w130">{{cus.medname}}</span>
                    <span class="ct-col w80 pr10">{{cus.pubtime | getYMD}}</span>
                    <span class="ct-col w130 t-left pr10">
                      {{cus.contacts}} / {{cus.contactsdept}}
                      <br>
                      {{cus.tel}}
                      <br>
                      {{cus.address}}
                      <br>
                </span>
                <span class="ct-col w130 t-left pr10">{{cus.goodsname}}<br>{{cus.goodstype | goodscateresponse}}<br>{{cus.goodsspec}}<br>{{cus.executivestandard}}</span>
                <span class="ct-col w80">{{cus.qty == 999999.99?'不限':cus.qty}}</span>
                <span class="ct-col w60">{{cus.unitstyle}}</span>
                <span class="ct-col w80">{{cus.resqty}}</span>
                    <span  class="ct-col w80 activate isFocus">
                      <a href="javascript:;" @click="slidedown($index,cus.guid,cus.rowno)"  class="txt_underline  status-switch text-color-blue">{{cus.supcount}}</a>
                   </span>
                    <span  class="ct-col w80">
                        {{cus.issatisfy == 'Y'?'满足':'未满足'}}
                    </span>
                    <span  class="ct-col w80">
                        {{cus.note}}
                    </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>
                        </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.suppliername}}</td>
                            <td>{{variation.contacts}}</td>
                            <td>{{variation.tel}}</td>
                            <td>{{variation.responseqty}}</td>
                            <td>{{variation.responsetime}}</td>
                        </tr>
                        </tbody>
                    </table>
                    <div class="zip" style="bottom: 0px;" @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>