<template>
  <div class="form-container">
    <el-row :gutter="15">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="80px">
        <el-col :span="12">
          <el-form-item label="姓名" prop="real_name">
            <el-input v-model="formData.real_name" placeholder="请输入姓名" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号码" prop="mobile">
            <el-input v-model="formData.mobile" placeholder="请输入手机号码" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="sex">
            <el-select v-model="formData.sex" placeholder="请选择性别" clearable :style="{width: '100%'}">
              <el-option
                v-for="(item, index) in sexOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="formData.email" placeholder="请输入电子邮箱" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工号" prop="user_code">
            <el-input v-model="formData.user_code" placeholder="请输入工号" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="QQ号码" prop="qq">
            <el-input v-model="formData.qq" placeholder="请输入QQ号码" clearable :style="{width: '100%'}" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="角色" prop="role_id">
            <el-select v-model="formData.role_id" placeholder="请选择角色" clearable :style="{width: '100%'}">
              <el-option
                v-for="item in roledata"
                :key="item.role_id"
                :label="item.role_name"
                :value="item.role_id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-if="$route.path !=='/userinfo/index'" :span="12">
          <el-form-item label="是否启用" prop="is_enabled">
            <el-switch v-model="formData.is_enabled" />
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div style="text-align: center;margin-left: 50px">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="submitForm">保存</el-button>
    </div>
  </div>
</template>
<script>
import { throttle } from '@/utils/index'
export default {
  name: 'UserForm',
  components: {},
  // eslint-disable-next-line vue/require-prop-types
  props: ['handlecancel', 'propsformdata', 'handlesubmit', 'roledata'],
  data() {
    return {
      formData: {
        real_name: undefined,
        mobile: undefined,
        sex: undefined,
        email: undefined,
        user_code: undefined,
        qq: undefined,
        role_id: undefined,
        is_enabled: false
      },
      rules: {
        real_name: [{
          required: true,
          message: '请输入姓名',
          trigger: 'blur'
        }],
        mobile: [{
          required: true,
          message: '请输入手机号码',
          trigger: 'blur'
        }],
        sex: [{
          required: true,
          message: '请选择性别',
          trigger: 'change'
        }],
        email: [],
        user_code: [],
        qq: [],
        role_id: [{
          required: true,
          message: '请选择角色',
          trigger: 'change'
        }]
      },
      sexOptions: [{
        'label': '男',
        'value': 1
      }, {
        'label': '女',
        'value': 0
      }]
    }
  },
  computed: {},
  // handlecancel 取消时调用 propsformdata初始化form数据  handlesubmit提交表单
  watch: {
    propsformdata: {
      handler(newValue, oldValue) {
        this.formData = { ...newValue }
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    submitForm: throttle(function() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.$emit('handlesubmit', this.formData)
      })
    }, 2000),

    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    handleCancel() {
      this.$emit('handlecancel')
    }
  }
}

</script>
<style scoped>
.form-container{
  margin-right: 50px;
}
</style>
