<template>
  <div class="container">
    <el-row :gutter="40">
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <el-form
          :model="staffData"
          :rules="rules"
          ref="form"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="员工姓名" prop="userName">
            <el-input v-model="staffData.userName" disabled></el-input>
          </el-form-item>
          <el-form-item label="员工性别" prop="userSex">
            <el-select
              v-model="staffData.userSex"
              placeholder="请选择"
              disabled
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="员工账号" prop="userAdmin">
            <el-input v-model="staffData.userAdmin" disabled></el-input>
          </el-form-item>
          <el-form-item label="员工手机号" prop="userPhone">
            <el-input v-model="staffData.userPhone" disabled></el-input>
          </el-form-item>
          <el-form-item label="员工身份证" prop="userIdentification">
            <el-input
              v-model="staffData.userIdentification"
              disabled
            ></el-input>
          </el-form-item>
          <el-form-item label="员工银行卡号" prop="userBankNumber">
            <el-input v-model="staffData.userBankNumber"></el-input>
          </el-form-item>
          <el-form-item label="员工开户银行" prop="userBankAddress">
            <el-input v-model="staffData.userBankAddress"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="success" icon="el-icon-upload2" @click="update()"
              >提交</el-button
            >
            <el-button type="info" icon="el-icon-refresh-left" @click="cancel()"
              >取消</el-button
            >
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :xl="8" :lg="8" :md="8" :sm="12" :xs="24">
        <div class="password">
          <p class="title">强制修改密码:</p>
          <el-input v-model="password"></el-input>
          <el-button
            style="margin-top: 10px"
            type="primary"
            @click="updatePassword()"
            >确认修改</el-button
          >
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { bankAccountValid } from "@/utils/myValidate";
import { getOneself, update, staffpassword } from "@/api/user";
export default {
  data() {
    return {
      password: "",
      staffData: {
        companyId: null,
        userName: null,
        userSex: null,
        userAdmin: null,
        userPassword: null,
        userPhone: null,
        userIdentification: null,
        userBankNumber: null,
        userBankAddress: null,
        roles: [],
      },
      rolesList: [],
      options: [
        {
          value: "1",
          label: "男",
        },
        {
          value: "0",
          label: "女",
        },
      ],
      rules: {
        userBankNumber: [
          { required: true, validator: bankAccountValid, trigger: "blur" },
        ],
        userBankAddress: [
          { required: true, message: "请输入员工开户行", trigger: "blur" },
        ],
        roles: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个角色",
            trigger: "change",
          },
        ],
        
      },
    };
  },
  computed: {
    userId() {
      return this.$route.query.id;
    },
  },
  created() {
    this.getStaff();
  },
  methods: {
    getStaff() {
      getOneself({ userId: this.userId })
        .then((res) => {
          if (res.success) {
            this.staffData = res.data;
          } else {
            this.$message.error(res.msg);
          }
        })
        .catch((error) => {
          this.$message.error("查询员工信息失败");
        });
    },
    cancel() {
      this.$store.dispatch("tagsView/delView", this.$route);
      this.$router.push("/staffList");
    },
    update() {
      this.$refs.form.validate((valida) => {
        if (valida) {
          update(this.staffData)
            .then((res) => {
              if (res.success) {
                this.$message.success("修改成功");
                this.$store.dispatch("tagsView/delView", this.$route);
                this.$router.push("/staffList");
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((error) => {
              this.$message.error("修改失败");
            });
        }
      });
    },
    updatePassword() {
      if (this.password != "" && this.password != null) {
        this.$confirm("确认要修改此员工的密码吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            let param = {
              staffPassword: this.password,
              userId: this.staffData.userId,
            };
            staffpassword(param)
              .then((res) => {
                if (res.success) {
                  this.$message.success("修改成功");
                  this.password = "";
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch(() => {
                this.$message.error("修改失败");
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消修改",
            });
          });
      } else {
        this.$message({
          message: "密码不能为空",
          type: "warning",
        });
      }
    },
  },
};
</script>

<style scoped>
.container {
  padding: 10px;
}
.password {
  border: 1px solid black;
  padding: 20px;
  border-radius: 10px;
}
.password > .title {
  margin: 0px 0px 10px 0px;
  font-weight: 600;
}
</style>