<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" maxlength="50" v-rule 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.medrevert=="Y"?"reply":""'>
            {{item.dealstate|dealstateFalg}}
          </div>
          <div class="issuse-state" v-else :class='item.medrevert=="Y"?"reply":""'>
            {{item.dealstate|dealstateFalg}}
          </div>
          <div class="refer-left">
            咨询对象
          </div>
          <div class="refer-right">
            <div class="refer-right-top">
              {{item.suppliername}}
            </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>
        <a href="javascript:;" class="btn button-red icon fr termination" v-show='details.dealstate=="1"' @click='termin'>终止</a>
      </div>
      <div class="clearfix">
        <div class="mes-left">
          咨询对象
        </div>
        <div class="mes-right">
          <h2>{{details.suppliername}}</h2>
             询价截止时间 ：{{details.endtime}}
             <br>
             {{details.zw}}

        </div>

      </div>
      <div class="mes-bot">
         <span style='color: #49A7E5;font-weight:bold;'>询价信息回复</span>
         <div class="mes-chat" v-if='reply.length==0'>
             <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=="1"?"oneself-img":"side-img"'>
            <img src="/assets/user-default.png" v-else :class='item.revertpro=="1"?"oneself-img":"side-img"'>
            <div class="oneself"  :class='item.revertpro=="1"?"oneself":"side"' >
              {{item.revertcontent}}
            </div>
         </div>
         <div v-if='details.medrevert=="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 class="mes-chat clearfix">
            <div class="time">2017.06.03 00:26:32</div>
            <img src="http://123.126.20.94:8888/group1/M00/01/07/wKgDy1oX1LeAd1OtAABYphaSKBg593.jpg" alt="" class="oneself-img">
            <div class="oneself">
              5ml,35元,12ml,62元
            </div>
         </div>
         <div class="mes-chat clearfix">
            <div class="time">2017.06.03 00:26:32</div>
            <img src="http://123.126.20.94:8888/group1/M00/01/07/wKgDy1oX1LeAd1OtAABYphaSKBg593.jpg" alt="" class="side-img">
            <div class="side">
              5ml,35元,12ml,62元
            </div>

         </div>
          <textarea name="" class="mt-20"></textarea>
          <a href="javascript:;" class="btn button-green icon reply mt-10 fr">回复</a> -->
      </div>


    </div>
  </div>
  <!--supply-supplylist end-->
</div>
</template>
<script>
module.exports={
data: function(){
return {

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

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

  methods: {

    enquiryState: function () {
        var self = this;

        Ajax.post('/licence/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('/licence/getMfSupplierProvinceRelation')
          .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('/licence/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.$set('reply',[]);
        self.indexNum=index;
        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.guid=self.wordS[index].guid;
            self.$set('termination',self.wordS[index].revertpro);
            self.$set('details',self.wordS[index]);
            // self.$set('state',true);


             Ajax.post('/licence/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('reply',data);
                }
                  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('/licence/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('/licence/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.commodity.splice( a,1, Object.assign({}, self.commodity[a], { 'checked': self.itemChecked}))
                            self.$set('details',Object.assign({}, self.details, { 'medrevert': 'N'}));
                            // self.$set('replyFlag','true');
                          }

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

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

        })

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

         Ajax.post('/licence/updDealState',{guid:self.guid})
          .then(function (response){
            var data = response.data.data;

            if(response.data.errorCode==0){

              layer.msg('终止成功！');
              self.state=false;
              self.getList();
              }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>