<template>
  <div class="center">
    <div class="center_css">
      <div class="top_css">
        <el-row>
          <el-button type="primary" @click="addman">添加成员</el-button>
        </el-row>
      </div>
      <el-table :data="tableData" style="width: 98%; margin: 0 auto; border-radius: 10px" height="55.8vh" border
        highlight-current-row>
        <el-table-column prop="staffName" label="中文名">
          <template slot-scope="scope">
            {{scope.row.staffName | empty }}
          </template>
        </el-table-column>
        <el-table-column prop="majorRole.roleName" label="角色" min-width="110"></el-table-column>
        <el-table-column prop="staffMobilePhone" label="手机号" />
        <el-table-column prop="staffAccount" label="账号ID" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-link target="_blank" type="primary" @click="edit(scope.row)" :underline="false">编辑</el-link>
            <el-divider direction="vertical"></el-divider>
            <el-link target="_blank" type="primary" @click="setInfo(scope.row)" :underline="false">删除</el-link>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      style="text-align: center; margin-top: 10px" :page-size="deptCircularPage.pageSize"
      layout="total, sizes, prev, pager, next, jumper" :total="deptBudgetTotal">
    </el-pagination>
    <el-dialog :title="dialogTitle" :visible.sync="addRoleRanFlag" center :close-on-click-modal="false">
      <div class="main-list">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-position="left"
          label-width="80px">
          <el-form-item label=" 中文名" prop="staffName">
            <el-input v-model="ruleForm.staffName" placeholder="请输入" maxlength="20" />
          </el-form-item>
          <el-form-item label="账号" v-if="id" class="serviceType">
            <span class="tips">
              <svg-icon icon-class="tips" />
              <p>成员唯一标识，可以使用工号、邮箱等<br />公司系统内统一的ID</p>
            </span>
            <el-input v-model="ruleForm.staffAccount" maxlength="20" placeholder="登录账号唯一标识" />
          </el-form-item>
          <el-form-item label="账号" prop="staffAccount" class="serviceType" v-else>
            <span class="tips">
              <svg-icon icon-class="tips" />
              <p>成员唯一标识，可以使用工号、邮箱等<br />公司系统内统一的ID</p>
            </span>
            <el-input v-model="ruleForm.staffAccount" maxlength="20" placeholder="登录账号唯一标识" />
          </el-form-item>
          <el-form-item label="修改密码" prop="loginPasswordNew" v-if="id">
            <el-input clearable :type="inputType" autocomplete="new-password" name="password" @focus="changeInputType"
              v-model="ruleForm.loginPasswordNew" placeholder="密码任意6位数字，大小写字母，符号组合" minlength="6" maxlength="20" />
          </el-form-item>
          <el-form-item label="密码" prop="loginPassword" v-if="!id">
            <el-input clearable :type="inputType" autocomplete="new-password" name="password" @focus="changeInputType"
              v-model="ruleForm.loginPassword" minlength="6" maxlength="20" placeholder="密码任意6位数字，大小写字母，符号组合" />
          </el-form-item>
          <el-form-item label="确认密码" prop="loginPasswordAgain" v-if="
                 (id &&
                   ruleForm.loginPasswordNew &&
                   ruleForm.loginPasswordNew.length > 0) ||
                   !id
               ">
            <el-input clearable :type="inputType" autocomplete="new-password" name="password" @focus="changeInputType"
              v-model="ruleForm.loginPasswordAgain" minlength="6" maxlength="20" placeholder="请再次确认密码" />
          </el-form-item>
          <el-form-item label="确认密码" v-show="
                 !(
                   (id &&
                     ruleForm.loginPasswordNew &&
                     ruleForm.loginPasswordNew.length > 0) ||
                   !id
                 )
               ">
            <el-input clearable :type="inputType" autocomplete="new-password" name="password" @focus="changeInputType"
              v-model="ruleForm.loginPasswordAgain" minlength="6" maxlength="20" placeholder="请再次确认密码" />
          </el-form-item>
          <el-form-item label="手机号" prop="staffMobilePhone">
            <el-input v-model="ruleForm.staffMobilePhone" placeholder="请输入常用手机号" />
          </el-form-item>
          <el-form-item label="角色" prop="roles.roleName" class="dept-comp">
            <el-select v-model="ruleForm.majorRoleId" placeholder="请选择" @change="changeRole">
              <el-option v-for="item in roleNameList" :key="item.roleId" :label="item.roleName" :value="item.roleId" />
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save('ruleForm', true)">保 存</el-button>
        <el-button @click="addRoleRanFlag=false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
  import {
    validPassword
  } from "../../utils/validate";
  import {
    getVessels,
    queryRoleSelectData,
    addadmin,
    checkApp,
    staffInfo,
    editInfo,
  } from "@/api/permissionSettingManagement";
  const validPasswordRule = function(rule, value, callback) {
    if (value)
      if (!validPassword(value)) {
        callback(
          // this.$message({
          //   message: '密码为6到20位数字密码任意组合！',
          //   type: 'error'
          // })
          new Error("密码为6到20位数字密码任意组合")
        );
        return;
      } else {
        callback();
        return;
      }
    callback();

    // if (!validPassword(value)) {
    //   callback(new Error('密码为6到20位数字密码任意组合'));
    // } else {
    //   callback();
    // }
  };
  export default {
    components: {
      "el-image-viewer": () =>
        import("element-ui/packages/image/src/image-viewer"),
    },
    data() {
      const validcodeId = (rule, value, callback) => {
        const reg = /[0-9a-zA-Z]$/;
        if (!reg.test(value)) {
          callback(
            new Error("账号必须是由数字和字母组合")
            // this.$message({
            //   type: 'error',
            //   message: '账号必须是由数字和字母组合',
            //   showClose: true,
            // })
          );
        } else {
          callback();
        }
      };

      const validcodeName = (rule, value, callback) => {
        const reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
        if (!reg.test(value)) {
          callback(
            new Error("密码必须是由6位数字和字母组合")
            // this.$message({
            //   type: 'error',
            //   message: '密码必须是由6位数字和字母组合',
            //   showClose: true,
            // })
          );
        } else {
          callback();
        }
      };
      const validPasswordAgain = (rule, value, callback) => {
        if (value === "") {
          callback(
            this.$message({
              type: "error",
              message: "带*号的为必填项",
              showClose: true
            })
          );
        } else if (
          (value !== this.ruleForm.loginPassword && !this.id) ||
          (value !== this.ruleForm.loginPasswordNew && this.id)
        ) {
          callback(
            this.$message({
              type: "error",
              message: "两次密码不一致",
              showClose: true
            })
          );
        } else {
          callback();
        }
      };
      const validcodePhonee = (rule, value, callback) => {
        const reg = /^1[345789]\d{9}$/;

        if (!reg.test(value)) {
          callback(
            new Error("手机号格式填写错误")

            // this.$message({
            //     type: 'error',
            //     message: '手机号格式填写错误',
            //     showClose: true,
            //   })
          );
        } else {
          callback();
        }
      };
      return {
        dialogTitle: '',
        roleNameList: [],
        inputType: "text",
        id: '',
        addRoleRanFlag: false,
        deptTitle: '',
        tableData: [],
        //分页
        currentPage: 1,
        pageSize: 10,
        deptBudgetTotal: 0,
        deptCircularPage: {},
        userInfo: false,
        ruleForm: {
          deptId: "3d7dbdc962ca4a96a48522c9ee528bc3",
          deptName: '畅运通',
          staffName: "",
          staffAccount: "",
          loginPassword: "",
          loginPasswordAgain: "",
          loginPasswordAgainNew: "",
          loginPasswordNew: "",
          staffMobilePhone: "",
          electronicSignature: "",
          majorRoleId: "",
          roles: [{
            roleId: "",
            major: "1",
            roleName: ''
          }],
          vessels: [{
            vesselId: 'e88a798337c14cd7b8e0dfe7f9efdf5a',
            vesselName: '试用船舶'
          }],
          roleVesselIds: []
        },
        rules: {
          staffAccount: [{
            required: true,
            // validator: validcodeId,
            trigger: "blur",
            message: "请输入账号"
          }],
          loginPassword: [{
            required: true,
            validator: validcodeName,
            trigger: "blur"
          }],
          loginPasswordAgain: [{
            required: true,
            validator: validPasswordAgain,
            trigger: "blur"
          }],
          loginPasswordNew: [{
            validator: validPasswordRule,
            trigger: "blur"
          }],
          staffName: [{
            required: true,
            trigger: "blur",
            message: "请输入中文名"
          }],
          staffMobilePhone: [{
            required: true,
            validator: validcodePhonee,
            trigger: "blur"
          }],
          // "roles.roleName": [{
          //   required: true,
          //   trigger: "change"
          // }]
        },
      };
    },
    mounted() {
      this.getList();
    },
    async created() {},
    methods: {
      changeRole(e) {
        console.log(e)
        for (let i = 0; i < this.roleNameList.length; i++) {
          if (e == this.roleNameList[i].roleId) {
            this.ruleForm.roles[0].roleId = this.roleNameList[i].roleId
            this.ruleForm.roles[0].roleName = this.roleNameList[i].roleName
          }
        }
      },
      changeInputType() {
        this.inputType = "password";
      },
      getList() {
        let _data = {
          compId: "2710b21efc1e4393930c5dc800010dc4",
          enabled: 1,
          vesselBankFlag: "B",
          currentPage: 1,
          pageSize: 10
        }
        getVessels(_data)
          .then(response => {
            this.tableData = response.data.records
          });

        let _data1 = {
          vesselBankFlag: "B",
          underCompId: "2710b21efc1e4393930c5dc800010dc4",
          deptId: "3d7dbdc962ca4a96a48522c9ee528bc3"
        }
        queryRoleSelectData(_data1)
          .then(response => {
            this.roleNameList = response.data
          });

      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getList();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(`当前页: ${val}`);
        this.getList();
      },
      addman() {
        this.dialogTitle = '添加成员'
        this.addRoleRanFlag = true
      },
      // 保存
      addSave(flag) {
        addadmin(this.ruleForm)
          .then(() => {
            // this.cancel();
            var commonUser = {};
            commonUser.phone = this.ruleForm.staffMobilePhone
            checkApp(commonUser).then(() => {})
            this.$message({
              message: "保存成功",
              type: "success",
              showClose: true
            });
            if (flag) {
              this.$router.go(-1);
            } else {
              // this.clearZhiwu();
              // this.checklist = [{
              //   value: ""
              // }];
              // this.checklist1 = [{
              //   value: ""
              // }];
              // this.seleteShipList = [];
              // this.ruleForm.staffName = "";
              // this.ruleForm.deptId = "";
              // this.url =
              //   "http://winsea-saas-test.oss-cn-shanghai.aliyuncs.com/default-logo.png";

              // this.$nextTick(() => {
              //   this.$refs.ruleForm.clearValidate();
              //   this.$refs.ruleForm.resetFields();
              // });
            }
            this.loading = false;
          })
          .catch(code => {
            this.loading = false;
            if (code === "MANAGEMENT_002") {
              this.$message({
                type: "error",
                message: "手机号冲突！",
                showClose: true
              });
              return false;
            }
            if (code === "MANAGEMENT_001") {
              this.$message({
                type: "error",
                message: "用户名冲突！",
                showClose: true
              });
              return false;
            }
            if (code === "MANAGEMENT_003") {
              this.$message({
                type: "error",
                message: "邮箱冲突！",
                showClose: true
              });
              return false;
            }
          });
      },
      editSave() {
        this.ruleForm.staffId = this.id;
        editInfo(this.ruleForm)
          .then(() => {
            // this.cancel();
            this.$message({
              message: "保存成功",
              type: "success",
              showClose: true
            });
            // for(var i =0;i<this.zhiwu2.length;i++){
            //   var param = {
            //     staffId:this.id,
            //     roleId:this.zhiwu2[i].roleId,
            //     roleMajor:'0'
            //   }
            //   saveRole(param).then(() => {
            //   })
            // }
            // this.getMemberInfo();
            this.getList()
            this.loading = false;
            this.addRoleRanFlag = false
          })
          .catch(code => {
            this.loading = false;
            if (code === "MANAGEMENT_002") {
              this.$message({
                type: "error",
                message: "手机号冲突！",
                showClose: true
              });
              return false;
            }
            if (code === "MANAGEMENT_001") {
              this.$message({
                type: "error",
                message: "用户名冲突！",
                showClose: true
              });
              return false;
            }
            if (code === "MANAGEMENT_003") {
              this.$message({
                type: "error",
                message: "邮箱冲突！",
                showClose: true
              });
              return false;
            }
            if (code === "MANAGEMENT_010") {
              this.$message({
                type: "error",
                message: "成员名称重复!",
                showClose: true
              });
              return false;
            }
          });
      },
      save(formName, flag) {
        this.$refs[formName].validate(valid => {
          if (valid) {
            if (this.id) {
              this.editSave();
            } else {

              this.addSave(flag);
            }
            this.isIndeterminate = false;
          } else {
            this.$message({
              message: "带*号的为必填项",
              type: "error",
              showClose: true
            });
            return false;
          }
        });
      },
      edit(val) {
        console.log(val)
        this.dialogTitle = '编辑成员'
        this.id = val.staffId
        let _data1 = {
          staffId: val.staffId
        }
        staffInfo(_data1)
          .then(response => {
            this.ruleForm = response.data;
            this.addRoleRanFlag = true
          });

      },
    }
  };
