<template>
  <div class="app-container">
    <div class="info">
      <div class="title">修改用户信息</div>
      <el-form ref="form" :model="form" label-width="120px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="11">
            <el-form-item label="姓名">
              <el-input v-model="form.userRealName"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
              <el-input v-model="form.userPhone"></el-input>
            </el-form-item>
            <el-form-item label="所属组织">
              <el-select v-model="form.orgCode" style="width:100%">
                <el-option v-for="item in orgInfo" :key="item.orgCode" :label="item.orgName" :value="item.orgCode">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="form.userAddress"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="11" :offset="2">
            <el-form-item label="账号">
              <el-input v-model="form.userName" @keyup.native="checkNull" placeholder="账号不能为空"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.userPassword" :type="passwordType" placeholder="密码不能为空" @keyup.native="checkNull"></el-input>
            </el-form-item>
            <el-form-item label="性别">
              <!-- <el-input v-model="form.userSex"></el-input> -->
              <el-select v-model="form.userSex" style="width:100%">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="parseInt(item.value)">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="角色">
              <el-select v-model="form.userRole" style="width:100%">
                <el-option v-for="item in userRoleEnums" :key="item.enumCode" :label="item.enumName"
                           :value="item.enumCode">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <footer>
        <el-button type="primary" @click="update" :loading='loading' :disabled="saveDisable">保 存</el-button>
      </footer>
    </div>

  </div>
</template>

<script>
  import {updateUserInfo, getListOrGroupList, getOrgInfoList} from '@/api/system/index.js'

  export default {
    data() {
      return {
        loading: false,
        form: {
          userRealName: '',
          userSex: '',
          userPhone: '',
          orgCode: '',
          userRole: '',
          userName: '',
          userPassword: '',
          userAddress: ''
        },
        options: [
          {label: '男', value: '1'},
          {label: '女', value: '0'},
        ],
        userRoleEnums: [],
        orgInfo: [],
        // 密码小圆点
        passwordType: 'password',
        // 保存按钮disabled
        saveDisable: true
      }
    },
    created() {
      // console.log(this.$route.query, 'query')
    },
    mounted() {
      this.form = this.$route.params.data;
      // 100000 角色字典编码顶级
      let enumCode = '100000';
      this.getListOrGroupListFunction(enumCode);
      this.getOrgInfoListFunction();
    },
    methods: {
      // 获取字典角色组
      getListOrGroupListFunction(enumCode) {
        getListOrGroupList(enumCode).then(res => {
          this.userRoleEnums = res.data;
        }).catch(err => {
          console.log(err);
        })
      },
      // 获取所有单位信息
      getOrgInfoListFunction() {
        getOrgInfoList().then(res => {
          this.orgInfo = res.data;
        }).catch(err => {
          console.log(err);
        })
      },
      tableDataAdd() {
        // this.tableData.
      },
      update() {
        this.loading = true
        updateUserInfo(this.form).then(res => {
          if (res.code == 200) {
            this.$message.success("修改成功")
            this.$router.push({
              name: "UserManagement"
            })
          } else {
            this.loading = false
          }
        }).catch(err => {
          this.loading = false
          this.$message.error("修改失败")
          console.log(err)
        })
      },
      // 效验非空
      checkNull() {
        if (this.form.userPassword.length === 0 || this.form.userName.length === 0)
          this.saveDisable = true;
        else
          this.saveDisable = false;
      }
    }

  }
</script>
<style lang='scss' scoped>
  .app-container {
    // height: calc(100vh - 86px);

    footer {
      text-align: center;
    }
  }

  .info {
    background-color: #fff;
    border-radius: 15px;
    padding: 10px 15px;
    height: calc(100vh - 110px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .title {
      border-left: 4px solid #4a7de6;
      padding-left: 10px;
    }
    .el-form {
      margin-top: 15px;
      padding: 15px;
      flex: 1;
    }
  }

  .table {
    border-radius: 0.185185rem;
  }

  .th {
    height: 1.074074rem;
    line-height: 1.074074rem;
    background-color: #1d9eef;
    text-align: center;
    // border: 1px solid #000;
  }

  .list-tr {
    height: 1.074074rem;
    line-height: 1.074074rem;
    border: 1px solid #000;
  }

  td {
    text-align: center;
  }

  ::v-deep .el-input__inner {
    text-align: center;
  }
</style>
