<template>
  <base-model :config="model_cfg">
    <template slot="dialog-body">
      <el-form
        ref="roleForm"
        :rules="rules"
        :model="form"
        class="demo-ruleForm"
        size="small"
        label-width="120px"
      >
        <el-form-item label="User Type: " prop="UserType">
          <el-input v-model="form.UserType" />
        </el-form-item>
        <el-form-item label="Shortname: " prop="UserTypeShortName">
          <el-input v-model="form.UserTypeShortName" />
        </el-form-item>
        <el-form-item label="是否内部角色: " prop="IsInternal">
          <el-radio-group v-model="form.IsInternal">
            <el-radio v-for="item of $d.YesOrNo" :key="`IsInternal${item.value}`" :label="item.value">{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="Group: " prop="Type">
          <el-select v-model="form.Type">
            <el-option
              v-for="group in userTypeGroupOptions"
              :key="group.value"
              :label="group.label"
              :value="group.value"
            />
          </el-select>
        </el-form-item>

        <el-form-item label="Order: ">
          <el-input-number v-model="form.Order" controls-position="right" :min="0" />
        </el-form-item>

        <el-form-item label="Description: " prop="Description">
          <el-input v-model="form.Description" type="textarea" :rows="5" />
        </el-form-item>
      </el-form>
    </template>
    <template slot="dialog-footer">
      <el-button :disabled="btnLoading" size="small" type="primary" @click="model_cfg.visible = false">Cancel</el-button>
      <el-button size="small" type="primary" :loading="btnLoading" @click="handleSave">Save</el-button>
    </template>
  </base-model>
</template>
<script>
import { addOrUpdateUserType } from '@/api/admin'
import { model_cfg } from '../role'
import BaseModel from '@/components/BaseModel'
export default {
  components: { BaseModel },
  props: {
    data: {
      type: Object,
      default() {
        return {
          Id: '',
          UserType: '',
          IsInternal: true,
          UserTypeShortName: '',
          Order: '',
          Description: ''
        }
      }
    }
  },
  data() {
    return {
      userTypeGroupOptions: [{ value: 1, label: 'Trial' }, { value: 2, label: 'Reviewer' }, { value: 3, label: 'Other' }],
      model_cfg,
      form: {
        Id: '',
        UserType: '',
        IsInternal: true,
        UserTypeShortName: '',
        Type: null,
        Description: ''
      },
      rules: {
        UserType: [{ required: true, message: 'Please specify', trigger: 'blur' }, { max: 50, message: 'The maximum length is 50' }],
        UserTypeShortName: [{ required: true, message: 'Please specify', trigger: 'blur' }, { max: 50, message: 'The maximum length is 50', trigger: 'blur' }],
        Description: [{ max: 500, message: 'The maximum length is 500' }],
        Type: [{ required: true, message: 'Please specify', trigger: 'blur' }]
      },
      btnLoading: false
    }
  },
  mounted() {
    if (Object.keys(this.data).length && this.data.Id) {
      this.form = { ...this.data }
    }
  },
  methods: {
    handleSave() {
      this.$refs.roleForm.validate(valid => {
        if (!valid) return
        this.btnLoading = true
        this.model_cfg.showClose = false
        addOrUpdateUserType(this.form).then(res => {
          this.btnLoading = false
          this.$refs['roleForm'].resetFields()
          this.$emit('close')
          this.model_cfg.showClose = true
          this.$message.success('Saved successfully!')
        }).catch(() => {
          this.btnLoading = false
          this.model_cfg.showClose = true
        })
      })
    }
  }
}
</script>
