<template>
  <el-form
    inline
    :model="form"
    :rules="rules"
    ref="form"
    label-width="100px">
    <div class="dialog-info">
      <el-form-item
        verify
        class="is-required"
        label="账号"
        prop="loginName">
        <el-input
          v-model="form.loginName"
          :disabled="dialogType === 'edit'"></el-input>
      </el-form-item>
      <el-form-item
        verify
        class="is-required"
        label="姓名"
        prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item
        verify
        class="is-required"
        label="所属角色"
        prop="roleIds">
        <el-select
          value-key="id"
          v-model="form.roleIds"
          multiple
          collapse-tags
          placeholder="请选择">
          <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="手机"
        prop="phone">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <template v-if="dialogType === 'add'">
        <el-form-item
          verify
          label="密码"
          prop="password">
          <el-input
            v-model="form.password"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item
          verify
          label="确认密码"
          prop="checkPass">
          <el-input
            v-model="form.checkPass"
            type="password"
          ></el-input>
        </el-form-item>
      </template>
      <template v-else>
        <el-form-item
          label="密码"
          prop="password">
          <el-input
            v-model="form.password"
            type="password"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          prop="checkPass">
          <el-input
            v-model="form.checkPass"
            type="password"
          ></el-input>
        </el-form-item>
      </template>
      <el-form-item
        verify
        class="is-required"
        label="用户属性"
        prop="type">
        <el-select
          v-model="form.type"
          placeholder="请选择">
          <el-option
            :value="1"
            label="管理员"></el-option>
          <el-option
            :value="0"
            label="员工"></el-option>
        </el-select>
        <Tip msg="普通员工只可以浏览自己的数据 管理员可以浏览全部数据"></Tip>
      </el-form-item>
    </div>
    <div class="dialog-btn-wrap">
      <el-button
        v-if="dialogType === 'edit'"
        @click="handleClose">
        关闭
      </el-button>
      <el-button
        v-if="dialogType === 'add'"
        @click="reset">
        重置
      </el-button>
      <el-button
        @click="submit"
        type="primary">
        保存
      </el-button>
    </div>
  </el-form>
</template>

<script>
import { updateAccount, addAccount } from '@/api/systemSetting/account'
import { getRoleList } from '@/api/systemSetting/role'
import { verifyPhone } from '@/utils/validate'
import { encrypt } from '@/utils'
// import { subProjectList } from '@/api/ticketType'
// import checkPermission from '@/utils/checkPermission'

export default {
  props: {
    dialogType: {
      type: String,
      default: ''
    },
    accountItem: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    const validatePass = (rule, value, callback) => {
      if (this.form.checkPass !== '') {
        this.$refs.form.validateField('checkPass')
      }
      callback()
    }
    const validatePass2 = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    const validateLoginName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('登录账号不能为空'))
      } else if (/^[A-Za-z0-9]+$/.test(value)) {
        callback(new Error('登录账号仅限英文名和数字'))
      } else {
        callback()
      }
    }
    return {
      visible: false,
      roleList: [],
      oldOptions: [[]],
      // subProjectList: [],
      form: {
        name: '',
        loginName: '',
        password: '',
        checkPass: '',
        roleIds: [],
        type: 0, // 0 员工 1 管理员
        phone: ''
      },
      rules: {
        loginName: [
          { validator: validateLoginName, trigger: 'blur' }
        ],
        password: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPass: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        phone: [
          { validator: verifyPhone, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // checkPermission,
    handleClose () {
      this.$parent.handleClose()
    },
    reset () {
      this.$refs.form.resetFields()
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.roleIds.length === 0) {
            this.$message.error('请选择角色')
            return false
          }
          if (this.dialogType === 'add') {
            this.addAccount()
          } else {
            this.updateAccount()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    addAccount () {
      const params = { ...this.form }
      params.password = encrypt(params.password)
      addAccount(params).then(res => {
        this.$message.success('添加成功')
        this.reset()
        this.handleClose()
        this.$emit('updateList')
      })
    },
    updateAccount () {
      const params = { ...this.form }
      if (params.password) {
        params.password = encrypt(params.password)
      } else {
        params.password = ''
      }
      updateAccount(params).then(res => {
        this.$message.success('保存成功')
        this.reset()
        this.handleClose()
        this.$emit('updateList')
      })
    },
    async getRoleList () {
      const res = await getRoleList({ pageSize: -1, pageNum: 1 })
      this.roleList = res.data.records || []
    }
  },
  watch: {
    async visible (val) {
      // 获取角色列表
      await this.getRoleList()
      // 重置表单
      // this.getSubProjectList()
      this.reset()
      // 初始化编辑数据
      if (val && this.dialogType === 'edit' && this.accountItem) {
        const { id, name, roleList, phone, loginName, type } = this.accountItem
        this.form = {
          id,
          name,
          loginName,
          roleIds: (roleList || []).map(item => item.id),
          phone,
          password: '',
          type,
          checkPass: ''
        }
      }
    }
  }
}
</script>
