<template>
  <el-dialog title="选择用户" width="850px" :visible.sync="show">
    <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>
            <div class="flex gap-20">
              <el-button  type="primary" @click="getTableData" size="medium"
                >搜索</el-button
              >
              <!-- <el-button @click="resetHandle" size="medium">重置</el-button> -->
              <el-button @click="noChooseUser" size="medium"
                >不选择用户</el-button
              >
              <!-- <el-button @click="resetHandle" size="medium">新建用户</el-button> -->
            </div>
          </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">
        <el-table :data="tableData.data" v-loading="tableData.loading" @cell-click="cellClick">
          <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="telephone"
            width="160"
          ></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="操作" width="90" fixed="right">
            <template v-slot="scope">
              <el-button  type="primary" size="mini" @click="choose(scope.row)">选择</el-button>
              <!-- <el-button type="text" @click="charge(scope.row)">充值</el-button> -->
            </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>
  </el-dialog>
</template>
  
  <script>
import { queryAllShopUser, queryAllShopInfo } from "@/api/shop";
import dayjs from "dayjs";
let cacheData = {};
export default {
  data() {
    return {
      show: false,
      query: {
        name: "",
      },
      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() {
    // this.getTableData();
  },
  methods: {
    cellClick(user){
      console.log(user)
      this.$emit("chooseUser",user)
      this.close()
    },
    noChooseUser(){
        this.$emit("chooseUser",null)
      this.close()

    },
    choose(user) {
      this.$emit("chooseUser",user)
      this.close()

    },
    charge(user) {
      console.log(user);
    },
    close(){
        this.show = false;
    },
    open() {
      this.getTableData();
      this.show = true;
    },
    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.getTableData();
    },
    // 分页回调
    paginationChange(e) {
      this.tableData.page = e - 1;
      this.getTableData();
    },
    // 获取商品列表
    async getTableData() {
      this.tableData.loading = true;
      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 .el-input--small .el-input__inner{
    height: 36px;
    line-height: 36px;
}

::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;
      }
    }
  }
}
.flex{
    display: flex;
    align-items: center;
}
.gap-20{
    gap: 20px;
}
</style>
  