<template>
  <el-dialog :visible.sync="visible" :before-close="cancelDialog" width="600px">
    <el-divider />
    <label slot="title" style="float: left;">{{ dialogTitle }}</label>

    <el-row>
      <el-form ref="form" :model="form" :rules="formRules" :inline="true" label-suffix="：" label-width="90px">
        <el-form-item label="用户名" prop="identifier">
          <el-input v-model.trim="form.identifier" placeholder="请输入用户名" clearable style="width: 178px" />
        </el-form-item>
        <el-form-item label="密码" prop="credential">
          <el-input v-model.trim="form.credential" placeholder="请输入密码" show-password clearable style="width: 178px" />
        </el-form-item>
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model.trim="form.nickname" placeholder="请输入昵称" clearable style="width: 178px" />
        </el-form-item>
        <el-form-item label="部门" prop="dept">
          <el-cascader
            ref="dTree"
            v-model="form.deptId"
            style="width: 178px"
            :options="deptOptions"
            :props="{ expandTrigger: 'hover',checkStrictly: true }"
            :show-all-levels="false"
            clearable
          />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="form.gender" style="width: 178px">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="状态" prop="isLocked">
          <el-radio-group v-model="form.isLocked" style="width: 178px">
            <el-radio :label="false">启用</el-radio>
            <el-radio :label="true">锁定</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="岗位" prop="job">
          <el-select v-model="form.jobIds" multiple placeholder="请选择岗位" style="width: 430px">
            <el-option
              v-for="item in jobOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="角色" prop="roles">
          <el-select v-model="form.roleIds" multiple placeholder="请选择角色" style="width: 430px">
            <el-option
              v-for="item in roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="过期时间" prop="endDateTime">
          <el-date-picker
            v-model="form.endDateTime"
            type="date"
            value-format:-yyyy-m-m-dd-
            placeholder="选择账号过期时间"
            style="width: 178px"
          />
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择类型" style="width: 178px" value-key="id">
            <el-option
              v-for="item in typeOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-divider />
      <el-button @click="cancelDialog">取 消</el-button>
      <el-button type="primary" @click="handleSave">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import accountApi from '@/api/platform/accountApi'
import deptApi from '@/api/platform/deptApi'
import jobApi from '@/api/platform/jobApi'
import roleApi from '@/api/platform/roleApi'

export default {
  name: 'EditJobDialog',
  props: {
    dialogTitle: {
      type: String,
      default: () => {
        return ''
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: () => {
        return {
          id: '',
          identifier: '',
          credential: '',
          nickname: '',
          gender: 0,
          type: 0,
          deptId: '',
          isLocked: 0,
          endDateTime: '',
          jobIds: [],
          roleIds: []
        }
      }
    }
  },
  data() {
    return {
      deptOptions: [],
      jobOptions: [],
      roleOptions: [],
      typeOptions: [{
        id: 1,
        name: '平台'
      }, {
        id: 2,
        name: '租户管理员'
      }, {
        id: 3,
        name: '普通账号'
      }],
      formRules: {
        identifier: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        credential: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }]
      }
    }
  },
  watch: {
    visible(val) {
      if (val === true) {
        this.form.deptId = this.getNodePathArray(this.deptOptions, this.form.deptId, [])
      }
    }
  },
  mounted() {
    // 获取节点
    deptApi.nodes().then(data => {
      this.deptOptions = data
    })
    roleApi.nodes().then(data => {
      this.roleOptions = data
    })
    jobApi.nodes().then(data => {
      this.jobOptions = data
    })
  },
  methods: {
    /**
     * 根据节点树（data）,节点id，查找节点节点路径，以数组返回。如节点路径为1-2，则返回['1','2']
     * indexArray在使用时传入空数组即可
     */
    getNodePathArray(data, id, indexArray) {
      const arr = Array.from(indexArray)
      for (let i = 0, len = data.length; i < len; i++) {
        arr.push(data[i].value)
        if (data[i].value === id) {
          return arr
        }
        const children = data[i].children
        if (children && children.length) {
          const result = this.getNodePathArray(children, id, arr)
          if (result) {
            return result
          }
        }
        arr.pop()
      }
      return false
    },
    cancelDialog() {
      this.form = {
        id: '',
        identifier: '',
        credential: '',
        nickname: '',
        gender: 0,
        type: 0,
        deptId: '',
        isLocked: 0,
        endDateTime: '',
        jobIds: [],
        roleIds: []
      }
      this.$refs['form'].resetFields()
      this.$emit('cancelDialog', false)
    },
    handleSave() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        if (this.form.deptId.length !== 0) {
          this.form.deptId = this.form.deptId[this.form.deptId.length - 1]
        }
        accountApi.saveOrUpdate(this.form).then(data => {
          this.$refs['form'].resetFields()
          this.$emit('cancelDialog', false)
          this.$emit('refresh')
        })
      })
    }
  }
}

</script>
<style>
</style>
