<template>
  <el-container>
    <el-main>
      <el-form
        v-if="isSearchVisible"
        size="mini"
        label-position="right"
        label-width="100px"
        :inline="true"
        :model="formData"
        style="margin-bottom: 30px"
      >
        <div class="head-box">
          <el-form-item label="会员ID">
            <el-input v-model="formData.uid"></el-input>
          </el-form-item>
          <el-form-item label="会员昵称">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="formData.comment"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary">搜索</el-button>
            <el-button type="info">重置</el-button>
          </el-form-item>
        </div>
      </el-form>

      <ActionButton
        @handle-refresh="_fetchData(true)"
        @handle-search="isSearchVisible = !isSearchVisible"
      />

      <div>
        <el-table :data="tableData">
          <el-table-column type="index" label="序号" align="center"></el-table-column>
          <el-table-column label="头像" max-width="160" align="center">
            <template slot-scope="scope">
              <img
                v-if="scope.row.avatarUrl"
                :src="scope.row.avatarUrl"
                class="circle-box size-35"
                alt="avatar"
              />
              <img v-else :src="defaultAvatar" class="circle-box size-35" alt="avatar" />
            </template>
          </el-table-column>
          <el-table-column
            max-width="200"
            label="会员id"
            prop="id"
            align="center"
          ></el-table-column>
          <el-table-column
            label="会员昵称"
            prop="username"
            align="center"
            max-width="230"
          ></el-table-column>
          <el-table-column
            label="手机号"
            max-width="220"
            prop="mobile"
            align="center"
          ></el-table-column>
          <!-- <el-table-column label="会员等级" align="center">
            <template slot-scope="scope"> 会员等级1 </template>
          </el-table-column> -->
          <el-table-column label="备注" prop="remark" align="center" max-width="200">
            <template slot-scope="scope">
              {{ scope.row.remark || "-" }}
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" align="center" min-width="200px">
            <template slot-scope="scope">
              <CustomButton
                tip-text="查看明细"
                type="primary"
                icon="el-icon-tickets"
                @onClick="handleDetalis(scope.$index)"
              ></CustomButton>
              <CustomButton
                tip-text="删除"
                type="danger"
                icon="delete"
                is-svg
                @onClick="handleDelete(scope.$index)"
              ></CustomButton>
            </template>
          </el-table-column>
        </el-table>

        <el-footer>
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20, 30]"
            :page-size="limit"
            layout="total, prev, pager, next, sizes, jumper"
            :total="totalCount"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </el-footer>
      </div>
    </el-main>

    <memberDialog
      :selectItem="selectItem"
      :showDialog="isSearchDialog"
      @handle-close="handleClose"
      @handle-success="handleSuccess"
    ></memberDialog>

    <DeleteDialog
      :openDeleteDialog="openDeleteDialog"
      @handle-success="onDetele"
      @handle-close="deteleClose"
    ></DeleteDialog>
  </el-container>
</template>

<script>
import ActionButton from "@/components/ActionButton/index";
import CustomButton from "@/components/CustomButton/index";
import memberDialog from "./components/memberDialog.vue";

import DeleteDialog from "./components/delete-dialog.vue";

// delete-dialog
import { getUserList, getUserDelete, getUserUpdate } from "@/api/member-management";

export default {
  components: {
    ActionButton,
    CustomButton,
    memberDialog,
    DeleteDialog,
  },
  data() {
    return {
      selectItem: {},

      isSearchVisible: false,

      isSearchDialog: false,
      defaultAvatar: "./pic/default/default_avatar.png",

      openDeleteDialog: false,

      // 分页数据
      totalCount: 0,
      currentPage: 1,
      limit: 20,
      // 返回的数据
      tableData: [],
      i_id: null,
      select_i: null,
    };
  },

  mounted() {
    this._fetchData();
  },

  methods: {
    _fetchData(refresh = false) {
      getUserList({
        page_size: this.limit,
        page: this.currentPage,
      }).then((res) => {
        if (res.error_code === 0) {
          this.tableData = res.data.data;

          this.totalCount = res.data.total;
          refresh && this.$message.success("刷新成功");
        }
      });
    },

    handleDelete(index) {
      this.openDeleteDialog = true;
      this.i_id = this.tableData[index].id;
    },
    onDetele() {
      getUserDelete(this.i_id)
        .then(() => {
          this.$message.success("删除成功");
          this._fetchData();
          this.openDeleteDialog = false;
        })
        .catch(() => {
          this.openDeleteDialog = false;
        });
    },

    deteleClose() {
      this.openDeleteDialog = false;
    },

    // limit 改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this._fetchData();
    },
    // 当前页面改变
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this._fetchData();
    },

    handleDetalis(i) {
      this.isSearchDialog = true;
      this.selectItem = this.tableData[i];
      this.select_i = i;
    },

    handleClose() {
      this.isSearchDialog = false;
    },

    handleSuccess() {
      let data = this.tableData[this.select_i];

      getUserUpdate( data.id,{
        username: data.username,
        mobile: data.mobile,
        status: data.status,
        password: data.password,
        remark: data.remark,
      })
        .then((res) => {
          console.log(res);
          this.$message.success("修改成功");
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.head-box {
  border-bottom: #f2f2f2 1px solid;
  display: flex;
  justify-content: space-between;
  padding: 0 50px 0 0px;
  box-sizing: border-box;
  .el-input__inner {
    width: 250px;
  }
}

.el-footer {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
