<template>
  <div class="allUser-page">
    <person-title>当前位置 :: 所有用户</person-title>
    <div class="allUser-page-cont">
      <div class="findOrder-search">
        <el-form :inline="true" :model="selectData" class="user-findOrder">
          <el-form-item label="用户类型">
            <el-select v-model="selectData.identiyId"
                       size="small"
                       clearable placeholder="用户类型">
              <el-option label="普通用户" :value="3"></el-option>
              <el-option label="快递员" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="请输入">
            <el-input v-model="selectData.username"
                      size="small"
                      placeholder="用户名" clearable></el-input>
          </el-form-item>
          <el-form-item label="请输入">
            <el-input v-model="selectData.email"
                      size="small"
                      placeholder="电子邮箱" clearable></el-input>
          </el-form-item>
          <el-form-item label="请输入">
            <el-input v-model="selectData.phone"
                      size="small"
                      placeholder="手机号码" clearable></el-input>
          </el-form-item>
          <el-button type="primary" v-on:click="queryData()">查询</el-button>
        </el-form>
      </div>
      <el-table
        :data="theUserList"
        class="userOrderList"
        :default-sort="{prop: 'createTime', order: 'descending'}"
        style="width: 100%">
        <div class="emptyTip" slot="empty">
          暂时没有用户信息 , 赶紧去拉人注册吧!
        </div>
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left"
                     inline class="userTable demo-table-expand">
              <el-form-item label="编号 :">
                <span>{{ props.row.id }}</span>
              </el-form-item>
              <el-form-item label="用户名 :">
                <span>{{ props.row.username }}</span>
              </el-form-item>
              <el-form-item label="联系电话 :">
                <span>{{ props.row.phone }}</span>
              </el-form-item>
              <el-form-item label="电子邮箱 :">
                <span>{{ props.row.email }}</span>
              </el-form-item>
              <el-form-item label="性别 :">
                <span>{{ props.row.sex === 1 ? '男' : '女' }}</span>
              </el-form-item>
              <el-form-item label="保密问题 :">
                <span>{{ props.row.ncryptedProble }}</span>
              </el-form-item>
              <el-form-item label="注册时间 :">
                <span v-text="timeChange(props.row.registrationTime)"></span>
              </el-form-item>
              <el-form-item label="生日 :">
                <span>{{ props.row.birthday }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
          v-for="item in titleList"
          :key='item.id'
          :sortable='item.sortable'
          :label="item.columnTitle"
          :prop="item.prop">
        </el-table-column>
        <el-table-column>
          <template slot="header" slot-scope="scope">操作
          </template>
          <template slot-scope="scope">
            <template v-if="scope.row.identityId==3">
              <el-button
                class="btn-cancel"
                type='success'
                size="medium"
                v-on:click="changUser(scope.row)"
              >设为快递员
              </el-button>
              <!-- handleSuccess(scope.$index, scope.row) -->
            </template>
            <template v-if="scope.row.identityId==2">
              <el-button
                size="medium"
                v-on:click="changUser(scope.row)"
              >设为普通用户
              </el-button>
            </template>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pageination-oder">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="selectData.page"
        :page-sizes="[10, 50, 80, 100]"
        :page-size="selectData.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalOrder">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {getAllAccount, changIdentity} from '../../../api/user'
import {formData} from '../../../unit/formDate'

export default {
  data () {
    return {
      theUserList: [],
      titleList: [
        {id: 1, columnTitle: '用户名', prop: 'username', sortable: true},
        {id: 2, columnTitle: '电话', prop: 'phone', sortable: false},
        {id: 3, columnTitle: '电子邮件', prop: 'email', sortable: false}
      ],
      selectData: {
        page: 1,
        size: 10,
        identiyId: '',
        username: '',
        email: '',
        phone: '',
      },
      totalOrder: 0,
    }
  },
  created () {
    this.getAllUser()
  },
  methods: {
    queryData () {
      this.selectData.page = 1
      this.selectData.size = 10
      this.getAllUser()
    },
    changUser (row) {
      let data = {
        id: row.id,
        identity: row.identityId === 2 ? 2 : 3
      }
      changIdentity(data).then(res => {
        console.log(res)
      })
    },
    timeChange (time) {
      return formData(time, 'yyyy-MM-dd hh:mm:ss')
    },
    getAllUser () {
      let loading = this.$loading({lock: true, text: '玩命加载中...'})
      getAllAccount(this.selectData).then(res => {
        loading.close()
        let data = res.data
        if (data.success) {
          this.theUserList = data.data.list
          this.totalOrder = data.data.count
        } else {
          this.$message({
            message: data.msg,
            type: 'error'
          })
        }
      }).catch(err => {
        loading.close()
        this.$message({
          message: '请求出错',
          type: 'error'
        })
      })
      //     if(res.status=='0'){
      //         this.theUserList = res.result;
      //     }else{
      //         console.log(res.msg);
      //     }
      // }).catch(err=>{
      //     console.log(err);
      //
      // })
    },
    handleSizeChange (val) {
      this.selectData.size = val
      this.getAllUser()
    },
    handleCurrentChange (val) {
      this.selectData.page = val
      this.getAllUser()
    }
  }
}
</script>

<style lang="scss">

.pageination-oder{  //订单页中的分页样式
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  //margin-top: 1rem;
  bottom: -3rem;
}

.allUser-page {
  position: relative;
  width: 100%;
}

.allUser-page-cont {
  position: relative;
  width: 100%;
}

.userOrderList {
  .el-message {
    top: 5rem;
  }

  .el-button {
    width: 4.2rem;
    height: 1.5rem;
    line-height: 1.5rem;
    padding: 0;

    span {
      font-size: 0.6rem;
    }
  }

  //交易操作
  .btn-cancel {
    margin-right: 0.2rem;
    margin-bottom: 0.3rem;
  }

  .btn-success {
    /*background-color: #409eff;*/
    /*color: #fff;*/

    &:hover {
      /*background-color: lighten(#409eff, 5%);*/
    }
  }

  // 当前订单没有数据时候
  .emptyTip a {
    color: rgb(226, 137, 137);

    &:hover {
      color: rgb(214, 29, 29);
    }
  }

  .el-button + .el-button {
    margin-left: 0;
  }

  // 展开详情后文本 的span
  .horder .el-form-item__content span,
  .currentorder .el-form-item__content span {
    margin-right: 0.5rem;
  }

  .demo-table-expand {
    font-size: 0;
  }

  .demo-table-expand label {
    width: 6.2rem;
    color: #99a9bf;
  }

  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}

.el-button {
  margin: 0 auto;
}

.findOrder-search {
  padding-top: 1rem;
}
</style>
