<template>
<div class="container resource close-left-menu contaNEW">
  <div class="pop-banner clearfix">
    <!-- <div class="operate-btns">
    </div> -->
    <h3 class="current-module">询价记录</h3>
  </div> 
  
  
  <!--supply-supplylist start-->
  <div class="supplylist clearfix supply-select">
    
    <div class="pd-form fast-search-form">
      <div class="group-row">
        <div class="form-group">
          <div class="control">
            <input type="text" value="" id="cn1" v-model='search.goodsname' title="商品" placeholder="商品">
          </div>
        </div>
        <div class="form-group form-label">
          <!-- <label for="cn1" class="label">结算日期</label> -->
          <div class="control control-date" style="height:34px;overflow: inherit;">
            <div style="width:44%;float:left;">
              <datepicker :target.sync="search.begindate" :readonly="readonlyFlag" placeholder="发布开始日期" title='开始日期'styleobj="width:100% !important;border-radius:8px 0px 0px 8px !important;"></datepicker>
            </div>   
            <div class="text-and">至</div>
            <div style="width:48%;float:left;">
              <datepicker :target.sync="search.enddate"  :readonly="readonlyFlag" title='发布结束日期' placeholder="结束日期"styleobj="width:100% !important;border-radius:0px 8px 8px 0px !important;"></datepicker>
            </div>  
          </div> 
        </div>
      </div>
      <div class="group-row">
        <div class="form-group form_group_state">
          <label class="label w60">消息状态</label>
          <div class="control control-filtering control-filtering-green fl">
            <a class="option" href="javascript:void(0)" @click="search.dealstate=''" :class='{ "all active":search.dealstate==""}'>全部</a>
            <a class="option" href="javascript:void(0)" @click="search.dealstate=1" :class='{ "all active":search.dealstate==1}'>已发布</a>
            <a class="option" href="javascript:void(0)" @click="search.dealstate=2" :class='{ "all active":search.dealstate==2}'>已截止</a>
            <a class="option" href="javascript:void(0)" @click="search.dealstate=3" :class='{ "all active":search.dealstate==3}'>已终止</a>
          </div>
        </div>
      </div>
      <div class="group-row">
        <div class="form-group form_group_state" style='width:100%;'>
          <label for="cn4" class="label w60 t-center">选择地区</label>
          <div id="statebill" class="control control-filtering control-filtering-green fl" style='width:90%;'>
              <a class="option" href="javascript:void(0)" v-for='item in cityS' :class='{"all active" :item.state}' @click='item.state=!item.state'>{{item.province}}</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="getList()">查 询</button>
      </div>
    </div>
    <div class="supplylist-root">
      <div class="fheader">
        <h4 class="fh-query">询价信息</h4>
      </div>
      <div class="root-node" id="sortable" style='height: 480px;border-top:none;'>
        <div class="list-node clearfix" style='padding:10px;' v-if='wordS.length==0'>
          <!-- <span class="node-btn"></span> -->
          <div class="issuse-state" >
           暂无符合条件的消息
          </div>
          <div class="refer-left">
            提示
          </div>
          <div class="refer-right">
            请确认查询的区域、状态
          </div>

        </div>
        <!-- <template > -->
        <div class="list-node clearfix" style='padding:10px;' v-for='item in wordS' @click='checked($index,item)' :class='{"active":item.checked}'>
          <!-- <span class="node-btn"></span> -->
           <div class="issuse-state cut-off" v-if='item.dealstate!="1"' :class='item.supplierrevert=="Y"?"reply":""'>
            {{item.dealstate|dealstateFalg}}
          </div>
          <div class="issuse-state" v-else :class='item.supplierrevert=="Y"?"reply":""'>
            {{item.dealstate|dealstateFalg}}
          </div>
          <div class="refer-left">
            咨询对象
          </div>
          <div class="refer-right">
            <div class="refer-right-top">
              {{item.medname}}
            </div>
            <div class="refer-right-bot">
              <div style='margin-bottom:5px; font-weight:bold;'>
              商品：{{item.goodsname}}
              </div>
              发布时间：{{item.releasetime}}
              <br>
               截止时间：{{item.endtime}}
               <br>
               回复：{{item.huifunumber}}
            </div>
             <br>

          </div>
        </div>
      </div>
    </div>
    <div class="supplylist-table" v-show='state'>
      <div class="fheader">
        <h4 class="fh-queryList">询价信息详情</h4>
      </div>
      <div class="clearfix">
        <div class="mes-left">
          咨询对象
        </div>
        <div class="mes-right">
          <h2>{{details.medname}}</h2>
             询价截止时间 ：{{details.endtime}} 
             <span v-show='details.isreceivemob=="1"' class="ml-10 text-color-blue">联系电话 : 
                <span v-if='!details.contacttel'>无</span>
                <span v-else>{{details.contacttel}}</span>
            </span>
             <br>
             {{details.zw}}

        </div>
        
      </div>
      <div class="mes-bot">
         <span style='color: #49A7E5;font-weight:bold;'>询价信息回复</span>
          <div class="mes-chat" v-show='reply.length==0 && details.dealstate!="1"'>
             <div class="time">无回复数据</div>
         </div>
          <div class="mes-chat clearfix" v-for='item in reply'>
            <div class="time">{{item.reverttime}}</div>
            <img :src="item.path" v-if='item.state' :class='item.revertpro=="2"?"oneself-img":"side-img"'>
            <img src="/assets/user-default.png" v-else :class='item.revertpro=="2"?"oneself-img":"side-img"'>
            <div class="oneself"  :class='item.revertpro=="2"?"oneself":"side"' >
              {{item.revertcontent}}
            </div>
         </div>
