<template>
  <div class="container resource basic-message">
      <div class="pop-banner clearfix">
        <!-- <div class="operate-btns">
    </div> -->
        <h3 class="current-module">消息平台</h3>
      </div>
      <!-- start-->
<!--       <div class="basic-message-root"> 
        <div class="min-search">
          <input class="min-search-txt" type="text" v-model="search1.search_LIKE_chinesename">
          <button class="min-search-btn" @click="getSupplierList"></button>
        </div>
        <div class="bmr-result">
          <div class="bmr-result-top clearfix">
            <em>共选择
              <i>{{checkSupplier.length}}</i> 家供应商</em>
            <div class="checkbox-control">
              <input type="checkbox" name="cb" id="cb1" v-model="selAll">
              <label class="checkbox" for="cb1">全选</label>
            </div>
          </div>
          <div class="root-node bmr-result-list">
            <div class="list-show checkbox-control" v-for="sList in supplierList">
              <input type="checkbox" value="{{sList.guid}}" name="cb" id="c{{$index}}" v-model="checkSupplier">
              <label class="checkbox" for="c{{$index}}">{{sList.chinesename}}</label>
            </div>
          </div>
        </div>
      </div> -->

      <div class="fr"> 
        <form class="search-bar mb-20" active="###">
          <input type="text" placeholder="输入关键词" v-model="search1.search_LIKE_chinesename">
          <div class="search-btn">
            <input type="button" @click="getSupplierList">
          </div>
        </form>
        <div class="basic-message-root" id="sortable" style='height:400px;'>
     <!--      <div class="min-search">
            <input class="min-search-txt" type="text" v-model="search1.search_LIKE_SupplierName">
            <button class="min-search-btn" @click="getSupplyRelation"></button>
          </div> -->
          <div class="bmr-result">
            <div class="bmr-result-top clearfix">
              <em>共选择
                <i>{{checkSupplier.length}}</i> 家供应商</em>
              <div class="checkbox-control fr">
                <input type="checkbox" name="cb" id="cb1" v-model="selAllCheck">
                <label class="checkbox" for="cb1">全选</label>
              </div>
            </div>

                <div class="root-node bmr-result-list bd-none">
                  <div class="list-show checkbox-control" v-for="sList in supplierList">
                    <input type="checkbox" value="{{sList.guid}}" name="cb" id="c{{$index}}" v-model="checkSupplier">
                    <label class="checkbox" for="c{{$index}}">{{sList.chinesename}}</label>
                  </div>
                </div>
          </div>
        </div>
       </div>

      <div class="basic-message-form ">
        <div class="basic-message-tit has-button clearfix">
          <button class="btn button-green" v-if="'/distributor/message:sendMsg' | myqx this.$route.params.id!=0" disabled="disabled">发 送</button>
          <button class="btn button-green" @click="sendMessage" v-else>发 送</button>
        </div>
        <div class="pd-form clearfix">
          <div class="form-group form-label">
            <label for="cn1" class="label">标题</label>
            <div class="control form-required">
              <input type="text" id="cn1" v-model="msg.messagetitle" v-bind:readonly="readonly" class="inp2">
              <div class="form-tips-info">提示：标题字数不能超过10个汉字</div>
            </div>
          </div>
 <!--          
          <div class="form-group">
            <label for="cn1" class="label">标题</label>
            <div class="control form-required">
              <input type="text" v-model="msg.messagetitle" id="cn1" v-bind:readonly="readonly">
              <div class="form-tips-info">提示：标题字数不能超过10个汉字</div>
            </div>
          </div> -->
          <div class="form-group form-label">
            <label class="label" for='cn2'>消息内容</label>
            <div class="control form-required">
              <textarea id="cn10" rows="2" v-model="msg.messagecontent" v-bind:readonly="readonly" class="inp4"></textarea>
              <div class="form-tips-info">提示：内容字数不能超过20个汉字</div>
            </div>
          </div>

  <!--         <div class="form-group mb-20">
            <label class="label">消息内容</label>
            <div class="control form-required">
              <textarea id="cn10" v-model="msg.messagecontent" rows="5" v-bind:readonly="readonly"></textarea>
              <div class="form-tips-info">提示：内容字数不能超过20个汉字</div>
            </div>
          </div> -->
          <div class="form-group">
            <label class="label"></label>
            <div class="control">
              <span class="primary-text mr-10">只发供应商管理员</span>
              <div class="checkbox-control checkbox-inline checkbox-alone mr-40">
                <input type="checkbox" name="cbg" value="1" v-model="checkAdmin" id="cbg1" v-bind:disabled="disabled">
                <label class="checkbox" for="cbg1"></label>
              </div>
              <span class="primary-text mr-10">供应商所有人员</span>
              <div class="checkbox-control checkbox-inline checkbox-alone">
                <input type="checkbox" name="cbs" id="cbs1" v-bind:disabled="disabled">
                <label class="checkbox" for="cbs1"></label>
              </div>
            </div>
          </div>
        </div>
        <div class="basic-message-tit clearfix">
          <h3>消息发送方式</h3>
        </div>
        <div class="pd-form clearfix">
          <div class="group-row">
            <div class="form-group w220">
              <label for="cn1" class="label w110">接收站内通知</label>
              <div class="radio-control">
                <input type="radio" id="radio01" name="radioio" value="Y" v-model="msg.isinstation" v-bind:disabled="disabled">
                <label class="radio" for="radio01">是</label>
                <input type="radio" name="radioio" value="N" v-model="msg.isinstation" id="radio02" v-bind:disabled="disabled">
                <label class="radio" for="radio02">否</label>
              </div>
            </div>
            <div class="form-group fl ml-30 w220">
              <label class="label">接收邮件通知</label>
              <div class="radio-control">
                <input type="radio" id="radio03" name="radioio1" value="Y" v-model="msg.isemail" v-bind:disabled="disabled">
                <label class="radio" for="radio03">是</label>
                <input type="radio" name="radioio1" value="N" v-model="msg.isemail" id="radio04" v-bind:disabled="disabled">
                <label class="radio" for="radio04">否</label>
              </div>
            </div>
          </div>
          <div class="group-row">
            <div class="form-group w220">
              <label for="cn2" class="label w110">接收短信通知</label>
              <div class="radio-control">
                <input type="radio" id="radio05" name="radioio2" value="Y" v-model="msg.issms" v-bind:disabled="disabled">
                <label class="radio" for="radio05">是</label>
                <input type="radio" name="radioio2" value="N" v-model="msg.issms" id="radio06" v-bind:disabled="disabled">
                <label class="radio" for="radio06">否</label>
              </div>
            </div>
            <div class="form-group fl ml-30 w220">
              <label class="label">接收APP通知</label>
              <div class="radio-control">
                <input type="radio" id="radio07" name="radioio3" value="Y" v-model="msg.isapp" v-bind:disabled="disabled">
                <label class="radio" for="radio07">是</label>
                <input type="radio" name="radioio3" value="N" v-model="msg.isapp" id="radio08" v-bind:disabled="disabled">
                <label class="radio" for="radio08">否</label>
              </div>
            </div>
          </div>
          <div class="group-row">
            <div class="form-group w220">
              <label for="cn3" class="label w110">接收微信通知</label>
              <div class="radio-control">
                <input type="radio" id="radio09" name="radioio4" value="Y" v-model="msg.iswebchat" v-bind:disabled="disabled">
                <label class="radio" for="radio09">是</label>
                <input type="radio" name="radioio4" value="N" v-model="msg.iswebchat" id="radio010" v-bind:disabled="disabled">
                <label class="radio" for="radio010">否</label>
              </div>
            </div>
          </div>

        </div>
        <div class="info-send-type" v-if="msg.guid!=null">
          <span class="fl">发送人：{{msg.sender}}</span>
          <span>发送时间：{{msg.sendtime}}</span>
          <span class="fr">发送状态：已发</span>
        </div>

        <div class="basic-message-tit clearfix">
          <h3>消息接收对象</h3>
          <a class=" fr text-color-red" href="javascript:;">? 消息发送异常查看</a>
        </div>
        <div class="epi-form">
          <div class="group-row">
            <div class="form-group form-label">
              <label for="cn3" class="label fl">供应商</label>
              <div class="control ml-0 w300">
                <input type="text" id="cn3" v-model="search2.search_LIKE_chinesename" @blur="getReceivedMsg(true)" class="inp3">
              </div>
            </div>
            <div class="form-group form-label w260">
              <label for="cn4" class="label fl" style="width:4em;">人员</label>
              <div class="control w260 ml-0">
                <input type="text" id="cn4" v-model="search2.search_LIKE_receiver" @blur="getReceivedMsg(true)" class="inp2">
              </div>
            </div>
          </div>
        </div>
        
