<template>
  <div class="blacklist-wrap">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="component-content screenSet" id="screenSet">
      <el-form ref="searchReq" :model="searchReq" :rules="searchReqRules" label-width="77px" style="overflow: hidden;">
        <el-form-item label="手机号" prop="aimNo" style="width: 200px; float: left;">
          <el-input v-model.number="searchReq.aimNo" placeholder="请输入手机号" maxlength="11"></el-input>
        </el-form-item>
        <el-form-item label="恶意行为" style="width: 200px; float: left;">
          <el-input v-model="searchReq.remark" placeholder="请输入" ></el-input>
        </el-form-item>
        <el-form-item label="记录时间" style="width: 470px; float: left;">
          <el-date-picker
            v-model="duringTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <div style="float: right; margin-right: 28px;">
          <el-button type="primary" style="float: left; margin: 0 10px 10px 0;" @click="handleSearch('searchReq')">搜索</el-button>
          <el-button type="primary" style="float: left; margin: 0 10px 10px 0;" @click="handleRefresh">刷新</el-button>
        </div>
        <div style="overflow: hidden; clear: both; float: right; margin-right: 28px;">
          <el-button type="primary" style="float: left; margin: 0 10px 10px 0;" @click="showAddModal">添加</el-button>
        </div>
      </el-form>

      <div style="padding: 0 40px;">
        <el-table
          :data="tableData"
          border
          style="width: 100%;">
          <el-table-column
            align="center"
            prop="aimNo"
            label="手机号"
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="remark"
            label="恶意行为"
            >
          </el-table-column>
          <el-table-column
            align="center"
            prop="modifyTime"
            label="记录时间"
            >
            <template slot-scope="scope">
              {{ returnModifyTime(scope.row.modifyTime) }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="modifyName"
            label="操作人"
            >
          </el-table-column>
          <el-table-column
            align="center"
            label="操作"
           >
           <template slot-scope="scope">
              <el-button
                @click.native.prevent="showDeleteModal(scope.row)"
                type="text">
                移除
              </el-button>
            </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>

      <el-dialog
        title="添加黑名单"
        :visible.sync="centerDialogVisible"
        :close-on-click-modal="false"
        width="700px"
        @close="handleCancelAdd"
        center>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="手机号" prop="aimNo" style="width: 600px;">
            <el-input v-model.number="ruleForm.aimNo" placeholder="请输入" maxlength="11" show-word-limit></el-input>
          </el-form-item>
          <el-form-item label="恶意行为" prop="remark" style="width: 600px;">
            <el-input v-model="ruleForm.remark" placeholder="请输入"  maxlength="30" show-word-limit></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleCancelAdd">取 消</el-button>
          <el-button type="primary" @click="confirmAddBlacklist('ruleForm')">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除 弹窗 -->
      <el-dialog
        :visible.sync="deleteDialogVisible"
        :close-on-click-modal="false"
        width="400px"
        center>
        <span>确认移除？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmDeleteRow">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import { openLoading, closeLoading } from "../../utils/utils";
  import BreadCrumb from "../../components/breadcrumb.vue";
  export default {
    components: {
      BreadCrumb,
    },
    data() {
      var checkPhone = (type, value, callback) => {
        // debugger;
        if (!Number.isInteger(value)) {  
          if( type == 'search' ){
            this.searchReq.aimNo = '';
          }else{
            this.ruleForm.aimNo = '';
          }
          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();
          }
        }
      };
      var checkUnnecessaryMobile = (rule, value, callback) => {
        if (value) {
          checkPhone('search', value, callback);
        }else{
          if(typeof value != 'undefined' && value === 0){
            return callback(new Error('手机号必须是以1开头的11位纯数字'));
          };
          callback();
        }
      };
      var checkMobile = (rule, value, callback) => {
        // debugger;
        if(!value){
          if(typeof value != 'undefined' && value === 0){
            return callback(new Error('手机号必须是以1开头的11位纯数字'));
          };
          return callback(new Error('请填写手机号'));
        }else{
          checkPhone('addBlackList', value, callback);
        }
      };
      return {
        curmbFirst: "黑名单",
        duringTime: "",
        centerDialogVisible: false,
        tableData: [],
        searchReqRules: {
          aimNo: [
            { validator: checkUnnecessaryMobile }
          ],
        },
        rules: {
          aimNo: [
            { required: true, message: '请填写手机号', trigger: 'blur' },
            { validator: checkMobile }
          ],
          remark: [
            { required: true, message: '请填写恶意行为', trigger: 'blur' },
          ],
        },
        ruleForm: {
          aimNo: '',
          remark: '',
        },
        totalRows: 0,
        searchReq: {
          aimNo: '',   // 手机号
          remark: '',  // 恶意行为
          startTime: '',
          endTime: '',
          pageNo: 1,
          pageSize: 10,
        },
        deleteDialogVisible: false,

      }
    },
    created() {
      this.getBlackList();
    },
    methods: {
      showAddModal() {
        this.centerDialogVisible = true ;
      },
      handleCancelAdd() {
        this.centerDialogVisible = false;
        this.resetForm('ruleForm');
      },
      confirmAddBlacklist(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.handleEditSave();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleEditSave() {
        // request 
        let req = this.ruleForm;
        openLoading(this);
        this.POST('raytheon/black/save', req).then((res) => {
            closeLoading(this);
            if( res && res.code && res.code == '000000') {
              // console.log('>>>>>> 移除当前行数据 OK ', req);
              this.centerDialogVisible = false;
              this.getBlackList();
              this.resetForm('ruleForm');
            }else{
              this.$message({
                message: '接口请求失败',
                type: 'warning'
              });
            }
        })
      },
      handleSearch(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.getBlackList();
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      // 刷新
      handleRefresh() {
        let options = {
          isRefresh: true
        };
        this.getBlackList( options );
      },
      getBlackList(options) {
        if( options && options.isRefresh ){  // 刷新 请求参数置为默认
          this.searchReq = {
            aimNo: '',   // 手机号
            remark: '',  // 恶意行为
            startTime: '',
            endTime: '',
            pageNo: 1,
            pageSize: 10,
          };
          this.duringTime = '';
        }else{  
          // 时间获取
          // console.log('this.duringTime',this.duringTime);
          if(this.duringTime!=='' && this.duringTime!==null) {
            this.searchReq.startTime = this.duringTime[0].getTime();
            this.searchReq.endTime = this.duringTime[1].getTime();
          } else {
            this.searchReq.startTime = '';
            this.searchReq.endTime = '';
          }
        }
        let req = this.searchReq;

        openLoading(this);
        this.GET("raytheon/black/list", req).then(res => {
          closeLoading(this);
          if(res && res.code && res.code == '000000'){
            // console.log('get blackList>>>>> ', res);  
            if( res && res.data ){
              this.totalRows = res.data.total || 0;
              this.tableData = res.data.list || [];
            }
          }else{
            this.$message({
              message: '接口请求失败',
              type: 'warning'
            });
          }
        });
      },
      handleSizeChange(val){
        this.searchReq.pageSize = val;
        this.getBlackList();
      },
      handleCurrentChange(val) {
        this.searchReq.pageNo = val;
        this.getBlackList();
      },
      returnModifyTime(modifyTime) {
        if( modifyTime ){
          return modifyTime.year + '-' + modifyTime.monthValue + '-' + modifyTime.dayOfMonth ;
        }else{
          return '-';
        }
      },
      showDeleteModal(rowData) {
        this.deleteDialogVisible = true;
        this.rowData = rowData;
      },
      confirmDeleteRow() {
        let req = {
          id: this.rowData.id
        };
        openLoading(this);
        this.POST('raytheon/black/delete', req).then((res) => {
            closeLoading(this);
            if( res && res.code && res.code == '000000') {
              // console.log('>>>>>> 移除当前行数据 OK ', req);
              this.deleteDialogVisible = false;
              this.getBlackList();
            }else{
              this.$message({
                message: '接口请求失败',
                type: 'warning'
              });
            }
        })

      },
      
    },
  }
</script>  
<style lang="scss">
  .blacklist-wrap{
    .el-form-item .el-form-item__label{
      font-size: 14px;
    }
    .component-content{
      margin-top: 60px;
      padding: 10px;
      background: #fff;
    }
    .el-date-editor--daterange.el-input__inner{
      width: 380px !important;
    }
  }
</style>