<template>
   <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>农场管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="search-box">
            <div class="filter-box">
                <el-input
                    size="small"
                    placeholder="请输入关键字"
                    v-model="keyWords">
                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>
            </div>
            <el-button type="primary" size="mini" @click="addUser()">新增</el-button>
        </div>
         <el-row :gutter="10">
            <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="6" v-for="item in userList" :key="item.id">
                <el-card class="box-card ">
                    <div class="img-box">
                        <img v-if="item.is_active==1" src="../../../assets/images/sy/farm/user-disabled.png" >
                        <img v-if="item.is_active==0" src="../../../assets/images/sy/farm/user.png" >
                    </div>
                    <div class="detail">
                        <p class="borderLine">用户名 : {{item.username}}</p>
                        <p class="borderLine">真实姓名 : {{item.truename}}</p>
                        <p class="borderLine">有效期 : {{item.validity_date}}</p>
                        <p class="borderLine">手机号 : {{item.phone}}</p>
                     </div>
                    <div class="btns">
                        <a :class="{bg:itemId==item.id&&btnindex==1?true:false}"  @click="editUser(item.id)">编辑</a>
                        <a :class="{bg:itemId==item.id&&btnindex==2?true:false}" @click="forbidUser(item.id)">禁用</a>
                    </div>
                </el-card>
            </el-col>
         </el-row>
        <el-pagination
        background
        layout="prev, pager, next"
        :total="totalNum"
        @current-change="changePage">
       </el-pagination>
         <!-- 添加新用户弹框 -->
         <el-dialog
         title="新增"
         :visible.sync="addUserDialogVisible"
         width="30%"
         @close="addUserDialogClosed">
            <el-form ref="addUserFormRef" :model="addUserForm" label-width="90px" :rules="addUserFormRules" >
            <el-form-item label="用户名 : " prop="username">
                  <el-input v-model="addUserForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码 : " prop="pass">
                  <el-input  v-model="addUserForm.pass"></el-input>
            </el-form-item>
             <el-form-item label="真实姓名 : " prop="truename">
                  <el-input  v-model="addUserForm.truename"></el-input>
            </el-form-item>
              <el-form-item label="有效期 : " prop="validity_date">
                  <el-date-picker type="date" placeholder="选择日期" v-model="addUserForm.validity_date" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="管理地块 : " prop="fields">
               <el-select   v-model="addUserForm.fields" placeholder="请选择地块" multiple  style="width: 100%;">
                  <el-option v-for="item in fields" :label="item.label" :value="item.value" :key="item.value"></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="手机号 : " prop="phone">
                  <el-input  v-model="addUserForm.phone"></el-input>
            </el-form-item>
            </el-form>
               <span slot="footer" class="dialog-footer">
                  <el-button @click="addUserDialogVisible= false">取 消</el-button>
                  <el-button type="primary" @click="addUserSubm">确认</el-button>
               </span>
         </el-dialog>
         <!-- 编辑用户信息 -->
         <el-dialog
         title="编辑"
         :visible.sync="editUserDialogVisible"
         width="30%"
         @close="editUserDialogClosed">
            <el-form ref="editUserFormRef" :model="editUserForm" label-width="90px" :rules="addUserFormRules" >
            <el-form-item label="用户名 : " prop="username">
                  <el-input v-model="editUserForm.username"></el-input>
            </el-form-item>
            <el-form-item label="密码 : " prop="pass">
                  <el-input  v-model="editUserForm.pass"></el-input>
            </el-form-item>
             <el-form-item label="真实姓名 : " prop="truename">
                  <el-input  v-model="editUserForm.truename"></el-input>
            </el-form-item>
              <el-form-item label="有效期 : " prop="validity_date">
                  <el-date-picker type="date" placeholder="选择日期" v-model="editUserForm.validity_date" style="width: 100%;"></el-date-picker>
            </el-form-item>
            <el-form-item label="管理地块 : " prop="fields">
               <el-select   v-model="editUserForm.fields" placeholder="请选择地块" multiple  style="width: 100%;">
                  <el-option v-for="item in fields" :label="item.label" :value="item.value" :key="item.value"></el-option>
               </el-select>
            </el-form-item>
            <el-form-item label="手机号 : " prop="phone">
                  <el-input  v-model="editUserForm.phone"></el-input>
            </el-form-item>
            </el-form>
               <span slot="footer" class="dialog-footer">
                  <el-button @click="editUserDialogVisible= false">取 消</el-button>
                  <el-button type="primary" @click="editUserSubm">确认</el-button>
               </span>
         </el-dialog>
   </div>
</template>