<!--         <div class="epi-form">
          <div class="group-row">
            <div class="form-group">
              <label for="cn1" class="label t-right fl" style="width:4em;">供应商</label>
              <div class="control" style="margin-left:60px;width:350px;">
                <input type="text" id="cn1" v-model="search2.search_LIKE_chinesename" @blur="getReceivedMsg(true)">
              </div>
            </div>
            <div class="form-group">
              <label for="cn2" class="label fl" style="width:4em;">人员</label>
              <div class="control " style="margin-left:60px;">
                <input type="text" id="cn2" v-model="search2.search_LIKE_receiver" @blur="getReceivedMsg(true)">
              </div>
            </div>
          </div>
        </div> -->
        <table class="itable itable-thead-13px">
          <thead>
            <tr>
              <th class="w50">序号</th>
              <th class="w70">供应商</th>
              <th class="w80">站内到达</th>
              <th class="w80">短信到达</th>
              <th class="w80">微信到达</th>
              <th class="w80">APP到达</th>
              <th class="w80">邮件到达</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="m in msgReceivedList">
              <td>{{$index+1}}</td>
              <td>{{m.receiver}}<br/>{{m.chinesename}}</td>
              <td>{{m.instationreceived | instationreceived}}
                <br/>{{m.instationreceivedtime}}
              </td>
              <td> {{m.smsreceived | smsreceived}}
                <br/>{{m.smsreceivedtime}}
              </td>
              <td>{{m.webchatreceived | webchatreceived}}
                <br/>{{m.webchatreceivedtime}}
              </td>
              <td>{{m.appreceived | appreceived}}
                <br/>{{m.appreceivedtime}}
              </td>
              <td>{{m.emailreceived | emailreceived}}
                <br/>{{m.emailreceivedtime}}
              </td>
            </tr>            
          </tbody>
        </table>
       <!--  <div class="mt-20 clearfix">
          <a class="fl text-color-red" href="javascript:;">? 消息发送异常查看</a>
        </div> -->
        <div class="pagination m-20-0">
          <em class="page">明细条目数【{{ search2.total }}】</em>
          <pagination 
           @page-change="getData" 
           :class="['m-20-0']"
           :page-no.sync="search2.page" 
           :total-pages.sync="search2.totalPages"></pagination>
          <em>共{{search2.totalPages}}页</em>
        </div>
      </div>
      <!-- end-->
    </div>
