<template>
  <div class="user-list">
    <!-- 头部 -->
    <div class="head">
      <div>用户列表</div>
<!--      <el-button type="primary" @click="addItem">添加banner</el-button>-->
    </div>
    <!-- 主体 -->
    <div class="app-container calendar-list-container">
      <!-- 条件搜索 -->
      <div class="filter-container">
        <el-form :inline="true" :model="listQuery" class="demo-form-inline">
          <el-form-item label="昵称">
            <el-input v-model="listQuery.realName" placeholder="请输入昵称"></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="listQuery.mobile" placeholder="请输入手机号"></el-input>
          </el-form-item>
          <el-form-item label="用户ID">
            <el-input v-model="listQuery.userId" placeholder="请输入用户ID"></el-input>
          </el-form-item>
          <el-form-item label="注册时间">
            <el-date-picker
              v-model="times"
              type="datetimerange"
              value-format="timestamp"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="状态">
            <el-select class="filter-item" v-model="listQuery.status" placeholder="请选择">
              <el-option :key="undefined" label="全部" :value="undefined"></el-option>
              <el-option :key="0" label="启用" :value="0"></el-option>
              <el-option :key="1" label="禁用" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="handleSearch">搜索</el-button>
            <el-button type="primary" plain @click="handleCleanSearch">清除搜索</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 数据列表 -->
      <el-table :data="list" v-loading.body="listLoading" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="用户ID" width="120">
          <template slot-scope="scope">
            {{scope.row.userId}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="昵称" prop="nickname"></el-table-column>
        <el-table-column align="center" label="手机号" prop="username"></el-table-column>
        <el-table-column align="center" label="头像">
          <template slot-scope="scope">
            <el-image style="width: 40px;height: 40px;border-radius: 50%;" :src="scope.row.headimgurl" :preview-src-list="[scope.row.headimgurl]"></el-image>
<!--            <img style="width: 40px;height: 40px;border-radius: 50%;" :src="scope.row.headimgurl" @click.stop="showPreview(scope.row.headimgurl)"/>-->
          </template>
        </el-table-column>
        <el-table-column align="center" label="注册时间">
          <template slot-scope="scope">
            {{scope.row.crtTimeStr}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="状态">
          <template slot-scope="scope">
            <!-- 根据状态获取对应中文 -->
            {{ getStatus(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="300">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleInvoice(scope.row)">查看发票</el-button>
            <el-button type="primary" size="mini" @click="handleAddress(scope.row)">查看地址</el-button>
            <el-button :type="scope.row.status === 1 ? 'info': 'warning'" size="mini" @click="changeStatus(scope.row)">{{scope.row.status === 0 ? '禁用': '启用'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
           :current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
           layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
      </div>
    </div>
    <!-- 发票弹窗 -->
    <invoice-list-dialog v-if="invoiceDialogVisible" v-on:invoiceEvent="invoiceEvent"></invoice-list-dialog>
    <!-- 地址弹窗 -->
    <address-list-dialog v-if="addressDialogVisible" v-on:addressEvent="addressEvent"></address-list-dialog>
  </div>
</template>
<script type="javascript">
  import { appUsersManageList, updateStatus } from 'api/userManagement/index'
  import {timestamp2Date} from '@/utils/dateUtils';
  import invoiceListDialog from "./invoiceListDialog";
  import addressListDialog from "./addressListDialog";
  export default {
    name: 'userManagement',
    components: {
      invoiceListDialog,
      addressListDialog
    },
    computed:{
      getStatus(status) {
        return (status) => {
          let a = ""
          switch(status) {
            case 0: a = '启用'; break;
            case 1: a = '禁用'; break;
            default: a = '未知';break
          }
          return a
        }
      },
    },
    data() {
      return {
        times: [],
        listLoading: false,
        list: [], // 用户列表
        total: 0, // 总条数
        listQuery: {
          page: 1,
          limit: 20,
          mobile: undefined, // 手机号
          realName: undefined, // 真实姓名
          userId: undefined, // 用户id
          status: undefined, // 0：启用  1：禁用
          registrationTimeBegin: undefined, // 开始时间
          registrationTimeEnd: undefined // 结束时间
        },
        invoiceDialogVisible: false, // 查看发票弹窗
        addressDialogVisible: false // 查看地址弹窗
      }
    },
    created() {
      this.getList()
    },
    methods:{
      /**
       * 搜索
       */
      handleSearch(){
        this.listQuery.page = 1
        this.getList() // 获取用户列表
      },
      /**
       * 查看发票-返回界面
       */
      invoiceEvent(){
        this.invoiceDialogVisible = false
      },
      /**
       * 查看地址-返回界面
       */
      addressEvent(){
        this.addressDialogVisible = false
      },
      /**
       * 启用、禁用
       */
      changeStatus(row){
        this.$confirm("是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(() => {
          // 0、启用，1、禁用
          updateStatus({id: row.userId, status: row.status == 1?0:1}).then((response) => {
            if(response.status == 200){
              this.$notify({
                title: "成功",
                message: "操作成功",
                type: "success",
                duration: 2000
              });
              this.getList()
            } else {
              this.$notify({
                title: '失败',
                message: response.message,
                type: 'error',
                duration: 2000
              })
            }
          });
        }).catch(()=>{})
      },
      /**
       * 查看发票
       */
      handleInvoice(){
        this.invoiceDialogVisible = true
      },
      /**
       * 查看地址
       */
      handleAddress(){
        this.addressDialogVisible = true
      },
      /**
       * 清除搜索
       */
      handleCleanSearch(){
        this.listQuery = {
          page: 1,
          limit: 20,
          mobile: undefined, // 手机号
          realName: undefined, // 真实姓名
          userId: undefined, // 用户id
          status: undefined, // 0：启用  1：禁用
          registrationTimeBegin: undefined, // 开始时间
          registrationTimeEnd: undefined // 结束时间
        }
        this.times = []
        this.getList() // 获取用户列表
      },
      /**
       * 获取用户列表
       */
      getList(){
        if(this.times.length>0){
          this.listQuery.registrationTimeBegin = this.times[0]
          this.listQuery.registrationTimeEnd = this.times[1]
        }
        this.listLoading = true
        appUsersManageList(this.listQuery).then(response => {
          if(response.status == 200){
            response.data.list.map(function(item){
              item.crtTimeStr = timestamp2Date(item.createTime);
            })
            this.list = response.data.list;
            this.total = response.data.total;
            this.listLoading = false;
          } else {
            this.listLoading = false
            this.$notify({
              title: '失败',
              message: response.message,
              type: 'error',
              duration: 2000
            })
          }
        })
      },
      handleSizeChange(val) {
        this.listQuery.limit = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.page = val;
        this.getList();
      }
    }
  }
</script>
<style lang="scss">
  .user-list {
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 8px 20px;
      width: 100%;
      border-bottom: 1px solid #e6e6e6;
      height: 57px;
    }
  }
</style>
