<template>
  <div class="msg-history-wrap">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <el-form ref="searchReq" :rules="rules" :model="searchReq" label-width="100px" style="margin-bottom: 20px;">
        <el-row>
          <el-col style="width:270px;">
            <el-form-item label="手机号" prop="mobile">
              <el-input v-model.number="searchReq.mobile" placeholder="请输入手机号" maxlength="11"></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width:290px;">
            <el-form-item label="内容关键字" prop="content">
              <el-input v-model="searchReq.content" placeholder="请输入内容关键字" ></el-input>
            </el-form-item>
          </el-col>
          <el-col style="width: 200px; margin-left: 60px;">
            <el-button type="primary" @click="handleSearchClick('searchReq')">搜索</el-button>
          </el-col>
        </el-row>
      </el-form>

      <div style="padding: 0 40px;">
        <el-table
          :data="tableData"
          border
          style="width: 100%;">
          <el-table-column
            align="center"
            prop="mobile"
            label="手机号"
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="content"
            label="内容"
            >
          </el-table-column>
          <el-table-column
            align="center"
            label="发送时间"
            >
            <template slot-scope="scope">
              {{ returnSendTime(scope.row.creatTime) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="统计"
           >
           <template slot-scope="scope">
              <p :class="returnStatusStyle(scope.row.code)">{{ returnStatusText(scope.row.code) }}</p>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchReq.pageNo"
            :page-sizes="[10, 30, 50, 100]"
            :page-size="searchReq.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalRows">
          </el-pagination>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
  import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "../../components/breadcrumb.vue";
  export default {
    components: {
      BreadCrumb,
    },
    data() {
      var checkMobiles = (rule, value, callback) => {
        // debugger;
        if (value) {
          if (!Number.isInteger(value)) {  
            this.searchReq.mobile = '';
            callback(new Error('手机号必须是以1开头的11位纯数字'));
          } else{
            value += '';
            let arr = value.split('');
            if(value.length >= 1){ 
              if( arr[0] != '1' ){
                callback(new Error('手机号必须是以1开头的11位纯数字'));
              }else{
                if( value.length != 11 ){
                  callback(new Error('手机号必须是以1开头的11位纯数字'));
                }else{
                  callback();
                }
              } 
            }else{
              callback();
            }
          }
        }else{
          if(typeof value != 'undefined' && value === 0){
            callback(new Error('手机号必须是以1开头的11位纯数字'));
          };
          callback();
        }
      };
      return {
        curmbFirst: "短信历史",
        searchReq: {
          mobile: '',
          content: '',
          pageNo: 1,
          pageSize: 10,
        },
        totalRows: 0,
        tableData: [],
        rules: {
          mobile: [
            { validator: checkMobiles }
          ],
        },
      }
    },
    created() {
      this.getSMSList();
    },
    methods: {
      getSMSList() {
        let req = this.searchReq;
        openLoading(this);
        this.GET("raytheon/sms/list", req).then(res => {
          closeLoading(this);
          if(res && res.code && res.code == '000000'){
            // console.log('get SMS列表>>>>> ', res);  
            if( res && res.data ){
              this.totalRows = res.data.total || 0;
              this.tableData = res.data.list || [];
            }
          }else{
            this.$message({
              message: '接口请求失败',
              type: 'warning'
            });
          }
        });
      },
      handleSearchClick(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.searchReq.pageNo = 1;
            this.getSMSList();
          } else {
            console.log('error submit!!');
            return false;
          }
        });

        
      },
      handleSizeChange(val){
        this.searchReq.pageSize = val;
        this.getSMSList();
      },
      handleCurrentChange(val) {
        this.searchReq.pageNo = val;
        this.getSMSList();
      },
      returnSendTime(creatTime){
        if( creatTime ){
          return creatTime.year + '-' + creatTime.monthValue + '-' + creatTime.dayOfMonth + ' ' + creatTime.hour + ':' + creatTime.minute ;
        }else{
          return '-';
        }
      },
      returnStatusText(code){
        if(typeof code != 'undefined'){
          if(code == 0 || code == 3){
            return '成功'; 
          }else if(code == 1){
            return '处理中'; 
          }else if(code == 2 || code == 4){
            return '失败';
          }else{
            return '失败';
          }
        }else{
          return '-';
        }
      },
      returnStatusStyle(code){
        let basic = 'status-tj ';
        if(typeof code != 'undefined'){
          if(code == 0 || code == 3){
            basic += 'success'; 
          }else if(code == 1){
            basic += 'pending'; 
          }else if(code == 2 || code == 4){
            basic += 'fail';
          }else{
            basic += 'fail';
          }
        }else{
          basic += '';
        }
        return basic;
      }
    },
  }
</script>  
<style lang="scss">
  .msg-history-wrap{
    .el-form-item .el-form-item__label{
      font-size: 14px;
    }
    .component-content{
      margin-top: 60px;
      padding: 10px;
      background: #fff;
    }
    .pagination{
      margin: 20px 0;
      text-align: right;
    }
    .status-tj{
      &.success{
        color: #409EFF;
      }
    }
  }
</style>
