<template>
  <Card width="820">
    <i-form label-position="right" :label-width="100" ref="userForm" :model="bean" :rules="rules" inline>
      <Row>
        <i-col :span="12">
          <Form-item label="登录名" prop="loginName" class="ivu-form-item-search">
            <Input v-model="bean.loginName" style="width: 243px" :disabled="disabled"></Input>
          </Form-item>
        </i-col>
        <i-col :span="12">
          <Form-item label="用户名" prop="userName" class="ivu-form-item-search">
            <Input v-model="bean.userName" style="width: 200px" placeholder="如果选择基本用户,此栏不需要填写" :disabled="disabled"></Input>
            <Button type="primary" size="small" @click="checkUserInfo" ghost style="margin-left: 3px;">基本用户</Button>
          </Form-item>
        </i-col>
        <i-col :span="12">
          <Form-item label="密码" class="ivu-form-item-search">
            <Input v-model="bean.passWord" placeholder="密码不展示,只能修改" style="width: 243px" :disabled="disabled" type="password"></Input>
          </Form-item>
        </i-col>
        <i-col :span="12">
          <Form-item label="组织机构" class="ivu-form-item-search">
            <Input v-model="bean.orgName" style="width: 200px" disabled></Input>
            <Button type="primary" size="small" @click="checkOrg" ghost style="margin-left: 3px;">组织机构</Button>
          </Form-item>
        </i-col>
        <i-col :span="12">
          <Form-item label="职务" class="ivu-form-item-search">
            <Input v-model="bean.postName" style="width: 243px" :disabled="disabled"></Input>
          </Form-item>
        </i-col>
        <i-col :span="12">
          <Form-item label="头像" class="ivu-form-item-search">
            <Input v-model="bean.headPortrait" style="width: 243px" :disabled="disabled"></Input>
          </Form-item>
        </i-col>
        <!--<i-col :span="12">
          <Form-item label="冻结" prop="freeze" class="ivu-form-item-search">
            <Select v-model="bean.freeze" style="width: 420%" :disabled="disabled">
              <Option :value="false" :key="0">正常</Option>
              <Option :value="true" :key="1">冻结</Option>
            </Select>
          </Form-item>
        </i-col>-->
        <i-col :span="12">
          <Form-item label="备注" class="ivu-form-item-search">
            <Input v-model="bean.remark" style="width: 243px" :disabled="disabled"></Input>
          </Form-item>
        </i-col>
      </Row>
    </i-form>
    <Row>
      <i-col span="24">
        <!--<Button @click="cancel">关闭</Button>-->
        <Button type="primary" :loading="saveLoading" @click="ok('userForm')" v-if="showSaveBtn" style="float: right">保存</Button>
      </i-col>
    </Row>
    <bc-check ref="checkUserInfo" :show.sync="checkUserInfoShow" :treeData="userInfos" @checkOk="checkedUserInfoOk" :treeId="'checkUserInfo'" ></bc-check>
    <bc-check ref="checkOrg" :show.sync="checkOrgShow" :treeData="orgs" @checkOk="checkedOrgOk" :treeId="'checkOrg'" ></bc-check>
  </Card>

</template>

<script>
  import { addUser, editUser } from '../../../../api/rbac/user-api'
  import { getUserInfoList } from '../../../../api/rbac/userInfo-api'
  import { getOrgTree } from '../../../../api/rbac/organization-api'

  let $this
  export default {
    name: 'userEdit',
    components: {},
    props: {
      show: Boolean,
      value: Object
    },
    data () {
      return {
        checkUserInfoShow: false,
        checkOrgShow: false,
        userInfos: [],
        orgs: [],
        bean: {},
        initBean: {},
        flag: '',
        saveLoading: false,
        modalTitle: '',
        disabled: false,
        showSaveBtn: true,
        rules: {
          loginName: [
            { required: true, message: '登录名不能为空!', trigger: 'blur' },
          ],
          userName: [
            { required: true, message: '用户名不能为空!', trigger: 'blur' },
          ],
          passWord: [
            { required: true, message: '密码不能为空!', trigger: 'blur' },
          ],
          orgName: [
            { required: true, message: '部门不能为空!', trigger: 'blur' },
          ],
          postName: [
            { required: true, message: '岗位不能为空!', trigger: 'blur' },
          ],
        },
      }
    }, methods: {
      ok (name) {
        this.$refs[name].validate((valid) => {
          if (!valid) {
            return
          }//表单校验失败则返回
          this.saveLoading = true
          if (this.flag == 'edit') {
            let params = this.bean
            delete params['createTime']
            delete params['modifyTime']
            delete params['lastLoginTime']
            //执行修改操作
            editUser(params).then(data => {
              if (!data.status) {
                this.$Message.error(data.error.message)
                this.saveLoading = false
                console.log(data)
                return false
              }
              this.$Message.success('操作成功！')
              this.closeAndRefresh()
            }).catch(err => {
              this.$Message.error('操作失败！')
              this.saveLoading = false
              console.log(err)
            })
          } else if (this.flag == 'add') {
            delete this.bean['createTime']
            delete this.bean['modifyTime']
            delete this.bean['lastLoginTime']
            //执行添加操作
            addUser(this.bean).then(data => {
              if (!data.status) {
                this.$Message.error(data.error.message)
                this.saveLoading = false
                console.log(data)
                return false
              }
              this.$Message.success('操作成功！')
              this.closeAndRefresh()
            }).catch(err => {
              this.$Message.error('操作失败！')
              this.saveLoading = false
              console.log(err)
            })
          }
        })

      },
      cancel () {
        //重置校验结果
        //this.$refs['userForm'].resetFields()
        this.$emit('cancel')
      },
      closeAndRefresh () {
        this.saveLoading = false
        this.$emit('cancel','refresh')
      },
      checkUserInfo (){//选择基本用户
        this.checkUserInfoShow=true;
        getUserInfoList().then(res => {
          this.userInfos = res.data.result;
        });
      },
      checkOrg (){//选择基本用户
        this.checkOrgShow=true;
        getOrgTree().then(res => {
          this.orgs = res.data.result;
          console.log(this.orgs)
        });
      },
      checkedUserInfoOk (checkedUserInfos){//选择基本用户-完成
        console.log(checkedUserInfos);
        this.bean.infoId = checkedUserInfos[0].id
        this.bean.userName = checkedUserInfos[0].name

        this.$forceUpdate();
      },
      checkedOrgOk (checkedOrgs){//选择基本用户-完成
        this.bean.orgId = checkedOrgs[0].id
        this.bean.orgName = checkedOrgs[0].name
        this.$forceUpdate();
      },
    },
    mounted () {
      $this = this
      this.bean = this.initBean
    },
    watch: {
      /*show: {
        immediate: true,
        handler: function () {
          this.showModalUser = this.show
        }
      },*/
      value: {
        immediate: true,
        handler: function () {
          //初始化博矗通用组件
          this.$nextTick(() => {
            this.$refs['checkUserInfo'].clearCache();
          });
          //赋值
          this.bean = this.value.bean == null ? Object.assign({}, this.initBean) : JSON.parse(JSON.stringify(this.value.bean))
          this.flag = this.value.flag
          this.modalTitle = this.value.title
          //如果时查看的功能，要将所有input框只读，并且去掉保存按钮
          if (this.flag == 'view') {
            this.disabled = true
            this.showSaveBtn = false
          } else {
            this.disabled = false
            this.showSaveBtn = true
          }
        }
      }
    }

  }
</script>

<style scoped>
  .ivu-form-item-search {
    margin-bottom: 21px;
  }
</style>