</template>
<script>
module.exports={
  data: function(){
    return {
      msgList: [],
      supplierList:[],            //供应商列表
      checkIdList:[],
      msg:{},
      search: {
        pageSize: 10,
        page: 1,
        totalPages: 0,
        total:0
      },
      search1:{
        search_LIKE_chinesename:''
      },
      search2:{
        pageSize: 3,
        page: 1,
        totalPages: 0,
        total:0,
        search_EQ_guid:''
      },
      supplyRelationList :[],
      distrbGuid: '',                //供应商Guid
      checkSupplier: [],
      selAll:false,
      supplierstaffList:{
        mfsupplierstaff:[],
      },
      msgReceivedList:[],
      checkAdmin:[],
      supplierCount:'',
      msgVO:{
        trmessagenotification:{},
        chinesename:'',
        guid:'',
        flag:'',
        ids:''
      },
      readonly:true,
      disabled:true,
    };
  },
  methods: {
    getData: function(){
      var self = this;
      if(this.$route.params.id != 0 ){
        Ajax.get('/message/msgDetail/'+this.$route.params.id)
        .then(function (response){
          var data = response.data.data;
          self.$set('msg',data);
          self.getReceivedMsg();
          self.$set('readonly',true);
          self.$set('disabled',true);
        });  
      } else {
          self.$set('msg',{});
          self.loadPage();
          self.$set('readonly',false);
          self.$set('disabled',false);
      }
    },
    loadPage:function(){
      this.$set('msg.isinstation','Y');
      this.$set('msg.isemail','Y');
      this.$set('msg.issms','Y');
      this.$set('msg.isapp','Y');
      this.$set('msg.iswebchat','Y');
    },
    //通过登录人GUID查询对应的供应商
    getSupplierList:function() {
      var self = this;
      Ajax.get('/message/supplierList',self.search1)
         .then(function (response){
          var data = response.data.data;
          self.$set('supplierList',data);
          self.$set('supplierCount',data.length);
        });  
      },
    getSupplierstaffByGuid:function(){
      var self = this;
      var guids="";
    for(var i=0;i<this.checkSupplier.length;i++){
      if(i==(this.checkSupplier.length-1)){
        guids+=this.checkSupplier[i];
      }else{
        guids+=this.checkSupplier[i]+"@@";
      }
    }
      Ajax.get('/message/supplierStaffList/'+guids)
         .then(function (response){
          var data=response.data.data;
          self.$set('supplierstaffList.mfsupplierstaff',data);
        });
    },

    //接收短信
    receiveMessage:function(){
      var self=this;
      var guids="";
      var flag="";
      var ids="";
    for(var i=0;i<this.checkSupplier.length;i++){
      if(i==(this.checkSupplier.length-1)){
        guids+=this.checkSupplier[i];
      }else{
        guids+=this.checkSupplier[i]+"@@";
      }
    }
    flag = this.checkAdmin.length;    
    ids = this.msg.isinstation+"@@"+ this.msg.isemail+"@@"+this.msg.issms+"@@"+this.msg.isapp+"@@"+this.msg.iswebchat; 
    this.msgVO.guid=guids;
    this.msgVO.ids=ids;
    this.msgVO.flag=flag;
    },

    //发送消息
    sendMessage:function() {
        var self = this; 
        if(this.checkSupplier.length==0){
        self.MessageBox.alert('请选择您要发送的供应商！').then(function(action){
              });
        return;
      }
        self.receiveMessage();
        this.msg.sender=self.$store.state.user.curUser.realname;
        this.msgVO.trmessagenotification=this.msg;
        Ajax.post('/message/sendMsg',this.msgVO)
        .then(function (response){
             var data=response.data;
             if(data.errorCode==0){
              self.MessageBox({
                message:'发送成功！',
                type:'alert'
              },function(action){});
            }else{
              self.MessageBox({
                message:data.message,
                type:'alert'
              },function(action){});
            }
            self.msg={};
        }); 
      },
    //接收消息对象
    getReceivedMsg:function(){
      var self=this;
      self.search2.search_EQ_guid = this.msg.guid;
      Ajax.get('/message/msgReceivedInfo',self.search2)
         .then(function (response){
          var data = response.data.data;
          self.$set('msgReceivedList',data.list);
          self.search2.totalPages = data.totalPages;
          self.search2.total = data.total;
        });  
    },
  },  
  route:{
    activate : function(){
      this.getData();
      this.getSupplierList();
      this.getReceivedMsg();
    }
  },
  watch:{
    'selAll':function(val){
        if(val && this.supplierList.length>0){
          this.checkSupplier.length=0;
          for(var i=0;i<this.supplierList.length;i++){
            this.checkSupplier.push(this.supplierList[i].guid);
          }
        }else{
          this.checkSupplier=[];
        }
    }
  }
};
</script>