<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"
              icon="el-icon-search"
              >搜索</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%;
                cursor: pointer;
              "
              :src="scope.row.headimgurl"
              @click="preview(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="text" @click="handleInvoice(scope.row)"
              >查看发票</el-button
            >
            <el-button type="text" @click="handleAddress(scope.row)"
              >查看地址</el-button
            >
            <el-button type="text" @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
          style="text-align: center"
          @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"
      :userId="userId"
      v-on:invoiceEvent="invoiceEvent"
    ></invoice-list-dialog>
    <!-- 地址弹窗 -->
    <address-list-dialog
      v-if="addressDialogVisible"
      :userId="userId"
      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, // 总条数
      userId: undefined,
      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: {
    preview(src) {
      let imgs = [src];
      this.$imagePreview({
        images: imgs,
        index: 0,
      });
    },
    /**
     * 搜索
     */
    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(row) {
      this.userId = row.userId;
      this.invoiceDialogVisible = true;
    },
    /**
     * 查看地址
     */
    handleAddress(row) {
      this.userId = row.userId;
      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>