<!--          <div class="mes-chat clearfix">
            <div class="time">2017.06.03 00:26:32</div>
            <img src="/assets/user-default.png" alt="" class="side-img">
            <div class="side">
              5ml,35元,12ml,62元
            </div>
         </div> -->
         <div v-if='details.supplierrevert=="Y"'>
  
            <textarea name="" class="mt-20" style='padding:5px 10px;' v-model='content'></textarea>
            <a href="javascript:;" class="btn button-green icon reply mt-10 fr" @click='replyFun()'>回复</a>
          </div>
      </div>
     
      
    </div>
  </div>
  <!--supply-supplylist end-->
</div>
</template>
<script>
module.exports={
data: function(){
return {

    search:{
        province:'',
        goodsname:'',
        begindate:'',
        enddate:'',
        list:[],
        dealstate:'',

      },
    cityS:[],
    wordS:[],
    details:{},
    state:false,
    reply:[],
    content:'',
    indexNum:'',
    replyFlag:'false'
    };
  },

  methods: {
        
        
    enquiryState: function () {
        var self = this;

        Ajax.post('/supplierReport/getTrmedenquiryDealstate',{enquiryguid:self.search.enquiryguid})
          .then(function (response){
            var data = response.data.data;

            if(response.data.errorCode==0){
                self.search.dealstate=data.dealstate;
                self.getData();
              }else{
                layer.msg(response.data.message);
              }

        })          
      },
    getData: function () {
        var self = this;

        Ajax.post('/supplierReport/getMfmedProvince')
          .then(function (response){
            var data = response.data.data;

            if(response.data.errorCode==0){
              for(var a=0;a<data.length;a++){
                  if(a==0){
                        data[a].state=true;
                    }else{
                      data[a].state=false;
                    }
                
                }
                 self.$set('cityS',data);
                 self.getList(true);
              }else{
                layer.msg(response.data.message);

              }

        })          
      },
      getList:function(){
        var self = this;
        self.$set('wordS',[]);
        self.search.list=[];

        for(var a=0;a<self.cityS.length;a++){
            if(self.cityS[a].state){
                self.search.list.push(self.cityS[a].province);
            }
        }
        Ajax.post('/supplierReport/getTrmedenquiryList',self.search)
          .then(function (response){
            var data = response.data.data;

            if(response.data.errorCode==0){
               self.wordS=data;
               for(var a=0;a<self.wordS.length;a++){
                 if(self.wordS[a].guid==self.search.enquiryguid){
                    self.wordS[a].checked=false;
                    self.checked(a);
                 }
               }
               setTimeout(function(){
                  window.sessionStorage.setItem('enquiryguid','');
                  self.search.enquiryguid='';
               },1000)
                self.state=false;

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

        })      

      },
      checked:function(index){
        var self = this;
        self.indexNum=index;
        self.$set('reply',[]);

        if(!self.wordS[index].checked){
            for(var a=0;a<self.wordS.length;a++){
              self.wordS.splice( a,1, Object.assign({}, self.wordS[a], { 'checked':false}))
            }
            self.$set('details',self.wordS[index]);
            
             Ajax.post('/supplierReport/getTrmedenquiryrevertList',{guid:self.wordS[index].guid})
            .then(function (response){
              var data = response.data.data, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;

              if(response.data.errorCode==0){
                for(var i=0;i<data.length;i++){
                  
                  if(data[i].pictcontent){
                     var pictcontent=JSON.parse(data[i].pictcontent);
                     data[i].path=imgReg.test(pictcontent[0].original.path)? pictcontent[0].original.path : pictcontent[0].original.path+ pictcontent[0].original.name;
                     data[i].state=true;
                  }else{
                    data[i].state=false;
                  }
  
                }
                  self.$set('state',true);
                  self.$set('reply',data);
                }else{
                  layer.msg(response.data.message);
                }

          })   
        }

        self.wordS.splice( index,1, Object.assign({}, self.wordS[index], { 'checked': !self.wordS[index].checked}))
        self.$set('wordS',self.wordS);
      },
      replyFun:function(){
        var self = this;

         Ajax.post('/supplierReport/addTrmedenquiryrevert',{guid:self.details.guid,content:self.content})
          .then(function (response){
            var data = response.data.data;

            if(response.data.errorCode==0){
                layer.msg('回复成功！');
                self.content='';
               Ajax.post('/supplierReport/getTrmedenquiryrevertList',{guid:self.wordS[self.indexNum].guid})
                    .then(function (response){
                      var data = response.data.data, imgReg = /\.(jpg|jpeg|png|gif|bmp)$/i; //判断字符串是否为图片路径;

                      if(response.data.errorCode==0){
                         for(var i=0;i<data.length;i++){
                  
                            if(data[i].pictcontent){
                               var pictcontent=JSON.parse(data[i].pictcontent);
                               data[i].path=imgReg.test(pictcontent[0].original.path)? pictcontent[0].original.path : pictcontent[0].original.path+ pictcontent[0].original.name;
                               data[i].state=true;
                            }else{
                              data[i].state=false;
                            }
                            self.$set('reply',data);
                            self.getList(self.details.guid,true);
                            // self.details.medrevert='Y';
                            self.$set('details',Object.assign({}, self.details, { 'medrevert': 'N'}));
                            self.$set('details',self.details);
                            self.$set('replyFlag','true');
                          }
                          
                        }else{
                          layer.msg(response.data.message);
                        }

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

        })      
        
      }
  },
  route:{
    data : function(){
      var self = this;
      var  enquiryguid=window.sessionStorage.getItem('enquiryguid');
      self.$set('wordS',[]);
      self.$set('state',false);
        if(!!enquiryguid){

            self.search.enquiryguid=enquiryguid;
            self.enquiryState();
           
        }else{
           self.search.dealstate=1;
           this.getData();
        }

      
    }
  },
  watch:{
    'search.dealstate':function(){
      this.getList();
    }

  }
};
</script>