<template>
  <div class="app-container">
    <div class="head-container">
      <el-form :model="query" inline>
        <el-form-item label="搜索">
          <el-input
            v-model="query.name"
            placeholder="请输入昵称或手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否为会员">
          <el-select v-model="query.isVip" placeholder="是否是会员">
            <el-option value="" label="全部"></el-option>
            <el-option :value="1" label="是"></el-option>
            <el-option :value="0" label="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getTableData">查询</el-button>
          <el-button @click="resetHandle">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- <div class="head-container">
            <el-button type="primary" icon="el-icon-plus" @click="$refs.addActive.show()">
                添加活动
            </el-button>
        </div> -->
    <div class="head-container">
      <div class="card">
        <!-- <div class="title">统计数据</div> -->
        <div class="row">
          <div class="item">
            <div class="t">会员数</div>
            <div class="n">{{ shopInfo.userTotal || 0 }}</div>
          </div>
          <div class="item">
            <div class="t">会员余额</div>
            <div class="n">{{ shopInfo.balanceTotal || 0 }}</div>
          </div>
          <div class="item">
            <div class="t">充值金额</div>
            <div class="n">{{ shopInfo.chageTotal || 0 }}</div>
          </div>
          <div class="item">
            <el-button type="success" @click="toPage('charge')"
              >充值记录</el-button
            >
            <!-- <el-button type="danger" @click="toPage('cost')">消费记录</el-button> -->
          </div>
        </div>
      </div>
    </div>
    <div class="head-container">
      <el-table :data="tableData.data" v-loading="tableData.loading">
        <el-table-column label="ID" prop="id"></el-table-column>
        <el-table-column label="用户" prop="headImg" width="200px">
          <template v-slot="scope">
            <div class="user_info">
              <el-image
                :src="scope.row.headImg"
                style="width: 40px;height: 40px;flex-shrink: 0;"
              >
                <div slot="error" class="image-slot">
                  <i class="el-icon-user"></i>
                </div>
              </el-image>
              <span class="name">{{ scope.row.nickName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="性别" prop="sex">
          <template v-slot="scope">
            <el-tag type="priamry">{{ scope.row.sex || "未知" }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="会员" prop="isVip">
          <template v-slot="scope">
            <el-tag type="warning" v-if="scope.row.isVip"
              >会员等级{{ scope.row.isVip }}</el-tag
            >
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column label="余额" prop="amount"></el-table-column>
        <el-table-column label="积分" prop="totalScore"></el-table-column>
        <el-table-column
          label="手机号"
          prop="telephone"
          width="160"
        ></el-table-column>
        <el-table-column
          label="生日"
          prop="birthDay"
          width="200"
        ></el-table-column>
        <el-table-column label="注册时间" prop="createAt" width="200">
          <template v-slot="scope">
            {{ scope.row.createAt | timeFilter }}
          </template>
        </el-table-column>
        <el-table-column label="最近登录时间" prop="lastLoginAt" width="200">
          <template v-slot="scope">
            {{ scope.row.lastLoginAt | timeFilter }}
          </template>
        </el-table-column>
        <!-- <el-table-column label="操作" width="90" fixed="right">
                    <template v-slot="scope">
                        <el-button type="text" @click="$refs.addActive.show(scope.row)">编辑</el-button>
                        <el-popconfirm title="确定删除吗？" @confirm="delTableHandle([scope.row.id])">
                            <el-button type="text" icon="el-icon-delete" style="margin-left: 20px !important;"
                                slot="reference">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column> -->
      </el-table>
    </div>
    <div class="head-container">
      <el-pagination
        :total="tableData.total"
        :current-page="tableData.page + 1"
        :page-size="tableData.size"
        @size-change="sizeChange"
        @current-change="paginationChange"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import { queryAllShopUser, queryAllShopInfo } from "@/api/shop";
import dayjs from "dayjs";
let cacheData = {};
export default {
  data() {
    return {
      query: {
        name: "",
        isVip: 1
      },
      shopInfo: {
        balanceTotal: 0,
        userTotal: 0,
        chageTotal: 0
      },
      tableData: {
        data: [],
        page: 0,
        size: 10,
        loading: false,
        total: 0
      }
    };
  },
  filters: {
    timeFilter(s) {
      return dayjs(s).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  mounted() {
    cacheData = { ...this.query };
    this.getTableData();
    this.getShopInfo();
  },
  methods: {
    toPage(type) {
      const pages = {
        charge: "charge_list",
        cost: "cost_list"
      };
      this.$router.push({
        name: pages[type]
      });
      console.log(pages[type]);
    },
    // 获取商家用户概述信息
    async getShopInfo() {
      try {
        const res = await queryAllShopInfo(this.query);
        this.shopInfo = res;
      } catch (error) {
        console.log(error);
      }
    },
    sizeChange() {
      this.tableData.page = 0;
      this.getTableData();
    },
    // 切换状态
    async statusChange(e, row) {
      try {
        this.tableData.loading = true;
        const data = { ...row };
        data.status = e;
        await modityActivate(data);
        this.getTableData();
      } catch (error) {
        console.log(error);
        this.tableData.loading = false;
      }
    },
    // 重置查询
    resetHandle() {
      this.query.name = "";
      this.query.isVip = 1;
      this.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1;
      this.getTableData();
    },
    // 获取商品列表
    async getTableData() {
      this.tableData.loading = true;
      //用于当页码为2以及以上查询条件更改时重置页码
      if (cacheData.isVip !== this.query.isVip) {
        this.tableData.page = 0;
      }
      cacheData.isVip = this.query.isVip;
      try {
        const res = await queryAllShopUser({
          ...this.query,
          size: this.tableData.size,
          page: this.tableData.page + 1
        });
        this.tableData.loading = false;
        this.tableData.data = res.content;
        this.tableData.total = res.totalElements;
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.user_info {
  display: flex;
  align-items: center;

  .name {
    margin-left: 10px;
  }
}

::v-deep .image-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #efefef;
  font-size: 20px;
  color: #999;
}

.card {
  background-color: #f5f5f5;
  padding: 0 14px;

  .title {
    font-size: 22px;
    padding-top: 14px;
  }

  .row {
    display: flex;
    padding: 20px 0;

    .item {
      flex: 1;

      .t {
        text-align: center;
        color: #555;
      }

      .n {
        color: #000;
        font-size: 20px;
        font-weight: bold;
        padding-top: 6px;
        text-align: center;
      }
    }
  }
}
</style>