<script>
   export default {
      data(){
         var checkMobile = (rule, value, callback) => {
            const regMobile = /^1\d{10}$/
            if (regMobile.test(value)) {
               callback()
            }else{
               // 返回一个错误提示
               callback(new Error('请输入合法的手机号码'))
            }
         };
         return {
           btnindex:'',//按钮选中状态控制
           itemId:'',//当前点开的弹框设备ID
           keyWords:'',
           userList:[
               {
                     "id":12,
                     "username":"yyyzz",
                     "truename":"张三",
                     "validity_date":"2020-02-30 00:00:00",
                     "phone":"18838094123",
                     "password":"1234156",
                     "is_active":1
               },{
                  "id":123,
                  "username":"yyyzz",
                  "truename":"张三",
                  "validity_date":"2020-02-30 00:00:00",
                  "phone":"18838094123",
                  "password":"1234156",
                  "is_active":1
               },{
                  "id":1234,
                  "username":"yyyzz",
                  "truename":"张三",
                  "validity_date":"2020-02-30 00:00:00",
                  "phone":"18838094123",
                  "password":"1234156",
                  "is_active":0
               },{
                  "id":12345,
                  "username":"yyyzz",
                  "truename":"张三",
                  "validity_date":"2020-02-30 00:00:00",
                  "phone":"18838094123",
                  "password":"1234156",
                  "is_active":true
               },{
                  "id":123456,
                  "username":"yyyzz",
                  "truename":"张三",
                  "validity_date":"2020-02-30 00:00:00",
                  "phone":"18838094123",
                  "password":"1234156",
                  "is_active":0
               },{
                  "id":1234567,
                  "username":"yyyzz",
                  "truename":"张三",
                  "validity_date":"2020-02-30 00:00:00",
                  "phone":"18838094123",
                  "password":"1234156",
                  "is_active":true
               },{
                  "id":12345678,
                  "username":"yyyzz",
                  "truename":"张三",
                  "validity_date":"2020-02-30 00:00:00",
                  "phone":"18838094123",
                  "password":"1234156",
                  "is_active":0
               },{
                  "id":123456789,
                  "username":"yyyzz",
                  "truename":"张三",
                  "validity_date":"2020-02-30 00:00:00",
                  "phone":"18838094123",
                  "password":"1234156",
                  "is_active":true
               }
            ],
           totalNum:1,
           addUserDialogVisible:false,
           editUserDialogVisible:false,
           fields:[
              {value:'1',label:'地块一'},
              {value:'2',label:'地块二'},
              {value:'3',label:'地块三'},
              {value:'4',label:'地块四'},
           ],
           addUserForm:{
               username:"",
               pass:"",
               truename:"",
               validity_date:"",
               fields:[],
               phone:"",
           },
           editUserForm:{
               username:"yyyzz",
               pass:"123456",
               truename:"张三",
               validity_date:"2020-02-30 00:00:00",
               fields:['1'],
               phone:"18838094123",
           },
           addUserFormRules:{
               username:[{ required: true, message: '请填写用户名', trigger: 'blur'}],
               pass:[{required: true, message: '请填写密码', trigger: 'blur' }],
               truename:[{required: true, message: '请填写真实姓名', trigger: 'blur' }],
               validity_date:[{required: true, message: '请选择有效期', trigger: 'change' }],
               fields:[{required: true, message: '请选择地块', trigger: 'change' }],
               phone:[
                  {required: true, message: '请填写手机号', trigger: 'blur' },
                  {validator: checkMobile, trigger: 'blur'}
                  ]
           }
         }
      },
      mounted(){
         // this.getUserList()
      },
      methods:{
         // getUserList(){
         //    this.$axios({
         //       method:"GET",
         //       url:"/farmUserList",
         //    }).then((res)=>{
         //          if (res.data.code !== 200) {
         //          return this.$message.error('获取用户数据失败!')
         //          }
         //          this.userList=res.data.dat;
         //          this.totalNum=res.data.nums;
         //    })
         // },
         addUser(){
            this.addUserDialogVisible=true;
         },
         addUserSubm(){
            this.$refs.addUserFormRef.validate((valid)=>{
               if (valid) {
                  this.addUserDialogVisible=false;
               } else {
                  console.log('error submit!!');
                  return false;
               }
            })
         },
         editUserSubm(){
            this.$refs.editUserFormRef.validate((valid)=>{
               if (valid) {
                  this.editUserDialogVisible=false;
               } else {
                  console.log('error submit!!');
                  return false;
               }
            })
         },
         editUserDialogClosed(){
            this.$refs.editUserFormRef.resetFields();
         },
         addUserDialogClosed(){
            this.$refs.addUserFormRef.resetFields();
         },
         editUser(id){
            this.btnindex=1;
            this.itemId=id;
            this.editUserDialogVisible=true
         },
         forbidUser(id){
            this.btnindex=2;
            this.itemId=id;
            this.$confirm('确定禁用此用户么?', '提示', {
               confirmButtonText: '确定',
               cancelButtonText: '取消',
               type: 'warning'
               }).then(() => {
                  this.$message({
                     type: 'success',
                     message: '禁用成功!'
                  });
               }).catch(() => {
                  this.$message({
                     type: 'info',
                     message: '已取消禁用'
                  });          
               });
         },
         changePage(val){
            
         }
      }
   }
</script>

<style lang='less' scoped>
.search-box{
    display:flex;
    justify-content: space-between;
    margin-bottom:10px;
    .el-input{width:200px;}
    }
.el-card {
    text-align: center;
    color:#555;
    font-size:13px;
    .borderLine{
        border: #eee;
        border-radius:5px;
        box-shadow: 0 0 10px rgba(0,0,0,.1);
        padding: 10px 0;
    }
   .btns{
      display:flex;
      width:180px;
      border-radius:30px;
      box-shadow: 0 0 10px rgba(0,0,0,.15);
      margin:20px auto 0;
      a.bg{background:#17BB89;color:#fff;}
      a{
         width:50%;
         padding:8px 0;
         cursor:pointer;
         &:first-child{border-top-left-radius:30px;border-bottom-left-radius:30px;}
         &:last-child{border-top-right-radius:30px;border-bottom-right-radius:30px;}
         }
      a:hover{background:#14a478;color:#fff}
   } 
}
</style>