<template>
  <div class="inform">
    <el-card class="box-card" style="width: 1612px; height: 950px">
      <!-- 标题区域 -->
      <div slot="header" class="clearfix">
        <div class="inform-title">账号管理</div>
      </div>

      <!-- 主体内容区域 -->
      <div class="inform-body">
        <!-- 筛选条件区域 -->
        <div class="state">
          <div class="left">
            <el-col :span="18">
              <el-input
                v-model="searchValue"
                placeholder="请输入账号或员工姓名"
                prefix-icon="el-icon-search"
              >
              </el-input>
            </el-col>
            <el-col :span="6">
              <el-button type="primary">查询</el-button>
            </el-col>
          </div>
          <div class="right">
            <el-button type="primary" @click="handleAdd">添加账号</el-button>
          </div>
        </div>
        <!-- 表格区域 -->
        <div class="inform-table">
          <el-table
            :data="tableData"
            max-height="576"
            height="576"
            style="width: 1550px"
            stripe
            :cell-style="rowbg"
            :header-cell-style="{
              color: ' rgba(0, 0, 0, 1)',
              background: 'rgba(240, 243, 247, 1)',
            }"
          >
            <el-table-column prop="number" label="账号" align="center">
            </el-table-column>

            <el-table-column prop="name" align="center" label="员工姓名">
            </el-table-column>

            <el-table-column prop="identity" align="center" label="角色">
            </el-table-column>
            <el-table-column align="center" label="操作">
              <template slot-scope="{ row }">
                <el-row v-if="row.identity == '超级管理员'">/</el-row>
                <el-row v-else>
                  <el-button type="text" @click="handleEdit(row)">
                    编辑
                  </el-button>
                  <el-button type="text" @click="handleDelete(row)"
                    >删除
                  </el-button>
                </el-row>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器区域 -->
        <div class="block">
          <el-pagination
            background
            layout="prev, pager, next, jumper"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            :total="total"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>

      <!-- 添加账号弹窗区域 -->
      <el-dialog
        :title="popTitle"
        width="30%"
        :visible.sync="dialogVisible"
        :close-on-click-modal="false"
        :before-close="handleClose"
      >
        <hr class="pop_title" />

        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-row :gutter="85">
            <el-col :span="12">
              <el-form-item label="员工姓名" prop="name">
                <el-input
                  v-model="ruleForm.name"
                  placeholder="请输入员工姓名"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="手机号码" prop="phone">
                <el-input
                  v-model="ruleForm.phone"
                  placeholder="请输入手机号码"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item label="角色" prop="identity">
            <el-select v-model="ruleForm.identity" placeholder="请选择角色">
              <el-option label="超级管理员" value="shanghai"></el-option>
              <el-option label="管理员" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="权限分配" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
              <el-checkbox label="房态管理" name="type"></el-checkbox>
              <el-checkbox label="订单管理" name="type"></el-checkbox>
              <el-checkbox label="员工管理" name="type"></el-checkbox>
              <el-checkbox label="账号管理" name="type"></el-checkbox>
              <el-checkbox label="统计报表" name="type"></el-checkbox>
              <el-checkbox label="系统设置" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleConfirm('ruleForm')"
            >确 定
          </el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Account",
  data() {
    return {
      // 添加账号弹窗控制
      dialogVisible: false,
      // 添加账号弹窗标题
      popTitle: "添加账号",
      // 表格数据
      tableData: [
        {
          number: "13645895689",
          name: "王小虎",
          identity: "超级管理员",
        },
        {
          number: "13645898888",
          name: "张三",
          identity: "管理员",
        },
      ],
      //  搜索框绑定数据
      searchValue: "",
      //   分页器当前页
      currentPage: 1,
      //   每页条数
      pageSize: 8,
      //   总条数
      total: 50,
      // 添加账号弹窗表格绑定数据
      ruleForm: {
        name: "",
        phone: "",
        identity: "",
        type: [],
      },
      // 添加账号弹窗表格验证规则
      rules: {
        name: [{ required: true, message: "请输入员工姓名", trigger: "blur" }],
        phone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            min: 3,
            max: 11,
            message: "长度在 3 到 11 个字符",
            trigger: "blur",
          },
        ],
        identity: [
          { required: true, message: "请选择角色", trigger: "change" },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    // 添加账号按钮回调
    handleAdd() {
      this.ruleForm.name = "";
      this.ruleForm.phone = "";
      this.ruleForm.identity = "";
      this.ruleForm.type = [];
      this.dialogVisible = true;
      this.popTitle = "添加账号";
      this.$nextTick(() => {
        this.$refs.ruleForm.resetFields();
      });
    },
    // 编辑按钮回调
    handleEdit(row) {
      console.log(row);
      this.ruleForm.phone = row.number;
      this.ruleForm.name = row.name;
      this.ruleForm.identity = row.identity;
      this.dialogVisible = true;
      this.popTitle = "编辑账号";
      Object.assign(this.ruleForm, row);
    },
    // 删除按钮回调
    handleDelete(row) {
      console.log(row);
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message.success("删除成功");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 分页器换页回调
    handleCurrentChange(value) {
      console.log(value);
      this.currentPage = value;
    },
    // 添加账号弹窗关闭弹窗回调
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 添加账号弹窗确定按钮回调
    handleConfirm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log("添加成功");
          let arr = {
            number: this.ruleForm.phone,
            name: this.ruleForm.name,
            identity: this.ruleForm.identity,
            type: this.ruleForm.type,
          };
          this.tableData.push(arr);
          this.dialogVisible = false;
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 表格样式设置回调
    rowbg(row) {
      if (row.rowIndex % 2 != 0) {
        return { background: "rgba(240, 243, 247, 1)", "border-radius": "5px" };
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.inform /deep/ .el-card {
  width: 1612px;
  height: 950px;
  box-shadow: 0px 3px 10px rgba(0, 97, 255, 0.2);
  border-radius: 8px;
  .clearfix {
    height: 96px;
    width: 100%;
    border-bottom: 1px solid rgba(204, 204, 204, 1);
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .inform-title {
      width: 96px;
      height: 36px;
      color: rgba(0, 0, 0, 1);
      font-size: 24px;
      font-weight: 500;
      margin-left: 33px;
    }
  }
  .inform-body {
    .state {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 33px 29px 34px 33px;
      .left {
        display: flex;
        align-items: center;
        .el-button {
          margin-left: 10px;
          background-color: rgba(41, 109, 227, 1);
        }
      }
      .right {
        .el-button {
          background-color: rgba(41, 109, 227, 1);
        }
      }
    }
    .inform-table {
      .el-table {
        font-weight: 400;
        font-size: 16px;
        color: rgba(0, 0, 0, 1);
        margin: 0 auto;
        .el-table__header-wrapper {
          border-radius: 5px;
        }
        tr {
          height: 64px;
        }
        th {
          font-weight: 400;
        }
      }
    }
    .block {
      height: 36px;
      margin: 66px 29px 0 0;
      float: right;
      .el-pagination {
        padding: 0;
        button {
          width: 36px;
          background: #fff;
          color: rgba(0, 0, 0, 1);
          height: 36px;
          font-size: 14px;
          border: 1px solid rgba(112, 112, 112, 1);
          border-radius: 8px;
        }
        ul {
          .active {
            background: #fff;
            color: rgba(0, 97, 255, 1);
            border: 1px solid rgba(0, 97, 255, 1);
            box-sizing: border-box;
          }
          .el-icon {
            border: none;
          }
          li {
            background: #fff;
            color: rgba(0, 0, 0, 1);
            width: 36px;
            height: 36px;
            font-size: 14px;
            border: 1px solid rgba(112, 112, 112, 1);
            border-radius: 8px;
            line-height: 36px;
          }
        }
        .el-pagination__jump {
          color: rgba(0, 0, 0, 1);
          font-size: 16px;
          margin-left: 10px;
          font-weight: 400;
          height: 36px;
          .el-input {
            width: 65px;
            height: 36px;
            margin: 0 10px;
            input {
              width: 65px;
              height: 36px;
              border: 1px solid rgba(0, 0, 0, 1);
              border-radius: 8px;
            }
          }
        }
      }
    }
  }
  .pop_title {
    color: #ccccccff;
  }
  .el-form {
    padding: 0 30px;
  }
}
.box-card {
  /deep/ .el-card__header {
    padding: 0;
  }
  /deep/ .el-card__body {
    padding: 0;
  }
  /deep/ .el-dialog__header {
    font-weight: bold;
  }
  /deep/ .el-dialog__body {
    padding: 0;
  }
}
</style>