<template>
  <div class="conent">
    <!-- 新增按钮 -->
    <div class="btn">
      <el-button type="primary" @click="dialogVisible = true">新增</el-button>
    </div>

    <!-- 点击新增弹出表单 -->
    <div class="from">
      <el-dialog
        title="新增用户"
        :visible.sync="dialogVisible"
        width="30%"
        :close-on-click-modal="false"
      >
        <div>
          <el-form label-width="80px">
            <el-form-item label="姓名">
              <el-input v-model="from.name"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="from.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
              <el-input v-model="from.password_confirmation"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <!-- <el-input v-model="from.role_name"></el-input> -->
              <template>
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in roleOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
            <div class="from-btn">
              <el-button type="danger" @click="dialogVisible = false"
                >取消</el-button
              >
              <el-button @click="onSubmit">确认</el-button>
            </div>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!-- 点击编辑弹出表单信息 -->
    <div class="edit_from">
      <el-dialog
        title="编辑"
        :visible.sync="editVisible"
        width="30%"
        :close-on-click-modal="false"
      >
        <div>
          <el-form label-width="80px">
            <el-form-item label="ID">
              <el-input v-model="edit_from.id"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input v-model="edit_from.name"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="edit_from.email"></el-input>
            </el-form-item>
            <el-form-item label="角色">
              <template>
                <el-select v-model="edit_from.role_name" placeholder="请选择">
                  <el-option
                    v-for="item in roleOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.name"
                  >
                  </el-option>
                </el-select>
              </template>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="edit_from.password"></el-input>
            </el-form-item>
            <el-form-item label="密码确认">
              <el-input v-model="edit_from.password_confirmation"></el-input>
            </el-form-item>
            <div class="from-btn">
              <el-button type="danger" @click="editVisible = false"
                >取消</el-button
              >
              <el-button @click="onEdit()">确认</el-button>
            </div>
          </el-form>
        </div>
      </el-dialog>
    </div>

    <!-- 用户列表 -->
    <div class="table">
      <template>
        <el-table :data="tableList" style="width: 100%">
          <el-table-column prop="id" label="ID"></el-table-column>
          <el-table-column prop="name" label="姓名"></el-table-column>
          <el-table-column label="角色">
            <template slot-scope="scope">{{
              scope.row.roles[0].name
            }}</template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="openEdit(scope.row)">编辑</el-button>
              <!-- <el-button type="danger">删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </template>
    </div>

    <!-- 分页功能 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current_page"
        :page-sizes="[15, 50, 100]"
        :page-size="per_page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Paginationdata.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  userList,
  userAdd,
  userEdit,
  userConfirm,
  roleList,
} from "../../api/user";
export default {
  data() {
    return {
      id: "",
      dialogVisible: false, //新增按钮变量
      editVisible: false, //编辑按钮变量
      tableList: [], //列表数据
      from: {
        //表单数据（用户名密码确认密码角色名）
        name: "",
        password: "",
        password_confirmation: "",
        role_name: "",
      },
      edit_from: {
        // 编辑返回默认数据
        created_at: "",
        deleted_at: null,
        email: "",
        id: "",
        name: "",
        password: "",
        password_confirmation: "",
        role_name: "",
      },
      Paginationdata: {}, //分页相关数据
      current_page: 1, //当前页
      per_page: 15, //每页显示数量
      roleOptions: [], //角色下拉框
      value: "", //角色下拉框选择
    };
  },

  mounted() {
    this.getList(); //进入调用用户表单数据请求
    this.getrole(); //进入调用角色数据请求
  },
  methods: {
    // 角色列表请求
    getrole() {
      roleList().then((res) => {
        this.roleOptions = res.data.data;
        console.log(this.roleOptions);
      });
    },

    //用户表单数据请求
    getList() {
      let page = {
        page: this.current_page,
        per_page: this.per_page,
      };
      userList(page).then((res) => {
        this.tableList = res.data.data;
        this.Paginationdata = res.data.meta;
      });
    },

    //点击新增确认
    onSubmit() {
      this.from.role_name = this.value;
      let from = this.from;
      userAdd(from).then((res) => {
        this.tableList = [...this.tableList, res.data.data];
        this.dialogVisible = false;
        this.getList();
        this.from = {};
        this.$message({
          message: "账号添加成功！",
          type: "success",
        });
      });
    },

    //点击编辑
    openEdit(e) {
      this.editVisible = true;
      let id = e.id;
      this.id = e.id;
      // 请求id对应数据
      userEdit(id).then((res) => {
        this.edit_from = res.data.data;
        console.log(this.edit_from);
      });
    },

    //编辑完确认请求
    onEdit() {
      userConfirm(this.id, this.edit_from).then((res) => {
        this.tableList = [...this.tableList, res.data.data];
        this.editVisible = false;
        this.getList();
        this.$message({
          message: "账号修改成功！",
          type: "success",
        });
      });
      this.editVisible = false;
    },

    //分页功能
    handleSizeChange(val) {
      //当前条数
      this.per_page = val;
      this.getList();
    },
    handleCurrentChange(val) {
      //当前页
      this.current_page = val;
      this.getList();
    },
  },
};
</script>

<style lang="scss" scoped>
.conent {
  width: 100%;
  min-height: calc(100vh - 200px);
  position: relative;
}
.btn {
  height: 104px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  .el-button {
    width: 114px;
    height: 44px;
    border-radius: 3px;
  }
}
.table {
  margin-top: 20px;
}

.from-btn {
  display: flex;
  justify-content: space-around;
  align-content: center;
}

.block {
  margin-top: 30px;
}
</style>