</script>
<style lang="scss" scoped>
  // .dept-comp {
  //   /deep/.el-select:nth-child(1) {
  //     margin-right: 10px;
  //   }
  //   /deep/.el-input__inner,.el-select {
  //     width: 203px !important;
  //   }
  // }

  .serviceType {
    // /deep/ .el-form-item__label {
    //   padding-right: 25px;
    // }

    .el-form-item__content {
      position: relative;
    }

    .tips {
      font-size: 20px;
      color: #999;
      position: absolute;
      left: -25px;
      cursor: pointer;
      z-index: 99;

      &:hover {
        p {
          display: block;
        }
      }

      p {
        display: none;
        box-shadow: 0 1px 8px rgba(137, 142, 146, 0.34);
        font-size: 12px;
        line-height: 16px;
        background: #fff;
        color: #333;
        padding: 3px;
        margin: 0;
        margin-top: -4px;
        border-radius: 5px;
        height: 40px;
      }
    }
  }

  .border {
    width: 960px;
    height: 100%;
    border-left: 1px solid #cccccc;
  }

  .organization-box {
    height: calc(86vh - 10px);
    overflow-y: auto;
    border: none;
  }

  .uphead {
    margin: 20px 0;
    height: 60px;
    line-height: 60px;
  }

  .img {
    display: inline-block;
    height: 60px;
    width: 60px;
    border-radius: 10px;
    vertical-align: sub;
  }

  .kyc-passin {
    margin-left: 20px;
    width: 170px;
  }

  .talk {
    font-size: 12px;
    color: #999999;
  }

  // /deep/.el-dialog__body {
  //   padding: 0;
  // }

  // /deep/ .el-dialog--center .el-dialog__body {
  //   padding: 0;
  // }

  .adddepartment {
    height: 400px;
    display: flex;
    justify-content: space-between;
  }

  .adddepartment1 {
    padding: 20px;
    width: 50%;
    overflow-y: auto;

    .el-checkbox-group {
      padding-left: 15px;
    }

    .search-box {
      margin-bottom: 10px;

      .search-keyword {
        margin-right: 30px;
      }
    }
  }

  .adddepartment2 {
    padding: 20px;
    width: 50%;
    background-color: #eeeeee;
  }

  // /deep/.el-tree-node__content {
  //   height: 40px;
  // }

  .adddepartment3 {
    height: 36px;
    line-height: 36px;
    background-color: #ffffff;
    position: relative;
    margin-bottom: 5px;
  }

  .adddepartment4 {
    display: inline-block;
    margin-bottom: 20px;
  }

  .adddepartmentLeft {
    width: 195px;
    display: inline-block;
    position: absolute;
    left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shipName {
    padding: 4px 8px;
    background-color: #dde9fc;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .ddv1 {
    //width: 730px;
    vertical-align: top;
    margin-top: 2px;
  }

  .ddv1>span {
    float: left;
  }

  .adddepartmentDel {
    display: inline-block;
    position: absolute;
    right: 20px;
    color: #1d6ced;
    cursor: pointer;
  }

  // /deep/.el-form-item .el-input__inner {
  //   width: 420px;
  // }

  .main-list {
    // height: calc(42vh);
  }

  .primaryzw {
    width: 100%;
    margin-bottom: 30px;
  }

  .zhiwuCheck {
    display: block;
    margin-top: 10px;
  }

  .zhiwuChecks {
    display: block;
    margin-left: -30px;
  }

  .zhuyaozhiwu {
    margin-top: 10px;
    background-color: #ffffff;
    padding: 3px 8px;
    // display: inline-block;
  }

  .ciyaozhiwu {
    background-color: #ffffff;
    padding: 5px 10px;
    // display: inline-block;
    margin-top: 10px;
  }

  .zhiwuradio {
    margin-top: 5px;
    margin-right: 10px;
  }

  .zhiwuDel {
    margin-inline-start: 10px;
    color: #1d6ced;
    cursor: pointer;
    float: right;
  }

  .lastspan {
    display: flex;
  }

  .ddv1 {
    flex: 1;
  }

  .inputPsd {
    -webkit-text-security: disc;
  }

  // /deep/ .el-form-item__error {
  //   display: block;
  // }

  // .dept-comp {
  //   /deep/ .el-form-item__error {
  //     display: none;
  //   }

  //   /deep/ .el-form-item__content {
  //     /deep/ .el-input {
  //       width: 202px;
  //     }
  //   }
  // }

  // /deep/ .el-form-item__content {
  //   /deep/ .el-input {
  //     width: 420px;
  //   }
  // }

  .member {
    display: inline-block;
    margin: 10px 0 0 10px;
  }

  .checkBoxClass {
    // float: left;
    width: 650px;
    height: 100%;
  }

  .checkBoxCla {
    width: 25%;
    margin: 10px 0 10px 20px;
  }

  .boxClass {
    margin-left: 10px;
  }

  .aaa {
    display: inline-block;
    padding-right: 12px;
    font-size: 14px;
    color: #666666;
    margin-bottom: 15px;
  }

  .bbb {
    display: inline-block;
    padding-right: 12px;
    font-size: 14px;
    color: #666666;
  }

  .postBox {
    width: 100%;
  }

  // .ship-tree {
  //   /deep/.el-tree-node__content {
  //     height: auto;
  //   }

  //   /deep/.el-radio-group {
  //     display: flex;
  //     flex-direction: column;
  //     text-align: left;

  //     &>.el-radio {
  //       margin: 2px;
  //     }
  //   }
  // }

  .center {
    padding: 10px 20px;
    background: #f5f6f7;
    min-height: calc(100vh - 50px);

    .top_css {
      padding: 10px;

      .search_btn {
        height: 80px;
        background: linear-gradient(#fafbfb, #ffffff);
        display: flex;
        margin-top: 20px;

        .search_block {
          margin-left: 20px;
        }

        .search_item {
          text-align: center;
          font-size: 14px;
          font-weight: 600;
          line-height: 40px;
          width: 112px;
          height: 40px;
          background: #f7f8f9;
          cursor: pointer;
          margin-top: 30px;
        }

        .searchNo {
          color: #323233;
        }

        .search {
          color: #2f53eb;
          background: #ffffff;
        }
      }
    }

    .center_css {
      background: #ffffff;
      border-radius: 1px;
      margin-top: 10px;
      padding-bottom: 10px;
    }

    .screen {
      display: flex;

      .search {
        width: 40px;
        height: 40px;
        background: #2f53eb;
        border-radius: 0px 2px 2px 0px;
        border: 1px solid #DCDFE6;
        margin-left: -1px;
      }

      .count_css {
        width: 80px;
        text-align: center;
        line-height: 40px;
        color: #666666;
      }
    }

    .el-button {
      padding: 10px 20px !important;
    }

    .center_css {

      ::v-deep .el-table th,
      ::v-deep .el-table td {
        text-align: center;
      }

      .fujian {
        font-size: 24px;
        color: #409eff;
      }

      .warning {
        font-size: 14px;
        color: #ed1d1d;
      }
    }
  }

  .car_css {
    width: 50%;
    display: inline-block;
    text-align: center;
    margin-top: 20px;
  }

  .car_item {
    width: 100px;
    height: 100px;
  }

  .user {
    margin-bottom: 20px;

    .title_css {
      color: #9d9d9d;
      margin-bottom: 6px;
    }

    .name_css {
      color: #0d0d0d;
      margin-bottom: 20px;
    }

    .form_btn {
      text-align: right;
    }

    .user_item {
      width: 380px;
      height: 250px;
      margin-bottom: 20px;
    }
  }

  ::v-deep .el-table--border .el-table__header th {
    background: #f7f8f9;
  }

  .btn_css {
    color: #409eff;
    cursor: pointer;
  }

  .sign {
    font-size: 14px;
    color: red;
  }

  .form_css {
    width: 100%;
    margin: 0 auto 20px;

    ::v-deep .el-checkbox {
      width: 40%;
      height: 30px;
    }

    ::v-deep .el-dialog__body {
      padding: 10px 20px;
    }

    ::v-deep .el-dialog__title {
      font-size: 16px;
    }

    // ::v-deep .el-textarea__inner {
    //   background: #F0F1F2;
    // }

    .form_btn {
      text-align: right;
      margin-top: 10px;
    }
  }

  //发送信息
  .Info_css {
    .Info_title {
      color: #323233;
      font-size: 16px;
    }

    .Info_item {
      margin: 20px 0;
    }

    .Info_btn {
      text-align: right;
      margin-top: 10px;
    }
  }

  .advancePayment-style {
    display: flex;
  }

  ::v-deep .advancePayment-style .el-input__inner {
    height: 30px;
  }

  .pay {
    .pay_css {
      display: flex;
      margin-bottom: 20px;
    }
  }

  .find::v-deep input.el-input__inner {
    border-radius: 0;
  }

  .el-form-item {
    // display: flex;
  }
</style>
