<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="order-top">
          <div class="username-inquire">
            <el-input
              placeholder="请输入手机号码或员工姓名"
              style="width: 261px"
              v-model="value"
              clearable
              @clear="getData(1)"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <el-button @click="getData(1)">查询</el-button>
          </div>
          <div class="export" @click="addStaff">添加员工</div>

          <!-- 添加员工弹窗 -->
          <el-dialog
            title="添加员工"
            :visible.sync="addStaffShow"
            :close-on-click-modal="false"
          >
            <div class="info">
              <div class="user">
                <div class="name">员工姓名</div>
                <el-input v-model="staffValue"></el-input>
              </div>
              <div class="user">
                <div class="name">手机号码</div>
                <el-input v-model="phoneValue"></el-input>
              </div>
            </div>
            <div class="info">
              <div class="user">
                <div class="name">职位</div>
                <el-select v-model="position" placeholder="请选择">
                  <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item.value"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click.stop="addStaffShow = false" class="cancel"
                >取消</el-button
              >
              <el-button @click.stop="addSuccess">完成</el-button>
            </span>
          </el-dialog>
        </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="username" align="center" label="员工姓名">
            </el-table-column>

            <el-table-column
              prop="phone"
              width="300"
              label="手机号码"
              align="center"
            >
            </el-table-column>

            <el-table-column prop="position" align="center" label="职位">
            </el-table-column>
            <el-table-column prop="address" align="center" label="操作">
              <template slot-scope="scope">
                <!-- 编辑按钮 -->
                <span @click="handleEdit(scope.row)" class="operate">
                  编辑
                </span>

                <!-- 编辑员工弹窗 -->
                <el-dialog
                  title="编辑员工"
                  :visible.sync="editShow"
                  :close-on-click-modal="false"
                >
                  <div class="info">
                    <div class="user">
                      <div class="name">员工姓名</div>
                      <el-input v-model="staffValue"></el-input>
                    </div>
                    <div class="user">
                      <div class="name">手机号码</div>
                      <el-input v-model="phoneValue"></el-input>
                    </div>
                  </div>
                  <div class="info">
                    <div class="user">
                      <div class="name">职位</div>
                      <el-select v-model="position" placeholder="请选择">
                        <el-option
                          v-for="(item, index) in options"
                          :key="index"
                          :label="item.value"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click.stop="editShow = false" class="cancel"
                      >取消</el-button
                    >
                    <el-button @click.stop="editSuccess()">完成</el-button>
                  </span>
                </el-dialog>

                <!-- 删除按钮 -->
                <span @click="handleDelete(scope.row)" class="operate">
                  删除
                </span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页器区域 -->
        <div class="block">
          <el-pagination
            background
            @current-change="handleCurrentChange"
            :current-page="curPage"
            :page-size="pageSize"
            layout="prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Cookies from "js-cookie";
