
<template>
  <div class="user-operation">
    <el-dialog
      :visible.sync="dialogVisible"
      :title="dialogTitle"
      center
    >
      <el-form ref="formRef" :model="formData" :disabled="disabledForm" label-position="left" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="formData.username" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="formData.nickname" />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formData.phone" />
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="formData.accountNumber" />
        </el-form-item>
        <el-form-item v-if="operationMode === 'add'" label="密码">
          <el-input v-model="formData.password" />
        </el-form-item>
        <el-form-item v-if="operationMode === 'add'" label="确认密码">
          <el-input v-model="formData.confirmPassword" />
        </el-form-item>
        <el-form-item label="所属组织">
          <el-select v-model="formData.companyNo" disabled>
            <el-option label="组织1" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="角色">
          <el-select v-model="formData.role" placeholder="请选择">
            <el-option
              v-for="item in roleList"
              :key="item.value"
              :label="item.label"
              :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-form>
      <el-row>
        <el-col>
          <el-button type="text" @click="handleUserRights">用户权限</el-button>
        </el-col>
        <el-col>
          <el-tree v-if="userPermissionConfig" :data="data" :props="defaultProps" @node-click="handleNodeClick"/>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button v-if="operationMode !== 'details'" type="primary" @click="handleSave">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    formData: {
      type: Object,
      default: () => {}
    },
    dialogTitle: {
      type: String,
      default: '新增用户'
    },
    operationMode: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      roleList: [
        {
          value: '业务操作员'
        }
      ],
      disabledForm: false,
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      userPermissionConfig: false
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        console.log(val)
        this.$emit('updateVisible', val) // dialogVisible改变的时候通知父组件
      }
    }
  },
  watch: {
    operationMode(res) {
      if (res === 'details') {
        this.disabledForm = true
      } else {
        this.disabledForm = false
      }
    }
  },
  methods: {
    cancel() {
      this.$emit('updateVisible', false)
    },
    handleSave() {
      console.log(this.formData)
    },
    handleUserRights() {
      this.userPermissionConfig = true
    },
    handleNodeClick(data) {
      console.log(data)
      this.userPermissionConfig = false
    }
  }
}
</script>
<style scoped lang="scss">
.user-operation{

}
</style>