export default {
  name: "Inform",
  data() {
    return {
      // 当前页显示的数据
      tableData: [],
      // 职位类型列表
      options: [
        {
          value: "清洁工",
        },
        {
          value: "维修工",
        },
        {
          value: "财务总监",
        },
        {
          value: "服务员",
        },
        {
          value: "前台",
        },
      ],
      // 搜索框绑定数据
      value: "",
      // 员工姓名
      staffValue: "",
      // 员工手机号码
      phoneValue: "",
      // 员工职位
      position: "",
      // 添加员工弹窗控制
      addStaffShow: false,
      // 编辑员工弹窗控制
      editShow: false,
      // 总条数
      total: null,
      // 当前页
      curPage: 1,
      // 每页条数
      pageSize: 8,
      // 修改数据的id
      id: "",
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    // 获取员工管理页面表格数据
    async getData(curPage) {
      if (curPage) {
        this.curPage = curPage;
      }
      let params = {
        curPage: this.curPage,
        pageSize: this.pageSize,
        keyword: this.value,
      };
      let res = await this.API.hotelStaff.hotelStaffList(params);
      // console.log(res);
      if (res.success) {
        this.tableData = res.data.list;
        this.total = res.data.totalCount;
      } else {
        this.$message.error(res.message);
      }
    },

    // 删除按钮回调
    handleDelete(row) {
      this.$confirm("确定删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await this.API.hotelStaff.hotelStaffDelete([row.id]);
          // console.log(res);
          if (res.success) {
            this.$message.success("删除成功");
            let totalPage = Math.ceil((this.total - 1) / this.pageSize);
            let currentPage =
              this.curPage > totalPage ? totalPage : this.curPage;
            this.curPage = currentPage < 1 ? 1 : currentPage;
            this.getData();
          } else {
            this.$message.error(res.message);
          }
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },

    // 添加员工按钮回调
    addStaff() {
      this.addStaffShow = true;
      this.phoneValue = "";
      this.staffValue = "";
      this.position = "";
    },

    // 添加员工弹窗完成按钮回调
    async addSuccess() {
      let reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (reg_tel.test(this.phoneValue)) {
        if (this.staffValue.trim() == "") {
          this.$message({ message: "输入的姓名不能为空", type: "error" });
        } else if (this.position == "") {
          this.$message({ message: "职位不能为空", type: "error" });
        } else {
          let params = {
            phone: this.phoneValue,
            username: this.staffValue,
            position: this.position,
            cardNumber: 666,
            statu: 1,
          };
          let res = await this.API.hotelStaff.hotelStaffSave(params);
          // console.log(res);
          if (res.success) {
            this.$message.success("添加成功");
            this.getData();
          } else {
            this.$message.error(res.message);
          }
          this.addStaffShow = false;
        }
      } else {
        this.$message({ message: "请输入正确的电话号码", type: "error" });
      }
    },

    // 编辑按钮回调
    handleEdit(row) {
      // console.log(row);
      this.editShow = true;
      this.id = row.id;
      this.phoneValue = row.phone;
      this.staffValue = row.username;
      this.position = row.position;
    },

    // 编辑员工弹窗完成按钮回调
    async editSuccess() {
      let reg_tel =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (reg_tel.test(this.phoneValue)) {
        if (this.staffValue.trim() == "") {
          this.$message({ message: "输入的姓名不能为空", type: "error" });
        } else if (this.position == "") {
          this.$message({ message: "职位不能为空", type: "error" });
        } else {
          let data = {
            id: this.id,
            phone: this.phoneValue,
            username: this.staffValue,
            position: this.position,
            cardNumber: 666,
            statu: 1,
          };
          let res = await this.API.hotelStaff.hotelStaffUpdate(data);
          // console.log(res);
          if (res.success) {
            this.$message.success("编辑成功");
            this.getData();
          } else {
            this.$message.error(res.message);
          }
          this.editShow = false;
        }
      } else {
        this.$message({ message: "请输入正确的电话号码", type: "error" });
      }
    },

    // 翻页回调函数
    handleCurrentChange(val) {
      this.curPage = val;
      this.getData();
    },

    // 表格样式设置
    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-header {
      display: flex;
      margin-right: 29px;
      .el-button {
        margin-left: 9px;
        background-color: rgba(41, 109, 227, 1);
      }
    }
  }
  .inform-body {
    .order-top {
      display: flex;
      align-items: center;
      padding: 33px 29px 34px 33px;
      font-size: 16px;
      justify-content: space-between;
      font-weight: 400;
      color: #000;

      .el-button {
        background-color: rgba(41, 109, 227, 1);
        color: #fff;
        margin-left: 9px;
      }

      .state {
        margin-left: 30px;
      }
      .export {
        width: 94px;
        height: 32px;
        opacity: 1;
        color: #fff;
        text-align: center;
        line-height: 32px;
        background: rgba(41, 109, 227, 1);
        cursor: pointer;
        border-radius: 3px;
      }
      .el-dialog__wrapper {
        .el-dialog {
          width: 555px !important;
          height: 377px !important;
          margin-top: 352px !important;
          .el-dialog__header {
            height: 80px;
            padding: 0;
            display: flex;
            align-items: center;
            border-bottom: 1px solid rgba(230, 230, 230, 1);
            .el-dialog__title {
              font-size: 20px;
              font-weight: 500;
              padding-left: 30px;
              color: rgba(0, 0, 0, 1);
            }
            .el-dialog__headerbtn {
              width: 35px;
              height: 35px;
              .el-dialog__close {
                font-size: 28px;
                font-weight: 500;
                color: #000;
              }
            }
          }
          .el-dialog__body {
            padding: 0 30px;
            .info {
              display: flex;
              .user {
                .name {
                  text-align: left;
                  padding: 12px 0;
                }
                .el-input {
                  width: 205px;
                  height: 38px;
                  opacity: 1;
                  margin-right: 81px;
                  .el-input__inner {
                    color: #000;
                  }
                }
              }
            }
          }
          .el-dialog__footer {
            padding: 52px 30px 0 0;
            .el-button {
              width: 67px;
              height: 37px;
              padding: 0;
            }
            .cancel {
              background-color: #fff;
              color: rgba(56, 56, 56, 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;
          td {
            .cell {
              .operate {
                color: rgba(41, 109, 227, 1);
                cursor: pointer;
                font-size: 16px;
                font-weight: 400;
                padding: 0 5px;
              }
              .el-dialog__wrapper {
                overflow: hidden;
                .el-dialog {
                  width: 555px !important;
                  height: 377px !important;
                  margin-top: 352px !important;
                  opacity: 1;
                  background: rgba(255, 255, 255, 1);
                  box-shadow: none;
                  .el-dialog__header {
                    height: 83px;
                    border-bottom: 1px solid rgba(230, 230, 230, 1);
                    .el-dialog__headerbtn {
                      top: 29px;
                    }
                    span {
                      float: left;
                      font-size: 20px;
                      font-weight: 500;
                      color: #000;
                    }

                    .el-dialog__close {
                      width: 35px;
                      height: 35px;
                      &::before {
                        font-size: 24px;
                        color: #000;
                      }
                    }
                  }
                  .el-dialog__body {
                    padding: 0 38px;
                    .userinfo {
                      font-size: 20px;
                      font-weight: 500;
                      color: rgba(0, 0, 0, 1);
                      text-align: left;
                      margin-top: 15px;
                    }
                    .info {
                      display: flex;
                      .user {
                        .name {
                          text-align: left;
                          padding: 12px 0;
                        }
                        .el-input {
                          width: 205px;
                          height: 38px;
                          opacity: 1;
                          margin-right: 81px;
                          .el-input__inner {
                            color: #000;
                          }
                        }
                      }
                    }
                    .rate {
                      font-size: 20px;
                      font-weight: 500;
                      color: rgba(0, 0, 0, 1);
                      text-align: left;
                      margin: 15px 0;
                    }
                    .water {
                      text-align: left;
                      font-size: 16px;
                      font-weight: 400;
                      color: rgba(0, 0, 0, 1);
                    }
                    .el-table {
                      margin: 10px 0;
                      tr {
                        height: 48px;
                      }
                      .el-table__body-wrapper {
                        overflow: visible;
                      }
                    }
                  }
                  .el-dialog__footer {
                    padding: 52px 30px 0 0;
                    .el-button {
                      width: 67px;
                      height: 37px;
                      padding: 0;
                      color: #fff;
                      background-color: rgba(41, 109, 227, 1);
                    }
                    .cancel {
                      background-color: #fff;
                      color: rgba(56, 56, 56, 1);
                    }
                  }
                }
              }

              .el-dialog__title {
                color: rgba(41, 109, 227, 1);
                cursor: pointer;
                padding: 10px 18px 0 18px;
              }
            }
          }
          .el-checkbox__inner {
            width: 18px;
            height: 18px;
            &::after {
              transform: rotate(45deg) scaleY(1.5);
              top: 3px;
              left: 5px;
            }
          }
        }
        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;
            }
          }
        }
      }
    }
  }
}
.box-card {
  /deep/ .el-card__header {
    padding: 0;
  }
  /deep/ .el-card__body {
    padding: 0;
  }
}
</style>
<style lang="scss">
.el-message-box__wrapper {
  .el-button--primary {
    background-color: #296de3 !important;
  }
}
</style>
